テーブル・一覧コード生成用
商品の一覧（並び替えつき）
件数と並び替えを上に置いた、商品のグリッド。
用途・説明
ECサイトの商品一覧を、上に件数と並び替えのメニュー、下に商品カードのグリッドで作成します。カードには画像・商品名・価格・ラベル（NEW、SALE）を載せます。在庫切れの表示や、セール価格の見せ方も含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[商品のリスト]- 商品名・価格・画像・ラベル・在庫の有無を8件程度
[並び替えの選択肢]- 例：おすすめ順、新着順、価格の安い順、価格の高い順
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「商品の一覧」を実装してください。 ## 表示内容 - 件数（例：全 48 件） - 並び替えのメニュー：[並び替えの選択肢] - 商品： [商品のリスト] ## レイアウト - 上の段：左に件数、右に並び替えのメニュー - 商品のグリッド：PC 4列、タブレット 3列、スマホ 2列。間隔 PC 24px / スマホ 12px - カード内は上から 画像 → 商品名 → 価格。画像は縦横比 1:1 ## デザイン - 件数：14px、色 #5F6D84 - 並び替えのメニュー：高さ 40px、枠線 1px solid #DCE4F0、角丸 8px、文字 14px - 画像：角丸 8px、背景 #F7F9FC、object-fit: cover - 商品名：14px、line-height 1.6、色 #1B2A44、2行で省略、画像の下 12px - 価格：16px、font-weight 700、色 #1B2A44。「（税込）」は 11px・色 #5F6D84 - セール価格：もとの価格に取り消し線（13px、色 #8A96AA）、その右にセール価格（色 #C9343A） - ラベル：画像の左上に重ねる。11px、font-weight 700、角丸 4px、padding 2px 8px。NEW は背景 #1463F0・文字 #FFFFFF、SALE は背景 #C9343A・文字 #FFFFFF - 在庫切れ：画像を少し薄くし、中央に「在庫切れ」の帯。価格の色を #8A96AA に - hover：画像を 1.04倍に（枠のなかで拡大する） ## 動作 - 並び替えのメニューを変えると、商品を並べ直す。選んだ順を URL のクエリに反映する - 在庫切れの商品は、どの順でも最後に置く ## アクセシビリティ - 商品のリストは ul / li。商品名は a 要素にし、カード全体をクリックできるようにする - 画像の alt に商品名を入れる（商品名のリンクと重複する場合は、空にする） - セール価格は、「通常価格 4,400円、セール価格 2,980円」と読み上げられるようにする - 並び替えのメニューに label を付ける - hover の動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。