PR

イメージから選ぶ配色パターン集|シックな色合わせ

シック


シック*chic
上品で洒落ているさま

特徴
落ち着いた大人の雰囲気
クールさや洗練らしさを強調

代表的な色
#36454F チャコールグレー
#8B8589 トープ
#4B3621 ダークブラウン
#708090 スレートグレー
#C1B6A4 スモーキーベージュ

避けたい色
 ビビッドピンク
 ビビッドイエロー
 アクア

高彩度で主張が強い色は、重厚感や濁りのある印象を生みやすい。そのため、シックに必要な透明感・清潔感・軽やかさが弱まりやすい。

彩度
低〜中
落ち着きある印象を与える
都会的で洗練された印象を演出する

明度
中〜低
穏やかで落ち着いた印象を与える
落ち着いた高級感を演出する

配色のコツ
ブラック、ダークグレー、ブラウンをベースに配色

アクセントにボルドーやダークグリーンを加えると深みが出る

マットやウールなど質感を抑えた素材を活かすとシックになる

活用シーン
化粧品・スキンケア
コスメのパッケージデザイン
スキンケア商品の広告バナー
ブランド公式サイト
など

美容サロン・エステ
サロンのWebサイト
予約・顧客管理システム
店舗パンフレット・チラシ
など

医療・クリニック
クリニックのWebサイト
院内案内パンフレット
予約・問診システム
など

飲料・ミネラルウォーター
ボトルパッケージデザイン
商品広告・ポスター
ブランド公式サイト
など

ファッション・アパレル
アパレルブランド公式サイト
ECサイト商品ページ
シーズンキャンペーン
など

関連キーワード

シックなイメージに共通する「20」のキーワードをもとに、それぞれの雰囲気を際立たせる3色の配色パターンを一覧で紹介。

「シック」という言葉から連想するイメージは人それぞれ。似た意味のキーワードでも、選ぶ言葉によって微妙に異なる雰囲気や世界観を表現できる。

ぜひ、ご自身のイメージに近いキーワードを探しながら、用途やデザインに合わせてブラッシュアップ*brush up
/ 既にあるものを磨き上げてさらに良いものにすること
し、配色選びの参考にしてください。

基本の配色テクニック

ここに記している配色は、個人的な見解で組み合わせたものです。配色のバランスによって印象は大きく変わるため、すべてのデザインに当てはまるとは限りません。

トライアド

トライアド*triadとは、色相環上で正三角形を描く位置にある3色配色。

「トライアド」とは、音楽の三和音*3つの音が3度ずつ積み重ねられてできた和音(コード)のことに由来する名称で、変化がありながらもバランスが良く、安定感と華やかさを兼ね備えた配色となる。

スプリットコンプリメンタリー

スプリット・コンプリメンタリー*split complementary
分離補色
とは、補色の片方を隣接色に分離した3色配色。

スプリットとは、「分割する・分離する」を意味し、補色配色よりもコントラストをやわらげつつ、配色に変化とバランスを与えられる。

トーンオントーン

トーン・オン・トーン*tone on toneとは、「トーンを重ねる」を意味し、同じ色相や隣接した色相で全体をまとめ、明度差を大きくした多色配色。

色相の印象を強調しつつ統一感を保ち、明度差によって変化をつけられるため、バランスがとりやすく穏やかな印象になる。また、明度差を活かすことで立体的な効果を演出することも可能である。

また、3色の配色は「どの色を主役にするか」「どの順で配置するか」によって印象が大きく変わる。

同じ3色でも、主役となる色を明るく見せるか、あるいは背景として引き立てるかによって、全体の雰囲気は華やかにも落ち着いた印象にも変化する。

そのため、色の配置順や面積バランスを入れ替えながら、最も意図に合った見え方を調整することが重要である。

配色パターンA

ベースカラー
 #D9D9D9

アクセントカラー
 #FF6B6B

サブカラー
 #7FB3FF

配色パターンB

ベースカラー
 #FF6B6B

アクセントカラー
 #7FB3FF

サブカラー
 #D9D9D9

配色パターンC

ベースカラー
 #7FB3FF

アクセントカラー
 #D9D9D9

サブカラー
 #FF6B6B

配色比率

