クリア
デザインの雰囲気は、色や質感の組み合わせで大きく変わる。
クリア*clearは、透明感があり、すっきりとした印象を持つスタイル。
スタイルの概要
クリアスタイルの意味や印象、デザイン全体に広がる雰囲気から、その特徴を読み解く。
クリア*clearとは
・澄んでいるさま
・透き通っているさま
・すっきりと洗練された雰囲気を演出する
・透明感のあるクリーンな印象を与える
配色のバランス
クリアスタイルを形づくる代表的な色と、それぞれが与える印象の関係から全体像を捉える。
#FFFFFF ピュアホワイト
#DFF6FF アイスブルー
#00CFFF クリスタルブルー
#DFF3F7 ミストブルー
#E6EDF2 ソフトシルバー
ダークブラウン
バーガンディ
ネオンピンク
重厚感や濁りのある印象が強くなり、クリア特有の透明感や清潔感、軽やかさが薄れやすい。
中〜高
透明感のある印象を与える
すっきりとした印象を演出する
高め
明るく澄んだ印象を与える
清潔感や軽やかさを演出する
配色と展開
配色の考え方を起点に、実際の使われ方やデザインへの広がりへとつながる。
トーン
明るく透明感のあるトーンでまとめることで、すっきりと洗練された雰囲気を演出する。
ベースカラー
ホワイトやアイスブルーを中心に使い、清潔感と澄んだ印象を与える。
サブカラー
ライトグレーや淡いブルーを加えて、全体に軽やかな統一感を出す。
アクセントカラー
シルバーやクリアカラーを少量取り入れ、クールさと透明感をプラスする。
素材・質感
ガラスやアクリル、ツヤのある素材を活かし、クリアな世界観を強調する。
活用シーン
・化粧品・スキンケア
・美容サロン・エステ
・医療・クリニック
・飲料・ミネラルウォーター
・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％・アクセントカラー5％・サブカラー25％」を目安にすると、バランスの取れた配色にまとめやすい。
ここでは、視覚的に理解しやすいよう「ベースカラー70％・アクセントカラー10％・サブカラー20％」の比率を基準としている。
ベースカラー: 70%
背景や余白など、最も広い面積に使用する基本色。全体の雰囲気やトーンを決定づける。
#D9D9D9
アクセントカラー: 10%
視線を集めたい部分に使う強調色。ボタンや見出しなどに用い、デザイン全体を引き締める。
#FF6B6B
サブカラー: 20%
ベースカラーを補完し、全体の印象を整える補助色。デザインに奥行きや安定感を与える。
#7FB3FF
クリスタルクリア
透明感や澄み切った美しさを感じさせる、ピュアで洗練された雰囲気の配色。
淡いブルーやホワイトを中心に構成することで、水晶や澄んだ空気を連想させ、上品で透明感のあるデザインを演出できる。
物体が澄みきって透き通っている様子
透き通るような清らかな印象
純粋で濁りのないさま
#8EDBFF
#C7A6FF
#A8F7D8
#E0F7FA
#F8BBD0
#FFE082
#E6F9FF
#AEEBFF
#5FD4FF
水や空気などに濁りがなくなり透きとおった状態になるさま
光や色などに曇りがなくはっきり見えるさま
#00BFFF
#7CFC00
#FF6EC7
#81D4FA
#FF8A80
#FFD180
#E0F7FA
#80DEEA
#00ACC1
濁りや雑音がなく、清らかなさま
#DDF4FF
#FFF6D9
#F4E9FF
#DDF4FF
#FFECD8
#FFF7D9
#F4FBFF
#DDF4FF
#B8E8FF
光を受けて明るく輝き、透明感や華やかさを感じさせるさま
#DDF4FF
#FFF6D9
#F4E9FF
#DDF4FF
#FFECD8
#FFF7D9
#F4FBFF
#DDF4FF
#B8E8FF
クリーンクリア
清潔感や純粋さを感じさせる、爽やかで信頼感のある配色。
ホワイトや淡いブルーを基調とすることで、衛生的で整った印象を与え、医療や美容、ライフスタイル関連のデザインに適している。
涼しくて爽やかに感じるさま
#98FF98
#D898FF
#98D8FF
#B2EBF2
#FFABAB
#FFD6A5
#F5F7FA
#5C6BC0
#1A237E
けがれなく澄みきって美しいさま
よごれやにごりがなく澄んでいるさま
#4CC9F0
#F72585
#B8F2E6
#80FFDB
#FF6B6B
#FFD166
#E3F2FD
#90CAF9
#1E88E5
心や行いがきれいなさま
清潔でよごれのないさま
#FFFFFF
#AEEFFF
#C6F6D5
#FFFFFF
#CFF7A1
#F7A1D1
#F6F4FF
#DCD4FF
#B9A8FF
けがれがなく純真なさま
うぶで世間ずれしていないさま
#C7F9F4
#FFDDE2
#DCD6F7
#C1F0F6
#FF8C69
#FFF1B8
#FBF7FF
#E7DBFF
#C7B4FF
クールクリア
涼しさや清涼感を感じさせる、すっきりとした爽快な雰囲気の配色。
ブルーやアクアカラーを中心に構成することで、ひんやりとした心地よさを表現し、夏向けのデザインや飲料・化粧品関連との相性が良い。
温度や湿度がほどよく気持ちがいいさま
少し冷たくてひんやりとしたさま
#4CC9F0
#90F1EF
#D0B3FF
#6A5CFF
#5CFF6A
#FF6A5C
#B2EBF2
#80DEEA
#4DD0E1
さわやかで気持ちがよく感じるさま
#4CC9F0
#72EFDD
#CDB4DB
#57CC99
#FFB703
#FB8500
#A0E6FF
#4DD0E1
#00B8D9
冷たさを感じさせる、涼しく爽やかな印象のさま
#4A90E2
#8BC34A
#FFB74D
#5A7D9A
#F4C27A
#C8A2D8
#F5FCFF
#D8F3FF
#A8DFFF
輪郭がはっきりとしており、引き締まった印象を与えるさま
#5A7D9A
#E6E6E6
#AFC7D8
#6FAED9
#F0D6A2
#CDB6E9
#EDF5FA
#BFD4E3
#5A7D9A
フレッシュクリア
みずみずしさや若々しさを感じさせる、生き生きとした明るい雰囲気の配色。
ミントグリーンやライトブルーなどの爽やかな色を取り入れることで、新鮮さや活力を表現し、食品や健康、美容関連のデザインに適している。
つやがあって若々しく新鮮であるさま
#5BD6FF
#6CFFB8
#B88CFF
#6AC8FF
#FFDA6A
#FF9A6A
#E8FFF8
#A6F5DD
#4FE0B8
年齢よりも若く見えるさま
新人のような初々しさがあるさま
心身に活気や新鮮さがあふれているさま
#3A86FF
#8338EC
#FFBE0B
#0096C7
#FF7096
#FFD6A5
#F1FAEE
#A8DADC
#457B9D
魚や肉、野菜などが新しくて、生き生きとしているさま
よごれがなくきれいなさま
#33CCFF
#FF33CC
#CCFF33
#66FFCC
#FF6666
#FF9900
#F5FFF0
#DFF7D0
#BEEAAB
生命力や活気にあふれ、みずみずしく元気な印象を与えるさま
#BFF7D6
#FFF5B8
#CFE5FF
#BFF7D6
#FFE7B8
#DFFFD6
#F5FFF8
#BFF7D6
#74D99B
エアリークリア
開放感や軽やかさを感じさせる、やわらかく伸びやかな雰囲気の配色。
高明度のブルーやホワイトを中心に構成することで、空や風を思わせる広がりを演出し、ナチュラルなデザインやライフスタイル関連との相性が良い。
制約や抑圧から解き放たれ、心が軽くなる安心感や爽快感
#BFEAFF
#FFF3B8
#FFD9E8
#BFEAFF
#FFE7C2
#FFF6C7
#EAF7FF
#BFE6FF
#8FD2FF
わだかまりがなく気持ちのよいさま
よけいなものがないさま
#4DD0E1
#AED581
#FFD54F
#29B6F6
#FFD54F
#FF7043
#D5F7B5
#AEE46E
#7BC12E
見るからに軽そうなさま
心が晴れ晴れするような
軽く弾むようなさま
#FFD9A0
#A0C0FF
#C0FFA0
#A0FFD9
#FFA0B0
#FFD9A0
#FFE0B2
#FFB870
#FF8A3F
軽々としていて動きのすばやいさま
気持ちが軽やかであるさま
#06D6A0
#FFD166
#EF476F
#14B8A6
#E879F9
#FDE68A
#FFF3B0
#FFD93D
#FFC107
力を入れすぎず、軽やかで自然な余裕を感じさせるさま
#EAF8FF
#FFF8E5
#EAF6EE
#EAF8FF
#F9F4E8
#EEF8EA
#FAFDFF
#DCEFF8
#B8DCEE