モーダル・通知・タブコード生成用
ステップ式のモーダル
質問に1つずつ答えて進む、数ステップの設定。
用途・説明
モーダルのなかで、質問に1つずつ答えながら進むステップ式のパーツを作成します。はじめての設定や、おすすめプランの診断、アンケートなどに向いています。上の進み具合の表示で、あとどのくらいかが分かります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップのリスト]- 質問と選択肢のセットを3つ
[最後の画面の内容]- 例：設定が完了しました。さっそく始めましょう。
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ステップ式のモーダル」を実装してください。 ## 表示内容 - 進み具合のバー（ステップの数だけ区切る）と、「ステップ 2 / 3」の文 - 質問と選択肢： [ステップのリスト] - ボタン：「戻る」と「次へ」（最後のステップでは「完了」） - 最後の画面：[最後の画面の内容] ## レイアウト - 画面の中央に表示。幅 480px（スマホでは左右に 16px の余白） - 上から 進み具合 → 質問 → 選択肢 → ボタン - ステップが変わっても、モーダルの高さが大きく変わらないよう、最小の高さを決める ## デザイン - モーダル：背景 #FFFFFF、角丸 16px、padding 28px、影 0 24px 64px rgba(27,42,68,0.3) - 進み具合のバー：高さ 4px、角丸 999px、間隔 4px。済んだステップと現在のステップは #1463F0、残りは #DCE4F0 - 「ステップ 2 / 3」：12px、font-weight 700、色 #1463F0 - 質問：20px、font-weight 700、色 #1B2A44 - 選択肢：高さ 44px、左右padding 20px、角丸 999px、枠線 1px solid #DCE4F0、文字 14px・font-weight 700・色 #5F6D84 - 選択中：背景 #1463F0、枠線 #1463F0、文字 #FFFFFF - 「次へ」：背景 #1463F0、文字 #FFFFFF。「戻る」：背景 #FFFFFF、枠線 1px solid #CBD5E1 ## 動作 - 選択肢を選ぶまで、「次へ」は無効にする - 「戻る」で前のステップに戻ったとき、選んだ内容が残っている - ステップの切り替えは、横に 16px スライドしながらフェード（0.2秒） - 途中で閉じても、次に開いたときに続きから再開できるよう、状態を保持する - 完了したら、すべての回答をコールバックで渡す ## アクセシビリティ - dialog 要素で実装する。選択肢はラジオボタン（fieldset / legend）でマークアップする - ステップが変わったら、質問にフォーカスを移し、「ステップ2、全3ステップ」と読み上げられるようにする - 進み具合のバーは role="progressbar" と aria-valuenow / aria-valuemax を設定する - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。