🎨 デザインスタイル・プロンプトマニュアル
マニュアル

Webデザインスタイル別プロンプト＆サンプル集

いろいろなデザインを紹介し、「このURLのものを使うと、こういうふうな絵になります」という形のサンプルをまとめた資料です。コピペ用プロンプトとミニマム動作サンプルを、マニュアルとして使えるように整理しています。

補足：このマニュアルの使い方

  1. 作りたい印象からスタイルを1つ選ぶ（下の選び分けガイド）
  2. 「コピペ用プロンプト」をコピーし、【テーマ】を自分の題材に書き換える
  3. 必要なら「ミニマム動作サンプル」をブラウザで開き、雰囲気を確認する
  4. AIにプロンプトを渡し、1ファイルのHTML/CSSを生成させる

まとめ：選び分けのクイックガイド

（詳細は末尾のまとめ表と同じ内容です。先に方針を決めるための早見です。）

作り出したい印象 参照サイト プロンプトの主眼
重厚・高級・映画のような世界観 Awwwards セリフフォント、極限の余白、モノトーン寄りのコントラスト
分かりやすさ・親しみ・安心感 SANKOU! 白背景、丸みのあるゴシック体、視認性の高いカードとボタン
最先端・洗練・Tech・未来感 Aceternity UI 黒背景、オーロラ発光、グラスモーフィズム、ネオンボーダー

補足図解：スタイル選択の流れ

flowchart TD
  A[作りたい印象は？] --> B{世界観を
圧倒的な美しさで魅せる？}
  B -->|Yes| C[Awwwards風]
  B -->|No| D{情報をしっかり伝え
成約・安心感が欲しい？}
  D -->|Yes| E[SANKOU!風]
  D -->|No| F{Tech・未来感
スタートアップ感？}
  F -->|Yes| G[Aceternity UI風]
  F -->|迷う| H[クイックガイド表で再確認]
  C --> I[コピペ用プロンプトへ]
  E --> I
  G --> I
  H --> A
図のコードを見る
flowchart TD A[作りたい印象は？] --> B{世界観を圧倒的な美しさで魅せる？} B -->|Yes| C[Awwwards風] B -->|No| D{情報をしっかり伝え成約・安心感が欲しい？} D -->|Yes| E[SANKOU!風] D -->|No| F{Tech・未来感スタートアップ感？} F -->|Yes| G[Aceternity UI風] F -->|迷う| H[クイックガイド表で再確認] C --> I[コピペ用プロンプトへ] E --> I G --> I H --> A
1

Awwwards風：映画のような没入感・ブランドの世界観を作りたい時

適したシーン

高級車、ハイブランド、アート、ポートフォリオなど、世界観を圧倒的な美しさで魅せたい時。

特徴

巨大なタイポグラフィ、極限まで削ぎ落としたミニマルな余白、映画のような黒背景と高解像度写真。

コピペ用プロンプト 

以下のテーマで、Awwwardsにノミネートされるような極めてミニマルで洗練された高級感あるWebページのHTML/CSSを1ファイルで作成してください。

【テーマ】: [例: オープンカーのブランドサイト]
【デザインルール】:
・黒基調のラグジュアリー・ミニマリズム
・見出しフォントには上品な欧文セリフ体（Cinzel または Cormorant Garamond）を使用
・巨大なフルスクリーン写真と、大きく余白をとったレタープレイスメント
・繊細な細いボーダーラインと、文字間（letter-spacing）を広げたタイポグラフィ
・1ファイル完結（Pure CSS、Unsplashの高品質画像をインライン配置）

ミニマム動作サンプル（Awwwardsスタイル）

補足：下のプレビューで完成イメージを確認できます。コードは折りたたみ内からコピーしてください。

