フォーム・お問い合わせコード生成用
エラー表示付きの入力欄
どこが、なぜ違うのかを、入力欄のすぐ下で伝える。
用途・説明
入力内容に誤りがあるときの表示を整えた入力欄を作成します。赤い枠線、アイコン付きのメッセージ、直し方の案内をセットにし、正しく入力できたときの表示も用意します。どのフォームにも流用できる入力欄の部品として使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ラベル]- 例：メールアドレス
[エラーメッセージ]- 例：メールアドレスの形式で入力してください（例：name@example.com）
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「エラー表示付きの入力欄」を実装してください。 ## 表示内容 - ラベル：[ラベル]（「必須」の表示付き） - 入力欄 - エラーメッセージ：[エラーメッセージ] ## レイアウト・デザイン - ラベルは入力欄の上に常に表示（14px、font-weight 700、色 #1B2A44） - 入力欄（通常）：高さ 48px、角丸 8px、1px solid #CBD5E1、文字 16px - 入力欄（エラー）：枠線 1.5px solid #C9343A、#C9343A の6%の背景 - エラーメッセージ：入力欄の下 6px。13px、色 #C9343A、先頭に 16px の注意アイコン - 入力欄（正しい入力）：右端に小さなチェックマークを表示（色は緑系） ## 動作 - 確認するタイミング：入力欄から離れたとき。入力中にはエラーを出さない - エラーが出ている欄は、入力し直して正しくなった時点でエラーを消す - 送信時にエラーがあれば、最初のエラーの欄にフォーカスを移す - メッセージは「何が違うか」と「どう直すか」を1文で伝える ## アクセシビリティ - エラー時は入力欄に aria-invalid="true" を付け、メッセージを aria-describedby で関連付ける - メッセージが表示されたことを role="alert" で伝える（入力のたびに何度も読み上げない） - エラーを色だけで伝えず、アイコンと文字でも伝える - #C9343A と背景のコントラスト比は 4.5:1 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 通常・エラー・正しい入力の3つの状態を切り替えられるコードにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。