PR

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

ファンシー

デザインの雰囲気は、色や質感の組み合わせで大きく変わる。

スタイルの概要

ファンシースタイルの意味や印象、デザイン全体に広がる雰囲気から、その特徴を読み解く。

定義

ファンシー*fancyとは
・装飾的で趣向を凝らした、かわいらしく夢のあるさま
・おとぎ話や空想の世界を思わせるような、現実離れした雰囲気

特徴

・かわいらしく夢のある雰囲気を演出する
・装飾的で華やかな印象を与える

配色のバランス

ファンシースタイルを形づくる代表的な色と、それぞれが与える印象の関係から全体像を捉える。

代表色

#FFC0CB ベビーピンク
#AEC6CF スカイブルー
#98FF98 ミントグリーン
#E6E6FA ラベンダー
#FDFD96 パステルイエロー

避けたい色

 ブラック
 ブルーグレー
 ダークブラウン

ブラックやダークカラーを多用すると、ファンシー特有の軽やかさや夢のある印象が弱まりやすい。

彩度

中〜高

かわいらしく夢のある印象を与える
幻想的な雰囲気を演出する

明度

やわらかく明るい印象を与える
ふんわりとした雰囲気を演出する

配色と展開

配色の考え方を起点に、実際の使われ方やデザインへの広がりへとつながる。

配色のコツ

トーン
夢のように甘く可愛らしい色使いで、幻想的な世界観を作る。

ベースカラー
ピンク、ラベンダー、ミントなどパステルカラーを中心に構成する。

サブカラー
ホワイトでふんわりとした柔らかさを加える。

アクセントカラー
ラメカラーで魔法的な印象を強調する。

素材・質感
チュールやオーガンジーなど軽く幻想的な素材を使用する。

活用イメージ

活用シーン
・キッズ・ベビー
・キャラクター・アニメ
・雑貨・インテリア
・コスメ・美容
・スイーツ・カフェ
など

活用例
・Webサイト
・ランディングページ(LP)
・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」の黄金ルールを解説。ベースカラー・メインカラー・アクセントカラーの役割や、バランスよく美しく見せる配色のコツを紹介します。

ドリーミーファンシー

夢や空想の世界を思わせる、やさしく幻想的なドリーミースタイルを表現した配色。

淡いピンクやラベンダー、パステルブルーなどを組み合わせることで、ふんわりと優しく夢見心地な雰囲気を演出する。

夢幻的

夢や幻のようなさま
現実的ではないさま
夢か現実かはっきりしないさま

トライアド

#FF9AF3
#9AFFD8
#A0A3FF

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

#FFD9A5
#A5FFEE
#FFA5FF

トーンオントーン

#FFD9F5
#FFB3E6
#FF80D5

メルヘン

童話やおとぎ話のような世界観
夢と空想に満ちた幻想的なさま

トライアド

#FFB3D9
#B3FFD9
#D9B3FF

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

#FFD6E7
#A8E6CF
#AFCBFF

トーンオントーン

#FFE5F2
#FFC2E2
#FF99CC

ノスタルジック

どこか懐かしさを感じさせるさま
昔を思い出して郷愁*きょうしゅう
/ 故郷を離れている人が故郷を懐かしく感じる気持ち
/ 昔を思い出して懐かしく思う気持ち
を誘うさま

トライアド

#F4B6C2
#B8D8BA
#B9C7F5

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

#F7D6BF
#BFD8F7
#DCC8F7

トーンオントーン

#FFF1E8
#F8D9C4
#E8BFA6

ファンタジーファンシー

異世界や物語の世界を思わせる、幻想的で冒険心あふれるファンタジースタイルを表現した配色。

鮮やかなパープルやエメラルドグリーン、輝きを感じるアクセントカラーなどを組み合わせることで、神秘的で非日常的な雰囲気を演出する。

ファンタジック

現実離れした幻想的なさま
空想や物語の世界を思わせるさま

トライアド

#C79BFF
#9BFFD8
#FFD89B

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

#E8C6FF
#7ED6DF
#FFEAA7

トーンオントーン

#E9D5FF
#C8A2FF
#9B6DFF

異世界

現実の世界とは別の世界のこと
異国

トライアド

#FF9BD2
#6C5CE7
#00F5D4

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

#FFB3C1
#6A4C93
#4D96FF

トーンオントーン

#D8BBFF
#C77DFF
#9D4EDD

幻想的

現実から離れて、まぼろしの世界を夢見ているようなさま

トライアド

#FF9BD2
#9BD2FF
#D2FF9B

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

#FBC3FF
#B3FFF9
#FFD6B3

トーンオントーン

#E6B3FF
#CC66FF
#9900CC

フィクショナル

架空の
創作された

