カードコード生成用
サービス紹介の写真付きカード
写真・サービス名・料金の目安を、ひと目で比べられる形に。
用途・説明
提供しているサービスやメニューを、写真・名前・短い説明・料金の目安つきのカードで並べます。制作会社の「サービス一覧」、サロンの「メニュー」、教室の「コース紹介」などに向いています。各カードの下に詳細ページへのリンクを置き、比べてから選べるようにします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス情報]- サービス名・説明・料金の目安を3件ほど
[リンクの文言]- 例：詳しく見る
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「サービス紹介の写真付きカード」を実装してください。 ## 表示内容 [サービス情報] （各カード：写真、サービス名、説明文、料金の目安、「[リンクの文言]」のリンク） ## レイアウト - PC：3列、タブレット：2列、スマホ：1列。カードの間隔 24px - カード内は上から 写真 → サービス名 → 説明文 → 料金の目安とリンク（左右に配置） - 説明文の長さが違っても、料金とリンクの行がカードの下端でそろうようにする ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 写真：縦横比 3:2、object-fit: cover - 本文エリアの padding 20px - サービス名：18px、font-weight 700、色 #1B2A44 - 説明文：14px、line-height 1.8、色 #5F6D84 - 料金の目安：16px、font-weight 700。「〜」「税込」は 12px - リンク：14px、font-weight 700、色 #1463F0、右向きの矢印付き - hover：カード全体を 2px 持ち上げ、影を付ける ## アクセシビリティ - サービス名は h3。リンクの文言が全カードで同じになるため、aria-label に「〇〇を詳しく見る」とサービス名を含める - 写真の alt は内容を説明する。装飾だけなら空にする - hover の動きは prefers-reduced-motion で無効化 - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - サービスを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。