昼と夜が地図でわかる無料のオンライン世界時計

主な機能

• リアルタイムの世界地図：世界地図はD3.jsで描いていて、選んだテーマに合わせた色で表示されます。いま夜になっている地域は、太陽の位置から計算して暗く塗られるので、どこまで日が沈んだかが地図を見るだけでわかります。
• 580以上の都市、すべてのUTCオフセットに対応：都市は名前で検索して追加できます。UTC+5:45（カトマンズ）、UTC+8:45（ユークラ）、UTC+12:45（チャタム島）のように45分ずれた時間帯も含めて、現在使われているUTCオフセットをすべてカバーしています。
• 昼と夜で色が変わるカード：都市のカードは、現地で太陽が出ているあいだは明るく、日が沈むと暗くなります。時刻の数字を読まなくても、昼か夜かが色でわかります。
• カードと地図のピンが連動：パソコンでカードにマウスを合わせると、地図上のその都市のピンが光り、都市名と時刻が表示されます。カードをクリックすると、ピンは光ったままになります。画面共有やスクリーンショットで都市を示したいときに便利です。カード以外の場所をクリックすると元に戻ります。
• ドラッグで並べ替え：パソコンでは、カードをマウスでドラッグして好きな位置に動かせます。自分の住む街を先頭に、よく見る都市をその次に、といった順番にできます。
• 夏時間（サマータイム）に自動対応：都市ごとにAmerica/New_YorkのようなIANAタイムゾーンが設定されていて、夏時間への切り替えはブラウザが自動で行います。年に2回、自分で時刻を直す必要はありません。
• パソコンでもスマホでも使えます：パソコンでは、地図の操作とカードの並べ替えがすべて使えます。スマホでは地図は見るだけになり、検索ボックスはカードの上に出ます。カードは1列に並び、削除ボタンは常に表示されます。
• 8色のテーマ：ダーク、ライト、レッド、ティール、ブルー、パープル、グリーン、スレートから選べます。テーマを変えると、地図の陸と海の色も一緒に変わります。
• 接続が切れても動作：ページを一度読み込めば、通信が切れても時計は進み、地図の夜の部分も更新され続けます。ただし、ページを読み込み直すときは接続が必要です。

世界時計の使い方

ステップ1：都市を追加する

初めて開いたときは、15の都市があらかじめ並んでいます。都市を追加するには、検索ボックスに都市名か国名を入力します。検索ボックスは、パソコンでは地図の左上、スマホではカードの上にあります。入力すると候補が表示されるので、追加したい都市をクリックしてください。キーボードだけでも操作できます。矢印キーで候補を選び、Enterキーを押すと追加されます。

ステップ2：現地の時刻を見る

追加した都市は、地図上のピンと、地図の下のカードの両方に表示されます。カードには、都市名、国名、現地の時刻（午前・午後つきの12時間表示）、今日の日付が出ます。カードが明るければ現地は昼、暗ければ日が沈んだあとです。

ステップ3：地図で都市の位置を確かめる

パソコンでカードにマウスを合わせると、地図上のその都市のピンが光り、都市名と時刻が表示されます。カードをクリックすると、ピンは光ったままになり、画面は地図の位置まで戻ります。別のカードをクリックすると、光るピンはそちらに移ります。カード以外の場所をクリックすると解除されます。地図上のピンに直接マウスを合わせても、同じように都市名と時刻が出ます。

ステップ4：ドラッグで並べ替える

パソコンでは、カードをマウスで押したまま動かし、置きたい位置で離します。新しい並び順はその場で保存されます。自分の街を先頭に置いたり、地域ごとにまとめたりできます。スマホでは並べ替えはできません。

ステップ5：都市を削除する

パソコンでは、カードにマウスを合わせると左上に×ボタンが出ます。クリックすると、カードと地図上のピンが一緒に消えます。スマホでは、×ボタンは常に表示されています。

世界時計が役立つ場面

