🎨

AIに「プロ級Webデザイン」を作らせるための呪文技術（プロンプト・エンジニアリング）

に公開
AI
webデザイン
frontend
プロンプトエンジニアリング
Gemini
idea

先日、Shin Code さんが公開した動画『Gemini 3 Pro でプロ顔負けの Web サイトが作れるようになりました』が話題でした。

動画の核心は**「あえて抽象的な言葉（圧倒的なクオリティ、余白を感じさせる等）を使うことで、AI の想像力を引き出す」**という点にありましたが、実はこれだけだと「なんとなく綺麗なサイト」止まりになることもあります。

本記事では、動画のメソッドをベースにしつつ、**さらに踏み込んだ「動画では語られなかった+α の指示テクニック」と、AI に伝わる「デザインスタイル用語の完全リスト」**をまとめます。

🎯 動画にはなかった「+α」のプロンプト術

動画では「形容詞（エモい言葉）」の重要性が語られましたが、エンジニアが実務で使うなら、以下の 3 つの要素を追加するとクオリティが安定します。

🔤 フォントペアリングを具体名で指定する

AI にお任せすると、ありきたりなフォント（Roboto や Open Sans）になりがちです。雰囲気を決定づける「フォントの組み合わせ」を指定します。

Prompt 例:

「見出しには『Playfair Display（セリフ体）』を使用し、本文には『Inter（サンセリフ体）』を使用してください。高級感と可読性を両立させて。」

「日本語フォントは『Noto Sans JP』のウェイトを使い分け、数字には『Oswald』を使ってモダンな印象にして。」

✨ マイクロインタラクション（動きの質感）を定義する

「アニメーションをつけて」だけだと、パワポのような安っぽい動きになることがあります。「物理的な挙動」を指示します。

Prompt 例:

「ボタンの Hover エフェクトは、色がパッと変わるのではなく、**『0.3 秒かけてふんわりと浮き上がる（Scale 1.05, Shadow 増強）』**ような物理挙動にして。」

「スクロール時は、要素が下から**『遅延（Stagger）しながら Spring（バネ）のような動き』**で出現させて。」

🎨 配色のルール（カラーパレット）を固定する

「青系で」というと「原色の青」を使われがちです。具体的なカラーコードや配色比率を渡します。

Prompt 例:

「メインカラーは#2A2A2A、アクセントカラーは#00D1B2。**『60:30:10 の法則』**に基づいて配色して。」

「背景には真っ白（#FFFFFF）ではなく、**『#F8F9FA（オフホワイト）』**を使って目に優しくして。」

🌈 自分の引き出しを増やす「デザインスタイル（Vibe）」大全

動画で紹介されたスタイル以外にも、AI が理解できるデザイン用語は山ほどあります。

作りたいアプリやサービスの雰囲気に合わせて、以下の用語をプロンプトに混ぜてください。

🪄 質感・マテリアル系（手触りを表現する）

スタイル名 特徴・雰囲気 プロンプト用キーワード
Neumorphism
(ニューモーフィズム)		 凹凸で表現する柔らかい未来感。 Soft UI, Embossed, Minimalist, Low contrast
Glassmorphism
(グラスモーフィズム)		 すりガラスのような透明感とぼかし。 Frosted glass, Background blur, Translucent, Vivid overlay
Claymorphism
(クレイモーフィズム)		 粘土のようなプクッとした 3D 感。ポップ。 3D floating, Inflated, Soft shadows, Cartoonish
Paper / Collage
(ペーパー/コラージュ)		 紙の質感、切り抜き、手作り感。 Paper texture, Scrapbook style, Torn edges, Handmade feel
Grainy / Lo-fi
(グレイニー)		 ザラザラしたノイズ加工。エモい、SaaS で流行。 Noise texture, Gradient mesh, Dithered, Lo-fi aesthetic
Holographic
(ホログラフィック)		 キラキラした虹色の光沢。先進的、Web3 系。 Iridescent, Shiny surface, Futuristic foil, Cyber aesthetic