HTMLサンプルコードを表示 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Awwwards Style Sample</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;600&family=Noto+Serif+JP:wght@300;600&display=swap" rel="stylesheet">
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { background: #0a0a0a; color: #e5e5e5; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
    .hero {
      position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;
      text-align: center; overflow: hidden; padding: 0 20px;
    }
    .hero img {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35;
      filter: grayscale(40%); transition: transform 2s ease;
    }
    .hero:hover img { transform: scale(1.05); }
    .content { position: relative; z-index: 1; max-width: 800px; }
    .sub { font-size: 0.85rem; letter-spacing: 0.4em; text-transform: uppercase; color: #a3a3a3; margin-bottom: 20px; }
    h1 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 300; letter-spacing: 0.1em; line-height: 1.1; margin-bottom: 30px; }
    p { font-size: 1.1rem; line-height: 2; color: #8c8c8c; font-weight: 300; letter-spacing: 0.05em; }
    .btn {
      display: inline-block; margin-top: 40px; padding: 14px 40px; color: #fff; text-decoration: none;
      border: 1px solid rgba(255,255,255,0.3); font-size: 0.85rem; letter-spacing: 0.25em; transition: 0.4s;
    }
    .btn:hover { background: #fff; color: #000; border-color: #fff; }
  </style>
</head>
<body>
  <div class="hero">
    <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1400&q=80" alt="Car">
    <div class="content">
      <div class="sub">The Pure Aesthetics</div>
      <h1>SILENCE & WIND</h1>
      <p>屋根のない空間に満ちる、光と気流。無駄を削ぎ落とした先に現れる、ドライブという名の純粋な体験。</p>
      <a href="#" class="btn">DISCOVER</a>
    </div>
  </div>
</body>
</html>
2

SANKOU!風：信頼感と安心感があり、情報をしっかり伝えたい時（国内商業LP）

適したシーン

日本の一般ユーザー向けサービス、購入・資料請求を目的としたLP、商品紹介、レンタカーやディーラーサイト。

特徴

白・明るい背景、読みやすい日本語ゴシックフォント、親しみやすいアイコンやタグ、直感的な3カラムカード。

コピペ用プロンプト 

以下のテーマで、日本のギャラリーサイト「SANKOU!」に掲載されているような、清潔感・信頼感・成約率を重視した商業LPのHTML/CSSを1ファイルで作成してください。

【テーマ】: [例: オープンカーのレンタカー紹介ページ]
【デザインルール】:
・清潔感のある白〜オフホワイト背景（#f8fafc等）と上品なプライマリカラー
・フォントは丸みと信頼感のある「Noto Sans JP」を使用
・3カラムの機能・魅力カード（アイコン、キャッチコピー、角丸、やわらかな影）
・視線誘導を意識した目立つアクションボタン（CVボタン）
・1ファイル完結（Pure CSS、Unsplashの実画像をインライン配置）

ミニマム動作サンプル（SANKOU!スタイル）

HTMLサンプルコードを表示 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SANKOU Style Sample</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { background: #f8fafc; color: #1e293b; font-family: 'Noto Sans JP', sans-serif; padding: 40px 16px; }
    .container { max-width: 900px; margin: 0 auto; }
    .hero-banner {
      background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05);
      display: flex; flex-wrap: wrap; margin-bottom: 40px;
    }
    .hero-img { flex: 1 1 350px; height: 260px; object-fit: cover; }
    .hero-text { flex: 1 1 350px; padding: 36px; display: flex; flex-direction: column; justify-content: center; }
    .tag { align-self: flex-start; background: #e0f2fe; color: #0284c7; padding: 4px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 700; margin-bottom: 12px; }
    h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
    p { font-size: 0.95rem; color: #64748b; line-height: 1.7; }
    
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 40px; }
    .card { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
    .icon { font-size: 1.5rem; margin-bottom: 8px; }
    .card h3 { font-size: 1.1rem; margin-bottom: 8px; }
    
    .cta-wrap { text-align: center; }
    .btn {
      display: inline-block; background: #2563eb; color: #fff; padding: 14px 40px; border-radius: 99px;
      font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(37,99,235,0.3); transition: 0.2s;
    }
    .btn:hover { background: #1d4ed8; transform: translateY(-2px); }
  </style>
</head>
<body>
  <div class="container">
    <div class="hero-banner">
      <img class="hero-img" src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80" alt="Car">
      <div class="hero-text">
        <span class="tag">週末レンタル受付中</span>
        <h1>青空の下を走る、特別な休日体験を。</h1>
        <p>普段の街並みが一変するオープンドライブ。手軽な日帰りプランからご用意しています。</p>
      </div>
    </div>
    <div class="grid">
      <div class="card"><div class="icon">🌿</div><h3>圧倒的な爽快感</h3><p>ルーフを開けた瞬間に広がる360度の視界をお楽しみください。</p></div>
      <div class="card"><div class="icon">✨</div><h3>最新の安全装備</h3><p>全車に運転アシストとシートヒーターを完備しています。</p></div>
      <div class="card"><div class="icon">⚡</div><h3>かんたんWEB予約</h3><p>会員登録不要で、空き状況をその場で確認できます。</p></div>
    </div>
    <div class="cta-wrap">
      <a href="#" class="btn">空き状況と料金を見る</a>
    </div>
  </div>
</body>
</html>
3

Aceternity UI風：最新Tech・スタートアップ風の近未来感を作りたい時

適したシーン

SaaSプロダクト、AIツール、次世代EV、サイバー感やイノベーションを打ち出したいWebアプリのトップ。

特徴

背景のオーロラ・発光（グロー）、カードのホバー時に光る境界線（ボーダーグロー）、すりガラスのレイヤー構造。

コピペ用プロンプト 

以下のテーマで、Aceternity UIのような最先端Tech・スタートアップ感のあるダークテーマWebコンポーネントのHTML/CSSを1ファイルで作成してください。

【テーマ】: [例: 次世代オープンEVカーの機能紹介]
【デザインルール】:
・漆黒背景（#090d16等）とアンビエントなオーロラグロー（ぼかした円形グラデーション）
・グラスモーフィズム（backdrop-filter: blur() を使った半透明カード）
・ホバー時に境界線がシアン〜パープルに光る「ボーダーグラデーション効果」
・英語フォントには幾何学的でモダンな「Plus Jakarta Sans」または「Inter」
・1ファイル完結（Pure CSS、外部JSライブラリ不使用）

ミニマム動作サンプル（Aceternity UIスタイル）

HTMLサンプルコードを表示 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Aceternity UI Style Sample</title>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet">
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      background: #090b10; color: #f3f4f6; font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;
      min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
      position: relative; overflow: hidden;
    }
    /* 背後のアンビエント発光 */
    .glow {
      position: absolute; width: 350px; height: 350px; border-radius: 50%;
      background: radial-gradient(circle, #00f2fe 0%, #4facfe 40%, transparent 70%);
      filter: blur(100px); opacity: 0.15; top: 10%; left: 20%; pointer-events: none;
    }
    .container { max-width: 800px; width: 100%; position: relative; z-index: 1; }
    .header { text-align: center; margin-bottom: 40px; }
    .badge {
      display: inline-block; padding: 4px 14px; border-radius: 99px; background: rgba(0,242,254,0.1);
      border: 1px solid rgba(0,242,254,0.3); color: #00f2fe; font-size: 0.75rem; font-weight: 700; margin-bottom: 12px;
    }
    h1 {
      font-size: 2.2rem; font-weight: 800;
      background: linear-gradient(135deg, #fff 40%, #9ca3af 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    /* グラスモーフィズム ＆ ネオンボーダーカード */
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
    .card {
      position: relative; background: rgba(18, 22, 34, 0.6); border-radius: 16px; padding: 24px;
      border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(16px);
      transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .card:hover {
      transform: translateY(-4px); border-color: rgba(0, 242, 254, 0.5);
      box-shadow: 0 10px 30px -10px rgba(0, 242, 254, 0.2);
    }
    .card-num { color: #00f2fe; font-size: 0.8rem; font-weight: 800; margin-bottom: 8px; }
    .card h3 { font-size: 1.1rem; margin-bottom: 8px; color: #fff; }
    .card p { font-size: 0.85rem; color: #94a3b8; line-height: 1.6; }
  </style>
</head>
<body>
  <div class="glow"></div>
  <div class="container">
    <div class="header">
      <span class="badge">NEXT GENERATION</span>
      <h1>ENGINEERED FREEDOM</h1>
    </div>
    <div class="grid">
      <div class="card">
        <div class="card-num">01 / AERO</div>
        <h3>気流制御コックピット</h3>
        <p>走行風を後方へ逃がし、高速走行時でも乱れのない静粛な室内環境を維持。</p>
      </div>
      <div class="card">
        <div class="card-num">02 / SENSOR</div>
        <h3>環境連動クライメート</h3>
        <p>車外の気温や日射をミリ秒単位で検知し、シートやステアリング温度を自動同期。</p>
      </div>
      <div class="card">
        <div class="card-num">03 / POWER</div>
        <h3>デュアルモーター4WD</h3>
        <p>静寂の中から一瞬で湧き上がるトルクが、滑らかな加速体験を生み出します。</p>
      </div>
    </div>
  </div>
</body>
</html>

まとめ：選び分けのクイックガイド

作り出したい印象 参照サイト プロンプトの主眼
重厚・高級・映画のような世界観 Awwwards セリフフォント、極限の余白、モノトーン寄りのコントラスト
分かりやすさ・親しみ・安心感 SANKOU! 白背景、丸みのあるゴシック体、視認性の高いカードとボタン
最先端・洗練・Tech・未来感 Aceternity UI 黒背景、オーロラ発光、グラスモーフィズム、ネオンボーダー

補足図解：3スタイルの関係

mindmap
  root((デザインスタイル選択))
    Awwwards風
      高級・映画的
      セリフ・余白・黒
    SANKOU風
      信頼・成約
      白・ゴシック・カード
    Aceternity風
      Tech・未来
      グロー・グラス・ネオン
図のコードを見る
mindmap root((デザインスタイル選択)) Awwwards風 高級・映画的 セリフ・余白・黒 SANKOU風 信頼・成約 白・ゴシック・カード Aceternity風 Tech・未来 グロー・グラス・ネオン