ナビゲーションコード生成用
横スクロールのカテゴリナビ
指で横に流して選ぶ、スマホ向けのチップ型メニュー。
用途・説明
カテゴリやタグを丸いチップにして横1列に並べ、指で左右に流して選ぶナビゲーションを作成します。スマホの狭い画面でも多くの選択肢を置け、記事一覧・商品一覧・店舗検索などの絞り込みに向いています。続きがあることが分かるよう、端をぼかす指定を入れています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[カテゴリ]- 例：すべて、新着、人気、セール、特集、ギフト
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはスマホ向けUIに詳しいフロントエンドエンジニアです。 以下の条件で「横スクロールのカテゴリナビ」を実装してください。 ## 表示内容 - カテゴリ：[カテゴリ] - 各カテゴリは、別のページ（または絞り込み結果）へのリンク ## レイアウト - チップを横1列に並べ、折り返さない。画面からはみ出すぶんは横スクロールにする - チップ同士の間隔 8px。列の左右に 16px の余白をとり、最初のチップが画面の端にくっつかないようにする - スクロールバーは隠す - 右端のチップが途中で切れて見えるようにし、続きがあることを伝える ## デザイン - チップ：高さ 36px、左右の padding 16px、角丸 9999px、文字 14px、改行しない - 通常：背景 #FFFFFF、枠線 1px solid #E2E8F0、文字色 #47566E - 選択中：背景 #1463F0、枠線も同色、文字 #FFFFFF、font-weight 700 - タップ領域は、上下に余白を足して高さ 44px 以上にする - スクロールできる側の端に、幅 32px のフェード（背景色 → 透明）を重ねる。端まで動かしたら、その側のフェードを消す ## 動作 - 指でなめらかにスクロールでき、チップの切れ目で軽く止まる（scroll-snap） - ページを開いたとき、選択中のチップが画面内に入る位置までスクロールしておく - ページ上部に固定する場合は、ヘッダーの直下に sticky で貼り付ける - 768px以上で全部が収まるときは、スクロールやフェードを出さず、そのまま並べる - マウスの場合に備え、左右の端に小さな矢印ボタン（32px）を出して動かせるようにする（タッチ端末では出さない） ## アクセシビリティ - nav 要素に aria-label="カテゴリ" を付け、ul / li と a 要素でマークアップする - 選択中のチップには aria-current="page"（絞り込みの場合は aria-current="true"） - キーボードの Tab キーで順に移動でき、フォーカスしたチップが画面内に入るようにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - フェードと矢印の表示・非表示は、スクロール位置から判定する最小限のJavaScriptで実装する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。