AIでスムーススクロールナビゲーション作成｜プロンプト作例

このプロンプトは、Webページ内のナビゲーションメニューをクリックした際に対象セクションへなめらかにスクロール移動する機能と、現在表示中のセクションをメニュー上でハイライト表示するアクティブ状態の視覚的フィードバックを、一度の指示でまとめて実装させるものです。

HTML・CSS・JavaScriptを組み合わせたフロントエンド実装の場面で特に有効であり、ランディングページやドキュメントサイトなど縦長のレイアウトを持つWebコンテンツのUX向上に直結します。Intersection Observer APIを活用したアクティブ検出など、実用的なコードを生成させたい場合は「Vanilla JSで」「React向けに」といった技術スタックを追記すると精度が上がります。