はじめに

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

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

これまでの振り返り

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

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

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

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

特定の情報

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

補足的な情報

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

普遍的なアイコン

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

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

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

テキストラベル

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

企業ブランド

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

Figmaにアイコンを取り込む

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

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

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

Tips: Figmaでアイコンのサイズを変更する方法

調整したいアイコンをクリックして選択します。
Shift ボタンを押しながら、アイコンの角をドラッグして、サイズと比率を調整します。