ウェブサイトに最適な天気ウィジェット6選【WordPress対応・無料あり】

ウェブサイトに天気情報を表示したいと思ったとき、まず思い浮かべるのは「The Weather Channel(ウェザーチャンネル)」のウィジェットかもしれません。しかし残念ながら、同社は現在独自の天気ウィジェットを提供していません。今後リリースされる可能性もありますが、それまでの間、どうすればよいのでしょうか。

幸いなことに、最も人気のある天気情報サービスがウィジェットを提供していないからこそ、他の優れた選択肢を探る絶好の機会となっています。ここでは、おすすめの代替ウィジェットを6つご紹介します。

1. Weather Atlas

サイトがWordPressで構築されているなら、Weather Atlasのウィジェットを選んでおけば間違いありません。シンプルで大胆な配色のウィジェットを提供しており、サイズ変更も自由自在。気温、湿度、風速、気圧など、天気に関する必要な情報をすべて表示できます。

Weather Atlasはモバイルページとデスクトップページに自動的に対応し、主要な計測単位でデータを切り替えられます。デザインはAndroidのマテリアルデザインを思わせる、大胆かつシンプルなスタイルが特徴です。

ウィジェットは縦型または正方形でサイドバーに配置したり、ページの本文部分に横長で設置したりと、レイアウトの自由度が高いのも魅力です。天気を明快かつ簡潔に表示したい方にとって、柔軟性があり扱いやすい選択肢といえるでしょう。

2. Elfsight

よりモダンなデザインを求めている方や、WordPress以外のプラットフォームで使いたい方には、Elfsightの天気ウィジェットがおすすめです。こちらもモバイル風の「カード」デザインを採用していますが、最大の特徴は、公式サイト上でウィジェットを自由にカスタマイズしてから埋め込める点にあります。

コーディング不要でカスタマイズできるうえ、ウィジェットのアクセス解析を確認できるため、意図した通りに訪問者の目を引けているかどうかを把握できます。さらに、ElfsightではSNSシェアボタン、レビュー、地図、PDF埋め込みなど、さまざまな種類のウィジェットを作成可能。天気ウィジェットはその活用の第一歩になるかもしれません。

3. WeatherWidget.io

WeatherWidget.ioでは、サイト上で直接カスタマイズを行い、「Get the code」ボタンでコードを取得できます。表示地域、予報日数、ウィジェットのサイズ、アイコンのスタイル、フォントなどを変更可能です。予報期間は1日、3日、7日の3種類から選べ、アイコンスタイルも3種類用意されています。

デフォルト以外の色を使いたい場合は、テーマを選ぶか、ウェブサイトのデザインに合わせて色を個別にカスタマイズすることもできます。

ウィジェットのデザインが完成したら、「Get code」をクリックして、生成されたコードを自分のサイトに貼り付けるだけです。

このウィジェットは完全無料で、広告も一切表示されない点が嬉しいポイントです。

4. Meteored

Meteoredは、WeatherWidget.ioよりもグラフィカルなユーザーインターフェースを持つウィジェットです。アイコンスタイルの選択肢が豊富で、クリックする前に実際の見た目を確認できるのが便利です。ドロップダウンメニューを何度も開いて確認する手間がかかりません。

予報期間は1日から7日まで幅広く選択できます。

一方で欠点もあります。ウィジェットのサイズを変更できないこと、町名での検索ができないこと、そしてドロップダウンリストが必ずしもアルファベット順に並んでいないため、目的の都市を見つけるのに少し手間がかかることが挙げられます。

5. Show My Weather

Show My Weatherは、細かいカスタマイズをせずに手軽に天気ウィジェットを作成したい方向けのサービスです。表示したい地域の郵便番号を入力すると、ウィジェットのプレビューが表示されます。色の変更も可能ですが、カラーコード(hexコード)を把握している必要があります。サイズやパディングなどの表示オプションも変更できますが、あらかじめHTMLやCSSの知識があることが前提となるでしょう。

アイコンのスタイルは変更できませんが、非表示にすることは可能です。また、予報期間の設定オプションもなく、常に3日間の予報が表示される仕様です。

設定が完了したら、表示されたHTMLコードをコピーして自分のサイトに貼り付ければ完成です。

6. Booked.net

Booked.netは、さまざまな天気ウィジェットを多数取り揃えており、ある程度のカスタマイズにも対応しています。ウィジェットは「big」「lite」「small」の3つのフォーマットに分類されており、サイトのレイアウトに合わせて選びやすくなっています。

目的に合ったウィジェットが見つかったら、「Customize」をクリックします。次のページで外観を調整でき、完成したら「Get HTML code」をクリックして、コードを自分のサイトに貼り付けるだけで設置完了です。

どのウィジェットを導入するかは、カスタマイズの自由度と、最終的にどんな見た目にしたいかによって決めるとよいでしょう。天気関連のアプリやウィジェットをもっと楽しみたい方は、Android向けのおすすめライブ天気壁紙もぜひチェックしてみてください。