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/736853c2-d3f6-6cc8-df7a-72a0bb624ab4.jpeg" width="700">

</details>

# アイコノグラフィー（アイコン）

これまで、[タイポグラフィ][typo]と[カラー][color] というビジュアルデザインの2つの要素について見てきましたが、3つ目の要素であるアイコノグラフィーについて説明します。

[typo]: https://qiita.com/mapami/items/e034490b037fe4919cea

[color]: https://qiita.com/mapami/items/a7aae3ba2c17454b3219

アイコノグラフィとは、あるテーマやアイデアに関連するグラフィックイメージやシンボルのシステムです。私たちはこれらをアイコンと呼んでいます。

表面的には、アイコンは遊び心のある作品に見えるかもしれませんが、効果的に使えば、 ***<font color="MediumVioletRed">技術的な無駄を省き、ユーザーの注意を引き、別のページや場所に簡単に移動することができる</font>*** のです。私たちは、デジタルな環境でも物理的な環境でも、情報を得るために常にアイコンを頼りにしているのです。


#### 特定の情報

例えば、太陽のアイコンは、画面の明るさを調節することができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/2f52345b-1d60-3ee7-8819-8ce32ac23dba.png" width="400">


#### 補足的な情報

例えば、電池のアイコンはデバイスを充電する時期が来たことを知らせます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/dfc64aaf-9177-6900-8a4b-ed2f239038c2.png" width="450">

#### 普遍的なアイコン

アイコンの中には、広く使われていることで一般的に知られているものがあります。例えば、ナビゲーションメニューにあるこの家のアイコンは、アプリのホーム画面に戻るための道筋を示しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/288acbf6-f4a6-c243-d94e-f61de206bfb6.png" width="250">

しかし、他のアイコンは特定の文化的な関連性を持っています。例えば、アメリカンフットボールのアイコンは、グローバルアプリでスポーツを表現するのに最適なアイコンとは言えないかもしれません。それは、アメリカンフットボールが、アメリカほど世界的に人気がないからです。サッカーボールのような、***<font color="MediumVioletRed">より普遍的なアイコンを使う</font>*** ほうが、グローバルなオーディエンスにふさわしいかもしれません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/346058ea-21e6-a8a5-df00-437f53231b70.png" width="450">

デザインに取り入れる前に、そのアイコンは文化的、地理的に特殊かどうかを検討しましょう。

#### テキストラベル

デザインにアイコンを使用する場合は、そのアイコンの意味を説明する ***<font color="MediumVioletRed">テキストラベル</font>*** を追加してください。家のアイコンを追加する場合は、その下に「家」というテキストラベルも追加してください。アイコンはスクリーンリーダーで読むことができないので、テキストラベルはアプリをよりアクセシブルにしてくれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/129780b2-a395-47d0-32bd-84cee05faaa3.png" width="250">


#### 企業ブランド

最後に、アイコンは企業のブランドにとって非常に重要です。たとえば、Googleワークスペースのアイコンを考えてみてください。その色とスタイルから、これらのアイコンはGoogle製品のものであることに間違いはないでしょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/a5043f2a-368c-719f-e5fc-e37f3f157373.png" width="500">

# Figmaにアイコンを取り込む

GoogleのMaterial Designのページから、アイコンをダウンロードします(.svgファイル）。

https://fonts.google.com/icons

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/30592eae-86b3-aa75-b94f-bd3b37e3ae52.png" width="700">



Figmaの画面で左上の長方形をクリックし、「Place Image」を選択し、ダウンロードしたアイコンを選択します（例：Homeアイコン）


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/3ca8083a-48f5-523a-bdf4-e890aceb9a05.png" width="700">

これで、追加できました。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/e1d38ca7-23a2-ae37-d3f2-159ea0318ad5.png" width="700">

:::note info
Tips: Figmaでアイコンのサイズを変更する方法
1. 調整したいアイコンをクリックして選択します。
1. Shift ボタンを押しながら、アイコンの角をドラッグして、サイズと比率を調整します。
:::