SWELLでGoogleマップを埋め込む3ステップ！地図が表示されないときの対策も

WordPressテーマ「Swell」で「Googleマップを入れたいのに、うまく表示されない…」と困っていませんか。

この記事では、SwellでのGoogleマップや地図埋め込みのやり方から、見やすいデザインの整え方、よくあるトラブルの直し方まで、まとめて整理しました。

SwellでGoogleマップを埋め込むと何ができる？基本のイメージ

Swellの地図埋め込みが活躍するシーンとよくある悩み

まずは、どんな人がSwellで地図を埋め込みたいのか、代表的なパターンを整理してみます。

読者タイプ	主な目的	よくある悩み
店舗・サロンオーナー	アクセスページで場所を分かりやすく見せたい	Googleマップの埋め込みが小さい、拡大しづらい
教室・スクール運営者	生徒さんが迷わず通えるようにしたい	スマホで地図が途中で切れてしまう
グルメ・旅行系ブロガー	お店やスポットの場所を紹介したい	毎回同じような地図設定をするのが面倒
制作代行・フリーランス	クライアントサイトに地図を設置したい	Swellらしいレイアウトの作り方が分からない

アクセスページや店舗紹介ページに地図がないと、ユーザーからすると「本当にここにあるお店なのかな？」と不安になることもあります。SwellでGoogleマップをしっかり埋め込んでおくだけで、次のようなメリットが期待できます。

• ユーザーが迷いにくくなり、問い合わせや予約につながりやすくなる
• 住所と地図をセットで見せることで、サイト全体の信頼感が上がる
• 地名＋業種で検索されたときに、ローカル検索からも来てもらいやすくなる

つまり、Swellの地図埋め込みは、見た目の便利さだけでなく、集客や信頼にも関わる大事なパーツだと考えておくといいです。

Swellでの地図埋め込みは「カスタムHTML」が基本

Swellにはたくさんのブロックがありますが、Googleマップ専用のブロックが用意されているわけではありません。その代わり、ブロックエディタに標準で入っている「カスタムHTML」ブロックを使えば、Googleマップの埋め込みコードをそのまま貼り付けられます。

• 難しいプログラミングは不要
• 基本的には専用プラグインも不要
• Googleマップ側で発行される「iframe」というコードをコピペするだけ

このやり方を一度覚えてしまえば、Swell以外のテーマでも応用できます。ここから先は、この基本のスタイルをベースに、具体的な手順とコツを順番に解説していきます。

SwellでGoogleマップを埋め込む3ステップ

ステップ1：Googleマップ側で埋め込みコードを取得する

最初はGoogleマップ側の操作です。やることは、「目的の場所を表示して、埋め込み用のHTMLコードをコピーする」というだけです。

このiframeコードが、あとでSwellのカスタムHTMLブロックに貼り付ける「地図本体」です。途中の文字を削除してしまうと正しく表示されないことがあるので、いじらずそのままコピーするのがポイントです。

ステップ2：SwellのカスタムHTMLブロックに貼り付ける

次に、Swellの投稿または固定ページ側の作業です。ここで初めて、Swellでの地図埋め込み作業になります。

流れを表にまとめると、こんなイメージです。

手順	操作内容	ポイント
1	編集したい投稿・固定ページを開く	アクセスページや店舗紹介ページがおすすめ
2	ブロック追加ボタン（＋）を押す	地図を入れたい場所をクリックしてから追加する
3	「カスタムHTML」ブロックを検索して追加	ブロック検索窓に「html」と打つとすぐ見つかる
4	コピーしたiframeコードを貼り付ける	貼り付け後は余計な文字を入れない
5	プレビューで地図が表示されるか確認する	PCとスマホの両方を確認すると安心

Swellだからといって、特別な操作は必要ありません。ブロックエディタの標準機能だけで完結します。カスタムHTMLブロックと聞くと難しく感じますが、実際は「用意されたコードを入れ物に入れているだけ」です。深く考えすぎず、そのままペーストしてOKです。

ステップ3：プレビューで表示をチェックして調整する

最後に、地図がちゃんと表示されているかをプレビューで確認します。ここでは次のポイントを見ておきましょう。

もし違和感がある場合は、Googleマップ側の設定を見直したり、Swell側で余白や並びを調整します。具体的なデザインの整え方は、次の章で詳しく見ていきます。

