無料の天気ウィジェットを作成する
あらゆる都市のライブ天気、完全にカスタマイズ可能。HTML1行で — どんなサイトでも動作します(WordPress、Shopify、Wix、プレーンHTML、どこでも)。永久無料。
1. 都市を選択
/fr/paris → city=paris&country=fr2. サイズ
3. デザイン
4. 言語と単位
5. セクションの表示/非表示
ライブプレビュー
60秒でどんなウェブサイトにも埋め込める無料の天気ウィジェット
weather.nowウィジェットは、世界のどの都市でも現在の天気と7日間予報を38言語で表示します。都市を選び、短いHTMLスニペットをコピーして、ページに貼り付けるだけ。プラグインもアカウントもAPIキーも支払いも不要です。
ブログ、ホテルのランディングページ、バケーションレンタル、不動産物件、学校ポータル、旅行ガイド、マリーナ、スキーリゾート、Shopifyのストアフロントなど、天気を表示することで価値が高まるあらゆるページでご利用いただけます。
スニペットは一度に2つの役割を果たします。訪問者には、すっきりとしたスタイルの天気カードとして表示されます。検索エンジン、RSSリーダー、スクリーンリーダーには、セマンティックなHTML引用(都市名、予報ページへのリンク、weather.nowへのクレジット)として表示されます。たった1行のコードで両方を実現します。
この無料天気ウィジェットが選ばれる理由
- 永久無料。 サインアップ不要、APIキー不要、使用制限なし、クレジットカード不要。貼り付けるだけですぐに使えます。
- すべてカスタマイズ可能。 ライト、ダーク、または自動テーマ。アクセントカラー、背景色、テキスト色、角丸、フォントサイズ、ウィジェットサイズ、表示するセクションを選択できます。
- 38言語。 英語、スペイン語、フランス語、ドイツ語、ポルトガル語、イタリア語、オランダ語、ロシア語、アラビア語、中国語(香港・台湾向け簡体字・繁体字)、日本語、韓国語、ベトナム語、トルコ語、ポーランド語、チェコ語、スロバキア語、ギリシャ語、ヘブライ語、タイ語、インドネシア語、マレー語、フィンランド語、ノルウェー語、スウェーデン語、デンマーク語、ルーマニア語、ハンガリー語、ブルガリア語、ウクライナ語、リトアニア語、ラトビア語、エストニア語、スロベニア語、セルビア語、アイスランド語。
- 日付と時刻の形式を選択。 12時間制(AM/PM)または24時間制。曜日名、MM/DD、DD/MM、または月名を含む日付。
- 単位を選択。 摂氏または華氏。メートル法またはヤード・ポンド法の風速。ウィジェットごとに1つの設定。
- あらゆるレイアウトに対応。 バナー、スクエア、標準、フルサイズのプリセット、またはプレビューを180×80から1200×1000ピクセルの間で自由にリサイズ。ウィジェットはコンテナのサイズに合わせて自動的にコンテンツを再配置します。
- 超高速。 サーバーサイドでレンダリングされたHTML、外部JavaScriptライブラリなし、フォントダウンロードなし、トラッキングスクリプトなし。ローダースクリプトは約1KB、レンダリングされたウィジェットはgzip圧縮で6〜8KBです。
- すべてのプラットフォームで動作します。 WordPress、Shopify、Wix、Squarespace、Webflow、Ghost、Joomla、Drupal、Notionサイト、プレーンなHTML、シングルページアプリ — 小さなHTMLスニペットが許可される場所ならどこでも。
- SEO対応。 スニペットには、都市名とその予報ページへのリンクを含む、実際のインデックス可能な引用ブロックが含まれています。検索エンジンは、ウィジェットスクリプトが実行される前に、ページをクロールした時点でそれを認識します。
埋め込みの仕組み
貼り付けるスニペットは、小さなHTML引用ブロックと1行のスクリプトタグです。それ自体で、すでに有効で読みやすいコンテンツです:都市名の見出し、完全な予報ページへのリンク、weather.nowへのクレジット行。クローラーはページに到達するとすぐにそれを認識します。
JavaScriptが動作するブラウザでページが読み込まれると、ローダースクリプト(約1KB、非同期で読み込まれ)が引用ブロックをスタイル付きのライブ天気ウィジェットに置き換えます。人間の訪問者はレンダリングされたウィジェットを見ます。クローラー、RSSリーダー、スクリーンリーダー、メールクライアント、JavaScriptがないコンテキストでは、クリーンな引用フォールバックが表示されます。何も隠されず、失われるものもありません。
これはTwitter、Instagram、Redditが埋め込みに採用しているのと同じアプローチです:セマンティックなHTMLフォールバックがリッチウィジェットに拡張されます。JavaScriptを書いたり、iframeを設定したり、レンダリングブロッキングスクリプトを心配する必要はありません。貼り付けて公開すれば、動作します。
よくある質問
天気ウィジェットは本当に無料ですか?
はい、完全無料です。サインアップもAPIキーも利用制限もありません。ただし、スニペット内に表示される小さな「weather.now」クレジットはそのままにしておいてください。このクレジットによって新しいユーザーが私たちを見つけ、ウィジェットを無料で提供し続けることができています。
WordPressにウィジェットをインストールするにはどうすればいいですか?
ブロックエディター(Gutenberg)で「カスタムHTML」ブロックを追加し、スニペットを貼り付けてください。クラシックエディターでは「テキスト」または「HTML」タブに切り替えて貼り付けます。ElementorやDiviではHTMLウィジェットを使用します。プラグインやテーマの変更は不要です。
Shopifyにインストールするにはどうすればいいですか?
テーマエディターを開き、任意のページにカスタムHTMLセクションを追加して、スニペットを貼り付けてください。フッターやサイドバーにサイト全体で表示するウィジェットを設置する場合は、theme.liquidを編集し、表示したい場所にスニペットを貼り付けます。商品ページやブログ記事内でも動作します。
WixやSquarespaceにインストールするにはどうすればいいですか?
どちらのエディターにもHTML埋め込みブロックがあります。Wixでは「埋め込みHTML」要素を追加してスニペットを貼り付けます。Squarespaceでは「コード」ブロック(HTMLに設定)を追加してスニペットを貼り付けます。ウィジェットは両方のサンドボックス内で正しく表示されます。
同じページに複数の都市の予報を表示できますか?
はい — スニペットを必要なだけ貼り付けてください。各ウィジェットは独立して読み込まれ、エッジで個別にキャッシュされるため、都市を増やしてもページの速度は低下しません。
天気ウィジェットはウェブサイトの速度を低下させますか?
Core Web Vitalsに測定可能な影響はありません。ローダースクリプトは約1KBで、非同期で読み込まれます。ウィジェット自体は遅延読み込みされ、訪問者がスクロールして近づくまでレンダリングされません。レンダリング後のペイロードはgzip圧縮で平均6〜8KBで、世界中で100ミリ秒未満のレイテンシのCDNから配信されます。
インストール後に色やサイズを変更できますか?
はい、すべてのオプションはスニペットのプレーンなHTML属性です。貼り付けたコード内の数値や16進数の色を変更すると、次回ページが読み込まれたときにウィジェットが更新されます。CSSファイルやビルド手順は不要です。または、上記のジェネレーターに戻って新しいバリエーションをデザインし、新しいスニペットをコピーすることもできます。
天気データの鮮度はどのくらいですか?
現在の状況はサーバー上で5〜10分ごとに更新されます。ウィジェットはライブキャッシュからデータを取得するため、訪問者は常に最新の天気を確認でき、あなたが何か作業をする必要はありません。
どのような気象データソースを使用していますか?
主要な世界の気象プロバイダーからデータを集約し、各都市で利用可能な最高解像度のソースを選択しています。カバレッジは全世界で、すべての人口のある国と280万以上の都市や町を含み、ほとんどのAPIが見逃すような遠隔地もカバーしています。
ウィジェットはGDPRに準拠していますか?
はい。ウィジェットはクッキーを設定せず、トラッキングスクリプトを実行せず、ユーザーのフィンガープリントを取得せず、訪問者のIPアドレスを分析に使用しません。行うネットワーク呼び出しは、ウィジェットのHTMLと天気アイコンをweather.nowから取得するためのものだけです — これはYouTube動画やGoogleマップを埋め込む際に行うのと同じ種類の呼び出しです。クッキーバナーに追加する必要はありません。
JavaScriptが無効でもウィジェットは動作しますか?
はい — HTMLフォールバックが表示されます:都市名、weather.nowの完全な予報ページへのリンク、weather.nowのクレジットです。スタイル付きウィジェットはローダースクリプトが実行された後にのみ表示されます。
AMPページでウィジェットを使用できますか?
AMPはカスタムスクリプトを削除するため、ライブウィジェットはAMPページではレンダリングされません。HTMLフォールバック(都市名、予報へのリンク、クレジット行)は有効なAMPマークアップであり、通常通り表示されます。これでほとんどのユースケースには十分です。
訪問者の場所に関係なく、特定の言語を強制できますか?
はい — ジェネレーターの言語オプションをサポートされている38のロケールのいずれかに設定すると、ウィジェットは常にその言語で表示されます。自動に設定すると、ウィジェットは各訪問者のブラウザ言語に従います。
サイトに天気情報を追加しませんか?
上にスクロールして都市を検索し、サイズと色を選んでコードをコピーするだけ。作業は1分もかからず、訪問者は無料でずっとライブの天気予報を利用できます。