🕰️ 時代・カルチャー系（特定の層に刺さる）

スタイル名 特徴・雰囲気 プロンプト用キーワード
Y2K / 2000s
(ワイツーケー)		 2000 年代初頭のポップでカオスなデジタル感。 Retro futuristic, Pixel art, Bright pink/cyan, Glitch
Cyberpunk
(サイバーパンク)		 ネオン、黒背景、ハイテク、ディストピア。 Glowing neon, Dark mode, HUD interface, High contrast
Bauhaus
(バウハウス)		 幾何学的、原色（赤・青・黄）、機能美。 Geometric shapes, Primary colors, Minimalist architecture, Swiss style
Retro 80s / Synthwave
(シンセウェーブ)		 夕日、グリッド線、紫とオレンジのグラデ。 Retrowave, Neon grid, Sunset gradient, Vintage arcade

📐 レイアウト・構造系（情報の見せ方）

スタイル名 特徴・雰囲気 プロンプト用キーワード
Bento Grid
(弁当グリッド)		 弁当箱のように区画整理されたカード配置。Apple 風。 Bento box layout, Modular grid, Card-based, Organized
Neo-Brutalism
(ネオ・ブルータリズム)		 太い枠線、原色、あえての無骨さ。Figma や Gumroad 風。 Bold borders, High contrast, Raw, Unstyled HTML vibe
Typographic / Editorial
(タイポグラフィック)		 画像に頼らず、巨大な文字の強弱で魅せる雑誌風。 Big typography, Serif fonts, Magazine layout, Whitespace
Isometric
(アイソメトリック)		 斜め上から見下ろした等角投影図法。テック系に多い。 Isometric illustration, 3D perspective, Flat 3D

📝 そのまま使える「最強のプロンプト構成案」

動画の教え（抽象度）と、本記事の補足（具体度）をミックスした、Gemini 3.0 Pro / Cursor / Windsurf 用のプロンプトテンプレートです。

# Role

あなたは世界的な Web デザイン賞（Awwwards）を受賞するレベルの UI/UX デザイナー兼フロントエンドエンジニアです。

# Goal

React (Next.js) と Tailwind CSS を使用して、以下の要件を満たすランディングページを作成してください。

# Design System Requirements

1. **Concept**: "未来的な SaaS のダッシュボード"
2. **Vibe & Style**:
   - **Glassmorphism** を採用し、背景には **Aurora UI** のような有機的なグラデーション配置してください。
   - 全体的には **Grainy Gradient（ノイズ質感）** を薄く乗せて、デジタルだけど温かみのある質感にしてください。
3. **Color Palette**:
   - Base: #0F172A (Deep Navy)
   - Accent: #818CF8 (Indigo) と #34D399 (Emerald) のグラデーション
   - 配色比率は **60:30:10 の法則** に従ってください
4. **Typography**:
   - 見出し: **Playfair Display** (セリフ体)
   - 本文: **Inter** (サンセリフ体)
   - 数字: **Oswald** でアクセントを
5. **Interactions**:
   - ボタンには `hover:scale-105` と `active:scale-95` をつけ、物理的な押し心地を表現してください。
   - スクロールに合わせて要素がふわっと浮き上がる `Framer Motion` のような演出を CSS アニメーションで再現してください。
   - Hover エフェクトは 0.3 秒かけてふんわりと変化させてください。

# Abstract Instruction (Important!)

- 単なるコーディングではなく、見る人が**「没入感（Immersive）」**を感じ、**「洗練された余白（Sophisticated Whitespace）」**に感動するようなクオリティを目指してください。
- "Default Bootstrap feel"（ありきたりなデザイン）は絶対に避けてください。
- 圧倒的なクオリティで、プロ顔負けのデザインを実現してください。

💡 実践のコツ：抽象と具体のサンドイッチ

プロンプトを書く際は、以下の 3 層構造を意識すると効果的です。

1 層目：抽象的な雰囲気（Shin Code メソッド）