デザイン調整でSwellの地図を見やすくするコツ

幅と高さを整えてレスポンシブにする

Googleマップの埋め込みコードには、「width」や「height」という数字が含まれています。ここを書き換えることで、Swellでの表示サイズを調整できます。

よく使うサイズの目安を表にまとめました。

デバイス	幅の目安	高さの目安	コメント
PC	100％（親要素に合わせる）	350〜450px	横幅いっぱいに見せたいケースが多い
タブレット	100％	300〜400px	縦長になりすぎないように調整
スマホ	100％	250〜350px	小さすぎると操作しづらい

• 幅が「600」など固定値のままだと、スマホで右側が切れてしまうことがある
• 幅を「100％」にしておくと、画面幅に合わせて自動で伸び縮みしてくれる

Swellで表示するGoogleマップの見え方をそろえたいときは、まずこのwidthとheightをチェックするだけでも印象が変わります。

セクションデザインや余白で読みやすさアップ

Swellには、余白や背景色を簡単に設定できるブロックがたくさん用意されています。地図の前後に少し工夫を加えるだけで、ページ全体がぐっと読みやすくなります。

• 地図の上に「アクセス」や「店舗情報」などの見出しブロックを置く
• 地図の上下に余白ブロックを挟み、窮屈な印象をなくす
• 周りのセクションと背景色を変えて、「アクセス情報のエリア」を目立たせる

例えば、「店舗写真と簡単な説明 → 地図 → 住所・電話番号」という並びにすると、ユーザーは自然な流れで情報を追ってくれます。Swellのデザイン機能とGoogleマップの埋め込みを組み合わせるイメージで考えてみてください。

複数店舗・複数地図をきれいに並べる

店舗が複数あったり、グルメ記事でいくつもお店を紹介する場合、その数だけ地図を連続で貼ると少しゴチャついて見えます。そんなときは、Swellのカラムブロックなどを活用するとすっきりまとまります。

• 2カラムで「左：店舗情報／右：地図」のレイアウトにする
• 店舗ごとに「ボックス」や「ふきだし」などで枠を分ける
• 一覧ページでは地図を省略し、詳細ページにだけ地図を埋め込む

Swellでの地図埋め込みをうまく整理してあげると、ユーザーが「自分が行きたい店舗だけ」を迷わず見つけられる構成にできます。

SwellのGoogleマップが表示されない・崩れるときの対処法

まず確認したい5つのチェックポイント

トラブルの多くは、基本的なところを見直すだけで解決します。よくある原因とチェック項目を表にまとめました。

症状	チェックポイント	対処のヒント
何も表示されない	iframeコードを途中で削除していないか	Googleマップからもう一度コードをコピーし直す
真っ白な空白だけがある	カスタムHTML以外のブロックに貼っていないか	ブロックの種類を確認して、正しいブロックに貼り直す
スマホで右側が切れる	widthが固定値になっていないか	「100％」に変更する
表示はされるが極端に小さい	heightが小さすぎないか	300px以上に調整する
特定のページだけ表示されない	他のプラグインやウィジェットと干渉していないか	キャッシュやセキュリティ系プラグインを疑う

SwellでのGoogleマップトラブルで多いのは、「コードの貼り間違い」と「サイズ指定のミス」です。ここから順番に確認していくと、原因を絞り込みやすくなります。

キャッシュ・プラグイン・テーマの影響を疑う

基本的なチェックで解決しない場合は、サイト全体の設定が影響している可能性があります。

• キャッシュ系プラグインを一時的に無効化してみる
• セキュリティ系プラグインでiframeがブロックされていないか確認する
• Swellの子テーマや独自カスタマイズで、iframeに関するCSSを上書きしていないかを見る

一度、Swellの初期状態に近いテストページを作って、そこにだけGoogleマップを埋め込んでみるのもおすすめです。テストページで正しく表示されるなら、他のブロックやプラグインが影響している可能性が高くなります。

APIキーが必要なケースとそうでないケース

Googleマップには、「単純な埋め込み」と「APIキーを使ったより高度な利用」の2種類があります。Swellで一般的な地図埋め込みをするだけなら、多くのケースでAPIキーは必要ありません。

• 単純な埋め込み → Googleマップの「地図を埋め込む」で出てくるiframeをコピペするだけ
• APIキーを使うケース → カスタムマップを作り込みたい、検索機能やルート表示をサイトに組み込みたいときなど

