ナビゲーションコード生成用
階層を開閉できるスマホメニュー
親の項目を押すと、子の項目がその場で開く。
用途・説明
スマホ用のメニューで、「サービス」などの親の項目を押すと、その下に子の項目がアコーディオンで開く構成を作成します。ページ数が多く、メニューが2階層になっているコーポレートサイトやECサイトに向いています。画面を切り替えずに、行きたいページまでたどり着けます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メニュー構成]- 親の項目と、その下の子の項目
[下部のボタン]- 例：お問い合わせ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「階層を開閉できるスマホメニュー」を実装してください。 ## 表示内容 [メニュー構成] - メニューの最後に、ボタン：[下部のボタン] ## デザイン - メニュー全体：画面の右から開くパネル（幅 100%、最大 360px）、背景 #FFFFFF - 親の項目：高さ 56px、左右padding 20px、文字 16px・font-weight 700、下に 1px solid #E2E8F0 - 子を持つ親の項目：右端に「＋」のアイコン（開いたら「−」に変わる） - 子の項目：高さ 48px、左padding 36px、文字 15px、背景 #F7F9FC - 子を持たない親の項目：右端に右向きの矢印 - 現在のページ：文字色 #1463F0 - 下部のボタン：幅 100%、高さ 52px、背景 #1463F0、文字 #FFFFFF、角丸 999px。上に 24px の余白 ## 動作 - 親の項目を押すと、子の項目が 0.2秒で開閉する。ほかの親を開いても、開いているものは閉じない - 親の項目そのものにページがある場合は、子の先頭に「サービス トップ」のような項目を入れる - 現在のページを含む親は、最初から開いた状態にする ## アクセシビリティ - 開閉する親の項目は button 要素で、aria-expanded と aria-controls を付ける - 子の項目は ul / li でマークアップする - 「＋」「−」のアイコンは aria-hidden="true" - タップ領域は高さ 48px 以上 - 開閉の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - メニューの構成を、入れ子の配列で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。