カードコード生成用
スタッフ紹介のカード一覧
顔写真・名前・役割を、同じ形で並べて紹介。
用途・説明
スタッフやメンバーの顔写真、名前、役割をカードにして並べる一覧を作成します。会社の「メンバー紹介」、サロンやクリニックの「スタッフ紹介」、講師の一覧などに向いています。写真の形と文字の位置をそろえることで、人数が増えても整って見えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メンバー情報]- 名前・役割・ひとことを人数分
[列数]- PCでの列数。例：3
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スタッフ紹介のカード一覧」を実装してください。 ## 表示内容 [メンバー情報] （各カード：顔写真、名前、役割、ひとこと） ## レイアウト - PC：[列数]列、タブレット：2列、スマホ：2列。カードの間隔 24px（スマホ 12px） - カード内は中央揃えで、上から 写真 → 名前 → 役割 → ひとこと ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 24px 16px - 写真：直径 96px の円形に切り抜く（object-fit: cover）。スマホは 72px - 名前：16px、font-weight 700、色 #1B2A44 - 役割：12px、font-weight 700、色 #1463F0 - ひとこと：13px、line-height 1.7、色 #5F6D84、最大2行 ## アクセシビリティ - 一覧は ul / li でマークアップし、名前は見出し（h3）にする - 写真の alt は「山田 花子の顔写真」のように名前を入れる - 写真がまだない人には、イニシャルを入れた丸い仮画像を表示する - 詳細ページへリンクする場合は、カード全体をクリックできるようにし、focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - メンバーを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。