サイトに設置できる無料の世界時計ウィジェット

世界時計ウィジェットとは？

世界時計ウィジェットは、1つまたは複数の都市の現在時刻をサイト上に表示する小さなボックスです。訪問者が頭の中で時差を計算する必要はありません。ロンドン、ニューヨーク、東京がいま何時なのか、そして向こうはまだ今日なのか、もう明日なのかがすぐにわかります。

WebToolsMe の世界時計は、最大8都市をデジタルのリストまたはアナログの文字盤で表示します。1秒ごと、または1分ごとに更新され、各国がサマータイムに切り替わると自動で反映されます。訪問者の現地時刻を表示する行を加えて、比較しやすくすることもできます。

世界時計はどんなサイトで使われる？

サイトやお客さま、チームが複数のタイムゾーンにまたがっているなら、世界時計が役立ちます。よくある例：

• リモートチームや制作会社：各拠点の営業時間を表示し、いつ連絡が取れるかをお客さまに伝えます。
• 旅行・観光・ホテルのサイト：旅行先の現地時刻を訪問者の時刻と並べて表示します。
• ネットショップやサポートページ：海外のお客さま向けに受付時間をわかりやすく示します。
• 金融・暗号資産・トレードのブログ：ニューヨーク、ロンドン、東京の市場の開閉時刻を追いかけます。
• オンライン講座、ウェビナー、ライブ配信：さまざまな国からの参加者に開始時刻を伝えます。
• 海外在住者や家族のブログ：日本と現地の時刻を並べて表示します。

サイトへの追加方法

上で都市とスタイルを選び、コードをコピーを押してください。コードは script タグ1つだけです。時計を表示したい場所に貼り付け、お使いのプラットフォームの手順に従ってください。

主な機能

タイムゾーンとサマータイム

多くの国は、UTC（協定世界時）との差が一年中同じではありません。春に時計を進め、秋に戻す国が多く、その日付も国によって異なります。欧州連合は3月と10月の最終日曜日、アメリカは3月の第2日曜日と11月の第1日曜日に切り替えます。一方、日本は一年中 UTC+9 でサマータイムを実施しておらず、中国、インド、トルコも同様です。

そのため、このウィジェットは「+9時間」のような固定の時差を保存しません。各都市は IANA タイムゾーンデータベースの正式な名前（例：Asia/Tokyo、America/New_York）で保存されます。訪問者のブラウザはこのデータベースを使って、切り替え前後の時間帯も含め、常に正しい現地時刻を計算します。各国が時刻のルールを変更すると、ブラウザに更新が届き、あなたのコードを変えなくてもウィジェットは新しい時刻を表示します。

同じ理由で、各都市の横に表示される時差もリアルタイムで計算されます。ニューヨークがサマータイムの期間は東京との時差が13時間、冬時間の期間は14時間になり、ウィジェットはそのとおりに表示します。

12時間表示と24時間表示、どちらがよい？

午前・午後を使う12時間表示はアメリカ、カナダ、オーストラリア、インドなどで一般的で、日本でも日常的によく使われます。一方、ヨーロッパの多くの国や鉄道・放送などの分野では24時間表示が標準です。読者が最も自然に読める形式を選びましょう。訪問者が世界中から来る場合は、24時間表示にすると午前と午後の取り違えを防げます。

午前・午後の表記、曜日、日付は、選んだウィジェットの言語で表示されます。秒を表示すると時計に動きが出ます。秒なしのデジタル時計は1分に1回だけ更新され、最も軽い設定です。

訪問者の現地時刻を表示する

訪問者の現地時刻をオンにすると、時計の最初の行に訪問者自身の端末の時刻が、ウィジェットの言語のラベル付きで表示されます。ほかの各都市には、訪問者より何時間進んでいるか遅れているか、そして向こうが昨日・今日・明日のどれなのかが表示されます。東京の訪問者がロサンゼルスを含む時計を見れば、ロサンゼルスがたとえば16時間遅れで、まだ前日であることがすぐにわかります。

現地時刻は、自分のタイムゾーンを知っている訪問者のブラウザから取得します。訪問者に関する情報が WebToolsMe に送られたり、どこかに保存されたりすることはありません。

速度とプライバシー

世界時計は小さなスクリプト1つだけです。読み込み後はどのサーバーにも接続せず、1秒または1分ごとに訪問者のブラウザ内で時刻を計算します。Cookie は使わず、データも収集しません。

時計は閉じた Shadow DOM の枠の中に描画されます。テーマのスタイルで見た目が変わることはなく、時計のスタイルがページに影響することもありません。WordPress のテーマ、ページビルダー、手書きのサイトのどれでも同じように使えます。

使いやすい世界時計にするコツ

• いちばん重要な都市を先頭に置きましょう。都市リストの ↑ ボタンで順番を変えられます。
• 3〜5都市が読みやすい数です。全幅のセクションなど、十分なスペースがある場合だけ増やしましょう。
• 訪問者になじみのある名前を使いましょう。営業時間なら、近くの小さな町より「ニューヨーク」「ロンドン」「シンガポール」のほうが伝わります。
• 細いサイドバーなら幅300〜360ピクセルが適しています。アナログの文字盤は3〜4都市がいちばんきれいに見えます。
• テーマはサイトに合わせましょう。暗いデザインのサイトには、ダークテーマとブランドカラーのアクセントがよく合います。

よくある質問