ナビゲーションコード生成用
戻るボタン付きのアプリ風ヘッダー
左に戻る、中央にタイトル、右に操作を置くスマホ用の上部バー。
用途・説明
スマホアプリのような、左に戻るボタン、中央に画面のタイトル、右に操作のアイコンを置く上部バーを作成します。予約や注文の手続き、マイページの下層画面、会員向けのWebアプリなど、画面を行き来するスマホ向けの画面に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[画面のタイトル]- 例：予約内容の確認
[右側の操作]- 例：共有、閉じる、なし
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「戻るボタン付きのアプリ風ヘッダー」を実装してください。 ## 表示内容 - 左：戻るボタン（左向きの山形のアイコン） - 中央：[画面のタイトル] - 右：[右側の操作] ## レイアウト - CSS Grid の3列（48px 1fr 48px）。タイトルは、左右のボタンの有無にかかわらず画面の中央に置く - 高さ 56px。iPhone の上部（ノッチ）を避けるため、padding-top に env(safe-area-inset-top) を足す - position: sticky; top: 0 ## デザイン - 背景 #FFFFFF、下に 1px solid #E2E8F0 - タイトル：16px、font-weight 700、色 #1B2A44、中央揃え。長い場合は1行で省略（…） - ボタン：48×48px、アイコンは 24px・色 #1463F0 - 押している間（active）：背景 #F1F5FC の円 ## 動作 - 戻るボタンは、履歴があれば1つ前の画面へ戻る。履歴がない場合（直接開いた場合）は、決めておいた上の階層のページへ移動する - スクロールしたら、下に影（0 2px 8px rgba(27, 42, 68, 0.08)）を付ける ## アクセシビリティ - header 要素を使い、タイトルは h1 にする - 戻るボタンは aria-label="前の画面に戻る"。行き先が決まっている場合は a 要素にする - アイコンは aria-hidden="true" - タップ領域は 44×44px 以上 - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - 入力途中の画面で戻るボタンを押したときに、確認を出す方法をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。