Google UXデザイン：モックアップ（強調）

Last updated at 2023-03-04Posted at 2022-12-16

はじめに

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

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

これまでの振り返り

モックアップを作成・改良するにあたり、理解しておくべき基本的なデザインコンセプトがいくつかあります。今回、強調の重要性を取り上げ、デザインで何を強調するかをどのように決定すべきかを紹介します。

強調することで、ユーザーに注目してもらいたい部分に意図的に誘導する ことができます。モックアップでは、各ページや画面上で何が重要で、何が重要でないかをユーザーに示す手がかりとして、強調表現を使用します。

では、ビジュアルデザインで何かを強調するには、どうすればよいのでしょうか？

デザインのある部分を他の部分より強調するには、その部分に視覚的な重みを与えます。

などの変数を使用することで、ある要素に大きな視覚的重みを与えることができます。

GoogleのUXデザイナー、Joshが作成したモックアップをご覧ください。これは、ユーザーがスパイスやハーブ、調味料を記録するのに役立つアプリです。

このモックアップのデザインはとてもシンプルですが、デザインの要素と原則をうまく使って、強調感を出しています。

デザイン内の要素のサイズを変更することは、ユーザーに大きなオブジェクトに注目させ、同時にあるオブジェクトが他のオブジェクトよりも重要であることを伝えることで、強調する簡単な方法です。

下の画像の「スイカ」のように、ページのタイトルに大きなサイズを使用することで、ユーザーの方向性を定めることができます。このページ名は、そのページの他のテキストよりも大きく、または太くすることで、その特定のテキストの重要性を示すことができます。

コントラストとは、強調や比較を伝えるために、相反する視覚的要素を作り出すことです。コントラストは、デザインの中で異なる要素や重要な要素を強調するのに最適な方法です。

下の画像では、「チェックアウトカート」と「注文(ORDER)」ボタンに鮮やかな赤と紫を採用し、白とグレーのアプリと対比させています。

テキストにコントラストをつけるには、次の方法があります。

テクスチャとは、オブジェクトに深みやパターンを与える要素のことです。テクスチャーは、デザイン内の他のオブジェクトからオブジェクトを目立たせることができるため、ユーザーの視線を集めるために控えめに使用する必要があります。

下の画像では、「買い物客の80%」が円グラフの水玉の部分で表現されています。つまり、円グラフの最も重要な部分をテクスチャで強調しているのです。

では、「自分のデザインで何を強調し、視覚的な重みを加えるべきか」を判断するために、下記を自問してください。

強調表現を戦略的に使うことで、ユーザーがタスクを完了しやすくなり、優れたユーザーエクスペリエンスを生み出すことができます。

では、ユーザーに行動を起こしてもらうために、強調が果たす役割とは？

『ユーザーがタスクを完了するために、必要なアクションや重要な情報を簡単に見つけられるようにすること』

ユーザビリティ・スタディの結果に基づいて、デザインのナビゲーションを調整することを含むかもしれません。リサーチ中に誰かが重要な機能を簡単に見つけられなかった場合、それを強調するためのより良い方法を検討しましょう。

下記は、あるユーザビリティ・スタディの結果、改良したものです。何を強調したいかすぐに分かりますね？

デザインする際には、ユーザーがウェブサイトにアクセスする理由、あるいはアプリを利用する理由を考えてみてください。

ページや画面の特定の場所を強調することで、ユーザーは必要なものを探すのに苦労することがなくなります。そうすることで、ユーザーはよりよいエクスペリエンスでデザインに接することができるようになります。

デザインに強調を加える方法をもっと詳しく知りたい方は、Interaction Design Foundationによる強調：デザインの焦点の設定をお読みください。これは、デザインの中に視覚的な焦点を作る仕組みについて見ています。
デザインの原則は、UXデザイナーとしてのキャリアを通じて使用するツールボックスとなるでしょう。Toptalによる記事Breaking Down the Principles of Design は、心に留めておくべき多くの異なるタイプのデザイン原則を参照しています。