UIプロンプトの基本

読了 5分＋実践 30分

AIデザインツールを使い始めた方、生成されるUIの品質を上げたいと思っている方

特になし（HTMLやCSSの基礎があると理解が深まります）

AIを使ったUI生成で「思ったものと違う」という経験をしたことはありませんか？その多くは、プロンプトの書き方が原因です。

効果的なプロンプトの6つの要素

AIに高品質なUIを生成させるには、以下の6つの要素を意識して組み合わせます。

「CSSで作って」ではなく、使用するフレームワークを具体的に指定します。

Tailwind CSS を使って、レスポンシブ対応のお問い合わせフォームをバリデーション付きで作ってください。

指定しないと、AIはバニラCSS・Bootstrap・Tailwind のどれで生成するか判断できず、期待と異なる結果になりがちです。

必要な要素を箇条書きで列挙します。

以下の要素を含む商品カードを作ってください：
- 上部に商品画像
- 商品タイトル
- 価格
- 短い説明文
- 「カートに追加」ボタン

構造を明示することで、AIは不要な要素を追加せず、必要な要素を漏らしません。

画面サイズごとの挙動を明記します。

768px 未満のモバイルでハンバーガーメニューに折りたたまれるナビゲーションバーを作ってください。

指定しない場合、モバイル対応が不完全になることがあります。

カラーコードや角丸サイズなど、具体的な値を含めます。

カラーパレット：#3A86FF（プライマリ）、#FF006E（アクセント）、#FFFFFF（背景）、角丸 8px で統一してください。

ホバーエフェクトやアニメーションも言葉で伝えられます。

カードにホバーしたとき、1.05倍にスケールアップし、かすかなシャドウを追加するエフェクトを加えてください。

既知のサービスのデザインを参考として伝えると精度が上がります。

Airbnb のホームページにあるようなテスティモニアルセクションを作ってください。アバター画像・引用文・顧客名を含む形で。

よく使うUIコンポーネントのプロンプト例です。そのままコピーして、固有名詞や色を書き換えて使えます。

Tailwind CSS を使って、SaaSプロダクト向けのモダンなヒーローセクションを作ってください。
- 見出し、サブ見出し、CTAボタンを含む
- 右側にフローティングするモックアップ画像を配置
- 完全にレスポンシブ対応（モバイル・タブレット・デスクトップ）

Tailwind CSS を使って、3プランの価格テーブルを作ってください。
- 各カードにプラン名・価格・チェックマーク付き機能リスト・申し込みボタン
- おすすめプランをハイライト表示
- レスポンシブ対応

以下の仕様でスティッキーナビゲーションバーを作ってください：
- 左にロゴ、中央にナビリンク、右にログイン／サインアップボタン
- モバイルではハンバーガーメニューに折りたたむ
- スライドインアニメーション付き

テスティモニアルセクションを作ってください：
- 3枚のカードを横並びに配置
- 各カードに顧客画像・引用文・名前・肩書きを含む
- カード上部に星評価
- 角丸とシャドウを使ったクリーンなデザイン

曖昧なプロンプト	改善後のプロンプト
「ボタンを作って」	「Tailwind CSS でプライマリ色（#3B82F6）の角丸8px ボタンを作って。ホバー時にダーク化するエフェクト付き」
「ナビを作って」	「ロゴ左・リンク中央・CTAボタン右のスティッキーナビ。768px以下でハンバーガーに折りたたむ」
「かっこいいカードで」	「画像・タイトル・説明・ボタンの商品カード。シャドウあり、ホバーで1.05倍スケール」

このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]

クイズ