ナビゲーションは複合スキルが必要だからこそAI向き
ナビゲーションメニューにはHTML構造・CSS・JavaScriptが絡み合います。まとめてAIに依頼することで、各技術間の整合性が取れた一貫したコードが得られます。
プロンプト例（ハンバーガーメニュー）
「バニラJavaScriptでハンバーガーメニューを実装してください。
仕様：クリックで左側からドロワーナビゲーションが開閉する
・オーバーレイをクリックでも閉じる
・アニメーションはCSSトランジション 0.3s
・JSはクラスのトグルのみ担当（スタイルはCSSで）
・アクセシビリティのため aria-expanded 属性を正しく管理する
HTML・CSS・JSを分けて出力してください。」
ナビゲーションパターン別プロンプト
- メガメニュー：「PCのみ、hover時に複数列のドロップダウンが開くメガメニュー。スマホはアコーディオン式。」
- スティッキーヘッダー：「スクロールで固定になり、少し上にスクロールすると再表示されるスマートヘッダー。」
- タブナビゲーション：「クリックで対応コンテンツに切り替わるタブUI。URLハッシュも連動させてください。」
- パンくずリスト：「構造化データ（JSON-LD）付きのパンくずリストHTMLを生成してください。」
既存HTMLへの安全な組み込み方
- AIに「変更した箇所に
/* AI追加 */コメントを付けてください」と依頼すると差分が一目でわかります。 - 既存のz-indexの最大値をAIに伝え、それより大きい値で設定してもらう。
- 既存のjQueryバージョン・読み込み済みプラグインをAIに伝えて競合を防ぐ。
