フォーマル
デザインの雰囲気は、色や質感の組み合わせで大きく変わる。
スタイルの概要
フォーマルスタイルの意味や印象、デザイン全体に広がる雰囲気から、その特徴を読み解く。
フォーマル*formalとは
・礼儀や規律を重んじた正式なさま
・公式なさま
・品格や信頼感を感じさせる雰囲気
・礼儀正しく格式のある雰囲気を演出する
・きちんとした信頼感のある印象を与える
配色のバランス
フォーマルスタイルを形づくる代表的な色と、それぞれが与える印象の関係から全体像を捉える。
#000000 ブラック
#01153E ネイビー
#BFC3C9 シルバーグレー
#FFFFFF ホワイト
#36454F チャコールグレ
コーラルレッド
レモンイエロー
ブライトシアン
鮮やかで軽快な色は、フォーマル特有の品格や落ち着きを弱めやすい。そのため、信頼感や格式の高さが伝わりにくくなる。
低
落ち着いた信頼感のある印象を与える
きちんとした印象を演出する
中
清潔感のある印象を与える
整った雰囲気を演出する
配色と展開
配色の考え方を起点に、実際の使われ方やデザインへの広がりへとつながる。
トーン
整った均整のある色構成で、礼儀正しさと信頼感を演出する。
ベースカラー
ブラック、ネイビー、グレーなど定番の落ち着いた色を使用する。
サブカラー
ホワイトやライトグレーで清潔感を加える。
アクセントカラー
控えめなゴールドやシルバーで品格を添える。
素材・質感
ウールやポリエステルなど整った印象の素材を使用する。
活用シーン
・高級ホテル
・ジュエリーブランド
・王室・伝統文化関連
・高級レストラン
・ラグジュアリー商品
など
活用例
・ブランドサイト
・商品・サービスカタログ
・パンフレット・案内ツール
・プロモーション・広告制作
・会員向け・顧客向けコンテンツ
など
関連キーワード
フォーマルに関連する「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
ロイヤルフォーマル
高貴さや神聖さを感じさせる、気品と威光に満ちたロイヤルスタイルを表現した配色。
深みのあるネイビーやパープル、格調を高めるゴールドなどを組み合わせることで、荘厳で優雅な雰囲気を演出する。
けがれなく尊いさま
#2B3A67
#673A5A
#3A672B
#1F2A44
#D4AF37
#E8E2CF
#3A2A5A
#6A4A8A
#F0EAF7
気高く尊いさま
#2D3142
#8D2E5D
#D6C38A
#283618
#9D4EDD
#C77DFF
#081C15
#1B4332
#52B788
すぐれて上品に見えるさま
高貴である
#1A1A2E
#903749
#EAE2B7
#3A2F5A
#C06C84
#6C9A8B
#2A1A3C
#4A2C5A
#7B5EA7
その人や物から感じられる気高さや上品さ
#2C2C54
#6B8E8D
#A67C52
#2F3442
#6A5353
#536A53
#2F2623
#5A4A45
#A89B94
近寄りがたいほど堂々としておごそかなさま
#3A3F58
#8C6A43
#5B3A5E
#1F2F46
#8E3B46
#D8C3A5
#2F1F24
#422F35
#553F46
クラシックフォーマル
伝統や格式を感じさせる、正統派で落ち着きのあるクラシックスタイルを表現した配色。
ネイビーやブラウン、グレーなどの品格ある色彩を組み合わせることで、歴史と信頼感を備えた雰囲気を演出する。
古くから受け継がれてきた慣習や文化のこと
時代の変化に応じて姿を変えながら、その本質を次代へと繋いでいく営み
#1F3A5F
#8C6A3C
#5F1F2E
#3A2F2F
#6A8C6A
#6A5A8C
#1F1F1F
#4A4A4A
#A6A6A6
伝統やしきたりを、正しく受け継いでいること
#1F3A2E
#A67C52
#8C9EA3
#6B2737
#5F7D6B
#E6D8C3
#2B2B2B
#444444
#6A6A6A
身分・家柄などによって定まっている礼儀や作法
#2A2D34
#4A5A6A
#6A5A4A
#2C3E3F
#7A4C4C
#7A6A4C
#2A2018
#4A3A2A
#6A5A4A
礼儀と節度をわきまえること
#2B2B2B
#2B4F6B
#6B4F2B
#1C2833
#A569BD
#7DCEA0
#1F2A24
#2F3D34
#4A5A4E
おごそかで心が引き締まるさま
まじめできびしいさま
#2B2D42
#8D99AE
#6C584C
#1F1F1F
#8A5C5C
#5C8A8A
#222222
#3A3A3A
#555555
オフィシャルフォーマル
公正さや信頼感を感じさせる、公式性と誠実さを備えたオフィシャルスタイルを表現した配色。
ブルーやグレーを基調に落ち着いた色彩を組み合わせることで、堅実で信頼のおける雰囲気を演出する。
おおやけであるさま
公共の利益や社会全体に関わること
国や自治体、団体などの公式な立場であること
#3B4C6B
#6B3B4C
#4C6B3B
#2C3E50
#50462C
#502C3E
#2A343F
#3F4F5E
#5A6B7A
相手を信用し、すべて任せられるという気持ちをいだく感情
#2C3E50
#503E2C
#2C5043
#1F4E79
#A67C52
#7A5CA6
#2C3E50
#4A5A6A
#6B7C8C
言葉や行動に嘘がなく、心がこもっていること
誠意があること
#3B4A6B
#6B5E3B
#5E3B6B
#2F4F4F
#AED6F1
#F9E79F
#2F3A3F
#4A5A60
#6A7A80
ラグジュアリーフォーマル
上質さや高級感を感じさせる、洗練されたラグジュアリースタイルを表現した配色。
ブラックやゴールド、深みのあるアースカラーを組み合わせることで、重厚で格別な雰囲気を演出する。
階級や地位、程度や品質が高くすぐれているさま
#1C1C1E
#6B4F3A
#3A5A6B
#1F2933
#C2A83E
#5B2333
#2B2B2B
#4A4A4A
#7A7A7A
品質がすぐれているさま
#2C3E50
#8E7C6F
#C2A878
#2A2A2A
#C2A878
#7A8C99
#2F1F24
#3F2F35
#4F3F46
どっしりしているさま
態度や人柄、外見などが重々しく落ち着いているさま
#1C2B2D
#5C2A3D
#7A6F3A
#2A2E3A
#3A2A1F
#2A3A1F
#2A1F1B
#3A2B26
#4A3832
インテリジェントフォーマル
知性や洗練を感じさせる、理性的でスマートなインテリジェントスタイルを表現した配色。
ブルーグレーやダークグリーンなどの落ち着いた色彩を組み合わせることで、冷静で上品な雰囲気を演出する。
本質を見極めて、状況に応じて適切に判断し、成果に結びつく行動に移す能力
#3B4A6B
#6B3B4A
#4A6B3B
#2E2E2E
#2E4A5A
#5A4A2E
#3E2C2C
#5C4033
#8B6F47
感情に左右されず落ち着いているさま
#2F3E46
#5E548E
#84A98C
#2E4057
#7A6C5D
#5D7A74
#1F3D3B
#3A6B6A
#A7C4BC
態度や言動が穏やかであるさま
安定した状態になるさま
平静な状態になるさま
#1C2A39
#7A6C5D
#A3B18A
#1B263B
#CDB4DB
#A2D2FF
#344E41
#588157
#A3B18A
独特のしつこさやあざとい性質がなくなるさま
#2C2C2C
#8C6F56
#5A6E7F
#1F2A44
#8C7A5B
#6E5A4F
#2A3440
#4A5A6A
#8A9BAA