AIにHTMLを作成させる指示ガイド

1. 基本構成要素の指定

目的を明確にする

• 「ランディングページ」「ダッシュボード」「ポートフォリオ」など、何を作るのかを明記
• 「ユーザーが何をするサイト」なのかを説明する

機能要件を述べる

• 必要な機能：フォーム、検索機能、フィルター、スライダーなど
• 動作の詳細：クリック時の動作、フォーム送信時など
• レスポンシブ対応が必要かどうか

2. ビジュアル・デザイン指示のコツ

スタイル系形容詞

• 雰囲気：モダン、ミニマル、ポップ、高級感のある、フレンドリーな
• 視覚効果：ダークモード、グラデーション、ガラスモーフィズム、3D風
• 質感：洗練された、シンプルな、複雑な、豪華な

色に関する指示

• 「青系とグレーの落ち着いた配色」
• 「ビビッドなネオンカラーを使った」
• 「白地に黒テキストのハイコントラスト」
• 具体的なカラーコード指定も効果的：「#3498db」など

アニメーション・動き

• 「スムーズなホバーエフェクト」
• 「フェードインのアニメーション」
• 「スクロール時の視差効果」
• 「マウス追跡エフェクト」

3. UIコンポーネント指定の例

4. 具体的なプロンプト構成テンプレート

以下のHTMLを作成してください：

【目的】
[何を作るのか、目的を1-2文で]

【レイアウト】
[ヘッダー、メイン、フッターなどの構成]

【デザイン】
[モダン/ミニマル/ポップなど + 色指定 + その他の特徴]

【機能】
[クリック時の動作、アニメーション、レスポンシブ対応など]

【コンポーネント】
[ボタン、カード、フォームなど具体的な見た目指定]

5. 効果的な組み合わせ例

例1：モダンなサービスサイト

「モダンで洗練された企業サイト。黒と白を基調に青系のアクセントカラー。スムーズなホバーエフェクトと、スクロール時のフェードインアニメーション。角丸で影のあるカードコンポーネント。」

例2：ポップなランディングページ

「明るくカラフルなランディングページ。ビビッドなグラデーション背景。大きく目立つCTAボタン。マウス追跡エフェクト。ホバー時に拡大・回転するカード。モバイル対応レスポンシブ。」

例3：ダークモードダッシュボード

「ダークモード基調のダッシュボード。濃紺背景にネオンカラーのアクセント。ガラスモーフィズムスタイルのパネル。スムーズなアニメーション。フルレスポンシブ。」

6. 避けるべき指示と改善例

7. より詳細な指示で結果を高める

セクション別の指定

• 「ヘッダーは固定で、背景色は濃紺」
• 「メインコンテンツはカード型で、ホバー時に影が強くなる」
• 「フッターはシンプルな黒背景」

フォント・テキストの指定

• 「見出しは大きく、ボールドで、カラーグラデーション」
• 「本文は読みやすい白テキスト」
• 「フォントファミリーはモダンサンセリフ」

レスポンシブ指定

• 「タブレットサイズで2列、スマートフォンで1列」
• 「フルHDディスプレイ対応」

8. テクニック：参考サイトの指定

必要に応じて参考にしてほしいスタイルを指定することも効果的です：

「Dribbble や Behance にあるようなモダンなUIデザイン」 「Apple のサイトのようなミニマルで洗練されたデザイン」

まとめ

AIに効果的に指示するポイント：

1. 目的と機能を明確にする
2. 具体的な形容詞を組み合わせる（モダン + 洗練 + グラデーションなど）
3. 色指定を具体的にする
4. アニメーション・動きを明記する
5. ビジュアルイメージを詳細に描写する