この記事では、まず「APIキーなしで簡単にできる範囲」を押さえておけば十分です。もっと細かくカスタマイズしたくなったタイミングで、APIキー対応のプラグインや独自実装を検討すると、無理がありません。

ローカルSEOとユーザー目線で見るSwellの地図活用術

Googleマップ埋め込みで信頼度を上げる

ユーザーが初めてサイトに訪れたとき、「住所と地図がきちんと載っているか」は大きな安心材料になります。

• 会社名や店舗名とGoogleマップのピンの名称が一致している
• 住所がテキストでも書かれていて、コピーしやすい
• 地図の周りに「最寄り駅から徒歩何分」「近くの目印」などの情報がある

こうした情報がそろっていると、「きちんとしたお店だな」という印象につながります。Swellで地図を埋め込むときは、見た目だけでなく「情報のセット」で信頼感を出していくイメージを持つと良いです。

アクセス情報と組み合わせて成約率を上げる

地図単体だけ表示しても、ユーザーが実際にどうやって行けばいいかイメージしづらいことがあります。そこで便利なのが、「アクセス情報」とセットで見せる方法です。

代表的な組み合わせパターンを表にまとめました。

セクション	入れる内容の例	ねらい
店舗概要	店名・住所・電話番号・営業時間	基本情報をまとめて信頼感アップ
アクセス	最寄り駅・出口・徒歩何分・目印	道順をイメージしやすくする
地図（SwellでGoogleマップ）	埋め込み地図＋「拡大地図を表示」リンク	迷ったときにすぐルートを確認できる
補足情報	駐車場の有無・近隣施設	来店前の不安を減らす

このように、Swellでの地図埋め込みを中心に、周辺情報を肉付けしていくイメージです。私が制作するときも、「地図＋テキスト情報」のセットをひとつの「アクセスブロック」としてデザインすると、ユーザーの動きが分かりやすくなります。

ページ速度とユーザー体験のバランスを取る

Googleマップの埋め込みは便利ですが、地図をたくさん表示するとどうしてもページが重くなりがちです。Swellは表示速度にこだわったテーマなので、その良さを活かしたいところです。

また、地図のすぐ下に「Googleマップアプリで開く」リンクを置いておくのもおすすめです。ユーザーは普段使っているアプリでルート検索ができるので、Swellでの地図埋め込みとアプリの両方をうまく活用してもらえます。

よくある質問（FAQ）SwellでのGoogleマップ・地図埋め込み

Q1. SwellでGoogleマップを埋め込むのに、専用のプラグインは必要ですか？

A1. 基本的には必要ありません。Googleマップ側で「地図を埋め込む」から取得したiframeコードを、SwellのカスタムHTMLブロックにそのまま貼り付ければ、プラグインなしで地図を表示できます。もっと高度な表示をしたい場合だけ、APIキー対応のプラグインを検討すればOKです。

Q2. Swellで地図を埋め込んだところ、スマホだとGoogleマップの右側が切れてしまいます。どうすればいいですか？

A2. 多くの場合、埋め込みコードの「width」が固定値になっているのが原因です。SwellのカスタムHTMLブロックでコードを開き、「width=”600″」などと書かれていたら、「width=”100%”」に変更してみてください。これで、ほとんどのケースでは画面幅いっぱいにきれいに収まるようになります。

Q3. 複数店舗があるのですが、Swellのアクセスページに全部の地図を埋め込んでも大丈夫でしょうか？

A3. 技術的には問題ありませんが、ページが重くなったり、ユーザーが情報量の多さに疲れてしまうことがあります。Swellで地図を埋め込むときは、メイン店舗だけを埋め込みにして、ほかの店舗は「住所＋詳細ページへのリンク」や「Googleマップで開くボタン」にするなど、メリハリをつけるのがおすすめです。

まとめ：SwellでGoogleマップを使いこなして、迷わないサイトにしよう

この記事のポイントを整理します

今日からできる最初の一歩としては、まず「アクセスページ」または「店舗紹介ページ」をひとつ選んで、実際にGoogleマップの埋め込みコードを取得し、SwellのカスタムHTMLブロックで地図を表示してみてください。

一度うまく表示できれば、ほかのページへの地図埋め込みもスムーズに進められるはずです。