はじめに
前回の記事ではクライアントから画像や文章素材を受け取るときの進め方と素材が揃わない場合の対処法を解説しました。素材不足の問題として特によく発生するのが「アクセス地図がない」という状況です。「お店の地図画像を用意してください」とお願いしても、なかなか届かない・どんな地図を作ればいいかわからないというケースが多くあります。今回はGoogle マップをWebサイトに埋め込む方法とAIを使ってアクセス地図の画像を作成する方法の2つのアプローチを詳しく解説します。
1. アクセス地図の2つのアプローチ
1.1 それぞれのメリット・デメリット
| 比較 | Google マップ埋め込み | AI生成の地図画像 |
|---|---|---|
| 実装の手間 | HTMLを1行追加するだけ | プロンプトを工夫する必要がある |
| 情報の正確さ | Google の地図データで正確 | AIが生成するため誤りがある場合も |
| デザインの自由度 | Google のUIに依存 | サイトのデザインに合わせやすい |
| スマホ対応 | 自動で対応済み | 画像なので追加対応が不要 |
| ユーザーのナビ利用 | そのままルート検索できる | できない（リンクを別途設ける） |
| 更新・変更 | 住所が変わると自動更新 | 再生成が必要 |
| おすすめの用途 | ほとんどのケースで推奨 | デザイン重視・簡易な地図が欲しい場合 |
💡 迷ったら Google マップ埋め込みを選びましょう： ユーザーがそのままルート検索できる・スマートフォンでの操作性が高い・情報が常に最新というメリットが大きく、ほとんどのWebサイトに適しています。AIで地図画像を作る方法は「サイトのデザインに合わせたシンプルな地図が欲しい」という特定の場面で活躍します。
2. Google マップを埋め込む方法
2.1 Google マップの埋め込みコードを取得する
埋め込みコードの取得手順：
① Google マップ（maps.google.com）にアクセスする
② 検索欄に埋め込みたい場所・住所を入力する
例：「東京都渋谷区〇〇1-2-3」
「〇〇カフェ 渋谷」
③ 場所が表示されたら左側のパネルを確認する
④ 「共有」ボタンをクリックする
（ピンが立った状態で行う）
⑤ 「地図を埋め込む」タブをクリックする
⑥ 地図のサイズを選ぶ
→ 「小」「中」「大」「カスタムサイズ」から選べる
→ Webサイトに合わせて後からCSSで調整できるので
ここでのサイズはあまり気にしなくてよい
⑦ 「HTMLをコピー」ボタンをクリックする
⑧ コピーされたコードをHTMLファイルに貼り付ける
2.2 取得したiframeコードの確認
<!-- Google マップが生成するiframeコードの例 -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!..."
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
各属性の意味：
src → 地図のURL（変更しない）
width → 横幅（CSSで上書きするので変更OK）
height → 高さ（CSSで上書きするので変更OK）
style → ボーダーなし（そのままでOK）
allowfullscreen → 全画面表示を許可
loading="lazy" → 画面に入ったときに読み込む（パフォーマンス向上）
2.3 HTMLへの実装例
<!-- アクセスセクションの実装例 -->
<section class="access-section" id="access">
<div class="container">
<h2 class="section-title">アクセス</h2>
<div class="access-inner">
<!-- 地図エリア -->
<div class="access-map">
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="〇〇への地図">
</iframe>
</div>
<!-- 店舗情報エリア -->
<div class="access-info">
<dl class="info-list">
<div class="info-row">
<dt class="info-label">住所</dt>
<dd class="info-value">
〒150-0001<br>
東京都渋谷区〇〇1-2-3
</dd>
</div>
<div class="info-row">
<dt class="info-label">最寄り駅</dt>
<dd class="info-value">
渋谷駅 徒歩5分
</dd>
</div>
<div class="info-row">
<dt class="info-label">電話番号</dt>
<dd class="info-value">
<a href="tel:03-1234-5678">03-1234-5678</a>
</dd>
</div>
<div class="info-row">
<dt class="info-label">営業時間</dt>
<dd class="info-value">
月〜土：10:00〜20:00<br>
定休日：日曜日・祝日
</dd>
</div>
</dl>
<!-- Googleマップで開くリンク -->
href="https://maps.google.com/?q=東京都渋谷区〇〇1-2-3"
target="_blank"
rel="noopener noreferrer"
class="btn-map-open">
Google マップで開く
</a>
</div>
</div>
</div>
</section>
2.4 レスポンシブ対応のCSS
/* アクセスセクション全体 */
.access-section {
padding: 96px 0;
background: #F9FAFB;
}
/* 地図と情報の2カラムレイアウト */
.access-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* 地図エリア */
.access-map {
width: 100%;
border-radius: 12px;
overflow: hidden; /* iframeに角丸を適用するために必要 */
box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 );
}
/* iframeを横幅いっぱいに広げる */
.access-map iframe {
display: block; /* iframeのデフォルトのinlineを解除 */
width: 100%;
height: 400px;
}
/* 店舗情報リスト */
.info-list {
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
}
.info-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 12px;
}
.info-label {
font-size: 1.4rem;
font-weight: 600;
color: #6B7280;
}
.info-value {
font-size: 1.5rem;
line-height: 1.7;
color: #111827;
margin: 0;
}
/* Google マップで開くボタン */
.btn-map-open {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 12px 24px;
background: #1A5FC0;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 1.4rem;
font-weight: 600;
transition: background 0.2s ease;
}
.btn-map-open:hover {
background: #0D3A7A;
}
/* スマートフォン対応 */
@media ( max-width: 768px ) {
.access-inner {
grid-template-columns: 1fr; /* 1カラムに変える */
gap: 32px;
}
.access-map iframe {
height: 280px; /* スマホでは少し低くする */
}
.info-row {
grid-template-columns: 80px 1fr;
}
}
3. Google マップの埋め込みをカスタマイズする
3.1 表示する情報を絞る（埋め込みURLの調整）
URLパラメータで表示をカスタマイズできる：
基本のURL：
https://www.google.com/maps/embed?pb=〇〇
ズームレベルを変更する：
→ URLの中の「zoom=15」のような数値を変える
→ 数値が大きいほど拡大される（1〜22）
地図の種類を変更する：
→ maptype=roadmap → 通常のロードマップ（デフォルト）
→ maptype=satellite → 航空写真
→ maptype=terrain → 地形図
3.2 Google Maps Embed API（より詳細な制御）
Google Cloud Platformでで APIキーを取得すると、より細かい制御ができます。ただし個人・小規模サイトなら通常の埋め込みコードで十分です。
<!-- APIキーを使う場合のURL形式（参考） -->
<iframe
src="https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=東京都渋谷区〇〇1-2-3
&zoom=16
&maptype=roadmap"
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
4. AIを使ってアクセス地図画像を作成する
4.1 AIで地図画像を作るのに向いている場面
AIで地図画像を作ることが有効なケース：
✅ サイトのデザインに合ったシンプルな地図が欲しい
→ Google マップの青色ではなく
ブランドカラーに合わせた地図にしたい
✅ 「最寄り駅からのルート」だけを強調した
シンプルなイラスト風の地図が欲しい
✅ プリントや印刷物にも使いたい
→ Google マップの埋め込みは印刷に向かない
✅ 特定の目印（ランドマーク・建物）を
手書き風に強調したい
❌ 向かない場面：
→ 正確な住所・交差点名が必要な場合
（AIは地図情報が不正確なことがある）
→ 道路・建物の正確な配置が必要な場合
4.2 ChatGPTのDALL-Eで地図画像を作る
ChatGPTでの地図画像生成手順：
① ChatGPT（GPT-4o以上）を開く
② 画像生成を依頼するプロンプトを入力する
③ 生成された画像を確認して
問題なければダウンロードする
④ 必要に応じてプロンプトを修正して再生成する
地図生成のプロンプト例：
「以下の条件でアクセス地図のイラストを作成してください。
【場所の情報】
・最寄り駅：渋谷駅（東口）
・徒歩：約5分
・主な目印：〇〇ビルの隣
【デザインの条件】
・シンプルでクリーンなイラスト風
・主要な道路と交差点のみ表示
・目的地に赤いピンマークを付ける
・駅のアイコンを表示する
・背景は白・道路はグレー
・フォントは使わない（テキストなし）
・横長（16:9）のサイズ
・サイトのメインカラー：#1A5FC0（青）を使う」
⚠️ AIが生成した地図は必ず実際の地図と照合してください： AIは地図情報を学習しているとはいえ、道路の配置・建物の位置が実際と異なる場合があります。生成した地図をそのまま使わず、必ずGoogle マップと見比べて正確性を確認しましょう。
4.3 Claudeで地図のSVGを生成する
ChatGPTとは別のアプローチとして、ClaudeにSVGコードで地図を描いてもらう方法があります。
ClaudeへのSVG地図生成プロンプト例：
「以下の情報をもとに、Webサイトのアクセスページに
使えるシンプルなイラスト風アクセス地図を
SVGコードで作成してください。
【周辺の道路・目印情報】
・南北に走るメインの大通り（〇〇通り）
・その通りを東西に横断する交差点（〇〇交差点）
・最寄り駅（〇〇駅）は地図の左下に配置
・目的地は交差点から北に徒歩2分の場所
【デザイン要件】
・背景：#F8FAFC（薄いグレー）
・道路：#E2E8F0（薄いグレー）
・メインの道路：少し太め・#CBD5E1
・目的地のピン：#1A5FC0（青）
・駅アイコン：シンプルな四角＋電車マーク
・サイズ：viewBox="0 0 600 400"
・テキストは日本語で「〇〇駅」「徒歩5分」など最低限だけ入れる」
ClaudeがSVGを生成した場合の活用方法：
① 生成されたSVGコードをコピーする
② HTMLファイルに直接貼り付けるか
.svg ファイルとして保存する
③ <img src="access-map.svg" alt="〇〇へのアクセス地図">
として画像として使う
④ または .svg を .png に変換して使う
→ ブラウザでSVGを開いて印刷→PDFで保存→
画像変換ツールでPNGに変換
4.4 Figmaで地図イラストを作る
前々回の記事で解説したFigmaを使って手作りすることもできます。
Figmaで地図を作る手順：
① Figmaで新しいフレームを作る（例：800×500px）
② Google マップで対象エリアをスクリーンショット撮影する
→ あくまで参考用・そのままは著作権上使えない
③ スクリーンショットをFigmaに配置して
透明度を下げる（50%程度）
④ 道路・交差点をFigmaの線ツールで
トレースする
⑤ トレースが完成したらスクリーンショットを削除する
⑥ 目的地にピンアイコン・駅にアイコンを配置する
⑦ テキストで「〇〇駅」「徒歩5分」などを追加する
⑧ PNG・SVGでエクスポートする
注意点：
→ Google マップの画像をそのまま使うことは
利用規約上禁止されている
→ トレースして独自に作成したものはOK
→ 「Google マップを参考に作成」という
クレジットをサイトに入れると丁寧
5. 地図のアクセシビリティ対応
5.1 iframe・画像どちらも必要な対応
<!-- Google マップ埋め込みのアクセシビリティ対応 -->
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="〇〇カフェへのアクセス地図">
<!-- titleタグが重要 → スクリーンリーダーが読み上げる -->
</iframe>
<!-- AI・Figmaで作った地図画像のアクセシビリティ対応 -->
<img
src="access-map.png"
alt="〇〇カフェへのアクセス地図。渋谷駅東口から徒歩5分。〇〇通りを北に進み〇〇交差点を左折してすぐ右側。"
width="800"
height="500"
loading="lazy">
<!-- alt属性に「どうやって行けるか」を文章で書くことが重要 -->
5.2 地図だけに頼らずテキストでも説明する
<!-- テキストでのアクセス情報（地図が見えなくても使える） -->
<div class="access-directions">
<h3>〇〇駅からの道順</h3>
<ol>
<li>〇〇駅の東口を出る</li>
<li>〇〇通りを北に向かって徒歩約5分歩く</li>
<li>〇〇交差点を左折する</li>
<li>右手に〇〇ビルが見えたらその隣</li>
</ol>
<p>目印：〇〇コンビニの向かい側</p>
</div>
💡 テキストでの道順説明は地図よりも実用的な場合があります： スマートフォンで移動中に地図を見るより「交差点を左折」という文章の方が直感的に使いやすいことも多いです。地図＋テキストの両方を用意するのがベストです。
6. よくあるトラブルと対処法
6.1 iframe が表示されない
iframeが表示されない原因と対処法：
① セキュリティ設定でiframeがブロックされている
→ WordPressの場合：テキストエディタで
iframeコードを貼り付ける
（ビジュアルエディタでは自動削除されることがある）
② WordPress のプラグインがブロックしている
→ セキュリティプラグインの設定を確認する
③ コードが正しく貼り付けられていない
→ コピーしたコードを再確認する
→ 「'」が「'」などに自動変換されていないか確認する
④ HTTPSとHTTPの混在
→ サイトがHTTPS・地図のURLがHTTPの場合に
ブロックされることがある
→ Google マップはHTTPSなので通常は問題ない
6.2 スマートフォンで地図が小さすぎる
/* スマホで地図が小さい場合の修正 */
@media ( max-width: 768px ) {
.access-map iframe {
height: 300px; /* 高さを明示的に指定する */
}
}
/* 縦横比を維持したまま伸縮させる方法 */
.access-map {
position: relative;
padding-bottom: 56.25%; /* 16:9の比率 */
height: 0;
overflow: hidden;
}
.access-map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
7. 実践チェックリスト
✓ Google マップで対象の住所・店舗を正しく表示できているか
✓ 「共有」→「地図を埋め込む」からiframeコードを取得したか
✓ iframeに title 属性を付けてアクセシビリティに対応したか
✓ iframeを囲む親要素に overflow: hidden と border-radius を設定して角丸にしたか
✓ スマートフォンでの表示を確認して高さが適切かチェックしたか
✓ 「Google マップで開く」リンクを設置して外部での確認を促したか
✓ AI・Figmaで作成した地図画像は実際のGoogle マップと照合して正確性を確認したか
✓ 地図画像のaltタグに「どうやって行けるか」の道順を書いたか
✓ テキストでも住所・最寄り駅・道順を記載したか
まとめ
今回はアクセス地図素材がない場合のGoogle マップ埋め込みとAI活用による地図画像作成の方法を解説しました。ポイントをまとめると：
- Google マップの埋め込みはmaps.google.comの「共有」→「地図を埋め込む」でiframeコードを取得できる
- iframeは親要素に
overflow: hiddenを設定することで角丸などのスタイルを適用できる - スマートフォンでの表示は高さを明示的に指定するかアスペクト比を固定する手法で対応する
- AIで地図画像を作る場合は「シンプルなイラスト風」「テキストなし」「ブランドカラー」などの条件をプロンプトに含めると精度が上がる
- AI生成の地図は必ず実際のGoogle マップと照合して正確性を確認する
- iframeには
title属性・画像には詳細なaltテキストを設定してアクセシビリティに対応する - 地図だけでなくテキストでの道順説明も合わせて設置するのがベスト
- Google マップの地図画像をそのまま使うことは利用規約上禁止されているため注意が必要
次の記事では、クライアントから素材がなかなか納品されない事態を想定して比較的納期のゆったりとした複数の案件を並行して進めるコツをご紹介します。お楽しみに！
コメント