【今回のポイント】
 このUIは、初めてこのアプリを使うユーザーに向けて、
『このアプリで“何ができて”、どう使えばよいのか？』
を直感的に伝えるために設計しました。 ・各画面には、視覚的にわかりやすいイラストと、短いキャッチコピーを配置しています。
ユーザーがパッと見てアプリの内容を理解しやすくなるように工夫しています。 ・また、画面下部にはスライドインジケーター（点と線）を設置することで、
UIの順番や現在の画面位置をすぐに把握できるようにしています。 ーーーーーーーーーーーーーーー 【第2章：ロゴちゃんからの招待】 【翔くん】 で、ロゴちゃん、このアプリどうやって使えばいいの？？ 【ロゴちゃん】 おけ、まずはこっちを見て！これが1枚目だよ♪ 【翔くん】 へ〜。いきたい旅先が5タップで見つかるんだね〜。5タップで予約ができちゃうんだ... 5タップ！？どういうこと！？…ほんとにそれ、大丈夫なの？ 【ロゴちゃん】 それは後のお楽しみで🎵。2つめはこれだよ！ 【翔くん】 へ〜。口コミで旅先を選べるんだね〜。 いろんな人の口コミを見られるということ？。だったら少し安心できるかも。 【ロゴちゃん】 （あ、伝わった！） よっしゃー！3枚目はこれだよ。 【翔くん】 なんかワクワクしてきた！早速今週末、旅に出てみたい！ 【ロゴちゃん】 全部見てくれてありがとう！この3つの画面を見てどんな感じがした？ 【翔くん】 3画面のみだったけど、君が作るアプリの全体像が瞬時に、気持ちよく伝わってきた感じがした。これからの旅が楽しみになってきたよ！ 【ロゴちゃん】 ちゃんと伝わったみたいでよかった！ここでちょっとだけ豆知識！ たったの3画面だけど、ちゃんとアプリの全体像を伝えられる、このまとまった3画面のことを『オンボーディングUI』って表現するんだよ。 これは、アプリを開いての最初に出てくるUIであって、一般的には3〜4画面で構成されているんだ〜。 このオンボーディングUIによって、ロゴちゃんが作ったアプリの魅力が、翔くんの『心の中にある感性のど真ん中』をまっすぐ貫きましたー！！ 【翔くん】 なるほど。僕は今、このオンボーディングUIを見て、このアプリの全体の特徴を瞬時に読み取ることができたんだね！ そしてそれが、僕の心な中にある『感性』のど真ん中に伝わってきたよ！！ 【ロゴちゃん】 そうです！ちなみに、この3画面の全体を『オンボーディングUI』と言って、そこにある1つ1つの画面で小分けした場合は『オンボーディング画面』という言い方で表現するのだ。 では、実際にロゴちゃんが作ったオンボーディング画面を1つ1つ紹介します！ 〈オンボーディングUI〉 『オンボーディング画面①』 「行きたい旅先がすぐ見つかる 5タップで予約完了！」 スマホの地図と旅人のイラストを組み合わせ、**“操作の簡単さ”と“旅への出発感”**を表現。 「5タップ」という具体的な数字で、ユーザーがすぐに使える印象を与えています。高揚を誘うオレンジで、翔くんのワクワク感を引き出すよ。 『オンボーディング画面②』 「口コミで選べる、信頼の旅先」 口コミに基づいた選択が可能であることを示す画面。 青い文字で「信頼」を視覚的に強調し、翔くんに旅への安心感を届ける設計にしています。 『オンボーディング画面③』 「さあ、あなたの週末に 特別な旅 を送ろう」 週末のワクワク感をイメージしたイラストを用い、感情に訴えかけるような締めの一言を配置。 翔くんが“次の画面へ進みたい”と自然に感じられる設計です。 【翔くん】 それぞれの画面で、それぞれの『色』について、僕の気持ちや感情にちゃんと訴えかけてくるように設計しているんだ。すごいね！ 【ロゴちゃん】 ありがとねん！色はUXにおいて、ユーザーの『感性』や、そこから生み出される感情を設計をするための重要な要。ロゴちゃんのこだわりです♪ このオンボーディング画面でロゴちゃんのアプリの全体像が把握できたら、今度は「始める」の文字をタップして次のUIに行ってみましょうか！ 【翔くん】 （ほえー...) 次はどんな画面が出てくるのだろう。楽しみだなー！（5タップで...ワクワク） ーーーーーーーーーーーーーーー ここまでお読みいただきありがとうございます。 それでは、第3章へとお進みくださいませ。