ナビゲーションコード生成用
全画面に広がるメニュー
ボタンを押すと、画面いっぱいに大きな文字のメニューが開く。
用途・説明
ハンバーガーボタンを押すと、画面全体を覆う大きな文字のメニューが開くナビゲーションを作成します。メニューの項目が少なく、世界観を大切にしたいブランドサイトやポートフォリオ、採用サイトに向いています。スマホでも押しやすい大きさになります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メニュー項目]- 英字と日本語のセットで。例：ABOUT／私たちについて
[下部の情報]- 例：SNSのリンク、電話番号
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「全画面に広がるメニュー」を実装してください。 ## 表示内容 - 開くボタン（3本線）と、閉じるボタン（×） - メニュー：[メニュー項目] - メニューの下部：[下部の情報] ## デザイン - メニュー：position: fixed で画面全体を覆う。背景 #1463F0、文字 #FFFFFF - 項目は左寄せで縦に並べ、左右padding 32px。上から 80px あける - 英字：28px、font-weight 700、letter-spacing 0.06em。日本語：12px、不透明度 0.8、英字の右に添える - 項目の間は rgba(255, 255, 255, 0.2) の線で区切る。行の高さ 64px - 下部の情報：13px、不透明度 0.85 - 開閉ボタン：右上に固定、48×48px ## 動き - 開くとき：背景が 0.3秒でフェードインし、項目が上から順に 0.05秒ずつずれて、下から 12px 上がりながら表示される - 閉じるとき：全体が 0.2秒でフェードアウトする - 3本線のボタンは、開いたときに「×」に変形する ## 動作 - 開いている間は、後ろのページをスクロールできないようにする - Esc キー、または項目を選んだときに閉じる ## アクセシビリティ - 開閉ボタンは button 要素で、aria-expanded と aria-controls を付ける。ラベルは「メニューを開く」「メニューを閉じる」を切り替える - 開いている間は、フォーカスがメニューの外に出ないようにする（フォーカストラップ） - 閉じたら、フォーカスを開くボタンに戻す - 白い文字と #1463F0 のコントラスト比 4.5:1 以上 - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。