「圧倒的なクオリティ」「洗練された」「没入感のある」といった形容詞で、AI の創造性を引き出します。

2 層目：具体的な指示（本記事のメソッド）

フォント名、カラーコード、アニメーション時間など、数値や固有名詞で方向性を固定します。

3 層目：再び抽象的な念押し

「ありきたりなデザインは避けて」「プロ顔負けのクオリティで」と締めくくり、AI に高い基準を意識させます。

この**「抽象 → 具体 → 抽象」のサンドイッチ構造**により、AI の創造性と制御性のバランスが取れます。

🎓 さらに差をつけるための応用テクニック

デザイントレンドを組み合わせる

単一のスタイルだけでなく、複数のスタイルを組み合わせることで、独自性の高いデザインが生まれます。

例:

「Glassmorphism と Neo-Brutalism を融合させて、透明感がありながらも力強い印象の UI にしてください。」

レスポンシブデザインの指示を明確に

モバイルファーストの時代、レスポンシブ対応は必須です。

例:

「モバイル（375px）では縦スクロール、タブレット以上（768px〜）では横並びの Bento Grid レイアウトにしてください。」

アクセシビリティを忘れずに

美しいだけでなく、使いやすいデザインを目指しましょう。

例:

「WCAG の AA レベルに準拠し、コントラスト比は 4.5:1 以上を確保してください。フォーカス状態も明確に表示してください。」

🚀 実際に試してみよう

以下のような具体的なシナリオで、今回学んだテクニックを実践してみてください。

シナリオ 1：スタートアップの LP

# Goal

スタートアップのランディングページを作成

# Style

- Glassmorphism + Grainy Gradient
- カラー: #6366F1（Indigo）メイン、#F59E0B（Amber）アクセント
- フォント: Inter（全体）、Outfit（見出し）
- 雰囲気: 「革新的」「信頼できる」「未来志向」

シナリオ 2：ポートフォリオサイト

# Goal

デザイナーのポートフォリオサイト

# Style

- Neo-Brutalism + Typographic
- カラー: モノクロベース + ビビッドなアクセント（#FF006E）
- フォント: Playfair Display（見出し）、Inter（本文）
- 雰囲気: 「大胆」「アーティスティック」「個性的」

シナリオ 3：SaaS ダッシュボード

# Goal

データ分析ツールのダッシュボード

# Style

- Neumorphism + Bento Grid
- カラー: #F8F9FA（背景）、#2563EB（プライマリ）
- フォント: Inter（全体）、JetBrains Mono（数値・コード）
- 雰囲気: 「プロフェッショナル」「直感的」「効率的」

⚠️ よくある失敗パターンと対策

失敗 1：指示が多すぎて混乱する

対策: 最初は 3〜5 個の重要な指示に絞り、段階的に追加していく。

失敗 2：抽象的すぎて意図が伝わらない

対策: 必ず具体例（カラーコード、フォント名など）を 1 つは含める。

失敗 3：トレンドを詰め込みすぎる

対策: メインスタイルは 1〜2 個に絞り、他は補助的に使う。

📚 参考リソース

プロンプト作成の際に参考になるリソースをまとめました。

まとめ

AI コーディング時代において、エンジニアの役割は「コードを書く人」から**「AI へのディレクター（アートディレクター）」**へとシフトしています。

  • 抽象的な指示（Shin Code メソッド）で AI の創造性を解放する
  • 具体的な指示（本記事のメソッド）で方向性をコントロールする
  • **「抽象と具体のサンドイッチ」**構造でバランスを取る
  • デザインスタイル用語を使いこなして、自分の引き出しを増やす
  • フォント、カラー、アニメーションの 3 要素を明確に指定する

この記事で紹介したテクニックを使えば、「なんとなく綺麗」から「プロ級のクオリティ」へと、AI が生成する Web デザインのレベルを引き上げることができます。

ぜひ実際のプロジェクトで試してみて、自分なりの「最強プロンプト」を見つけてください！

Discussion