モダン
デザインの雰囲気は、色や質感の組み合わせで大きく変わる。
スタイルの概要
モダンスタイルの意味や印象、デザイン全体に広がる雰囲気から、その特徴を読み解く。
モダン*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
洗練されていて無駄がないさま
機能性と美しさを兼ね備えたさま
知的で現代的な印象を与えるさま
#2C3E50
#5DADE2
#A3CB38
#334155
#22C55E
#38BDF8
#1E3A5F
#4A6FA5
#B7C9E2
中立的
中間的
偏りのない
いずれにも片寄らないさま
#2F3438
#BFD0A3
#A3B2D0
#495057
#ADB5BD
#F08080
#FAFAFA
#E0E0E0
#9E9E9E
独特のしつこさやあざとい性質がなくなるさま
#202020
#3155A6
#D56B70
#30343B
#4978B8
#D28A4A
#30343B
#59636D
#8CAFC8
ナチュラルモダン
自然の温もりと現代的な洗練を兼ね備えた、心地よく穏やかな配色。
ベージュやアースカラーを基調にまとめることで、やさしい落ち着きと開放感を演出し、自然体で上質な空間に仕上がる。
肩の力が抜けた、親しみやすく落ち着いた雰囲気を表現するさま
#61745B
#C5A77B
#708FA0
#8EA38A
#708D99
#C47559
#70876D
#8E9D73
#C2CCB9
態度や気持ちなどが静かでのどかなさま
#9A91B0
#91A68F
#C8B18D
#718C9A
#98AA92
#D3A18D
#817A9A
#A49DB5
#D0CBD9
飾り気がなくありのままなさま
#58694F
#B4875E
#708B99
#705444
#78816A
#607D91
#9D5F4B
#B97B61
#D9B29C
人柄や雰囲気などに、思いやりや優しさ、愛情が感じられること
心が和むような、じんわりとしたぬくもりがあること
冷たくも熱くもない、心地よく程よい状態であること
#C76B50
#C5A34A
#607F91
#C9784C
#4F8882
#4A6178
#96704F
#B78B60
#D7BE9D
ラグジュアリーモダン
華やかさと気品を感じさせる、上質で洗練された高級感あふれる配色。
ブラックやゴールド、深みのあるカラーを基調にまとめることで、優雅さと存在感を演出し、格調高くラグジュアリーな空間に仕上がる。
品質がすぐれているさま
#292D32
#356C68
#C9B889
#1A2C47
#367D78
#B56F4E
#44362F
#71594B
#A58D7A
階級や地位、程度や品質が高くすぐれているさま
#172F2A
#5A426E
#A9824C
#30263A
#4C658F
#B9904D
#542E38
#79424C
#AA747C
落ち着いて気品のあるさま
優美で洗練されたさま
#685B78
#84987F
#D2BD91
#263A59
#66879B
#B96E7A
#6D6383
#9389A3
#C7C0D0
どっしりしているさま
態度や人柄、外見などが重々しく落ち着いているさま
#282A2D
#344B68
#956E45
#3D302A
#656B4B
#4B6671
#203A32
#345349
#63766A
クールモダン
都会的なシャープさと洗練された雰囲気を感じさせる、スタイリッシュな配色。
グレーやブラック、寒色系のカラーを基調にまとめることで、知的で引き締まった印象を演出し、モダンで都会的な空間に仕上がる。
知識や知性の豊かなさま
#1E304A
#397A78
#B59A4A
#263F3A
#52728E
#A8754F
#292D33
#505A65
#9BA4AC
刃物などが鋭く切れ味のよいさま
感覚がすぐれているさま
映像などが鮮明なさま
#132743
#9DB5B2
#F2D096
#0F4C81
#FFB703
#2A9D8F
#2C2C54
#474787
#AEA1FF
洗練されていて格好よいさま
無駄がなくスマートな印象を与えるさま
#17191C
#315BB2
#D5793E
#1D304B
#34868A
#C86667
#4B3D73
#6B5A9B
#A9A0C4
アートモダン
個性的な色使いと自由な発想を取り入れた、感性豊かで印象的な配色。
鮮やかな色やコントラストの効いた色をアクセントに取り入れることで、遊び心と創造性を演出し、個性が際立つスタイリッシュな空間に仕上がる。
人や物事が、ほかとは異なる独特な性質が目立つさま
#60449A
#D67A3D
#61904F
#287B7C
#5C965B
#D76861
#A94F4C
#C96A68
#E0A39B
趣向*しゅこう
/ 味わいや面白みがでるるように工夫することや発想などがきわだって新しいさま
#121416
#2764D8
#A7C63A
#25282D
#6849A7
#D5B63D
#216E78
#318D94
#6CB7BA
心に強く刻まれること
人に深い余韻を与えること
#172C4A
#D66B63
#C2A03F
#191A1C
#3C68A4
#D27C3E
#71383D
#974C53
#C27B81
色や形があざやかではっきりしているさま
#246BCE
#E3B72F
#D94D79
#704EB0
#3975BE
#E1B735
#B93E69
#D34F7C
#EB86A4