【学習記録】連絡帳アプリのUIデザイン｜BONO

今までUI/UXの勉強に関してはDailyUIや書籍での学習が中心でしたが、より実践的な制作や情報設計・UXについて学びたいと思い、10月からBONOというデザインコミュニティに入会しました。

このコミュニティでは動画コンテンツでの学習がメインで、お題を通して実際に手を動かしながらUI/UXについて学ぶことができます。

今回はFigmaの使い方とUIの基本知識が学べる「UIデザイン入門コース」のお題にチャレンジしました。

お題

お題はメッセンジャーアプリの連絡先一覧のUIデザインです。

お題の詳細は以下動画で説明されています。（BONOに入会していなくても無料で見られます！）

ちなみに要件をまとめると以下の通りです。

また作成する際は我流でやらずに類似アプリのデザインをリサーチすることと、プロトタイプ機能で画面の遷移を繋げることも条件に課されました。

リサーチ

まずは類似アプリのデザインリサーチから始めました。今回はiPhoneにデフォルトである連絡帳アプリと楽天Linkアプリを参考にしました。

それぞれのアプリを比べてみたときに共通点と相違点がありました。

各ページの階層関係や大まかなコンポーネントの配置は共通していて、ユーザーが使い慣れている設計にしているんだろうなと感じました。

一方で、新規連絡先の入力遷移やアクションなどは各サービスが独自で利便性を追求しているところも伺えました。

完成デザイン

リサーチした結果をもとにFigmaでデザインしてみました。

また連絡先追加〜完了までの画面遷移をプロトタイプで作成しました。

制作を通して学んだこと

アクション項目の配置

アクション項目はヘッダー・フッターに置かれることが多いですが、アクションの種類や重要度によってどこに配置するかを考える必要があります。

今回「メッセージ開始」と「電話」のアクションはiPhoneの連絡帳アプリがわかりやすいと感じたので同じレイアウトにしました。

お題の解説動画で知りましたが、このレイアウトだと①アイコンの人に→②メッセージor電話をするという順番になっているので、誰に対してどんなアクションができるのかが位置関係でわかるようになっています。

階層関係を考慮した画面遷移

今回プロトタイプ機能で画面遷移のインタラクションを設定しましたが、最初は全て横にスライドインする動きにしていました。

しかし、連絡先一覧から連絡先追加ページへの遷移は「閲覧モード」から「編集モード」へと状態が変わり階層が並列ではないので、横移動ではなく立ち上げの動きにしないといけません。

リサーチ時点では気がつかなかったのですが、iPhoneの連絡帳アプリ・楽天Linkアプリどちらも新規追加ページへの遷移は下から上に向かって移動する立ち上げの動きをしていました。

今まで見た目ばかりに意識が囚われていましたが、ユーザーの使い心地はインタラクションも大きく影響するので、今後は階層関係を見極めて遷移表現にも気をつけたいです。

まとめ

今回は連絡先情報の追加〜完了までの流れをざっくりプロトタイプで繋げましたが、実際には項目入力やメッセージ開始ボタンを押した後の動きなど、一つ一つインタラクションが設定されています。

今まで見た目の部分ばかり囚われていたので、アクションに対する動きに目を向けるきっかけになったのがこのお題での一番の収穫でした。

またデザインリサーチを通して類似サービスには共通点と相違点があり、比べることで一般的なセオリーのUI表現と各サービスが独自で考えたUI表現があることにも気がつきました。

次回からはUIビジュアルのコースに入っていくので、今回学んだことを活かしていきたいです。

ちなみにこのお題がある「UIデザイン入門コース」はBONOのコミュニティに入っていなくても無料で受けらます。Figmaの基本的な使い方や基礎的なUI知識を学ぶことができるので、興味がある方はぜひチャレンジしてみてください！