テーブル・一覧コード生成用
ステータスバッジつきの表
「発送済み」「準備中」などを、色つきのラベルで。
用途・説明
各行の状態を、色つきのバッジで表示する表を作成します。注文の状況、申請の進み具合、タスクの状態など、ひと目で状態を見分けたい一覧に向いています。色だけに頼らず、文字と小さな点でも区別できるようにしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表の内容]- 見出しの行と、5〜8行のデータ
[ステータスの種類]- 例：準備中、発送済み、キャンセル
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ステータスバッジつきの表」を実装してください。 ## 表示内容 - 表： [表の内容] - ステータスの種類：[ステータスの種類] ## デザイン - 表：外枠 1px solid #E2E8F0、角丸 10px。見出しの行は背景 #F7F9FC・文字 13px・font-weight 700・色 #5F6D84 - データのセル：14px、色 #1B2A44、padding 12px 16px、下に 1px solid #EDF1F7 - バッジ：高さ 24px、左右padding 10px、角丸 999px、文字 12px・font-weight 700。文字の左に 6px の点を添える - バッジの色は、意味ごとに4つの系統を用意する - 進行中（準備中、対応中など）：背景は #1463F0 の9%の淡い色、文字と点は #1463F0 - 完了（発送済み、承認など）：背景 #EFFAF4、文字と点 #1F7A55 - 注意（保留、要確認など）：背景 #FFF8E5、文字と点 #946200 - 終了・無効（キャンセル、停止など）：背景 #F1F4F9、文字と点 #5F6D84 - バッジの幅は内容に合わせ、列のなかで左揃えにする ## 実装 - ステータスの名前と、色の系統の対応を、1つの対応表（オブジェクト）にまとめる - 対応表にない名前が来たときは、「終了・無効」の色で表示する - 表の上に、ステータスごとの件数を並べ、押すとその状態で絞り込めるようにする ## アクセシビリティ - 状態を、色だけでなく文字で必ず示す - 色の系統どうしが、色覚の違いがあっても見分けられるよう、点の形を変えることも検討する（丸、四角、輪など） - バッジの文字と背景のコントラスト比 4.5:1 以上を保つ - 見出しのセルは th（scope="col"） ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。