0
0

More than 1 year has passed since last update.

Google UXデザイン:モックアップを見直すためのチェックリスト

Last updated at Posted at 2022-12-20

はじめに

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

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

これまでの振り返り

チェックリスト

経験豊富なデザイナーでさえ、さまざまな場面でデザインの作成を一時停止し、進捗を確認する必要があります。チェックリストを使って、あなたのモックアップを見直します。

チェックリストには4つのカテゴリがあります。

  1. 詳細レベルのビュー
  2. ページレベルのビュー
  3. 機能レベルのビュー
  4. アプリレベルのビュー

1.詳細レベルのビュー

まず小さなことに注目することで、要素に間違いがある可能性がある箇所を発見することができます。

  • タイポグラフィー
  • カラー
  • アイコン

など個々の要素を見直し、モック全体で一貫性があるか、順番が狂っていないかをチェックすると効果的です。

Sample

自分の作品を確認したところ、通常オレンジ色の"fa7b17"を使用しているにもかかわらず、誤ってオレンジ色の"f18530"を使用しているアイコンが1つありました。

2.ページレベルのビュー

ページレベルのビューを使って、各ページのすべての要素がバランスよく統一されているかどうかをチェックします。ページを俯瞰して、何か違和感がないかをチェックします。このとき、ページ内の要素のスケールやプロポーションを考えるのもよいでしょう。

Sample

  • 最初のバージョンでは、人の名前を目立たせるために、経歴をインデントしました。しかし、ページレベルで見てみると、経歴が他のページとバランスが悪いように感じ、代わりにすべてを左寄せにすることにしました。
  • 最初のバージョンでは、チェックマークのアイコンが単独で表示されていました。そこで、チェックマークアイコンの周りにグレーの丸を付けて、ページのバランスを整えました

3.機能レベルのビュー

デザインが動作することを確認する必要があります。特に、プロトタイプの準備ができるように、ナビゲーション要素がすべてデザインに含まれているかどうかを確認します。

そのために、次のような自問自答してください。

  • 各ページに進む方法と戻る方法があるか?
  • そのページのメインアクションを実行するためのボタンはあるか?
  • ユーザーが操作を取り消すためのボタンは必要だろうか?

Sample

  • 左上に戻る矢印や右上の×印などの要素があるかどうかをチェックします。
  • ユーザーがそのページのメインアクション(予約するボタン)を実行できるボタンが含まれているかどうか確認します。

4.アプリレベルのビュー

最後に、一歩下がって、デザイン全体を見直します。これは、アプリ全体を見直すことから、アプリレベルビューと呼ばれています。デザインを全体像から考えることで、製品全体の見た目や機能が思い通りになるかどうかを確認することができます。

そのためには、Figmaでズームアウトして、デザインの複数のページを同時にレビューできるようにすることをお勧めします。

Sample

アプリのページ上部にある3つのアイコンは、どのページを見ても同じ位置にあるべきですね。


これで、デザインを見直すための4つのステップのチェックリストが完成しました。これは、デザインを反復し、改善するためのもう一つの瞬間です。

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