トライアド

#556BFF
#4BE0B5
#FF6FAE

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

#FFC857
#52B6FF
#9D7CFF

トーンオントーン

#EEE8FF
#B89DFF
#6B54E6

マジカルファンシー

魔法や奇跡を思わせる、不思議で華やかなマジカルスタイルを表現した配色。

きらめくピンクやミントグリーン、明るいパープルなどを組み合わせることで、かわいらしく魔法のような雰囲気を演出する。

摩訶不思議

人間の知恵では理解できないほど、非常に不思議なこと

トライアド

#FF4D8D
#4DFFB8
#FFD24D

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

#FF8FAB
#8AFFC1
#8A6EFF

トーンオントーン

#E4C1F9
#C77DFF
#7B2CBF

奇想天外

普通では思いつかないような奇抜なこと

トライアド

#FF4FA3
#52E5A3
#FFD447

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

#FF7B54
#46C2FF
#D66BFF

トーンオントーン

#FFF0B8
#FFD447
#FFB000

トリッキー

難解
巧妙な
複雑な
扱いにくい

トライアド

#FF6EC7
#6EFFC2
#C26EFF

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

#FF5DA2
#5DCBFF
#D4FF5D

トーンオントーン

#FF7AD9
#E060BE
#C046A3

ミスティックファンシー

神秘や不可思議さを感じさせる、奥深く幻想的なミスティックスタイルを表現した配色。

深みのあるパープルやブルー、淡いピンクなどを組み合わせることで、静かで神秘的な雰囲気を演出する。

ミスティック

神秘的な
不思議な
不可思議な

トライアド

#FF9AEF
#9AFFF0
#F0FF9A

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

#FFC2D1
#5A189A
#48CAE4

トーンオントーン

#FEC5F6
#E07BE0
#B5179E

妖異

あやしく不思議なこと
奇怪なできごと

トライアド

#FF87AB
#7B2CBF
#2EC4B6

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

#FF55BB
#55FFAA
#5577FF

トーンオントーン

#C7B3FF
#8A66FF
#4B1AFF

神秘的

人の力では計り知れない、不思議で奥深い雰囲気を感じさせるさま

トライアド

#A56EFF
#6EFFE5
#FFE56E

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

#D7B8FF
#4CC9F0
#B8F28F

トーンオントーン

#F3E5FF
#D9A7FF
#9D4EDD

幽玄

奥深く趣があり、言葉では表しきれない美しさを感じさせるさま
静寂や余韻、神秘性を感じさせる日本的な美意識

トライアド

#6A4C93
#4DB6AC
#D6C36A

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

#4F5D75
#8F6BB3
#B7C77A

トーンオントーン

#D8C9F1
#9C7BC8
#5B3F8C

歪み

本来の形や状態からズレて、いびつになること

トライアド

#FF9BD2
#7B6CFF
#00D1B2

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

#FF8FAB
#5F0F40
#00F5A0

トーンオントーン

#E0BBFF
#C77DFF
#7B2CBF

シュールファンシー

現実離れした世界観を思わせる、奇抜で独創的なシュールスタイルを表現した配色。

対照的なカラーや鮮やかなアクセントカラーを組み合わせることで、不思議で印象的な雰囲気を演出する。

シュール

surréalisme*シュルレアリスムを略した言葉
現実離れしたさま
超現実的なさま

トライアド

#FF8C42
#42C6FF
#C642FF

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

#FF7EB6
#7EFFD4
#7EA0FF

トーンオントーン

#E6FFD6
#B8FF9C
#6EFF5D

違和感

何かが普通とは違うと感じること
調和していないように感じること
どこかズレた印象を受けること

トライアド

#FF7AA8
#7DFFB3
#7A8CFF

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

#FFB86C
#6CE5FF
#D66CFF

トーンオントーン

#E7D6FF
#B892FF
#7E57C2

エキセントリック

風変わりな
奇抜な

トライアド

#FF3C8E
#3CFFCB
#3C5BFF

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

#FF5EFF
#FFD65E
#5EFFFF

トーンオントーン

#FFD6A5
#FF9F1C
#CC7000

アバンギャルド

前衛
先駆け
革新的

主に芸術、文化、政治の分野において、時代の最先端を行く革新的な運動のこと

トライアド

#FF2D55
#00D084
#4D7CFE

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

#FF0054
#00F5D4
#FFD166

トーンオントーン

#FFD6E7
#FF5DA2
#C70039

偏奇

奇抜で偏りがあること
一風変わっていること

トライアド

#E056FD
#6FFFE9
#FFB5A7

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

#F15BB5
#00F5D4
#9B5DE5

トーンオントーン

#C8B6FF
#A06BFF
#6A00FF