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/d91f66d5-87fc-cb06-cbcc-625dd7d8b785.jpeg" width="700">

</details>

# 色が与える影響

今回は、ビジュアル・デザインの要素のひとつである「色」について、ご紹介します。

色は、あなたの行動や気分、思考に影響を与えることをご存知ですか？

***<font color="MediumVioletRed">『色は感情を伝え、行動を示し、多様性をもたらします。』</font>***

例えば、<font color="Red">赤は注目を集めます</font>。そのため、出口標識や非常ボタン、一時停止の標識などは赤色をしています。この色を持つものは、常に注目されるのです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/c1ffe5c7-01b8-bbdb-dd05-d90debc39a55.png" width="500">

一方、<font color="Blue">青は静けさや穏やかさ、平和を表現します</font>。それが、青が広く魅力的とされる理由の一つです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/995c22a9-40e5-9663-8284-942eb5e83648.png" width="500">

UXデザインにおいて、色の選択と組み合わせが、どのように強調し、ブランディングを伝え、アクセシビリティに影響を与えるのか、大事になってきます。

# 60-30-10ルール

色を変えることで、ユーザーの注意をデザイン上の焦点に引きつけることができます。例えば、
- サインアップリンク
- 購入ボタン

UXデザイナーがよく使うルールに、「60-30-10ルール」（デザインのカラーパレットの比率）があります。

| タイプ | 比率 |
|:-----------|:------------|
| ニュートラルカラー | 60% | 
| カラー | 30%| 
| アクセントカラー | 10% |

この、***<font color="MediumVioletRed">3色目のアクセントカラーがパレットの10％を占め、強調する</font>*** のです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/1887c0e9-50bc-c7af-e0af-ec20c0cf608e.png" width="200">

# ブランディング

UXデザインにおいて色が重要なもうひとつの理由は、色によってブランディングを伝えることができるのです。色は、タイポグラフィと同じように、企業のブランドガイドラインにおいて重要な役割を果たします。色彩は、製品のビジュアル・アイデンティティを定義し、競合他社に差をつけるのに役立ちます。

”マクドナルドのアーチの黄色は、あなたを明るい気持ちにさせませんか？”
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/61d7ee63-f266-58ca-4724-46d683f0de71.png" width="150">

”コカ・コーラの大胆な赤は、エネルギッシュな印象を与えませんか？"
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/2e2f53d5-8360-58ff-11fb-86474181e22a.png" width="200">

”Googleがすべてのブランディングに4つの特定の色を使っていることにお気づきでしょうか?” これは偶然ではありません。これらの色はすべての製品で統一されているため、Googleのデザインは瞬時に識別しやすくなっています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b88ce439-8812-52b8-feea-abb11cfb1d29.png" width="250">

UXデザイナーは、その企業のブランドカラーをどのようにデザインに使用するかを意識する必要があります。アプリ、Webサイト、ロゴのいずれをデザインする場合でも、色の関連付けを統一してください。

# コントラスト基準

選択した色のコントラストを確認することが重要です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/654e4539-7b99-887b-bad5-c2498dd415f8.png" width="700">

例えば、
- 左の画像: 白地に黒のテキストを使用しており、コントラスト比が高い
- 右の画像: カモグリーンの背景に緑、青、黄色のさまざまな色合いを使用しており、テキストが非常に読みづらく、アクセシビリティが低い

デザイナーは、Web Content Accessibility Guidelines（WCAG）のカラーコントラスト基準に従って、アクセシビリティに配慮したデザインを心がける必要があります。

:::note info
文字色と背景色のコントラスト比をチェックするツール
https://webaim.org/resources/contrastchecker/
:::

# さまざまなデバイスや環境下でテスト

もうひとつ、デザインの色を選ぶ際に注意すべきことがあります。色の選択は、さまざまなデバイスや環境でテストしてください。デスクトップパソコンと携帯電話では、色の見え方が異なることがあります。また、明るいところで使うか、暗いところで使うかによっても、色の見え方は変わってきます。

その一例が、2015年にインターネットで流行した、あるネットユーザーは白と金と表現し、あるネットユーザーは黒と青と表現したドレスの写真です。多くの人が、同じドレスがまったく違う色に解釈されることに戸惑いましたが、説明は簡単でした。


ユーザーが照らす光の色によって、ドレスの色が変化したのだ。黄色い光の下では黒と青に、青い光の下では白とゴールドに見えたのです。このように、さまざまな環境下で色の選択をテストすることが重要であることを示す一例です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/32b2ee98-7636-03cf-0341-e59e57ef309b.png" width="300">

# Figmaでデザイン

Figmaには、デザイナーがモックアップを色で強化するためのダイナミックなシステムがあります。

#### 色の設定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/9eda9cef-d676-57c2-633d-df4a4f322ddd.png" width="600">

#### グラデーション（Gradient)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/f7355fbf-4b9b-18b7-16d4-d7d1ae2b5ab3.png" width="600">

グラデーションの種類: 
- ***Solid***： シェイプの片側でフルカラーになり、フェードアウト
- ***Linear***: シェイプの中心でフルカラーになり、円形にフェードアウト
- ***Radial***： シェイプの片側がフルカラーで、時計回りにフェードアウト
- ***Diamond***： 水平・垂直方向にフルカラーでプラス記号を描き、端に向かって菱形にフェードアウト
- ***Image***： 作成した要素の内側に画像を配置。これは本当のグラデーションではありませんが、Figmaではここに画像オプションが存在します。

#### 色相（Hue)・不透明度（Opacity）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/65d02d40-84a1-c661-0d87-0961778b770c.png" width="600">

***色相***
デザインに最適な色合いを見つけることができます。例えば、色相スライダーをグリーンに合わせてからカラーセレクターで調整すれば、オリーブグリーンを選ぶことができます。

***不透明度***
不透明であるか透明であるかの度合い（色の強度）のことです。
- 不透明度100%は、豊かで完全な色であり、不透明とも呼ばれます。
- 不透明度50%は、透明で色が認識できる程度に明るいものの、透けて見えます。
- 不透明度0%は、色が見えなくなります。

### 保存

デザインに最適な色を見つけるには、時間をかけて何度も繰り返す必要があります。色の選択が決まったら、カラー・パレットをFigmaに保存して、将来の時間を節約してください。

1. In the Layers panel, on the left side of the Figma screen, select the shape that has the color you want to save and reuse.
2. In the Design panel, on the right side of the Figma screen, navigate to the **Fill** header. Click the **Style** icon, which is represented by four dots shaped like a square.
3. A menu will appear called **Color Styles**. Click the **Plus** (+) icon in the top right corner of the Color Styles menu.
4. Name the **Style.**
5. Click **Create Style**.

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/622155b8-592c-8262-568b-8b66c205c619.png" width="300">


:::note info
参考） An Introduction to Color Theory and Color Palettes
https://www.coursera.org/learn/project-planning-google/lecture/CXcUo/developing-a-project-schedule
:::