海外のメンバーと働くとき

メンバーが複数の国にいるチームでは、相手の時刻を頭の中で計算するより、世界時計を見たほうが確実です。相手が午前3時なのにメッセージを送ってしまう、ということも防げます。同僚のいる都市を追加して自分の街を先頭に置いておけば、いま誰が仕事中なのかがすぐにわかります。

海外との電話や会議の時間を決めるとき

いまニューヨークに電話をかけても大丈夫でしょうか。東京とニューヨークを追加しておけば、両方のいまの時刻を並べて確かめられます。カードが暗ければ、相手はもう夜です。会議の時間を決めるときも、何時間ずれているかがわかっていれば、どちらかが深夜や早朝になる時間を避けられます。

海外の家族や友人に連絡するとき

留学中の子どもや海外赴任中の家族がいる都市を一度追加しておけば、向こうがいま何時なのかをいつでも確かめられます。「日本より何時間遅れだったか」を毎回思い出して計算する必要はありません。

海外旅行や出張の準備

出発前に行き先の都市を追加しておくと、現地の時刻に合わせて早めに体を慣らしていけます。到着したあとも、日本と現地の時刻を並べて見れば、体がまだ日本の何時のつもりでいるのかがわかり、時差ぼけ対策の目安になります。

海外の株式市場や為替の取引

海外の取引所は、取引時間を現地の時刻で発表しています。たとえばニューヨーク証券取引所が開くのは現地時間の午前9時30分で、日本時間では夏時間なら午後10時30分、冬時間なら午後11時30分です。ニューヨークを追加しておけば、夏時間の切り替えが自動で反映された現地の時刻をいつでも確かめられます。

海外スポーツやライブ配信を見るとき

試合や配信の開始時刻が、現地時間で発表されていることがあります。たとえば「ロサンゼルス時間の午後7時開始」と書かれていたら、ロサンゼルスと東京を追加して、いまの時刻を見比べてください。何時間ずれているかがわかるので、日本では何時に始まるのかを計算できます。

世界時計の仕組み

• 地図は、国境のGeoJSONデータをもとにD3.jsで描いた1枚のSVGです。図法は正距円筒図法で、緯度と経度がそのまま縦と横の位置になるため、ピンの位置を簡単な計算で決められます。
• 地図の夜の部分は、対日点（地球上で太陽のちょうど反対側にある地点）を中心とした半径90°の円として描いています。対日点は、太陽の赤緯と均時差、それに端末の時計のUTC時刻から計算し、1分ごとに更新します。
• 都市にはそれぞれIANAタイムゾーンが設定されています。UTCから現地の時刻への変換は、ブラウザのIntl.DateTimeFormat({ timeZone: ... })が行います。夏時間のルールはブラウザが持っているタイムゾーンデータに従うので、ブラウザを最新にしておけば正しく反映されます。
• 選んだ都市とその並び順、テーマは、ブラウザのlocalStorageに保存されます。都市のリストがサーバーに送られることはありません。

使い方のコツ

• 自分の住む街を先頭に置いておくと、ほかの都市の時刻を自分の時刻と見比べやすくなります。
• 都市が増えてきたら、アジア、ヨーロッパ、アメリカのように地域ごとにまとめて並べると、目的の都市を探しやすくなります。カードは画面の幅に合わせて自動で折り返されます。
• オンライン会議で画面を共有するときは、話題にしている都市のカードをクリックしておきましょう。地図上のピンが光ったままになるので、どの都市の話をしているのかが相手にも伝わります。
• 地図の暗い部分は、いま実際に夜になっている地域です。明るい部分との境目が、日の出と日の入りの線にあたります。ピンが暗い部分の端にあれば、その都市は日が沈んだばかりか、もうすぐ夜明けを迎えるところです。
• 検索ボックスは、何も入力せずにクリックするだけで、よく選ばれる都市の候補を表示します。シンガポールやトロントなら、文字を打たずに追加できます。

よくある質問