Style · 寒色系
寒色系Webデザインの参考例とAIプロンプト
寒色でまとめた知的・落ち着き系のAIプロンプト集。金融・テック・教育に。
クールについて
寒色を中心にまとめた知的で落ち着いたデザイン。信頼感・冷静さ・プロフェッショナル感を演出し、金融、テック、教育、医療、法律などで選ばれる配色です。情報量の多いサイトでも疲れにくいのが実務上の利点で、長時間読ませる管理画面やドキュメントと相性がいい。注意点は、青は色覚特性によって他の色との区別が付きにくいこと。状態を色だけに載せず、記号や言葉を併記します。温度が下がるぶん、親しみは文章の側で補う必要もあります。
クールの視覚パラメータ
- #F5F8FC 地
- #0F2540 文字
- #2563EB 主色
- #22B8CF 副色
- 書体
- サンセリフ。情報量が多くても疲れない字送りに
- 形
- 角丸6〜10px。境界1pxで区切る
- 動き
- 200ms。落ち着いたイージング
よく使われる場面
- 金融・保険・フィンテック
- テック・IT・SaaS
- 教育・大学・学術
- 医療・病院・製薬
- 法律・コンサルティング
成功のポイント
- 主色は青/紺から選ぶのが定番
- 彩度は抑えめにして信頼感を
- 差し色に暖色（オレンジ等）を少量
- グレーとの相性で階層化
- 冷たすぎないよう温度感のバランスを
このスタイルのデザイン
絞り込みと件数を先に見せる商品検索結果
左に絞り込み、上に適用中の条件、右にカードグリッドを置いた通販の検索結果ページ。各選択肢に件数を添えてゼロ件を踏ませない設計で、属性が構造化された商材の探索に向きます。
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
設計図面風の見積もり依頼フォーム
青焼き図面の方眼と表題欄をそのまま画面に持ち込んだ見積もりフォーム。入力欄の右に工程と前提条件を並べ、送信前に何が起きるかを見せて心理的な壁を下げます。
ベントーグリッドの写真ギャラリー
大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。
スイス様式のシンプルなお問い合わせフォーム
厳格なグリッドと無装飾サンセリフで構築する、スイス国際タイポグラフィ様式のお問い合わせフォーム。色を排し、罫線・余白・タイポの階層だけで「真剣さ」を伝える設計。
グラスモーフィズムのログインモーダル
半透明のすりガラス風パネルを背景に重ねるログインモーダル。SSO 3 種 + メール認証を中心に、視覚的に邪魔しない柔らかい認証フローを構築するための設計。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
スイス様式・グリッド厳守の料金プラン
厳格なグリッドと無装飾サンセリフだけで構築する、スイス国際タイポグラフィ様式の料金プラン。装飾を排し、罫線・余白・タイポの階層だけで「比較しやすさ」を最大化する設計。
コーポレート向けの多段フッター
ニュースレター帯、5カラムのリンク群、ステータスバッジ、言語切替、SNSアイコンを整理したコーポレートサイト向けの情報密度高めフッター。信頼感の配色と安定したタイポグラフィで、サイト下部に「事務的すぎない」安心感を置く設計。
すりガラス調の追従ナビゲーション
半透明のすりガラス越しに背景のパステルが透けて見える、カプセル型の追従ナビゲーション。スクロール時もコンテンツの世界観を壊さず、モダンなSaaSやプロダクトサイトの上部に向きます。