カードコード生成用
人気ランキングのカード
1位から順に、順位のバッジを付けて並べる。
用途・説明
商品や記事の人気ランキングを、順位のバッジ付きカードで並べて作成します。ECサイトの「売れ筋ランキング」、ブログの「よく読まれている記事」、メニューの「人気トップ3」などに向いています。1位だけバッジの色を変えて、目に留まりやすくしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ランキング]- 1位から順に、名前・価格などを3〜5件
[集計の説明]- 例：先週の販売数をもとに集計
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「人気ランキングのカード」を実装してください。 ## 表示内容 [ランキング] （各カード：順位、写真、名前、価格または補足） - 一覧の下に、集計の説明：[集計の説明] ## レイアウト - PC：3列（4位以降は4列の小さなカード）、スマホ：横スクロールで1枚半が見える幅 - カード内は上から 写真 → 名前 → 価格 ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 写真：縦横比 1:1 - 順位のバッジ：写真の左上（上 8px、左 8px）に重ねる。28×28px の円、数字は 13px・font-weight 700 - 1位：背景 #1463F0、文字 #FFFFFF。2位以降：背景 #FFFFFF、文字 #1B2A44、枠線 1px solid #DCE4F0 - 名前：15px、font-weight 700、2行まで - 価格：15px、font-weight 700。「税込」は 11px、色 #5F6D84 - 集計の説明：12px、色 #5F6D84 ## アクセシビリティ - 順位に意味があるので ol / li でマークアップする。バッジの数字は「1位」と読み上げられるようにする - カード全体をリンクにし、focus-visible のスタイルを用意する - 横スクロールの領域はキーボードでも操作でき、スクロールできることが分かるよう右端を少し見切れさせる ## 出力形式 - [使用技術]のコードを1つ出力 - ランキングを配列で渡し、順位は自動で振る
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。