フッターコード生成用
店舗情報付きのフッター
住所・営業時間・地図を載せた、お店のためのフッター。
用途・説明
店舗や教室、クリニックなどのサイトに使う、店舗情報をまとめたフッターを作成します。左に店名・住所・営業時間・電話番号、右に小さな地図を置きます。どのページからでも、場所と営業時間をすぐ確認できます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[店名]- 例：Brand 表参道店
[住所]- 郵便番号から
[営業時間・定休日]- 例：10:00〜19:00、火曜定休
[電話番号]- 例：03-0000-0000
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「店舗情報付きのフッター」を実装してください。 ## 表示内容 - 店名：[店名] - 住所：[住所]、営業時間・定休日：[営業時間・定休日]、電話番号：[電話番号] - 地図（埋め込みを置く場所として実装） - 予約やお問い合わせへのリンク、コピーライト ## レイアウト - PC：左に店舗情報、右に地図の2カラム（6:5） - スマホ（768px未満）：店舗情報 → 地図 の順に縦に積む - 地図：aspect-ratio 16 / 9、角丸 12px - コンテンツ最大幅 1120px、上下 padding 56px ## デザイン - 背景 #F7F9FC、上端に 1px solid #E2E8F0 - 店名：18px、font-weight 700、色 #1B2A44。ロゴマークは #1463F0 - 項目名：12px、font-weight 700、色 #5F6D84。内容：14px、line-height 1.8、色 #1B2A44 - 電話番号：18px、font-weight 700 - コピーライト：12px、色 #5F6D84 ## アクセシビリティ - footer 要素を使用。住所は address 要素、項目は dl / dt / dd - 電話番号は tel: のリンクにする - 地図の iframe には title 属性と loading="lazy" を付ける - 検索エンジン向けに、LocalBusiness の構造化データ（JSON-LD）の例を併記する ## 出力形式 - [使用技術]のコードを1つ出力 - 地図の埋め込みコードを差し替える箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。