カードコード生成用
プロフィールカード
顔写真・名前・肩書き・ひとことを載せるメンバー紹介。
用途・説明
スタッフ紹介、講師紹介、著者プロフィールなどに使う人物カードを作成します。丸い顔写真、名前、肩書き、短い紹介文を1枚にまとめます。紹介文の長さが違っても、カードの高さがそろう指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メンバーデータの例]- 名前・肩書き・紹介文・写真URLを3件
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「プロフィールカード」を実装してください。 ## 表示内容 [メンバーデータの例] （各カード：顔写真、名前、肩書き、紹介文） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カード間隔 24px - カード内は中央揃えで、上から 顔写真 → 名前 → 肩書き → 紹介文 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 28px 24px - 顔写真：直径 88px の円、object-fit: cover。写真がない場合は #1463F0 の15%の背景にイニシャルを表示 - 名前：17px、font-weight 700、色 #1B2A44 - 肩書き：12px、font-weight 700、色 #1463F0。名前の下 4px - 紹介文：14px、line-height 1.8、色 #5F6D84。肩書きの下 12px、左揃え ## 状態 - hover：カードをわずかに持ち上げる（translateY(-2px) と、うすい影） - focus-visible：リンクがある場合、2px のアウトラインで囲む ## マークアップ・アクセシビリティ - 一覧は ul / li、名前は h3 - 顔写真の alt には「（名前）の写真」を入れる - SNSなどのリンクを付ける場合は、アイコンだけにせずラベルを付ける ## 出力形式 - [使用技術]のコードを1つ出力 - メンバーデータを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。