配色の印象は、色の組み合わせだけでなく使用する面積比率によっても大きく変わる。一般的には「ベースカラー70%・アクセントカラー5%・サブカラー25%」を目安にすると、バランスの取れた配色にまとめやすい。

ここでは、視覚的に理解しやすいよう「ベースカラー70%・アクセントカラー10%・サブカラー20%」の比率を基準としている。

配色比率

ベースカラー: 70%
 背景や余白など、最も広い面積に使用する基本色。全体の雰囲気やトーンを決定づける。
 #D9D9D9

アクセントカラー: 10%
視線を集めたい部分に使う強調色。ボタンや見出しなどに用い、デザイン全体を引き締める。
 #FF6B6B

サブカラー: 20%
ベースカラーを補完し、全体の印象を整える補助色。デザインに奥行きや安定感を与える。
 #7FB3FF

デザイン配色の基本|70:25:5の黄金ルール
デザイン配色の基本となる「70:25:5」の黄金ルールを解説。ベースカラー・メインカラー・アクセントカラーの役割や、バランスよく美しく見せる配色のコツを紹介します。

ナチュラルシック

自然の温もりと落ち着きを感じさせる、やさしく穏やかな雰囲気の配色。

アースカラーやくすみグリーン、ベージュを中心に構成することで、木々や土のぬくもりを連想させ、リラックス感と上質さを両立したデザインを演出できる。

質素

飾りけがないさま
生活などがぜいたくでなく、つつましくて倹約*けんやく
/ 無駄遣いをしないで出費をできるだけ減らすこと
なさま

トライアド

#3E3E3E
#7A6F5A
#5A7A6F

スプリットコンプリメンタリー

#3F4E4F
#A27B5C
#DCD7C9

トーンオントーン

#3A2F28
#5B4A3F
#8A7868

控えめ

言動を遠慮がちに振る舞うさま
量や程度を少なめにするさま

トライアド

#4B3F72
#72824B
#B2724B

スプリットコンプリメンタリー

#6D5757
#576D57
#57576D

トーンオントーン

#5C5C5C
#727272
#888888

落ち着き

態度や言動が穏やかであるさま
安定した状態になるさま
平静な状態になるさま

トライアド

#4B3832
#326B4B
#6B324B

スプリットコンプリメンタリー

#3A3A36
#7B6043
#3A607B

トーンオントーン

#44332E
#5C4C3F
#746556

ミニマル

最小限の
必要最低限
ごくわずかな
無駄な装飾を省いたシンプルなデザイン

トライアド

#2F2F33
#5F6C7B
#B8A999

スプリットコンプリメンタリー

#2B2D31
#9F7A5F
#6F8C7A

トーンオントーン

#2E343A
#6F7B86
#D6DBE0

エレガントシック

気品と華やかさを兼ね備えた、洗練された大人の雰囲気の配色。

くすみピンクやディープネイビー、ゴールド系を組み合わせることで、ドレスやジュエリーを思わせる上品で格調高いデザインを演出できる。

上品

味などが洗練されていて品質のよいさま
言動や顔つきなどに品格のあるさま

トライアド

#2B2B2B
#7B1F2F
#1F4E3A

スプリットコンプリメンタリー

#000000
#C07A7A
#40B5AD

トーンオントーン

#4C1F2B
#7B2B40
#A53A5B

格調高い

気品に満ちているさま
品格のあるさま

トライアド

#2B2D42
#030303
#A47148

スプリットコンプリメンタリー

#5A1E2D
#355070
#A68A64

トーンオントーン

#1E2A23
#3B4D3F
#6B7F6A

洗練

独特のしつこさやあざとい性質がなくなるさま

トライアド

#2E2E38
#5C7A6D
#BFAE9F

スプリットコンプリメンタリー

#4A2F3A
#C2A878
#5E7B8C

トーンオントーン

#263238
#546E7A
#B0BEC5

端正

姿や形や動作などが正しくてきちんとしているさま
顔だちが美しく整っているさま

トライアド

#2C3E50
#7B3F61
#8A7E66

スプリットコンプリメンタリー

#2D2F36
#6B7A8C
#8C6F5A

トーンオントーン

#4B4A45
#7A776F
#B5B1A6

アーバンシック

都会的でスタイリッシュな空気感をまとった、モダンな印象の配色。

