世界のどこかでは、今この瞬間も雨が降り、雪が舞い、まぶしい太陽が昇っています。
もし、あなたの WordPress サイトから、そんな世界中の空の表情をひと目で眺められるとしたら──それだけでサイトが少し特別な場所になると思いませんか？
この記事では、トップ画像のコンセプト
「世界の天気をひと目で」「WordPressで無限の可能性へ」
をそのまま形にした、軽量で簡単に実装が可能な「世界天気マップページ」についてご紹介します。
今回用意したのは、WordPress上に
世界地図（Google マップ）
現在の天気
数時間先までの予報
7日間の天気
をまとめて表示できる、天気ページです。
ユーザーは次の2つの方法で世界の天気を確認できます。
地図をクリックする
気になる場所をワンクリック
その地点の現在の天気・気温・湿度・風速が表示されます
都市名を入力して検索する
「東京」「パリ」「ニューヨーク」などの都市名を入力
地図が自動で移動し、その周辺の天気が表示されます
地図を眺めながら「あ、ここはどんな空かな？」と直感的に操作できる、
“触っていて楽しい”天気ページになっています。
今回の天気マップは、見た目を派手にするのではなく、
「見やすさ」と「ストレスのなさ」を最優先にデザインしています。
フラットデザイン
シンプルなボックス
文字サイズも大きすぎず小さすぎず、
長時間見ても疲れにくい設計としております。
「見た瞬間に何がどこに書いてあるか分かる」ことを意識して、
要素の配置や余白も最小限かつ整ったバランスにしています。
白い文字と天気アイコンを追加することで、
重要な情報が自然と目に入るようになっています。
スマホでも見やすいレスポンシブ仕様
PCでは、地図と天気情報を表示
スマホでは、縦スクロールで
現在の天気 → 時間ごとの予報 → 7日間予報 の順に表示
地図の高さも端末によって自動で調整されるため、
指で操作しやすく、文字も読みやすいレイアウトになっています。
どんな情報が見られるのか？
この天気マップページでは、次のような情報が一度に確認できます。
天気（晴れ・くもり・雨・雪 など）
気温（℃）
湿度（％）
風速（m/s）
旅行や出張、イベントの計画など、
1週間先までのイメージが立てやすくなる情報がまとまっています。
相性抜群なサイト
この世界天気マップは、さまざまなジャンルの WordPress サイトで活躍できます。
旅行・トラベルブログ
渡航先の情報記事とあわせて、
「現地の今の天気をチェックできるページ」としてリンクすることで、
読者の体験価値がぐっと高まります。
海外ニュース・国際情報メディア
ニュースで取り上げている都市をクリックして、その日の天気を見る。
それだけで、画面の向こう側の現実感が少し増します。
語学・教育系サイト
英語・フランス語などの表現と組み合わせて、
「きょうの○○は晴れ」などの例文と一緒に使えば、
生きた教材としても利用できます。
企業サイト・採用サイト
海外拠点のある企業なら、
「世界のオフィスと今日の天気」というページを作るのも面白い使い方です。
シンプルながら、グローバルな印象を視覚的に伝えるコンテンツになります。
導入手順
コードはこちらから
d.kuku.lu/c7tpuwc3n
1. Code Snippets プラグインのインストール
まず、天気マップのショートコードを WordPress 内で動かすために、
カスタムコードを安全に追加できるプラグイン 「Code Snippets」 をインストールします。
WordPress 管理画面にログイン
左側メニューから 「プラグイン → 新規追加」 をクリック
検索窓に 「Code Snippets」 と入力
プラグインを インストール → 有効化
これで、PHPコードを安全に追加できる準備が整いました。
2. 天気マップコードの追加
続いて、天気マップ本体のコードを追加します。
管理画面左側のメニューから 「スニペット → 新規追加」 をクリック
スニペットのタイトルに
「天気マップ表示」（任意でOK）と入力
画面下のコード入力欄に、提供された PHP コードをすべて貼り付ける
「コードタイプ」を PHP Snippet に設定
最後に 「保存して有効化」 をクリック
これでショートコードの準備が完了です。
3. APIキーの取得
天気情報と地図を表示するために、以下の2つの API キーが必要です。
① OpenWeatherMap APIキー
openweathermap.org
無料アカウントを作成
ダッシュボードから APIキー（key） を取得
※ 無料プランで十分利用できます
② Google Maps APIキー
Google Maps の表示に必要です。
コード内に含まれている Google Maps APIキーを 自身のキーに置き換えるか、
専用の入力欄がある場合はそこで設定してください。
両方のキーを準備できたら、コード内の該当箇所にコピー＆ペーストするだけでOKです。
まとめ
今回ご紹介したのは、Google マップ API と OpenWeather の天気データ API、この2つを組み合わせて作る 「世界天気マップ」 です。
導入方法はとてもシンプルで、
必要なのは 各 API キーの取得とコードの設置だけとなっており
複雑な設定はほとんど不要で、手軽に導入できる点が大きな魅力です。
さらに、OpenWeather は無料プランでも十分に利用できるため、
コストをほとんどかけずに世界中の天気を表示できるという点もおすすめのポイントです。
この仕組みを基盤にすれば、アイデア次第でさまざまな応用が可能です。
特定地域に特化した「ヨーロッパ天気マップ」
野外イベント用の「開催地専用天気ページ」
学校の授業に使える「地理 × 天気」学習ページ
シンプルな構造だからこそ、
用途に合わせて オリジナルの天気コンテンツ をいくつも生み出すことができるでしょう。
WordPress は単なるブログ投稿ツールではなく、
世界とつながるインタラクティブな体験を作れるプラットフォーム です。
その第一歩として、
あなたのサイトにも 「世界の天気をひと目で」確認できるページ を
ぜひひとつ追加してみてください。
訪れたユーザーが自然と地図をクリックし、
世界中の空へ思いを馳せる──
そんな小さな“体験”を提供できるはずです。
