クール
デザインの雰囲気は、色や質感の組み合わせで大きく変わる。
スタイルの概要
クールスタイルの意味や印象、デザイン全体に広がる雰囲気から、その特徴を読み解く。
クール*coolとは
・冷静なさま
・冷ややかなさま
・かっこいいさま
・冷静でスタイリッシュな雰囲気を演出する
・洗練され無駄のない印象を与える
配色のバランス
クールスタイルを形づくる代表的な色と、それぞれが与える印象の関係から全体像を捉える。
代表的な色
#002366 ロイヤルブルー
#708090 スレートグレー
#F0F8FF アイスブルー
#A9A9A9 スチールシルバー
#31473A ダークフォレスト
ライトピンク
モカクリーム
パステルイエロー
柔らかく甘い印象の色は、クール特有のシャープさや知的な雰囲気を損ないやすい。そのため、洗練された印象が弱く見えることがある。
低
冷静で洗練された印象を与える
スタイリッシュな雰囲気を演出する
中〜低
クールで落ち着いた印象を与える
シャープな雰囲気を演出する
配色と展開
配色の考え方を起点に、実際の使われ方やデザインへの広がりへとつながる。
トーン
冷たさとシャープさを感じさせる色使いで、洗練された印象を与える。
ベースカラー
ブラック、グレー、ホワイトで無機質に構成する。
サブカラー
ブルーやシルバーで冷静さを強調する。
アクセントカラー
メタリックカラーで鋭さと近未来感を加える。
素材・質感
メタルやガラス、レザーなど硬質な質感を使用する。
活用シーン
・IT・テクノロジー
・クリエイティブ・デザイン
・ファッション・ライフスタイル
・自動車・モビリティ
・エンターテインメント
など
活用例
・コーポレートサイト
・ランディングページ（LP）
・ECサイト
・プロモーションサイト
・広告バナー
など
関連キーワード
クールに関連する「20」のキーワードをもとに、それぞれの雰囲気を際立たせる3色の配色パターンを一覧で紹介。
同じテーマでも、連想されるイメージは人によって異なる。似た意味を持つキーワードであっても、選ぶ言葉によって微妙に異なる雰囲気や世界観を表現できる。
ぜひ、ご自身のイメージに近いキーワードを探しながら、用途やデザインに合わせてブラッシュアップ*brush up
/ 既にあるものを磨き上げてさらに良いものにすることし、配色選びの参考にしてください。
フレッシュクール
ひんやり / 清涼感 / 透明感 / クリーン
インテリクール
冷静 / 落ち着き / 知性 / 信頼感
モダンクール
洗練 / スタイリッシュ / 都会的 / モダン
スマートクール
シャープ / 無機質 / 先進的 / ミニマル / 颯爽
エレガントクール
高級感 / 静寂 / 凛とした
基本の配色テクニック
ここに記している配色は、個人的な見解で組み合わせたものです。配色のバランスによって印象は大きく変わるため、すべてのデザインに当てはまるとは限りません。
トライアド*triadとは、色相環上で正三角形を描く位置にある3色配色。
「トライアド」とは、音楽の三和音*3つの音が3度ずつ積み重ねられてできた和音（コード）のことに由来する名称で、変化がありながらもバランスが良く、安定感と華やかさを兼ね備えた配色となる。
スプリット・コンプリメンタリー*split complementary
分離補色とは、補色の片方を隣接色に分離した3色配色。
スプリットとは、「分割する・分離する」を意味し、補色配色よりもコントラストをやわらげつつ、配色に変化とバランスを与えられる。
トーン・オン・トーン*tone on toneとは、「トーンを重ねる」を意味し、同じ色相や隣接した色相で全体をまとめ、明度差を大きくした多色配色。
色相の印象を強調しつつ統一感を保ち、明度差によって変化をつけられるため、バランスがとりやすく穏やかな印象になる。また、明度差を活かすことで立体的な効果を演出することも可能である。
また、3色の配色は「どの色を主役にするか」「どの順で配置するか」によって印象が大きく変わる。
同じ3色でも、主役となる色を明るく見せるか、あるいは背景として引き立てるかによって、全体の雰囲気は華やかにも落ち着いた印象にも変化する。
そのため、色の配置順や面積バランスを入れ替えながら、最も意図に合った見え方を調整することが重要である。
ベースカラー
#D9D9D9
アクセントカラー
#FF6B6B
サブカラー
#7FB3FF
ベースカラー
#FF6B6B
アクセントカラー
#7FB3FF
サブカラー
#D9D9D9
ベースカラー
#7FB3FF
アクセントカラー
#D9D9D9
サブカラー
#FF6B6B
ベースカラー: 70%
背景や余白など、最も広い面積に使用する基本色。全体の雰囲気やトーンを決定づける。
#D9D9D9
アクセントカラー: 10%
視線を集めたい部分に使う強調色。ボタンや見出しなどに用い、デザイン全体を引き締める。
#FF6B6B
サブカラー: 20%
ベースカラーを補完し、全体の印象を整える補助色。デザインに奥行きや安定感を与える。
#7FB3FF
フレッシュクール
爽やかさや清潔感を感じさせる、軽やかで心地よいフレッシュクールスタイルを表現した配色。
ブルーやミントグリーン、ホワイトなどの澄んだ色彩を組み合わせることで、涼しげで清涼感のある雰囲気を演出する。
冷たさを感じるさま
#3A86FF
#8338EC
#06D6A0
#00B4D8
#CAF0F8
#FFAFCC
#006D77
#83C5BE
#EDF6F9
涼しくて爽やかに感じるさま
#56CFE1
#80ED99
#5E60CE
#48CAE4
#FF6B6B
#FFD166
#F1FAFF
#A8DADC
#457B9D
物体が澄みきって透き通っている様子
透き通るような清らかな印象
純粋で濁りのないさま
#5BC0EB
#9BC53D
#FDE74C
#8EC5FC
#FFB4A2
#B5838D
#E3F2FD
#90CAF9
#1E88E5
清潔なさま
きれいなさま
#264653
#2A9D8F
#E76F51
#1B4965
#CAE9FF
#FFB703
#37474F
#607D8B
#B0BEC5
インテリクール
知性や信頼感を感じさせる、落ち着きと品格を備えたインテリクールスタイルを表現した配色。
ネイビーやグレー、深みのあるブルー系の色彩を組み合わせることで、誠実で理性的な雰囲気を演出する。
感情に左右されず落ち着いているさま
#2E4057
#576F2E
#6F2E57
#3A6578
#783A50
#78653A
#2E2E2E
#6E7B8B
#C0C5CE
態度や言動が穏やかであるさま
安定した状態になるさま
平静な状態になるさま
#1B3A4B
#6D597A
#B7B7A4
#283618
#606C38
#DDA15E
#1F2833
#3A506B
#C5C6C7
本質を見極めて、状況に応じて適切に判断し、成果に結びつく行動に移す能力
#3A4F7A
#7A6A3A
#3A7A6A
#34495E
#5E7A8C
#8C6F5E
#1C2A39
#2E4057
#4F6D7A
その人に対して、安心して信じ頼ることができるという心理的な感覚や感情のこと
#2C3E50
#4CA1AF
#A8C686
#1E6091
#91A61E
#91671E
#2F3E46
#5C677D
#A3B1C6
モダンクール
都会的な洗練さを感じさせる、現代的でスタイリッシュなモダンクールスタイルを表現した配色。
ブラックやチャコールグレーを基調に、アクセントカラーを効果的に取り入れることで、都会的でスマートな雰囲気を演出する。
独特のしつこさやあざとい性質がなくなるさま
#2C3E50
#16A085
#7D3C98
#1B2A41
#A63D40
#D9BF77
#4A235A
#7D3C98
#D7BDE2
洗練されていて格好よいさま
無駄がなくスマートな印象を与えるさま
#020617
#3B82F6
#EAB308
#0F172A
#818CF8
#F43F5E
#000000
#525252
#E5E5E5
都市的で洗練された雰囲気をもつさま
現代的でスマートな印象を与えるさま
流行に乗ったオシャレな身なりであるさま
#2B2D42
#8D99AE
#EF233C
#2C3333
#A5C9CA
#E7F6F2
#2B2B2B
#4A4A4A
#9A9A9A
現代的であるさま
今風であるさま
#1B263B
#E63946
#F1FAEE
#1D3557
#A8DADC
#F4A261
#240046
#7B2CBF
#E0AAFF
スマートクール
先進性や合理性を感じさせる、機能美を重視したスマートクールスタイルを表現した配色。
寒色系を中心としたクリアな色彩を組み合わせることで、未来的で洗練されたテクノロジー感のある雰囲気を演出する。
刃物などが鋭く切れ味のよいさま
感覚がすぐれているさま
映像などが鮮明なさま
#2C2C54
#706FD3
#FF5252
#14213D
#FCA311
#E5E5E5
#0B3C5D
#328CC1
#D9E8F5
感情的な温かみを抑えたさま
人工的・機械的な印象を与えるさま
装飾性を抑えた冷たい雰囲気
#1B1F23
#3D5A80
#98A8A8
#262B30
#6B8CA3
#A38C6B
#2C3333
#4F5D5D
#A5B1B1
過去の慣習に縛られず、新しい価値や最先端の技術を体現しているさま
#1B263B
#3DDC97
#FF6B6B
#111827
#22D3EE
#A78BFA
#2E1065
#6D28D9
#C4B5FD
最小限の
必要最低限
ごくわずかな
無駄な装飾を省いたシンプルなデザイン
#2E4057
#66A182
#C4A69F
#263238
#80CBC4
#FFAB91
#0A0A0A
#3A3A3A
#E5E5E5
人の姿や行動がきびきびとして勇ましく、見る人にさわやかな印象を与えるさま
#1E1B4B
#4ADE80
#818CF8
#1976D2
#4DB6AC
#FFF176
#022C22
#065F46
#6EE7B7
エレガントクール
高級感や気品を感じさせる、落ち着きと格調を備えたエレガントクールスタイルを表現した配色。
深みのあるダークカラーや上質感のあるアクセントカラーを組み合わせることで、洗練された優雅な雰囲気を演出する。
階級や地位、程度や品質が高くすぐれているさま
#14213D
#5F0F40
#E5E5E5
#111827
#60A5FA
#FBBF24
#081C15
#1B4332
#52B788
物音ひとつなく静まり返っていること
ひっそりとして寂しいさま
#1B4965
#5C6B73
#3A5A40
#1C2833
#3A5A7A
#7A6A3A
#1B4332
#2D6A4F
#95D5B2
態度や雰囲気がきりっと引き締まっている様子
気品があり、強さや芯のある感じがすること
寒さなどが身にしみるほど厳しい様子
#004D40
#40004D
#4D4000
#3D5A80
#EE6C4D
#293241
#1B263B
#415A77
#778DA9