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

2023

年

月

日

スキルを上げて、創造のための武器を手に入れよう

すべての動画閲覧には、メンバーシップ加入が必要です

メンバー登録について

動画のゴール

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

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

‍

やり方

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

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

3.試してみる

4.決める

‍

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

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

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

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

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

‍

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.サービスのコンセプトを表現する

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

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

‍

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.サービスのコンセプトを表現する

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

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

‍

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

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

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

‍

3.パターンを出す

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

‍

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

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

‍

4.決める

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

‍

Load Previous

No Name

Set

2 years ago

Moderator

(Edited)

Delete Forever

This is the actual comment. It's can be long or short. And must contain only text information.

Your reply will appear once approved by a moderator.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

UIビジュアル基礎

シリーズの説明

【進め方】デザイナーはやってる見た目の”キホン”をマスター！

TRY1 : コンセプトを考えてリデザインしよう！

TRY1:プロフィールUIをリデザイン！

1-1. 【解説①】アイデア：誰が使うか？で見た目を考える方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

【7分】TRY1解答！見た目だけ考えるのはNGなんです

TRY1解答！ユースケースから見た目のアイデアを作る流れ

TRY2 ビジュアルシステムでリデザインしよう！

TRY2 : ホームUIをリデザイン！

2-1.良いUIを作るコツは見た目の"システム化"

2-2.システム化でUI作成が楽になる5要素とは

2-3.Figmaで見た目のシステムを作る方法

【5分】TRY2解答 システムを適応して見た目を整える

【解説】TRY2解答

TRY3 レイアウトのきほんでリデザイン！

TRY3:動画詳細UIをリデザイン！

3-1.サイズの決め方：倍数で管理しよう

3-2.情報を優先度とグループで整理する

3-3.余白は論理でサイズと種類を決めよう

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-5.ボーダーの基本

TRY3:レイアウト解答

4.配色の基本

TRY4 : スマホの動画詳細UIをリデザイン！

4-1.ここからはじめる配色設計