カードコード生成用
店舗情報のカード
店名・住所・営業時間と、地図や電話への導線をひとまとめに。
用途・説明
店舗や拠点の情報を1枚にまとめたカードを作成します。写真、店名、住所、営業時間に加えて、「地図を見る」「電話する」のボタンを置きます。複数の店舗があるお店の「店舗一覧」、教室やクリニックの「拠点紹介」などに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[店舗情報]- 店名・住所・営業時間・電話番号を店舗数分
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「店舗情報のカード」を実装してください。 ## 表示内容 [店舗情報] （各カード：写真、店名、住所、営業時間、「地図を見る」「電話する」のボタン） ## レイアウト - PC：2列、スマホ：1列。カードの間隔 24px - カード内：上に写真、下に情報。ボタンは横に2つ並べ、幅を半分ずつにする ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、overflow: hidden - 写真：縦横比 16:9 - 情報エリアの padding 20px - 店名：18px、font-weight 700、色 #1B2A44 - 住所・営業時間：14px、line-height 1.7、色 #5F6D84。行頭に小さなアイコン（ピン、時計）を #1463F0 で - ボタン：高さ 44px、角丸 8px、14px・font-weight 700。「地図を見る」は枠線、「電話する」は #1463F0 の塗り - 本日が定休日の店舗には「本日定休日」の小さなラベルを店名の横に付ける ## 動作 - 「地図を見る」は地図サービスへのリンク（新しいタブ）、「電話する」は tel: リンク - パソコンでは「電話する」を電話番号のテキスト表示に切り替える ## アクセシビリティ - 店名は h3、住所は address 要素 - ボタンの aria-label に店名を含める（例：表参道店の地図を見る） - 新しいタブで開くリンクは、そのことが分かるようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 店舗を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。