ナビゲーションコード生成用
スマホ用ボトムナビゲーション
親指で届く位置に、主要な4つの行き先を。
用途・説明
スマホの画面下端に固定する、アイコンとラベルのナビゲーションバーを作成します。会員サイトや予約サービスなど、アプリのように繰り返し使うサイトに向いています。PCでは表示せず、ヘッダーのメニューと役割が重ならないようにする指定を含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メニュー項目]- 3〜5個。例：ホーム、さがす、お気に入り、マイページ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはスマホ向けUIに詳しいフロントエンドエンジニアです。 以下の条件で「スマホ用ボトムナビゲーション」を実装してください。 ## 表示内容 - メニュー：[メニュー項目]（各項目はアイコン＋ラベル） ## レイアウト - 画面幅 768px 未満のときだけ表示し、画面下端に固定（position: fixed） - 項目を等幅で横に並べる。各項目はアイコンの下にラベルを置く - バーの高さは 56px + env(safe-area-inset-bottom) - バーの高さぶん、ページ本体の下に余白を足して内容が隠れないようにする ## デザイン - 背景 #FFFFFF、上端に 1px solid #E2E8F0 - アイコン：24px の線画（stroke-width 1.75）。インラインSVGで用意する - ラベル：10〜11px。省略せず、必ず表示する（アイコンだけにしない） - 通常：色 #5F6D84 - 現在のページ：色 #1463F0、ラベルを font-weight 700 に - 各項目のタップ領域は 48×48px 以上 ## 動作 - タップしたときに背景がごく薄く反応する（#1463F0の8%） - スクロールしても隠さず、常に表示しておく - 通知などの件数がある項目には、アイコンの右上に小さなバッジを表示できるようにする ## アクセシビリティ - nav 要素に aria-label="メインメニュー" を付ける（ヘッダーのナビと区別できる名前にする） - 各項目は a 要素。現在のページには aria-current="page" - アイコンは aria-hidden="true"。バッジの件数は「お知らせ 3件」のように読み上げられるようにする - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - アイコンの差し替え方と、項目数を変えるときの注意点（5個までが目安）をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。