ナビゲーションコード生成用
スマホ用ドロワーメニュー
ハンバーガーボタンから、横にスライドして開くメニュー。
用途・説明
スマホのヘッダーにあるハンバーガーボタンを押すと、画面の右からメニューがスライドして出てくるドロワーメニューを作成します。メニュー項目が多いサイトや、問い合わせボタン・電話番号も一緒に載せたいサイトに向いています。開いている間は背景を暗くし、後ろのページがスクロールしないようにします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メニュー項目]- 例：サービス、料金、導入事例、会社情報、よくある質問
[ボタン文言]- メニュー下部のCTA。例：お問い合わせ
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはスマホ向けUIとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「スマホ用ドロワーメニュー」を実装してください。 ## 表示内容 - ヘッダー右端のハンバーガーボタン - ドロワーの中：閉じるボタン、メニュー [メニュー項目]、CTAボタン「[ボタン文言]」 ## ハンバーガーボタン - 44×44px。3本線（幅 22px、線の太さ 2px、線の間隔 6px、色 #1B2A44） - 線の下に「メニュー」の文字（10px）を添え、何のボタンかが伝わるようにする - 768px未満のときだけ表示する ## ドロワーのデザイン - 画面の右端から、幅 84%（最大 340px）、高さ 100dvh で表示。背景 #FFFFFF - 右上に閉じるボタン（44×44px、×のアイコン） - メニュー：1行の高さ 56px、文字 16px、font-weight 700、色 #1B2A44、左右の padding 24px、行の間に 1px solid #E2E8F0。右端に右向き矢印（色 #B8C5D9） - 現在のページは文字色 #1463F0 - CTAボタン：メニューの下 24px、左右 24px の余白、高さ 52px、角丸 9999px、背景 #1463F0、文字 #FFFFFF - ドロワーの外側は、黒の半透明（rgba(27,42,68,.5)）で覆う ## 動作 - ボタンを押すと、ドロワーが右から 250ms でスライドして開く。背景の幕は同時にフェードインする - 閉じる方法：閉じるボタン、背景の幕をタップ、Escapeキー、メニューのリンクをタップ - 開いている間は、後ろのページがスクロールしないようにする - メニューが画面より長い場合は、ドロワーの中だけスクロールする - 画面幅が 768px 以上に変わったら、自動で閉じる ## アクセシビリティ - ドロワーに role="dialog"、aria-modal="true"、aria-label="メニュー" を付ける - ハンバーガーボタンに aria-expanded と aria-controls を付ける - 開いたら閉じるボタンにフォーカスを移し、開いている間はフォーカスをドロワーの中に閉じ込める - 閉じたら、フォーカスをハンバーガーボタンに戻す - 閉じている間は、中のリンクに Tab キーで移動できないようにする（inert または visibility: hidden） - prefers-reduced-motion: reduce のときはスライドをやめ、すぐに表示する ## 出力形式 - [使用技術]のコードを1つ出力 - JavaScriptは開閉とフォーカスの管理に必要な最小限にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。