こんにちは！UIデザイナーを目指すふがしです。
今回はデザインコミュニティBONOのコンテンツ「はじめてのUIデザイン」に取り組んだのでその過程をまとめました。

前回のアウトプットはこちら↓
（たくさんの方に見てもらえて嬉しい〜！ありがとうございますモチベが上がります！）

「はじめてのUIデザイン」

今回取り組んだのはこちらです。

メッセージアプリを題材として、画面ごとにトレース→カイさんの解説という流れでUIの基本構造や決まりごとなどを学んでいくコンテンツになっています。最後には自分で「新規連絡先一覧」を作ってみるというお題がありましたので、苦戦しつつやってみました。

リスト画面

まずはトークリスト画面。こちらを作成しました。

スマホアプリのUIに共通する基本構成の解説を、以下のようにまとめてみました。

エリアについて、今回作成したリスト画面に当てはめると以下のようになりました。

・ナビゲーション・・・ヘッダー（トーク＋アイコン）/ 検索エリア
・コンテンツエリア・・・リスト部分

また、ページの切り替えに大事なナビゲーションが「ボトムナビ」です。

動画では以下のように解説されていました。

今回は「トーク」と「連絡先」の画面を切り替えられるようになっています。ページのオンオフはアイコンの色と塗りつぶしで表現しています。

これまで多くのアプリを「ここを触ればこのページに行きそうだな〜」という「なんとなく」の感じで使っていましたが、アクションの導線がナビゲーションによって明確になっているからこそ、意識せずとも感覚的に使えているんだな〜〜と実感しました。頭で考えさせないで感覚的に使えるUIってすごい。

トーク画面

続いて、トーク画面。右は、キーボードが出ているときの画面です。

動画の解説を参考に、トーク画面におけるナビゲーションとコンテンツエリアについてまとめました。

余白やカラーなどで、相手のブロックと自分のブロックをしっかり区別する必要がある。とにかくパッとみた時に誰の会話なのかが分かりやすいことが大事。

ページ同士の関係性について

ここまで、リスト画面、連絡先画面（コンテンツエリアはこれから）トーク画面を作成しました。それぞれのページ同士には、しっかりとした関係性があるらしい・・・！そんなこと全く考えたことありませんでした。具体的にどんな関係になっているかというと・・・

な、なるほど〜！ページの構造を把握すると、どのページにどのナビゲーションが必要なのかが理解しやすくなりました。
今回作成したのはリスト・トーク・連絡先の3画面とシンプルなので構造が分かりやすいですが、情報量が多いアプリの場合はもっと複雑だと思われるので、他のサービスでは構造がどうなっているかを意識して使ってみようと思います。

お題チャレンジ / 連絡先画面

さて、最後に取り組んだのは、「連絡先」「新規連絡先」「連絡詳細」の3画面です。まずは自分で手を動かしてやってみよう、ということでしたので、iOSの連絡帳とLINEを参考に（ほぼトレースのような感じで）作成しました。

iOSの連絡帳はヘッダーやトーク、通話のボタンは青（#007AFF）になっており、押せるか押せない（アクション導線か）かが一目でわかるようになっていました。（連絡詳細画面の電話番号やメールアドレスのテキストが青なだけで、押したら通話やメールができる画面になると認識できる）

作成後、解説を見てまとめてみました。

なるほど〜！階層関係や並列関係のページでもない「追加モード」として新しいページが立ち上がる、ということなので、ページが下から出てくるような動作なんですね。動きが意味と連携していると、どのような状態になっているのかとても分かりやすいと思いました。（連絡先に戻りたい時は、ページを下にスワイプする、ということも無理なく理解できる）

アクション導線がアイコンの下にあるだけで、「その人に対してアクションする」ということが一目瞭然。アクションの意味合いを正しく伝えるためにも、導線はとても大事。。。！

まとめ

というわけで、今回はUIの基本的な構成について学びました。特にアクション導線や、ページ同士の関係性についてなど、新たな発見がたくさん。ボタン1つとっても、その場所にある意味がちゃんとあるんだなあと。表面的な部分だけでなく、UIがどうしてそうなっているのか、をしっかり理解できるようになっていきたいです。

10月ももう終わりますね。早い！11月はBONOのコンテンツに沿ってUIビジュアルの基礎を学びます〜！！！もっともっと頑張る！！！

今回作成した画面で使っているイラストは、インスタで公開しています！よかったら覗いてみてくださいね。