ナビゲーションコード生成用
手続きの進み具合を示すステップナビ
いま何番目で、あといくつあるかを上部に表示。
用途・説明
申し込みや購入の手続きで、全体のステップといまの位置を示すナビゲーションを作成します。終わったステップにはチェック、いまのステップは色付き、これからのステップはグレーで表示します。カート、会員登録、予約、見積もりなど、数画面にわたる手続きに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップ名]- 例：カート、お届け先、お支払い、確認
[いまのステップ]- 例：2番目
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「手続きの進み具合を示すステップナビ」を実装してください。 ## 表示内容 - ステップ：[ステップ名] - いまのステップ：[いまのステップ] ## レイアウト - 横1列に等間隔で並べる。各ステップは、丸のなかの番号と、その下のステップ名 - 丸と丸のあいだを横線でつなぐ - スマホ：ステップ名はいまのステップだけ表示し、ほかは丸だけにする。上に「ステップ 2 / 4」と文字でも示す ## デザイン - 丸：直径 32px、数字 14px・font-weight 700 - 完了したステップ：丸の背景 #1463F0、白いチェックマーク。線も #1463F0 - いまのステップ：丸の背景 #FFFFFF、枠線 2px solid #1463F0、数字 #1463F0。ステップ名は font-weight 700・色 #1B2A44 - これからのステップ：丸の背景 #E2E8F0、数字 #5F6D84。ステップ名は #5F6D84 - つなぐ線：高さ 2px、未完了の部分は #E2E8F0 - ステップ名：13px ## 動作 - 完了したステップは、押すとその画面に戻れるリンクにする - これからのステップは押せない ## アクセシビリティ - nav 要素（aria-label="手続きの進み具合"）のなかの ol / li でマークアップする - いまのステップには aria-current="step" - 完了したステップには、読み上げ用に「完了」の文言を付ける - 色だけに頼らず、チェックマーク・枠線・太字でも状態を区別する ## 出力形式 - [使用技術]のコードを1つ出力 - ステップ名の配列と、いまのステップの番号を渡して表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。