4-2.テーマカラーの決め方

動画のゴール

▼ UIで使う”メインカラー”の決め方を知ろう

• すべてはコンセプトが出発点
• アイデアの出し方は「参考イメージ」「明度彩度」「コントラスト」から
• 色決めは

‍

やり方

1.コンセプト - どんなサービスで人の感情はどう動く？

2.参考イメージを集める

3.試してみる

4.決める

‍

‍

1.コンセプト - どんなサービスで人の感情はどう動く？

1.ロゴやモチーフを作るかの如く方向性が必要

2.サービスのコンセプトを表現する

• 人の感情が動く
• ロゴのモチーフ
• 機械的に選ぶ
• など

□ コンセプトに関しては別の動画を参考にしてください

• グラフィック入門PROCESS
• UIビジュアル入門 - コンセプトで変わるUI

‍

‍

2.参考イメージを集める

コンセプトから想起される実際のイメージを集めてみる

• ①まずは定番イメージを探してみる
• ②類似の定番イメージを探してみる
• ③競合も見てみる

‍

‍

3.パターンを出す

• 参考で探したのから発想してみる。いろんなものを出す
• 画像やイメージから引っ張って、調整する
• コントラストに注意する : AAを目指そう

‍

○ コントラストはFigmaのプラグインや便利ツールを使って調べると良いです！

動画で使っていたFigmaプラグインはこちらです
https://www.figma.com/community/plugin/748533339900865323/Contrast

‍

4.決める

• 最後は決め
• 1:コンセプトとの合致
• 2:競合との差別化
• 3:ユーザーに正しく伝えたい印象を与えられるか

‍

‍

動画のゴール

▼ UIで使う”メインカラー”の決め方を知ろう

• すべてはコンセプトが出発点
• アイデアの出し方は「参考イメージ」「明度彩度」「コントラスト」から
• 色決めは

‍

やり方

1.コンセプト - どんなサービスで人の感情はどう動く？

2.参考イメージを集める

3.試してみる

4.決める

‍

‍

1.コンセプト - どんなサービスで人の感情はどう動く？

1.ロゴやモチーフを作るかの如く方向性が必要

2.サービスのコンセプトを表現する

• 人の感情が動く
• ロゴのモチーフ
• 機械的に選ぶ
• など

□ コンセプトに関しては別の動画を参考にしてください

• グラフィック入門PROCESS
• UIビジュアル入門 - コンセプトで変わるUI

‍

‍

2.参考イメージを集める

コンセプトから想起される実際のイメージを集めてみる

• ①まずは定番イメージを探してみる
• ②類似の定番イメージを探してみる
• ③競合も見てみる

‍

‍

3.パターンを出す

• 参考で探したのから発想してみる。いろんなものを出す
• 画像やイメージから引っ張って、調整する
• コントラストに注意する : AAを目指そう

‍

○ コントラストはFigmaのプラグインや便利ツールを使って調べると良いです！

動画で使っていたFigmaプラグインはこちらです
https://www.figma.com/community/plugin/748533339900865323/Contrast

‍

4.決める

• 最後は決め
• 1:コンセプトとの合致
• 2:競合との差別化
• 3:ユーザーに正しく伝えたい印象を与えられるか

‍

‍

‍