フォーム・お問い合わせコード生成用
ファイルアップロード欄
ドラッグ&ドロップでも選択でも使える、ファイルの受け付け欄。
用途・説明
画像や書類を受け付けるアップロード欄を作成します。破線で囲んだ領域にファイルをドラッグするか、ボタンから選択できます。選んだファイルの名前とサイズを一覧で表示し、取り消しもできます（送信処理は含みません）。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[受け付けるファイル]- 例：JPEG・PNG・PDF、1ファイル10MBまで、最大3件
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「ファイルアップロード欄」を実装してください（アップロード処理は含めず、選択と表示のみ）。 ## 表示内容 - ドロップ領域：アイコン、「ここにファイルをドラッグ、または ファイルを選択」、受け付ける条件（[受け付けるファイル]） - 選択したファイルの一覧：ファイル名、サイズ、取り消しボタン ## レイアウト・デザイン - ドロップ領域：高さ 160px、枠線 2px dashed #CBD5E1、角丸 12px、背景 #FFFFFF、中央揃え - アイコン：32px、色 #1463F0 - 案内文：15px、色 #1B2A44。「ファイルを選択」の部分は #1463F0・font-weight 700・下線 - 条件：12px、色 #5F6D84 - ファイルの行：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 8px、padding 10px 14px ## 動作 - ドラッグ中：枠線を #1463F0 に、背景を #1463F0 の6%にする - 形式やサイズが条件に合わないファイルは追加せず、理由をメッセージで表示する - 取り消しボタンで、一覧からそのファイルだけを外す - 画像の場合は小さなサムネイルを表示する ## アクセシビリティ - 実体は input type="file" とし、キーボードでも選択できること。ドラッグ&ドロップだけにしない - input の accept 属性に、受け付ける形式を指定する - ファイルの追加・削除・エラーを aria-live="polite" で伝える - 取り消しボタンには「（ファイル名）を取り消す」のラベルを付ける ## 出力形式 - [使用技術]のコードを1つ出力 - アップロード処理を接続する箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。