モーダル・通知・タブコード生成用
スマホで全画面になるモーダル
スマホでは画面いっぱいに開き、下のボタンで決定。
用途・説明
PCでは中央のダイアログ、スマホでは画面全体を覆うモーダルを作成します。上に見出しと閉じるボタン、下に固定の決定ボタンを置きます。絞り込みの条件や、設定の変更など、スマホで項目の多い操作をするときに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：絞り込み
[項目のリスト]- 例：エリア、価格帯、こだわり条件
[決定ボタンの文言]- 例：この条件で探す
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スマホで全画面になるモーダル」を実装してください。 ## 表示内容 - ヘッダー：左に閉じるボタン（✕）、中央に見出し「[見出し]」、右に「クリア」 - 本文：[項目のリスト]（各行を押すと、選択肢が開く想定。サンプルとして1行だけ実装する） - フッター：決定ボタン「[決定ボタンの文言]」 ## レイアウト - スマホ（767px以下）：画面全体を覆う。ヘッダーとフッターは固定し、本文だけをスクロールさせる - PC：画面の中央に、幅 520px・最大の高さ 80% のダイアログとして表示する - フッターの下には、端末の下端の余白（safe-area-inset-bottom）を加える ## デザイン - ヘッダー：高さ 56px、下に 1px solid #E2E8F0。見出し 16px・font-weight 700・色 #1B2A44 - 「クリア」：14px、色 #1463F0 - 本文の行：高さ 56px、左右padding 16px、下に 1px solid #E2E8F0、文字 15px。右端に右向きの山形（色 #8A96AA） - 選択済みの内容は、山形の左に 13px・色 #1463F0 で表示する - フッター：上に 1px solid #E2E8F0、padding 12px 16px - 決定ボタン：高さ 48px、幅100%、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700 ## 動作 - スマホでは、下から上へスライドして開く（0.3秒）。PCではフェードイン - 決定ボタンに、条件に合う件数を表示できるようにする（例：「この条件で探す（24件）」） - 「クリア」で、すべての選択を取り消す - 閉じるボタンと Esc キーでは、変更を反映せずに閉じる ## アクセシビリティ - dialog 要素で実装し、aria-labelledby で見出しと結びつける - 開いたら見出しにフォーカスを移し、閉じたら開いたボタンに戻す - 閉じるボタンに aria-label="閉じる" - タップ領域はすべて 44px 以上 - スライドの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。