モーダル・通知・タブコード生成用
進行状況バー（アップロード）
ファイルごとに、どこまで進んだかを見せる。
用途・説明
ファイルのアップロードなど、時間のかかる処理の進み具合を、ファイルごとのバーで見せるパーツを作成します。完了・失敗・キャンセルの状態を持ち、失敗したものだけをやり直せます。待っているあいだの不安を減らせます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：アップロード中…
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「進行状況バー」を実装してください。 ## 表示内容 - 見出し：[見出し]（すべて終わったら「アップロードが完了しました」に変える） - ファイルごとの行：ファイル名、進み具合（%）、バー、取り消しのボタン - サンプルとして、完了・進行中・失敗の3つの状態を表示する ## レイアウト - 全体をカードで囲む。最大幅 480px - 各行：上の段の左にファイル名、右に進み具合。下の段にバー - 行の間隔 16px ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 20px - 見出し：16px、font-weight 700、色 #1B2A44 - ファイル名：14px、色 #1B2A44、長い名前は中央を省略する（拡張子を残す） - 進み具合：13px、font-weight 700、色 #1463F0、等幅の数字 - バー：高さ 6px、角丸 999px、背景 #EDF1F7、塗りは #1463F0 - 完了：進み具合のかわりに「完了」とチェックマーク（色 #1F9D6B） - 失敗：バーの塗りを #C9343A にし、進み具合のかわりに「失敗」と「やり直す」のリンク。行の下に理由（13px、色 #C9343A） ## 動作 - 進み具合の値（0〜100）を渡すと、バーと数字が変わる。バーの伸びはなめらかに（0.2秒） - どこまで進んだか分からない処理のために、塗りが左右に動き続ける表示も用意する - 取り消しのボタンで、その行の処理を止めて行を消す - 「やり直す」で、その行だけを0%から再開する ## アクセシビリティ - バーは role="progressbar"、aria-valuenow / aria-valuemin / aria-valuemax、aria-label にファイル名を入れる - 進み具合は、変わるたびに読み上げない。完了と失敗だけを aria-live="polite" で伝える - 取り消しのボタンに aria-label="（ファイル名）のアップロードを取り消す" - 動き続ける表示は prefers-reduced-motion のとき、動かさずに「処理中」の文字で示す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。