Style · 暖色系
暖色系Webデザインの参考例とAIプロンプト
暖色中心でまとめた親しみのあるAIプロンプト集。飲食・カフェ・ペット・ライフスタイルに。
ウォームについて
暖色を中心にまとめた親しみのあるデザイン。食欲・暖かさ・家族感を想起させ、飲食、カフェ、ペット、ライフスタイル、ホスピタリティで効果を発揮します。寒色系と比べ情緒に訴える力が強い配色です。鋭いCTAに慣れて警戒するようになった読者へ、圧ではなく温度で最後の一押しをする使い方が効きます。最大の落とし穴は彩度で、上げすぎると幼く安っぽくなる。トーンを一段抑えるだけで品が出ます。金色のアクセントは画面に1点だけに留めてください。
ウォームの視覚パラメータ
- #FFF6EC 地
- #3B2A1F 文字
- #E2703A 主色
- #C8542B 濃色
- 書体
- 丸みのあるサンセリフ、または柔らかいセリフ
- 形
- 角丸12〜20px。影も暖色寄りにする
- 動き
- 300ms前後。急かす動きは入れない
よく使われる場面
- レストラン・カフェ・食品
- ペット関連サービス
- 育児・ファミリー向け
- ホスピタリティ・旅館
- ライフスタイルブランド
成功のポイント
- 主色はオレンジ/テラコッタ系から選ぶ
- 彩度は控えめで目に優しく
- 暖色×オフホワイトで柔らかく
- 写真は暖色寄りにレタッチ
- 寒色は差し色に限定
このスタイルのデザイン
マンガの吹き出しで進むサポートチャット
太い輪郭線と尻尾付きの吹き出し、網掛けの紙地でサポート対話をマンガのコマとして見せるチャットUI。解決の瞬間だけ叫び吹き出しに切り替えて感情の起伏を作ります。
マスコットが見守る新規登録画面
丸みとパステル、CSSだけで組んだマスコットで登録の緊張をほどくサインアップ画面。パスワード強度は点数ではなく励ましの言葉で返し、3ステップの進捗を先に見せます。
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
ポラロイド写真ボード風のギャラリー
コルクボードに押しピンとマスキングテープで留めたポラロイド写真コレクションを再構築したギャラリー。手書き風キャプション・微妙な傾き・付箋メモで「私的な記憶」を訴求する尖った設計。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
パステル×マスコットの「かわいい」CTAセクション
日本発の「kawaii」美学を再構築した、パステル配色とマスコットキャラのCTAセクション。Z世代の女性向け・コスメ・サンリオ系プロダクトに刺さる、ふわふわで愛され系の遊び心ある設計。
暖色テラコッタの大判CTAセクション
暖色（テラコッタ・赤・砂色）でまとめた、人肌の温度を持つ大判CTAセクション。飲食・ライフスタイル・小売など、信頼より親しみで選ばれるブランドのコンバージョン直前に効く設計。
手描きスケッチを散りばめた温度のあるフッター
紙質感のオフホワイトに手描き線のイラスト・ラフな書き込みを散りばめた、温度のあるフッター。クラフトブランド・カフェ・絵本系メディアなど人の手の温もりが武器になる業態に。
パステル配色の柔らかいお客様の声セクション
ヘルスケアやウェルネス系サービス向けの、パステル配色と大きな角丸で構成する柔らかいお客様の声セクション。安心感と温度を伝えながら、引用を読ませる構造を作る。
極太フォントのヒーローセクション
画面いっぱいの極太な見出しと 1 色のアクセントカラーだけで勝負する、スタートアップ向けのヒーローセクション。CTA への視線動線を 1 本に絞り、滞在 3 秒で価値を伝える設計。
雑誌風のお客様の声セクション
メインの引用をアンカーに、3列の小さな声と3つの数値指標を重ねた雑誌調のお客様の声セクション。セリフのイタリック・うっすらした罫線・赤いクォートマークで信頼感と読みごたえを両立します。
上品なセリフ体のポートフォリオサイト
セリフ体の大見出しと不揃いグリッド、暖色アースカラー、斜体のアクセントで組んだデザインスタジオ向けの作品集サイト。沈黙と余白で格を出す、雑誌的な誌面設計。
弾むアニメーションのCTAブロック
少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。