これだけは押さえておこう、UIのカラー設計基礎知識

社内LT用に作成した資料です。

Transcript

1. UI Designer Pixels チェ・ウナ 28 September 2020 Yumemi UI Designer Lightning Talks #1 これだけは押さえておこう、 UIのカラー設計基礎知識 ©︎ Yumemi, Inc.
2. チェ・ウナ UI Designer Pixels 2019.04 株式会社ゆめみ入社 ・自社新卒採用サイトデザイン担当 ・金融アプリビジュアルデザイン担当 ・エンタメ企業新サービズUIデザイン担当 ・飲食/家電メーカーアプリダークモード担当 ・電子決済アプリUIデザイン・イラスト担当　などなど ミニマリスト インタラクションデザイン デザインシステム 情報設計 グラフィックデザイン Webアクセシビリティ BX 猫 Kドル CITY POP カフェ ピザ 映画 1 ©︎Yumemi, Inc.
3. Contents これだけは押さえておこう、UIのカラー設計基礎知識 2 1 自然界の法則を理解しよう 3 p 2 視覚的階層を意識しよう 10 p 2 意味を持つ名前を付けよう 17 p 3 コントラスト比を確認しよう 25 p ©︎ Yumemi, Inc.
4. 1 自 然 界 の 法 則 を 理 解 し よ う
5. これだけは押さえておこう、UIのカラー設計基礎知識 自然界の法則を理解しよう 1 4 一貫性のある世界を作るために、 実世界の基本的な性質をデザインに取り入れる 一貫性がないと、ユーザーにとっては 非常にストレスフルで、心理的エネルギーを消耗
6. sこれだけは押さえておこう、UIのカラー設計基礎知識 自然界の法則を理解しよう 1 5
7. 自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 6 明度が異なる 影が異なる ©︎Yumemi, Inc.
8. 自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 7 0 0 8 8 16 16 ©︎Yumemi, Inc.
9. 自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 8 iOS Android Mobile UI Illustration Light Dark ©︎Yumemi, Inc.
10. 自然界の法則を理解しよう 1 sこれだけは押さえておこう、UIのカラー設計基礎知識 9 Material DesignGuidelines HIG (Dark Mode) ©︎Yumemi, Inc.
11. 2 視覚的階層を意識しよう
12. sこれだけは押さえておこう、UIのカラー設計基礎知識 視覚的階層を意識しよう 2 11 ©︎Yumemi, Inc.
13. sこれだけは押さえておこう、UIのカラー設計基礎知識 視覚的階層を意識しよう 2 12 UI要素を視覚的階層で表現するための手段 (タイポグラフィと組み合わせるとより効果的) コンテンツの優先順位を視覚的に表現することを意味 カラー 視覚的階層 ©︎Yumemi, Inc.
14. sこれだけは押さえておこう、UIのカラー設計基礎知識 視覚的階層を意識しよう 2 ©︎Yumemi, Inc. 13
15. 視覚的階層を意識しよう 2 色相 Hue 明度 Value 彩度 Chroma 色調 Tone sこれだけは押さえておこう、UIのカラー設計基礎知識 ©︎Yumemi, Inc. 14
16. 2019.06 2020.09 ©︎ Yumemi, Inc. 15 sこれだけは押さえておこう、UIのカラー設計基礎知識
17. 視覚的階層を意識しよう 2 sこれだけは押さえておこう、UIのカラー設計基礎知識 ©︎Yumemi, Inc. 16 60 - 30 - 10 ルール 60%をメイン色 / 30%補助色 / 10%をアクセントカラー カラーやタイポグラフィを使ってコンテンツに優先順位をつける グレースケールに彩度を足すなどして、主要カラーとトーンを合わせた淡い色を使用 真っ黒・真っ白の取り扱い注意 #000000と#FFFFFFはコントラスト比が高すぎるのでユーザーの眼が疲れてしまう 赤はエラー・緑は成功・黄色は警告 赤・緑・黄色が表す「状態」の解釈は世界共通
18. 3 意 味 を 持 つ 名 前 を 付 け よ う
19. 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 18 sこれだけは押さえておこう、UIのカラー設計基礎知識
20. 意味を持つ名前を付けよう 3 色に意味を持つ名前をつけると... ©︎Yumemi, Inc. 19 sこれだけは押さえておこう、UIのカラー設計基礎知識
21. デザイナー 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 役割ごとに定義されてるから、色変更などの管理がしやすい！ 複数人作業する際、一貫したスタイルのUI作れる！ 20 エンジニア sこれだけは押さえておこう、UIのカラー設計基礎知識
22. 1.抽象的な名前（色名と色調） 2.直接的な名前（機能・役割名） ex. base / blue400 / yumemiblack ex. bg_primary / separate_contents / txt_link 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. メリット メリット いろんな箇所で使い回せる どこで使われたがすぐにわかるので管理しやすい デメリット デメリット 後からカラーが増えると名付けが難しい 初期のセッティングに時間がかかる 21 sこれだけは押さえておこう、UIのカラー設計基礎知識
23. 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 実際どうしてる？ 1+2を合わせて名前を付けてる この色どこで使う？色の役割さえ共有できていれば、 「名前」自体は、どう付けても良いかなと... 22 sこれだけは押さえておこう、UIのカラー設計基礎知識
24. 意味を持つ名前を付けよう 3 ©︎Yumemi, Inc. 実際どうしてる？ 23 BACKGROUND BASE separate FILL BRAND COLOR Secondary Tertiary Primary Light Dull Dark Bright Pale Deep sこれだけは押さえておこう、UIのカラー設計基礎知識
25. 意味を持つ名前を付けよう 3 YDK(Yumemi Design Kit)参考 @s_jeon @e_choi ©︎Yumemi, Inc. 24 sこれだけは押さえておこう、UIのカラー設計基礎知識
26. 4 コ ン ト ラ ス ト 比 を 確 認 し よ う
27. 製品のアクセシビリティを改善すると、低視力、失明、聴覚障害、認知障害、運動障害、または状況障害（腕 の骨折など）を含むすべてのユーザーの使いやすさが向上します。 Webアクセシビリティ　 ＝　 情報やサービスへのアクセスのしやすさ 　 ＝　 誰もが利用できること コントラスト比を確認しよう 4 ©︎Yumemi, Inc. 26 sこれだけは押さえておこう、UIのカラー設計基礎知識
28. コントラスト比を確認しよう 4 ©︎Yumemi, Inc. デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ 27 sこれだけは押さえておこう、UIのカラー設計基礎知識
29. コントラスト比を確認しよう 4 ©︎Yumemi, Inc. 総務省が発表したWebアクセシビリティにおける推奨基準 4.5 : 1 3 : 1 大きなテキスト 小さなテキスト 総務省が発表しているWebアクセシビリティにおける「みんなの公共サイト運用 ガイドライン（2016年版）」でも、公的機関に対してレベルAA対応を推奨、企 業サイトではA、もしくはAAの一部に準拠することが一般的。 28 *Bold体ならテキストが小さくても 3:1以上でOK 以上 以上
30. https://web.landgarage.co.jp/2018/08/24/websitenosirokuro/ https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html https://www.studio-umi.jp/blog/185/549 https://material.io/design https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/ 29
31. ご清聴ありがとうございました 30