フレンチブルーは、クラシックなネイビーと明るいコースタルシアンの中間地点に位置し、洗練され、落ち着きがあり、合わせやすい色です。モダンとタイムレスが共存するため、UIやブランディング、インテリアにも幅広く活用できます。
以下に、すぐ使えるフレンチブルーの配色とHEXコード、実用的な組み合わせアドバイス、そしてMedia.ioで各スタイルを素早く視覚化できるAI画像プロンプトを紹介します。
フレンチブルーパレットがよく使われる理由
フレンチブルーは、タイポグラフィやレイアウトを加える前から「デザインされた」印象を与えます。ヘッダーやナビゲーション、ヒーローセクションのアンカーに十分な深みがあり、重いネイビーよりも親しみやすい雰囲気です。
暖色にも寒色にも自然になじむため、砂・クリーム・霞んだグレーと組み合わせてコースタルな落ち着きを出したり、ブラスやチャコール、深いインク色を使って高級感あるコントラストを演出できます。
また、デジタルプロダクトで撮影やレンダリングしても綺麗に仕上がります：グラデーションは繊細で、影はクリア、UIの明るい部分にも暗い部分にも強すぎる印象を与えません。
20種類以上のフレンチブルー配色アイデア（HEXコード付き）
1) リヴィエラリネン
HEX： #2f5f8d #6fa3c8 #e9e2d4 #c8b8a4 #1f2a33
雰囲気：軽やか、沿岸、洗練
おすすめ用途：リゾートランディングページUI
陽光で色あせたリネンと爽やかな海風が感じられるコースタルな落ち着き。深いブルーを主要なUIアンカーにし、砂色のニュートラルで背景やスペースを作りましょう。細いラインアイコンや広めの余白を使うことで、プレミアム感が保てます。ポイント：濃いブラックは文字専用にし、ブルーの鮮度を維持しましょう。
リヴィエラリネンのMedia.io生成画像例
Media.ioは、ブラウザ上で動画・画像・音声を作成/編集できるオンラインAIスタジオです。
2) パリジャンデニム
HEX： #2b5b86 #3f7fb0 #a9c2d6 #f4f2ee #8a6a55
雰囲気：都会的、親しみやすい、スタイリッシュ
おすすめ用途：ストリートウェアブランドアイデンティティ
使い込まれたデニムにパリ仕立てが加わった都会的で気軽なテイスト。ダークブルーはロゴやヘッダー、淡いブルーと白はレイアウトを開放的に。温かみあるブラウンはタグや縫い目、補助文字にヴィンテージ感を出します。ポイント：グラデーションは控えめに、フラットなブロックで現代的なファッション感を演出。
パリジャンデニムのMedia.io生成画像例
3) シーサイドフォグ
HEX： #2a5a7b #7fa6bf #cfd8dd #f7f7f5 #6f7a81
雰囲気：霧のよう、静か、モダン
おすすめ用途：瞑想アプリUI
静かな朝の湾の空気のように、淡いブルーグレーで穏やかな画面や柔らかい状態を表現。深いブルーと白で読みやすいヘッダーや丁寧なCTAボタンを。ポイント：イラストの彩度は控えめにし、穏やかなインターフェースを保ちましょう。
シーサイドフォグのMedia.io生成画像例
4) コバルトクロワッサン
HEX： #1f4f86 #4e86b8 #f2d3a1 #fff3e3 #5a3a2e
雰囲気：明るく、居心地よい、ブティック風
おすすめ用途：ベーカリーポスターデザイン
角のベーカリーで青いタイルと温かいペストリーの光が漂う明るく居心地良い雰囲気。ゴールデンタンとクリームで招待感のある背景、コバルトでヘッドラインの印象を強く。親しみやすいセリフ体やシンプルなイラストアイコンと合わせると良いでしょう。ポイント：ブラウンはアクセントにとどめ、暖かさを損なわないように。
コバルトクロワッサンのMedia.io生成画像例
5) ブリュ＆ブラス
HEX： #2c5f90 #5f8fb8 #d2b04c #f6f1e6 #2a2c2f
雰囲気：洗練、自信、高級感
おすすめ用途：高級ホテルブランディング
ブラスの装飾とペイントされたブルーの壁のような洗練と自信。ゴールドはシールやディバイダー、高級ティアのポイントとして控えめに使い、ブルーはブランドの基盤に。クリームで優雅さと読みやすさを、チャコールでタイポグラフィを引き締めます。ポイント：ゴールドの使用は10%未満に抑え、本当のラグジュアリー感を。
ブリュ＆ブラスのMedia.io生成画像例
6) ウィンターマリナー
HEX： #1e4d73 #4f7ea0 #b8c7d1 #ffffff #2b2f35
雰囲気：シャープ、海洋、ミニマル
おすすめ用途：ファイナンスダッシュボードUI
冬の港の光とシャープなラインのようなクリアな海の雰囲気。フレンチブルーベースのこの配色では、一番濃い色がナビとチャート軸を定義し、淡いブルーグレーがデータパネルの穏やかさを演出。余白でダッシュボードの重さを回避し、チャコールで数字の見やすさを確保。ポイント：中間ブルーはポジティブな状態に、濃いブルーは構造に限定。
ウィンターマリナーのMedia.io生成画像例
7) プロヴァンスタイルズ
HEX： #2d5e8c #4fa0c6 #97d0d9 #f1efe7 #c76f5b
雰囲気：陽気、職人風、活気
おすすめ用途：陶器店Instagramテンプレート
明るいプロヴァンス風キッチンの手描きタイルのような陽気で職人らしい配色。ブルーとアクアでパターンやフレームを持ち、コーラルは生き生きとしたステッカーや価格表示に。温かいオフホワイトは読みやすく、寒色一辺倒を避けるポイント。ポイント：タイルモチーフは一定のグリッドで繰り返し、フィードに統一感を。
プロヴァンスタイルズのMedia.io生成画像例
8) スタジオブループリント
HEX： #1b4f7a #2f6c9d #8fb3cc #eef3f7 #f0a45d
雰囲気：技術的、創造的、エネルギッシュ
おすすめ用途：建築ポートフォリオウェブサイト
ブループリント紙とスタジオの光が温もりを加えた技術と創造性。深いブルーはヘッダーやセクションのアンカー、淡い色調はプロジェクトページや画像キャプションに。オレンジアクセントはボタンやホバーステート、小さな呼び出しに最適で、主張し過ぎないよう注意。ポイント：幾何学的なサンセリフフォントと組み合わせて建築的な雰囲気を強調。
スタジオブループリントのMedia.io生成画像例
9) コースタルミニマル
HEX： #2a5e88 #86abc5 #dfe7ee #fbfbfa #b08b6f
雰囲気：クリーン、そよ風のように、モダン
おすすめ用途：スキンケアパッケージ
カーテン越しの新鮮な空気のようなクリーンで爽やかな印象。ソフトな青みがかったグレーをラベルの主役に使い、より濃いブルーは製品名や主要な訴求ポイントに。温かみのあるトープは小さなアイコンやキャップの色の目印として最適で、シリーズ全体の統一感を保ちます。コツ：マット仕上げと最小限のコピーで、よりプレミアムな印象に。
media.ioで生成された「コースタル・ミニマル」の画像例
10) ミッドナイト・バトー
HEX： #16324a #2a5c86 #5b86a7 #e7dfd2 #c24a3a
雰囲気：ムーディー、シネマティック、大胆
おすすめ用途：映画祭フライヤー
夜のボートで街の灯りを眺めるようなムーディーでシネマティックな雰囲気。ネイビーに近い色を背景に使ってドラマチックに、中間のブルーをブロックやタイポグラフィエリアに重ねる。クリーム色はクラシックな紙の風合いを、赤は効果的なアクセントとして。コツ：赤は日付やチケットなど最低限に使い、全体の洗練度を保ちます。
media.ioで生成された「ミッドナイト・バトー」の画像例
11) チョークとインディゴ
HEX： #234f7a #4c7fa8 #b9cfe0 #f7f4ef #4a4a4a
雰囲気：ソフト、アカデミック、落ち着き
おすすめ用途：オンライン講座スライド
チョーク紙にインディゴインクで書かれたような、柔らかく知的で落ち着いた雰囲気。濃いブルーはセクション見出しに、淡いブルーは注釈や図表に。オフホワイトで画面を明るく、グレーは補足説明や脚注用に最適です。コツ：1枚のスライドにアクセントブルーは1色までにし、視覚的ノイズを抑えましょう。
media.ioで生成された「チョークとインディゴ」の画像例
12) フルール・ド・セル
HEX： #2e5a80 #6f9ebb #c9dbe5 #f8f8f6 #d9c3a5
雰囲気：ライト、清潔、コースタルスパ
おすすめ用途：バスソルト商品ラベル
淡いブルーの水辺に並ぶ海塩の結晶のようにライト＆クリーン。ラベルはオフホワイト基調で軽やかに、ブルーをブランドや成分強調に使います。ベージュはナチュラル感を添えつつ素朴になり過ぎません。コツ：繊細なイラストは中間ブルーで描き、上品な仕上がりに。
media.ioで生成された「フルール・ド・セル」の画像例
13) アールデコ・カナル
HEX： #1f4c7d #3f78a6 #9fc0d6 #f3eadc #b98c5a
雰囲気：グラマラス、構築的、ヴィンテージ
おすすめ用途：イベント招待状デザイン
夕暮れの運河に反射するアールデコのアーチのようなグラマラスで構築的なスタイル。濃いブルーで枠や幾何学フレームを、淡いブルーのパターンで装飾。クリーム＆ブロンズ色でヴィンテージ感と気品をプラスし、セリフ体の見出しと好相性。コツ：ブロンズ部分は空押しか箔押しで立体感を出し、無駄な装飾は控えめに。
media.ioで生成された「アールデコ・カナル」の画像例
14) クラウディ・ハーバー
HEX： #2b587a #6c90a8 #aebfca #f0efe9 #7f6a5d
雰囲気：くすみ、思索的、コースタル
おすすめ用途：エディトリアルマガジンのレイアウト
雲がかかる港の水平線のように、くすんで思索的な配色。落ち着いたブルーでセクション帯・引用を、温かみのグレーブラウンでキャプションや署名を添えます。オフホワイトの背景で長文読書時も快適かつ、強いコントラストを避けます。コツ：写真の色調も控えめで、全体の統一感をキープ。
media.ioで生成された「クラウディ・ハーバー」の画像例
15) ブルーベリー・クリーム
HEX： #2f5e9a #6e98d8 #d7e3ff #fff4ea #b85a4a
雰囲気：スイート、遊び心、フレッシュ
おすすめ用途：アイスクリームショップのメニュー
ホイップクリームにベリースワールが映える、スイートで遊び心のある印象。明るいブルーは見出しや値札に、クリーミーな背景や淡いペリウィンクル色で全体をソフトにまとめます。温かいレッドブラウンは限定フレーバーやおすすめのアクセントにぴったり。コツ：余白を十分にとり、配色を軽やかに保ちましょう。
media.ioで生成された「ブルーベリー・クリーム」の画像例
16) ミュージアム・ウォール
HEX： #244f78 #5d86a6 #c2d0dc #f5f2ec #9a7b62
雰囲気：静か、キュレート、時代を超える
おすすめ用途：ギャラリー館内サイン
静かで洗練された、落ち着いたブルーの壁の美術館通路のように。濃いブルーで案内見出しを、明るい色合いでパネルやフロアマップを。暖かみのあるトープで伝統感を添えつつ、クラシックなセリフ体と好相性。コツ：アイコン類は一番濃いブルーの単色で、遠くからでも読み取りやすく。
media.ioで生成された「ミュージアム・ウォール」の画像例
17) テラス・ビストロ
HEX： #2a5c8a #5aa0c2 #f1dcc7 #fff8ef #7a3f35
雰囲気：温かみ、社交的、日差し
おすすめ用途：レストランWebヒーローセクション
午後のテラスでリネンナプキンや青い日よけが映える温かく社交的な雰囲気。濃いブルーはナビとボタンに、ピーチ系ニュートラルで背景やコンテンツブロックをまとめます。赤みブラウンは予約や特別なお知らせのアクセントに最適。コツ：料理写真はベーストーンに合わせてゴールドの光を強調すると◎。
media.ioで生成された「テラス・ビストロ」の画像例
18) アルパイン・インク
HEX： #1a3f63 #2f6a93 #7fa6c1 #e8eef2 #2b2b2b
雰囲気：クール、集中、プロフェッショナル
おすすめ用途：テックスタートアップ ピッチデッキ
冷たい山の空気のようなエッジと紙の上のインクのようなクールで集中した印象。最も濃いブルーでタイトルやグラフ枠を、淡いブルーでハイライトや補助図形を。明るいグレーブルー背景で画面を爽やかに保ち、無機質になりすぎないように。コツ：グラフ色ルールを統一し、各スライドで指標の識別性をキープ。
media.ioで生成された「アルパイン・インク」の画像例
19) サマー・レガッタ
HEX： #2d5f8f #4fb0c6 #f7f0e3 #f2c14e #e05a47
雰囲気：明るい、スポーティ、楽観的
おすすめ用途：スポーツイベントポスター
晴れた日の風にはためくセイルフラッグのように、明るくスポーティな配色。ブルーを基調に、アクアを補助の図形や動きのアクセントに使いましょう。イエロー＆コーラルは日付やカテゴリ、スポンサー案内用の元気なハイライトに。コツ：オフホワイトを余白の主役にして、遠くからもクリアに見えるポスターに。
media.ioで生成された「サマー・レガッタ」の画像例
20) インク・オン・パーチメント
HEX： #1f4568 #3f6f8f #a9bccc #f2e7d8 #6b5142
雰囲気：伝統、文芸、暖かみ
おすすめ用途：ブックカバーデザイン
万年筆で古い羊皮紙に書いたような、伝統と文芸の香り。タイトルや背表紙には一番濃いブルーを使い、背景のパーチメント色で書店のようなクラシック感を演出。温かみのあるブラウンは著者名や飾り罫に。コツ：制御の効いた高コントラストな書体ペアで、サムネイルでもすぐ本だと分かるデザインに。
media.ioで生成された「インク・オン・パーチメント」の画像例
21) カナル・モーニング
HEX： #2c5b83 #7aa8c8 #d5e2ea #fffdf8 #f0b39a
雰囲気：フレッシュ、穏やか、ロマンティック
おすすめ用途：春の結婚式招待状セット
穏やかな朝の運河とパステルの花を思わせる、フレッシュでロマンティックな配色。パウダーブルーを枠やモノグラムに、暖かなピーチ色を小花やRSVPにポイント使い。ほぼ白の背景でタイポグラフィも軽やかにフォーマル。コツ：微細なテクスチャ紙に印刷し、パステルの優しさをより印象的に。
media.ioで生成された「カナル・モーニング」の画像例
22) ブルーアワー・ビストロ
HEX： #20435f #2f6d8e #79a9b9 #f4eee3 #d96d4f
雰囲気：夕景、誘い、雰囲気たっぷり
おすすめ用途：カクテルメニューデザイン
活気あるビストロの窓の外、ブルーモーメントの光のような夕景の雰囲気。暗いベース色でムーディーな下地を作り、ティールブルーでセクションラベルやドリンクカテゴリーを。クリーム色で視認性を高め、暖かいコーラルで看板カクテルを際立たせます。コツ：アイコンはシンプルに、コーラルは売れ筋のみに絞って注目を誘導。
media.ioで生成された「ブルーアワー・ビストロ」の画像例
23) ハーバー・ニュートラル
HEX： #2a5a86 #4f88b1 #b6c9d6 #eee7dd #3a3a3a
雰囲気：バランス、モダン、信頼感
おすすめ用途：SaaSオンボーディング画面
バランスが取れて信頼できる、控えめなペイントと整然としたロープが備わったよく整理されたドックのように。このフレンチブルーのカラーパターンは、ミッドブルーがプライマリーボタンや進行状況のステートを担い、ペールブルーがカードや補助テキストをサポートするときに最も効果的です。温かみのあるオフホワイトで人間味を保ち、チャコールで十分なコントラストを確保します。ヒント：最も明るいブルーを空の状態（エンプティステート）に使うと、新しいユーザーが戸惑うことなく導かれていると感じられます。
media.ioを使って生成したハーバーニュートラルの画像例
フレンチブルーに合う色は？
フレンチブルーはクリーム、リネン、サンド、パーチメントなどの暖かいニュートラルカラーと自然にマッチします。これによりパレットが柔らかくなり、レイアウトに余裕が生まれ、ブルーが「ライフスタイル」的に感じられます（コーポレートな印象を和らげます）。
よりシャープなコントラストが必要な場合は、フレンチブルーにチャコール、ほぼ黒、インクグレーを組み合わせてタイポグラフィやUIの構造に使用してください。プレミアム感のあるブランドには金属風（ブラス/ゴールド）のアクセントを一点使い、エネルギッシュな印象にはコーラル/テラコッタを加えてください。
もっとクールでモダンな感触を求めるなら、ブルーグレーや淡いアイスブルー、ソフトホワイトを取り入れましょう。彩度を抑えることで、パレットが洗練され、スポーティになり過ぎません。
実際のデザインでフレンチブルーペレットを使う方法
UIデザインでは、ナビゲーションや見出しにディープなフレンチブルー、主要ボタンやアクティブな状態にミッドブルー、カードや背景にはペールブルーグレーを選択しましょう。この階層構造により、ゆったりと落ち着いたインターフェースとアクセシブルなコントラストが両立します。
ブランディングでは、フレンチブルーをロゴやワードマーク、キービジュアルなどコアなアイデンティティに用い、アクセント（ブラス、タン、コーラル）は印鑑、タグ、CTAなどハイライト用途に限定して慎重に使用しましょう。アクセント色を限定することでブルーがより意図的で洗練された印象になります。
インテリアでは、フレンチブルーは壁やキャビネットの基調色として、温かみのあるホワイトやナチュラルなテクスチャと組み合わせるのがおすすめです。木材やベージュのテキスタイル、ソフトブラックのハードウェアを取り入れると、冷たくなりすぎたり、マリンテイストが強くなりすぎるのを防げます。
AIでフレンチブルーパレットのビジュアルを作成
ムードボード作成やクライアントへの提案、UI方針のテスト時には、素早くビジュアルを生成することでフレンチブルーのカラースキームを事前に検証できます。Media.ioでは、上記プロンプトを使い、一貫性のある例を数分で作成できます。
ひとつのパレットを使ってみてから、レイアウトを固定したまま色だけを変えて結果を比較してみてください。これによりブランドシステムやテンプレート、プロダクトUIなど最終的な方向性を選びやすくなります。
フレンチブルーカラーパレット よくある質問
-
デザインにおける「フレンチブルー」とは？
フレンチブルーは一般的に、上品でクラシックな印象を持つ中〜深めでやや落ち着いた青です。デニムブルーとネイビーの中間くらいの色合いで、モダンなUIから伝統的なブランディングまで幅広く使いやすいです。 -
フレンチブルーは暖色？寒色？
基本的には寒色ですが、多くのフレンチブルーは淡いグレーやグリーンのニュアンスを持つことで、冷たすぎずソフトな印象です。暖かいニュートラル（クリーム、タン、ブラス）と組み合わせれば温度感がバランスされます。 -
フレンチブルーに合うアクセントカラーは？
ラグジュアリー感ならブラス／ゴールド、エネルギーを与えるならコーラル／テラコッタ、親しみやすい雰囲気にしたい場合はピーチ系ニュートラルがおすすめです。ミニマルにしたいときはチャコールとオフホワイトを主なサポートカラーにしましょう。 -
フレンチブルーパレットが「マリン」っぽくなりすぎるのを防ぐには？
鮮やかな赤＋純白の組み合わせを多用しないようにしましょう。クリーム、パーチメント、トープ、控えめなコーラルに置き換えたり、真っ黒の代わりにチャコールを使えば、よりモダンで「セーラー」感の少ない雰囲気になります。 -
UIデザインで最適なフレンチブルーの配色は？
ダーク系のアンカーブルー、インタラクティブ要素用のミッドブルー、サーフェス（カードやパネル）用のペールブルーグレーが揃ったパレットを選びましょう。上記のWinter Mariner、Seaside Fog、Harbor Neutralsなどの例がこの構成によく合います。 -
フレンチブルーは高級ブランドにも使えますか？
はい。クリームと控えめなメタルアクセント（ブラス／ゴールド）、チャコールのタイポグラフィを組み合わせましょう。「ゴールド」の使用量を抑えれば、洗練されたエディトリアルな雰囲気を維持できます。 -
パレットベースのモックアップを素早く生成するには？
Media.io のテキストto画像機能を使って、レイアウト名称（ポスター、UI画面、パッケージ等）と5つのHEXカラーを含めてプロンプトを貼り付けます。いくつかバリエーションを生成した後は、パレットを維持しつつタイポグラフィや構図を調整しましょう。
次へ： オールドローズカラーパレット
