Style · 寒色系
寒色系Webデザインの参考例とAIプロンプト
寒色でまとめた知的・落ち着き系のAIプロンプト集。金融・テック・教育に。
このスタイルのデザイン
霧の風景ヒーロー
藍色の山と霧の生成背景に、日本語の見出しと淡い緑のボタンを重ねたヒーロー。PCは横長、スマホは縦長の画像に切り替え、暗いグラデーションで文字を読みやすくする。画像入りのHTMLも無料で配布。
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。
数字から読ませるSaaS管理画面
Linear や Vercel の系譜にある、装飾を抑えた実務向けSaaS管理画面の概要ページ。左に件数付きのメニュー、上に指標カード4枚、中央に推移グラフと最近の動き、下に状態を文字でも示す一覧を置き、ログインした人が最初の数秒で状況をつかめる順に並べる。
選択肢で絞り込む右下のサポートチャット
Webサイトの右下に常駐する問い合わせ用のチャットウィジェット。用件を選択肢で絞り込む自動応答、営業時間に応じて約束を変える表示、時間外はメールで引き取る導線、閉じている間の未読数までを備える。
既読と日付区切りのある和製トーク画面
日本のスマホで最も見慣れたトーク画面の文法を再現したチャットUI。青みの地に緑と白の吹き出し、吹き出しの外に置く時刻と既読の人数、日付の札、連投でしっぽと名前を省く組み方までを1枚にまとめる。
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右に商品カードを置く検索結果ページ。架空の8商品で検索・価格・容量・ブランド・配送・評価を試せ、0件からの条件解除にも対応します。
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
ベントーグリッドの写真ギャラリー
大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
グラスモーフィズムのログインモーダル
半透明のすりガラス風パネルを背景に重ねるログインモーダル。外部認証3種のボタンとメール入力を配置。開閉・Escape・フォーカス復帰、入力条件の確認を試せる見本です。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。
クールについて
寒色を中心にまとめた知的で落ち着いたデザイン。信頼感・冷静さ・プロフェッショナル感を演出し、金融、テック、教育、医療、法律などで選ばれる配色です。情報量の多いサイトでも疲れにくいのが実務上の利点で、長時間読ませる管理画面やドキュメントと相性がいい。注意点は、青は色覚特性によって他の色との区別が付きにくいこと。状態を色だけに載せず、記号や言葉を併記します。温度が下がるぶん、親しみは文章の側で補う必要もあります。
「クール」でプロンプトを組み立てるクールの視覚パラメータ
- #F5F8FC 地
- #0F2540 文字
- #2563EB 主色
- #22B8CF 副色
- 書体
- サンセリフ。情報量が多くても疲れない字送りに
- 形
- 角丸6〜10px。境界1pxで区切る
- 動き
- 200ms。落ち着いたイージング
よく使われる場面
- 金融・保険・フィンテック
- テック・IT・SaaS
- 教育・大学・学術
- 医療・病院・製薬
- 法律・コンサルティング
成功のポイント
- 主色は青/紺から選ぶのが定番
- 彩度は抑えめにして信頼感を
- 差し色に暖色（オレンジ等）を少量
- グレーとの相性で階層化
- 冷たすぎないよう温度感のバランスを