モダン
モダン*modern
現代的で洗練されたさま
今風であるさま
装飾を抑え機能美を重視したデザイン
特徴
シンプルで洗練された雰囲気
都会的やミニマルらしさを強調
代表的な色
#2E2E2E チャコールグレー
#BDC3C7 シルバーグレー
#F5F7F8 クールホワイト
#4A6FA5 スチールブルー
#3EB489 ミントグリーン
避けたい色
ショッキングピンク
ビビッドオレンジ
ゴールドイエロー
高彩度の色はポップで華やかな印象が強くなり、モダン特有の洗練された雰囲気を損ないやすい。
彩度
中〜低
落ち着いた印象を与える
清潔感や上品さを演出する
明度
中〜高
明るく開放的な印象
空間や余白の美しさを演出
配色のコツ
黒やグレー、白、ベージュなどをベースに配色
アクセントに光沢や質感のある素材を加えると、より洗練されたシックな雰囲気になる
異なる質感を組み合わせることで立体感を演出する
活用シーン
・企業・オフィス
・IT・テクノロジー企業
・商業施設・ショップ
・カフェ・ホテル
・マンション・住宅
など
活用例
・コーポレートサイト
・ブランドサイト
・パンフレット・カタログ
・広告・販促ツール
・プレゼンテーション資料
など
関連キーワード
モダンなイメージに共通する「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
シンプルモダン
無駄を省いた美しさと洗練された印象を感じさせる、都会的で上品な配色。
モノトーンや落ち着いた中間色を基調にまとめることで、すっきりとした清潔感と機能美を演出し、飽きのこないスタイリッシュな空間に仕上がる。
単純なさま
飾り気やむだなところがなく簡素なさま
#334155
#F97316
#06B6D4
#2D3142
#EF8354
#BFC0C0
#00796B
#26A69A
#B2DFDB
独特のしつこさやあざとい性質がなくなるさま
#111827
#8B5CF6
#14B8A6
#344E41
#F2CC8F
#E07A5F
#111827
#374151
#6B7280
洗練されていて無駄がないさま
機能性と美しさを兼ね備えたさま
知的で現代的な印象を与えるさま
#2C3E50
#5DADE2
#A3CB38
#334155
#22C55E
#38BDF8
#1E3A5F
#4A6FA5
#B7C9E2
中立的
中間的
偏りのない
いずれにも片寄らないさま
#2F3438
#BFD0A3
#A3B2D0
#495057
#ADB5BD
#F08080
#FAFAFA
#E0E0E0
#9E9E9E
ナチュラルモダン
自然の温もりと現代的な洗練を兼ね備えた、心地よく穏やかな配色。
ベージュやアースカラーを基調にまとめることで、やさしい落ち着きと開放感を演出し、自然体で上質な空間に仕上がる。
物音ひとつなく静まり返っていること
ひっそりとして寂しいさま
#22313F
#A3E4D7
#F1948A
#3A3F58
#F2CC8F
#8FF2D6
#303236
#626973
#B3BBC4
遠慮深く控えめであるさま
#434C5E
#81A1C1
#B48EAD
#4A5568
#F7B2AD
#A0D6B4
#5B5F97
#7A7EC2
#9B9FE3
知識や知性の豊かなさま
#273746
#9B59B6
#F39C12
#1C2833
#F5B041
#117864
#16A085
#1ABC9C
#149174
感情や本能に左右されず論理的に物事の道理を判断するさま
#2E4057
#A3CB38
#F97F51
#283747
#F1C40F
#E74C3C
#1B263B
#415A77
#778DA9
ラグジュアリーモダン
華やかさと気品を感じさせる、上質で洗練された高級感あふれる配色。
ブラックやゴールド、深みのあるカラーを基調にまとめることで、優雅さと存在感を演出し、格調高くラグジュアリーな空間に仕上がる。
知性がある
賢い
#0A3D62
#FF6B6B
#FFD93D
#2A9D8F
#B41F3A
#B48B1F
#1F3B4D
#3A5C73
#577A92
都市的で洗練された雰囲気をもつさま
現代的でスマートな印象を与えるさま
流行に乗ったオシャレな身なりであるさま
#34495E
#1ABC9C
#E67E22
#0B132B
#5BC0BE
#FDE74C
#2C3E50
#7F8C8D
#BDC3C7
クールモダン
都会的なシャープさと洗練された雰囲気を感じさせる、スタイリッシュな配色。
グレーやブラック、寒色系のカラーを基調にまとめることで、知的で引き締まった印象を演出し、モダンで都会的な空間に仕上がる。
現在の時代や社会の風潮・感覚にふさわしいさま
#1B263B
#E63946
#2A9D8F
#3D405B
#F2CC8F
#81B29A
#2A2D34
#555A64
#8A8F99
感情に左右されず落ち着いているさま
#34495E
#1ABC9C
#E67E22
#2C3E50
#E74C3C
#9B59B6
#7F8C8D
#95A5A6
#636E72
刃物などが鋭く切れ味のよいさま
感覚がすぐれているさま
映像などが鮮明なさま
#132743
#9DB5B2
#F2D096
#0F4C81
#FFB703
#2A9D8F
#2C2C54
#474787
#AEA1FF
細部にいたるまで正確な寸法で作られているさま
#1E293B
#FACC15
#8B5CF6
#1A535C
#4ECDC4
#FF6B6B
#154360
#1F618D
#5DADE2
その時々の状況に応じてすばやく判断し行動するさま
#264653
#2A9D8F
#E9C46A
#334155
#F87171
#22D3EE
#264653
#3C6B84
#5390A0
室内装飾などで、スチールやガラス、コンクリートなどを用いた無機的で冷たい印象を与えるデザイン
#0A0A0A
#007BFF
#FF007B
#1E293B
#818CF8
#22D3EE
#0F3D5E
#195080
#336699
ミニマルモダン
必要最小限の要素で美しさを表現する、シンプルで機能的な配色。
ホワイトやライトグレーを基調にまとめることで、余白を活かした開放感と静けさを演出し、洗練されたミニマルな空間に仕上がる。
最小限の
必要最低限
ごくわずかな
無駄な装飾を省いたシンプルなデザイン
#2E2E2E
#FFD93D
#4D96FF
#283149
#F25F5C
#FFE066
#1C1C1C
#555555
#AAAAAA
感情的な温かみを抑えたさま
人工的・機械的な印象を与えるさま
装飾性を抑えた冷たい雰囲気
#A5A5A5
#5AA6C1
#FFF0F6
#3E4348
#6F9A8A
#9A6F84
#D9D9D9
#AFAFAF
#7F7F7F
目的に応じて合理的に設計されているさま
無駄がなく使いやすいさま
#0FF0FF
#FF0F0F
#F0FF0F
#00FFCC
#CC00FF
#FFCC00
#0F0F3F
#1F1FBF
#3F3FFF
鋭くとがっていること
考えや行動などが急進的で過激であるさま
#141414
#7B61FF
#00F0FF
#0B132B
#00EFB0
#FF6B6B
#B03EFF
#D38CFF
#6A1FA0