カードコード生成用
商品カード
写真・商品名・価格・ボタンをまとめた、ショップの基本カード。
用途・説明
ネットショップやメニュー紹介に使う商品カードを作成します。写真の比率を固定し、商品名の行数を制限しているので、写真や名前の長さがばらばらでも一覧がきれいに揃います。「NEW」などのバッジと、カートに入れるボタンも含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[商品データの例]- 商品名・価格・画像URL・バッジの有無を3〜4件
[ボタン文言]- 例：カートに入れる
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「商品カード」を実装してください。 ## 表示内容 [商品データの例] （各カード：商品写真、バッジ、商品名、価格、ボタン） ## レイアウト - PC：4列、タブレット：3列、スマホ：2列。カード間隔 20px（スマホは 12px） - カード内は上から 写真 → 商品名 → 価格 → ボタン。ボタンは常にカードの下端に揃える ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow hidden - 写真：aspect-ratio 1 / 1、object-fit: cover - バッジ：写真の左上に重ねる。11px、font-weight 700、背景 #1463F0、文字 #FFFFFF、角丸 9999px - 商品名：15px、font-weight 700、line-height 1.5、色 #1B2A44、最大2行で省略 - 価格：18px、font-weight 700、色 #1B2A44。「税込」は 11px で #5F6D84 - ボタン：全幅、高さ 40px、枠線 1.5px solid #1463F0、文字 #1463F0、角丸 8px ## 状態 - hover：写真を 1.04 倍にゆっくり拡大。ボタンは #1463F0 の背景に白文字へ反転 - focus-visible：リンクとボタンそれぞれに 2px のアウトライン - 在庫切れ：写真を少し薄くし、ボタンを「在庫切れ」の無効状態にする ## マークアップ・アクセシビリティ - 一覧は ul / li、各カードは article 要素、商品名は h3 - 商品名のリンクとカートのボタンは別の要素にし、カード全体を1つのリンクで包まない - 価格は「1,980円（税込）」のように、読み上げても意味が通る文字にする - 写真の alt には商品名を入れる ## 出力形式 - [使用技術]のコードを1つ出力 - 商品データを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。