モーダル・通知・タブコード生成用
入力フォーム入りのモーダル
ページを移動せず、その場で入力して送信する。
用途・説明
モーダルのなかに短い入力フォームを入れたパーツを作成します。メンバーの招待、名前の変更、フォルダの作成など、1〜3項目の入力で済む操作に向いています。入力途中で閉じようとしたときの確認まで含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：メンバーを招待
[入力項目]- 例：メールアドレス（必須）、権限（選択）
[送信ボタンの文言]- 例：招待を送る
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「入力フォーム入りのモーダル」を実装してください。 ## 表示内容 - 見出し：[見出し] - 入力項目：[入力項目] - ボタン：「キャンセル」と「[送信ボタンの文言]」 - 右上に閉じるボタン ## レイアウト - 画面の中央に表示。幅 480px（スマホでは左右に 16px の余白） - 入力項目は縦に並べ、ラベルを入力欄の上に置く。項目の間隔 20px - ボタンは右下に横並び ## デザイン - モーダル：背景 #FFFFFF、角丸 16px、padding 28px、影 0 24px 64px rgba(27,42,68,0.3) - 見出し：20px、font-weight 700、色 #1B2A44 - ラベル：14px、font-weight 700、色 #1B2A44 - 入力欄：高さ 48px、枠線 1px solid #CBD5E1、角丸 8px、文字 16px - フォーカス時：枠線 #1463F0、外側に淡い輪（3px、#1463F0 の18%） - エラー時：枠線 #C9343A、下に 13px のメッセージ - 送信ボタン：高さ 44px、左右padding 24px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700 - キャンセルボタン：背景 #FFFFFF、枠線 1px solid #CBD5E1、文字 #47566E ## 動作 - dialog 要素と showModal() で実装する。form 要素で囲み、Enter キーで送信できるようにする - 開いたら、最初の入力欄にフォーカスを移す - 送信中はボタンを無効にし、「送信中…」と表示する - 成功したら閉じて、結果をコールバックで渡す。失敗したら閉じずに、フォームの上にエラーを表示する - 何か入力した状態で閉じようとしたら、「入力した内容は保存されません。閉じますか？」と確認する ## アクセシビリティ - aria-labelledby で見出しと結びつける - 入力欄と label を for / id で結びつける。必須の項目には required と「必須」の表示 - エラーは aria-describedby で入力欄と結びつけ、aria-invalid="true" を設定する - 閉じたら、開いたボタンにフォーカスを戻す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。