ソフト
デザインの雰囲気は、色や質感の組み合わせで大きく変わる。
スタイルの概要
ソフトスタイルの意味や印象、デザイン全体に広がる雰囲気から、その特徴を読み解く。
ソフト*softとは
・感触や印象などが優しく、柔らかなさま
・やさしく穏やかな雰囲気を演出する
・柔らかく安心感のある印象を与える
配色のバランス
ソフトスタイルを形づくる代表的な色と、それぞれが与える印象の関係から全体像を捉える。
#F8C8DC パウダーピンク
#D6EAF8 スカイミスト
#F5E6DA ミルキーベージュ
#E6D8FF ライトラベンダー
#DFF5E1 ペールミント
#000000 ブラック
#FF2D2D ビビッドレッド
#00A3FF ブルー
鮮やかな色は、明るくポジティブでエネルギッシュな印象を強め、セクシー特有の艶やかさやミステリアスな雰囲気、大人らしい深みや落ち着きといったニュアンスがやや伝わりにくくなる。
低〜中
落ち着いた印象を与える
穏やかさを演出する
中〜高
軽やかで温かみのある印象を与える
ふんわり感を演出する
配色と展開
配色の考え方を起点に、実際の使われ方やデザインへの広がりへとつながる。
トーン
やさしく淡い色合いで、穏やかで安心感のある印象を与える。
ベースカラー
パステルピンク、ベージュ、ライトグレーなど柔らかい色を使用する。
サブカラー
ホワイトや同系色で全体をふんわりまとめる。
アクセントカラー
くすみカラーを少量加え、優しい変化をつける。
素材・質感
コットンやニットなど柔らかく温かみのある質感を使用する。
活用シーン
・コスメ・フレグランス
・ファッション・アパレル
・ジュエリー・ランジェリー
・ナイトシーン・イベント
・カフェ・レストラン
など
活用例
・ブランドサイト
・ECサイト・商品ページ
・ランディングページ（LP）
・広告・プロモーション制作
・カタログ・販促ツール
など
関連キーワード
ソフトに関連する「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
ナチュラルソフト
自然体で無理のない、落ち着きと親しみやすさを感じさせるスタイルを表現した配色。
グリーンやアースカラー、ベージュなどの自然由来の色彩を組み合わせることで、穏やかで心地よい雰囲気を演出する。
無理に頑張ったりせず、体や心がありのままの状態でいること
適度な緊張感を保ちつつ、無駄な力が抜けている状態
#A8D5BA
#D5A8A8
#A8BFD5
#A7C9B8
#C9A7B2
#C9BFA7
#CDE4D6
#A8D5BA
#86C9A2
態度や気持ちなどが静かでのどかなさま
#9FB7A4
#A8A2C2
#CBB6A2
#9FB4C6
#C7A5B3
#C8BFA4
#C7D6D2
#A7BDB8
#879F99
身体や物質が柔らかく、しなやかなこと
#8FC8B8
#C8B88F
#B88FC8
#C2D5A8
#A8C2D5
#D5A8B8
#F2D9CF
#E5B8A8
#D39A87
危険や不安がなく、心が安らかで落ち着いている状態
#A8C7B0
#B3A6D9
#F4C8A6
#A7D1C0
#F5D6B5
#E5C4EC
#E6EEF2
#BDD3DE
#7FA2B5
ミルキーソフト
ミルクのようにまろやかで、やさしく包み込むような柔らかい印象のスタイルを表現した配色。
クリームやベージュ、くすみピンクなどのやわらかな色彩を組み合わせることで、あたたかく落ち着いた雰囲気を演出する。
あたたかみ
#F4B8A8
#A8D6C3
#C4B3E6
#F4B49E
#9EC7E8
#A9D9C5
#F4E1CF
#E9C8A8
#DDB38F
まろやかなさま
物事の程度や人の性質・態度などが穏やかなさま
#E8C7E6
#C7E8CF
#E8DFC7
#C9B3A9
#A9C9C1
#A9B4C9
#EFE4D6
#DDC9AE
#BFA487
他人に対して思いやりがあるさま
上品で美しいさま
理解や習得がしやすいさま
#EAC7E6
#C9E5E1
#F3E3B9
#F6C1A6
#A6F6E1
#A6C9F6
#F0F6EC
#D9E9D0
#BBD8AC
態度や人柄が優しくて穏やかなさま
#F1C6A8
#A8D8D0
#C6B6E8
#B6D1C8
#D1B6C0
#D1CBB6
#E3EEF5
#C6DCE8
#A8C9DB
パステルソフト
無邪気さや愛らしさを感じさせる、ふんわりとしたやさしい印象のパステル調スタイルを表現した配色。
ピンクやイエロー、水色などの明るく淡い色彩を組み合わせることで、軽やかでやわらかな雰囲気を演出する。
粉末状の顔料を粘着剤で固めた、チョークのような棒状の画材
パステルカラーは、純色*彩度の高い色に白を混ぜた、彩度が低く明度が高い、柔らかく淡い色調の色の総称
#FFB3BA
#BAFFC9
#BAE1FF
#FFF0CC
#CCFFF0
#E0CCFF
#D1FFE4
#A1FFCC
#70FFB3
（色・味・香りなどが）薄い
（光・形などが）ぼんやりしている
#FFE0B2
#B2FFE0
#E0B2FF
#FFF2B2
#B2FFF0
#B2D9FF
#F8C9D4
#F3AFC0
#E996B0
物の形が細く小さいこと
ほっそりとして優美なさま
感情や感覚がこまやかなこと
#FDEBD0
#D0FDEB
#EBD0FD
#FADADD
#DDFAD9
#DDDDFA
#F6E8F6
#EECFF0
#E6B8E9
味などが洗練されていて品質のよいさま
言動や顔つきなどに品格のあるさま
#C9B6E4
#B6E4D2
#E4D2B6
#B2C7D8
#D8B2C7
#D8C7B2
#DAD0E0
#BFB3CC
#A699B8
エアリーソフト
空気のように軽やかで、抜け感と透明感を感じさせるやさしいスタイルを表現した配色。
ブルーやラベンダー、ペールトーンなどの淡い色彩を組み合わせることで、風通しのよい軽快な雰囲気を演出する。
空気のような
風通しの良い
軽快なさま
ふんわりとした
#A8D8EA
#F7C6D9
#CFE8C6
#FFE4B8
#B8E4FF
#FFB8E4
#E3F2FD
#C5E4F9
#A7D7F5
柔らかくて軽そうな印象を受けるさま
#F4E1C8
#C8F4E8
#E8C8F4
#FFDCE6
#DCE6FF
#E6FFD8
#DFF7EF
#B6EEDC
#89E2C7
見るからに軽そうなさま
心が晴れ晴れするような
軽く弾むようなさま
#A8D8EA
#F9C6D3
#CDEAC0
#FFD8A8
#A8FFDB
#A8B8FF
#D6F3FF
#B8E7FF
#93D6F0
物体が澄みきって透き通っている様子
透き通るような清らかな印象
純粋で濁りのないさま
#BDECC9
#F7C9B1
#B1BDF7
#C3E0E5
#F5A9A9
#F0E68C
#D9F0FF
#AEE1F7
#82D2EF
（光・音・香りなどが）わずかに感じられるさま
はっきりしないさま
#FFE6CC
#CCE6FF
#E6CCFF
#FFF5DD
#DDFFF5
#FFE6DD
#FFE6CC
#FFF2D9
#FFF9E6
ライトソフト
明るさと軽やかさを感じさせる、すっきりとしたやさしい印象のスタイルを表現した配色。
ホワイトやペールブルー、淡いピンクなどの軽い色彩を組み合わせることで、爽やかで明るい雰囲気を演出する。
ふんわりとして弾力性がある
#EFB6D6
#D6EFB6
#B6D6EF
#F4D3A1
#A1F4F0
#A1B7F4
#FFF1D9
#F8D9A8
#EFC885
表面に引っ掛かりがなく、つるつるしているさま
#F6B8C4
#B8F6E3
#C4B8F6
#F2DCC6
#C6D4F2
#C6F2E2
#FAD6E0
#F4AFC4
#E889A8
動きやようすがなめらかで柔らかなさま
たおやかで優美なさま
#F5D2A8
#A8F5D2
#D2A8F5
#F2C6A8
#A8C8F2
#A8F2CF
#E3D6F8
#C5A8F0
#A77AE8