0
0

More than 1 year has passed since last update.

Google UXデザイン:レイアウト(モバイルアプリ)

Last updated at Posted at 2022-12-15

はじめに

わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

これまでの振り返り

モバイルアプリの共通デザインパターン

デザインするアプリをレイアウトする際に、既存のアプリで使われている一般的なレイアウトやパターンを知っておくと役に立つ場合があります。これらのレイアウトを知ることで、ビジュアルデザインプロセスを開始し、時間を節約し、デザイン作業を向上させることができます。

モバイルアプリには、ある種の共通した画面があることにお気づきでしょうか。アプリによってレイアウトや外観は異なりますが、目的やデザイン上の配慮は共通しています。

以下に、最も一般的なモバイルアプリの画面の種類をいくつか紹介します。モバイルアプリのポートフォリオプロジェクトでワイヤーフレームを作成する際には、これらを念頭に置いてください。

Home screen

ホーム画面は、ユーザーがアプリケーションを開いたときに最初に目にする画面です。ホーム画面は、アプリの主なコンテンツや機能を表示し、ユーザーがさらに探索するための出発点となるものです。

ホーム画面は、ユーザーにアプリの内容を知らせるものなので、コンテンツは理解しやすく、使いやすく、ナビゲートしやすいものである必要があります。下部のナビゲーション・メニューや検索アイコンのような一般的なナビゲーション要素は、多くのユーザーにとって馴染みがあるため、アプリを使い始めるのが容易になります。

ホーム画面を多くのコンテンツで埋め尽くしたくなるかもしれませんが、それではユーザーにとって雑然とした、圧倒されるような体験になりかねません。必要なコンテンツに絞り、余白を有効に活用する ことで、ホーム画面をより使いやすくすることができます。

Onboarding screens

オンボーディング画面は、初めてアプリを使うユーザーに、アプリの主な構成要素や機能を紹介するものです。特に、アプリにユニークな機能や馴染みのない機能がある場合、ユーザーがすぐに使い始められるようにすることができます。

また、オンボーディング画面では、よりパーソナライズされたユーザーエクスペリエンスを実現するために、情報を収集することもできます。この画面は、デザイナーが多くの選択肢を持っているため、特定のアプリのエクスペリエンスに合わせてカスタマイズする必要があります。

優れたオンボーディングフローは、ユーザーのエンゲージメントとリテンションを向上させることができます。しかし、多くの場合、複数の画面で構成されているため、ナビゲートが容易であることが必要です。デザイナーは、明確で簡潔なコピーと魅力的なグラフィックスを使用して、シームレスで印象的な体験を作り出すことで、離脱を最小限に抑えることができます。

Profile/Account screen

プロフィール(アカウント)画面には、ユーザーの個人情報(氏名やメールアドレスなど)やアプリの設定(注文履歴やアクセシビリティ設定など)が含まれます。

プロフィール画面には多くの重要な情報が含まれるため、明確に整理され、簡単に操作できることが必要です。そのため、プロフィール画面はできるだけシンプルですっきりしたデザインにすることが望ましいのです。

Checkout Screen

チェックアウト画面は、ユーザーが購入を完了するための画面です。通常、支払いや配送に関するいくつかのフォームが含まれるため、チェックアウトはアプリの他の部分よりも複雑になる可能性があります。このステップはストレスになる可能性があるため、ユーザーができるだけ安全だと感じることが重要です。

デザイナーは、各フォームフィールドに必要な情報を明確にし、フィールドが正しく入力されたことを示すビジュアルアイコンを追加することで、その手助けをすることができます。

また、個人情報が安全に保護されていることをユーザーに知らせたり、購入が完了したときに確認メッセージを表示したりすることもできます。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0