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

# はじめに

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

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

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<details><summary>これまでの振り返り</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/9c344191-2fa9-271f-fedf-4ac04b7251de.jpeg" width="700">

</details>

# モックアップにおける強調

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

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

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

# 視覚的な重み（Visual Weight)

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

- ***<font color="Teal">サイズ</font>***
- ***<font color="Teal">色</font>***
- ***<font color="Teal">コントラスト</font>***
- ***<font color="Teal">テクスチャ</font>***

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/8e7838c7-9873-d142-6949-313615a0636b.png" width="600">

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

- ホワイトスペースとシンプルな書体を使うことで、ユーザーはアプリのメインコンテンツであるターメリックやハリッサなどのスパイスの画像に自然に引き寄せられます。
- 画像は大きく、カラフルです。周囲のテキストや背景に比べ、視覚的な重みがあります。

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/c9c86084-44d8-2a76-fe2f-1161b63d4d3f.png" width="200">

#### コントラスト

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/70e1cbd9-ad3d-bc7b-3c44-bac41076cbfa.png" width="200">

テキストにコントラストをつけるには、次の方法があります。
- 太字にする
- 色をつける
- 下線を引く
- 斜体にする

#### テクスチャ

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/124a038d-1982-cef9-592f-6fde9f1ace8d.png" width="200">



# 何を強調するか決める際の重要なポイント

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

- ***<font color="Teal">ユーザーの注意をどこに引きたいか？</font>***
- ***<font color="Teal">ユーザーの目的は何か？</font>***

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


# 強調が果たす役割

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

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

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

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/3dc1975e-85d0-8b9b-878a-8decc9723f08.png" width="600">


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

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

# 参考

- デザインに強調を加える方法をもっと詳しく知りたい方は、Interaction Design Foundationによる[強調：デザインの焦点の設定](https://www.interaction-design.org/literature/article/emphasis-setting-up-the-focal-point-of-your-design)をお読みください。これは、デザインの中に視覚的な焦点を作る仕組みについて見ています。
- デザインの原則は、UXデザイナーとしてのキャリアを通じて使用するツールボックスとなるでしょう。Toptalによる記事[Breaking Down the Principles of Design](https://www.toptal.com/designers/gui/principles-of-design-infographic) は、心に留めておくべき多くの異なるタイプのデザイン原則を参照しています。