ファーストビューコード生成用
営業情報を添えた店舗のファーストビュー
写真の上に店名を、すぐ下に営業時間・場所・予約を並べる。
用途・説明
お店の写真と店名のすぐ下に、営業時間・定休日・最寄り駅・予約ボタンを横に並べるファーストビューを作成します。来店前に知りたい情報が最初の画面でそろうので、飲食店、美容室、整体院、クリニックなど、来店型のお店に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[店名]- 例：喫茶 ひだまり
[ひとこと]- 例：自家焙煎のコーヒーと、焼きたてのパン
[営業時間]- 例：8:00〜18:00（火曜定休）
[アクセス]- 例：表参道駅から徒歩3分
[ボタン文言]- 例：席を予約する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「営業情報を添えた店舗のファーストビュー」を実装してください。 ## 表示内容 - 背景の写真（仮の画像を置く） - ひとこと：[ひとこと] - 店名：[店名] - 情報の帯：営業時間（[営業時間]）、アクセス（[アクセス]）、ボタン（[ボタン文言]） ## レイアウト - 写真の領域：高さ 480px（スマホ 360px）。ひとことと店名は中央に重ねる - 情報の帯：写真の下端に半分重ねて置く（上に -40px）。最大幅 880px、中央配置 - 帯のなかは横に3つ：営業時間、アクセス、ボタン。あいだは 1px solid #E2E8F0 の縦線 - スマホ：帯のなかを縦に並べ、ボタンは全幅 ## デザイン - 写真の上に rgba(17, 28, 48, 0.35) を重ねる - ひとこと：14px、letter-spacing 0.2em、色 #FFFFFF - 店名：PC 44px / スマホ 30px、font-weight 500、セリフ体、色 #FFFFFF - 情報の帯：背景 #FFFFFF、角丸 16px、padding 20px 28px、影 0 12px 32px rgba(27, 42, 68, 0.12) - 項目のラベル：11px、font-weight 700、色 #1463F0。内容：15px、font-weight 700、色 #1B2A44 - ボタン：高さ 48px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 ## 表示の工夫 - 営業時間の横に、現在の時刻から判断した「営業中」「準備中」の小さなラベルを付ける（色だけでなく文字で示す） - 判定に使う営業時間と定休日は、1か所の設定にまとめる ## アクセシビリティ - 店名は h1 - 営業時間とアクセスは dl / dt / dd でマークアップする - 白い文字のコントラスト比 4.5:1 以上になるよう、写真に重ねる色の濃さを調整できるようにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。