基本的なプロンプトの書き方を覚えたら、次は「一度のプロンプトで完璧なものを作ろうとしない」という発想に切り替えましょう。AIデザインは会話の連続で完成させるものです。
上級プロンプト戦略
1. チェーンプロンプト（段階的な改善）
最初から完璧なプロンプトを書こうとせず、ベースを作ってから改善を重ねます。
ステップ1：基本構造を作る
SaaSのランディングページを作ってください。ヒーロー・機能紹介・価格テーブル・
CTA セクションを含みます。Tailwind CSS を使って。ステップ2：特定のセクションを改善する
お問い合わせフォームに、適切なエラーメッセージ付きのフォームバリデーションを追加してください。ステップ3：詳細を調整する
価格テーブルの「スタンダード」プランをハイライト表示に変えてください。
背景色を blue-600 にして、「おすすめ」バッジを追加します。こうした段階的な改善は、一度に全要件を伝えるより精度が上がります。
2. コードスニペット参照
既存のコードやデザインパターンを参照して、一貫性を保ちます。
この既存のコンポーネント構造を参考に、同じアーキテクチャで
商品一覧ページを Tailwind CSS でスタイリングしてください。
[既存のコンポーネントコードをここに貼り付け]自分のコードベースにあるボタンやカードのコードを参照させることで、既存デザインとの一貫性が生まれます。
3. ペルソナ指定
AIに「どんな専門家として答えるか」を設定すると、出力の質が変わります。
SaaSプロダクト専門のUI/UXデザイナーとして、価格セクションのHTMLとCSSを作ってください。アクセシビリティを専門とするフロントエンドエンジニアとして、
このフォームのWCAG 2.1 AA 準拠を確認・修正してください。4. アクセシビリティ対応を組み込む
アクセシビリティ要件をプロンプトに含めると、最初から使いやすいUIが生まれます。
WCAG 2.1 AA 準拠のフォームを作ってください：
- すべての入力欄に適切な aria-label を設定
- キーボードナビゲーション対応
- フォーカス時のビジュアルインジケーター表示
- エラーメッセージは role="alert" でスクリーンリーダーに通知プロンプトの精度を上げる7つのチェックリスト
複雑なUIを依頼するとき、以下の項目を確認してからプロンプトを送ります。
| 項目 | チェックポイント |
|---|---|
| フレームワーク | Tailwind / Bootstrap など明示したか |
| レスポンシブ | ブレークポイントを数値で指定したか |
| カラー | ヘックスコードまたはTailwindクラスを記載したか |
| タイポグラフィ | フォント名・サイズ・ウェイトを含めたか |
| インタラクション | ホバー・フォーカス・クリック時の挙動を記述したか |
| アクセシビリティ | ariaラベルやフォーカス対応に言及したか |
| 改善方針 | チェーンで改善するか、一度に全要件を渡すか決めたか |
よくある失敗パターンと改善方法
「全部一度に作って」は失敗しやすい
❌ 「ランディングページ全体を完璧に作って。ヒーロー・機能・価格・FAQ・フッターすべて含めて、アニメーションあり、レスポンシブ、Tailwind、アクセシビリティ対応で。」
AIの出力は長くなるほど質が落ちやすくなります。セクションごとに分割して依頼しましょう。
✅ セクションを1つずつ依頼し、確認してから次に進む
コンテキストを使い回す
前のプロンプトで決めたデザイン方針（カラーパレット・フォント・コンポーネント構造）は、次のプロンプトでも参照するよう指示します。
先ほど作成した価格テーブルのデザインシステム（カラー・フォント・角丸・シャドウ）を
維持したまま、FAQセクションを作ってください。 クイズ