テーブル・一覧コード生成用
メンバーの一覧
アイコン・名前・権限を並べ、その場で変更できる。
用途・説明
チームのメンバーを、アイコン・名前・メールアドレス・権限で並べる一覧を作成します。権限はその場で変更でき、招待中の人は区別して表示します。Webサービスの「メンバー管理」の画面に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メンバーのリスト]- 名前・メールアドレス・権限・状態（参加済み／招待中）を5件程度
[権限の種類]- 例：管理者、編集者、閲覧のみ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「メンバーの一覧」を実装してください。 ## 表示内容 - 見出し「メンバー」と人数、右に「メンバーを招待」のボタン - メンバー： [メンバーのリスト] - 権限の種類：[権限の種類] ## レイアウト - 全体をカードで囲み、行を縦に並べる - 各行：左から アイコン → 名前とメールアドレス（2段）→ 権限 → メニューのボタン（⋯） - スマホでは、権限を名前の下の段に移す ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px - 行：padding 12px 16px、下に 1px solid #EDF1F7 - アイコン：40px の円。画像がないときは、名前の頭文字を淡い背景色の円に表示する - 名前：15px、font-weight 700、色 #1B2A44。メールアドレス：13px、色 #8A96AA - 自分の行には、名前の右に「あなた」のラベル（11px、背景 #EDF1F7、角丸 999px） - 権限：ピル型のメニュー。高さ 28px、角丸 999px、文字 12px・font-weight 700 - 管理者：背景は #1463F0 の9%の淡い色、文字 #1463F0 - それ以外：背景 #F1F4F9、文字 #5F6D84 - 招待中の人：アイコンを点線の円にし、名前のかわりにメールアドレスを表示。権限の左に「招待中」のラベル - 招待のボタン：高さ 40px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700 ## 動作 - 権限のメニューから、その場で権限を変更できる。変更したら、すぐに保存して通知を出す - 管理者が1人だけのときは、その人の権限を変更・削除できないようにし、理由を表示する - 自分自身は削除できない - メニュー（⋯）には「招待を再送」「メンバーから外す」を入れる。外すときは確認する ## アクセシビリティ - リストは ul / li - 権限のメニューは select 要素、または同等の操作ができる部品にし、aria-label に対象の名前を入れる - 状態（招待中）を、見た目だけでなく文字で伝える - 変更の結果を aria-live="polite" で伝える ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。