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