【今回のポイント】 この一連のUIは、「旅を予約するまでのプロセス」を、ユーザーの感性に優しく寄り添いながら、 1ステップずつ丁寧にガイドすることを意識して設計しました。 画面は、「県」→「市」→「旅先」→「日程」→「ホテル」と段階的に進む構成。 情報を小出しにすることでユーザーの混乱を防ぎ、**迷わず進める“誘導型UX”**を実現しています。 また、現在のステップは**プログレスバー（ステップインジケーター）**で視覚的に表示。 アクションボタンや見出しにはオレンジやグリーンを活用し、直感的な判断と安心感を提供します。 「5タップで予約完了」というUXコンセプトを支えるUIとして、 **“1タップごとに旅がカタチになっていく体験”**を視覚・操作の両面から実現。 さらに、旅先・ホテル選択時には「確認の電話が来る可能性があります」と明記。 ユーザーの心理的不安を事前に和らげることで、“安心してタップできるUX”を設計に落とし込んでいます。 ちなみに、第2章と同様に、**文字量を抑えることで、感性にすっと届く設計**も意識しました。 👉これらの工夫により、ユーザーは“感性に優しく寄り添ったUI”の中で、 **自分だけの旅を、迷いなく心地よくデザインすることができる**のです。 ーーーーーーーーーーーーーーー 【第5章：旅へのUX的案内】 【翔くん】 あれ？画面が変わった……！ 「さっそく旅に出よう！」って出てる！まるで冒険のスタートみたい！ 【ロゴちゃん】 そう！ここからはロゴちゃんが翔くんの旅を一緒に組み立てていくよ♪ まずは「旅したい県」をタップしてみて！ 【翔くん】 わっ！都道府県がズラッと……でも選びやすい！ 北海道を選ぼうかな。最近気になっていたし（1タップ） 【ロゴちゃん】 よしっ！じゃあ次はその中の「市」を選んでね！ 【翔くん】 ……お〜、地名の横にふりがなもついてる。やさしいね！ じゃあ「旭川市」にしてみようかな！(2タップ） 【ロゴちゃん】 ぴったり！次は旅先を見て選んでみよう！ 希望があれば詳細や口コミも見て決めることもできるよ♪ あ、それとね。「旅先はここだ！」をタップすると、場合によっては旅先の管理者さんから確認のお電話が来ることがあるんだ。ちゃんと注意書きで事前に伝えることで、ユーザーが「えっ、いきなり電話！？」と驚かないようにしてるの。 【翔くん】 なるほど。そういう配慮、大事な気がする。安心感があるよ！これがオーボーディングUIの「口コミで選べる安心の旅先」というやつだね！ ……旭山動物園に青い池！？写真もあってどこも魅力的だなぁ〜 旭川動物園というところがあるんだね！よし、これにしよう！（3タップ） 【ロゴちゃん】 いいね！さあ、次は日程だよ！出発と帰りの日を選ぼう！ 【翔くん】 日付をスクロールして選ぶんだね！簡単だ！ 出発は……5月9日、帰りは5月11日でと。 これで決定！（4タップ） 【ロゴちゃん】 完璧！あとはホテルを選ぶだけだよ〜🎶 ホテルの情報においても、旅先の時と同様に、詳細や口コミも見てから決めるのもOKだよ。 あ、あと、注意書きもあると思うけど、ホテルにおいては電話で最終予約するように促しているんだ。タップしたらホテルから翌1営業日以内に確認の電話がくるように設定しているよ。 ちなみに、確認の電話がないままにここのタップのみだけでの予約は、無効になる可能性も高いから注意してね！ 【翔くん】 なるほど、ホテル側から電話が来るのね。それだったら安心してホテルを選ぶことができるね！ じゃあこのリゾートホテルにしよ〜っと！（5タップ） 【ロゴちゃん】 わ〜い♪これで翔くんの旅の予約が完成したよ！！ どうだった？スムーズにできたかな？ 【翔くん】 うん！操作もわかりやすいし、旅のイメージもどんどん膨らんでいったよ！(本当に5タップで終わった！） 【ロゴちゃん】 それはよかった！この設計はね、**「ユーザー感性に寄り添う優しいUX」**を目指して作ったんだ。 例えば、「市」を選ぶとき、漢字の読み仮名に迷わなかったでしょ。 【翔くん】 うん！読み仮名がついていて読み間違えることなかったし、スムーズに読んでタップすることができたよ。子供がいる時にも優しい設計だなと思った。 【ロゴちゃん】 よくお気づき！ 市の読み仮名を調べる手間を省けるようにと思って取り入れたんだ！ 【翔くん】 また、『こんなに「市」があるんだな』って思った！旭川動物園の旅が終わった後は、『別の「市」の旅も体験してみたいな』って思ったよ。 【ロゴちゃん】 それは嬉しい！その時はまた、ロゴちゃんを使ってね🎵 【翔くん】 また、旅先を選ぶ時の画面と、ホテルを選ぶ時の画面の中に、『電話が来る』という要素を付け足してくれてて、安心してたっぷできた。 【ロゴちゃん】 そこ、ロゴちゃんがすごく工夫して作ったポイントなんだ！ タップして予約が終わってしまうと、「本当にこの予約大丈夫なのだろうか？」と心配になるじゃん。そこに、『電話』という人との接触という温かみ要素を入れ、それがあることをちゃんと見せるとで、翔くんは安心してタップできたと思うんだー ちなみに、この話は第5章やその次の章でも詳しくお話しするよ。『予約』は大切な場面だからね。 そこのはロゴちゃん、『重い責任』を感じているから頑張ってるんだ。 また、ホテルを選ばなくても良い選択肢を与える工夫もしているよ。 【翔くん】 そうかー。色々工夫しててすごいな。ちゃんと電話が入ってくることは、確かに安心！ ロゴちゃんの努力がしっり伝わってくる、本当にありがとうね。 【ロゴちゃん】 ロゴちゃん涙です…。どういたしまして…。 あと最後に、操作している時に、「自分は今、どこまで操作が終わっているの？」という迷いはあったかな？ 【翔くん】 考えてみればなかったかも。緑の線がどんどん伸びていって、自分はちゃん操作を進られているんだな、という安心感もあったかも。 【ロゴちゃん】 よかった！その伸びる緑の線は『ステップ付きプログレスバー』（または ステップインジケーター）といって、翔くんにどこまでの操作が進んでいるのかを迷わせないため、それを視覚的に翔くんの感性に伝えるためにロゴちゃんは配置したんだよ。 ちなみにその『緑』は、ちゃんと操作が成功していると、ユーザーの感性に訴えることができる緑でもあるんだ。 【翔くん】 なるほど、自分がどこの地点にいるのか迷わず、そしてストレスを感じずに気持ちよく操作ができたのはその『ステップ付きプログレスバー』と、その『緑』があったためなのか〜 【ロゴちゃん】 さらに3(スリー)ポイント！ ①「旅先はここだ！」と「このホテルにする！」のボタンは高揚のオレンジではなく、温かみのあるオレンジを採用した。これで翔くんが高揚感を持ちながらもそれを引き上げすぎず、暖かな感性からボタンをタップできるように仕組んだんだー ②案内する際のそれぞれの画面では、選ぶポイントとなる「県」→「市」→「旅先」→「日程」→「ホテル」は太文字にしているんだ。画面が変わった中でも翔くんが「何を選ぶべきなのか」を　超直感的に判断できるように、すぐ目に留まるように設定したんだ。 ③後、なんといっても統一感！！翔くんが何度も学習しなければならないといった手間を省くために、全ての画面は「早速旅に出よう！」の文字で統一しているんだ。 【翔くん】 僕の感性に自然に訴えかけてくるそのいくつもの工夫『UX』が、僕を気持ちよく旅へと案内してくれたってことだね。 このアプリ、本当に安心できるよ！ 【ロゴちゃん】 そうそう！ロゴちゃんが作ったいくつものUXが、ちゃんと翔くんの感性に自然に届いてくれたようで、ロゴちゃんも安心🎶 それでは次の画面にいってみましょー！！ 【翔くん】 (すごいUXの数だな…)お〜！！ ーーーーーーーーーーーーーーー ここまでお読みいただきありがとうございます。 それでは第6章へとお進みくださいませ。