グレーやブラック、メタリックカラーをベースに構成することで、コンクリートやガラスの質感を想起させ、スマートで洗練されたデザインを演出できる。

都会的

流行に乗ったオシャレな身なりであるさま

トライアド

#1F2A30
#5A4B3C
#3E5866

スプリットコンプリメンタリー

#2C313A
#607A8A
#8A6A60

トーンオントーン

#2C2A25
#4A453C
#6A6255

スマート

無駄がなく手際が良いさま
服装などが洗練されているさま
物や体が細いさま

トライアド

#1F2A44
#6B8E23
#B08D57

スプリットコンプリメンタリー

#3A3F45
#B08E6E
#4F6D7A

トーンオントーン

#1C1C1C
#3A3A3A
#6B6B6B

洒落た

気がきいている
あか抜けしている

トライアド

#3A2E39
#C06C84
#355C7D

スプリットコンプリメンタリー

#1C2541
#D4A373
#C1121F

トーンオントーン

#3C2F41
#5D3A66
#A267AC

クールシック

シャープで知的な印象を与える、凛とした雰囲気の配色。

ブルーグレーやアイスブルーを中心に構成することで、氷や金属のような冷たく澄んだ質感を表現し、理知的でクールなデザインを演出できる。

シャープ

刃物などが鋭く切れ味のよいさま
感覚がすぐれているさま
映像などが鮮明なさま

トライアド

#3A1C3D
#1F6F8B
#6C9A8B

スプリットコンプリメンタリー

#1B4D3E
#7B2D26
#BFA6A0

トーンオントーン

#4B4A45
#7A776F
#B5B1A6

クール

冷静なさま
冷ややかなさま
かっこいいさま

トライアド

#253A52
#5C6B73
#6B5A4E

スプリットコンプリメンタリー

#1E4A4F
#8C6F7A
#8C836F

トーンオントーン

#2C3A42
#4A5A63
#7A8A94

硬質

物質や素材の質が硬いこと

トライアド

#252B30
#704F3A
#3A4F70

スプリットコンプリメンタリー

#20252B
#6B3F4F
#6B6340

トーンオントーン

#2B1F23
#4A2F37
#7A5A63

凛とした

態度や雰囲気がきりっと引き締まっている様子
気品があり、強さや芯のある感じがすること
寒さなどが身にしみるほど厳しい様子

トライアド

#3E4A59
#E84118
#00CEC9

スプリットコンプリメンタリー

#2E2C3A
#FF9F1C
#9B5DE5

トーンオントーン

#34495E
#5D6D7E
#85929E

冷静

感情に左右されず落ち着いているさま

トライアド

#22313F
#C0392B
#2980B9

スプリットコンプリメンタリー

#34495E
#F1C40F
#8E44AD

トーンオントーン

#2A2433
#4B3F5C
#7A6F89

ダークシック

深みと重厚感のある、ミステリアスで高級感のある配色。

ブラックやダークブラウン、ボルドーを基調にすることで、夜や影を思わせる奥行きを生み出し、落ち着きと存在感のあるデザインを演出できる。

渋い

渋柿を食べたときなどの舌が、しびれるような味がする
派手でなく落ち着いた趣*おもむき
/ 物事や場所が持つ、独特の風情や味わい深い雰囲気
がある

トライアド

#344E41
#7F5539
#3D405B

スプリットコンプリメンタリー

#1B4332
#6D4C41
#5E60CE

トーンオントーン

#2F3B3B
#4B5656
#687373

地味

形や模様などに華やかさがなく目立たないさま

トライアド

#454545
#6A5A4E
#5A6A63

スプリットコンプリメンタリー

#7A6E64
#647A74
#74647A

トーンオントーン

#46423D
#625D56
#7D7870

堅実

確かであぶなげのないさま
手堅く確実なさま

トライアド

#2E2E2E
#5A4E7C
#7C5A4E

スプリットコンプリメンタリー

#383838
#A32D2D
#A38F2D

トーンオントーン

#2E2E2E
#565656
#8C8C8C

知的

知識や知性の豊かなさま

トライアド

#2C3E50
#8E44AD
#16A085

スプリットコンプリメンタリー

#243447
#A67C52
#8C4A3F

トーンオントーン

#22313F
#34495E
#5D6D7E