Météo Climat France
インデックス可能な358ページ、72の予報時刻を描くアニメーション地図。フレームワークのコードは一行もありません。
- 年
- 2026
- 制作期間
- 6週間
- 技術スタック
- JavaScript · MapLibre · HTML/CSS · Vercel
- 情報設計
- UIデザイン
- 開発
- 地図制作
- プログラマティックSEO
- 科学的なライティング
Kayzen Webが開発・運営する製品です。正式なドメインに移行するまで、Vercelのプレビュー用アドレスで公開しています。

- インデックス可能なページ市町村180 · 気候データ141 · 解説16 · 地図12
- 358
- 補間する格子点
- 247
- アニメーション表示する1時間ごとの予報時刻
- 72
- 地図用APIキーMapLibreとIGNの背景地図をセルフホスト
- 0
解決すべき課題。
背景
Météo Climat Franceは、Kayzen Webが運営する無料の全国気象サービスです。同じデータベースで3つの異なる用途に対応しています。日々の天気(48時間先までの1時間ごとの予報、10日間の傾向)、気候学(観測所ごとの平年値と記録)、そして農業気象(地温と土壌水分、ET0、水収支、積算温度、農薬散布に適した条件)です。
制約
3つの制約が互いにぶつかり合っていました。サービスは72時間分の予報時刻にわたってフランス全土のアニメーション地図を表示する必要があり、ブラウザ側で重い計算が発生します。一方で、しばしば3G回線となる畑の脇でもスマートフォンで閲覧できなければなりません。さらに、「météo Vénissieux 69200」のような超ローカルなクエリでGoogleに表示される必要がありました。そこは20年前から陣取る既存の事業者がひしめく領域です。
解決策
私たちはフレームワークに頼る反射的な選択を退けました。サイトはネイティブJavaScriptで書かれ、必要に応じて読み込まれる11のモジュールに分割されています。地図描画にはセルフホストのMapLibreを使用しています。ランタイムで節約した予算は、本当に重要な部分に再投資しました。247の格子点の補間、358ページのプリレンダリング、そして農学用語への細心の配慮です。
すべての判断に、理由がある。
地図をトップページに
最初の画面は検索フォームではなく、現在時刻ですでに描画されたフランスの地図です。訪問者は何か操作する前に答えを目にします。市町村名や郵便番号での検索はそのすぐ下にあり、どこからでも「/」キーで検索欄にフォーカスを戻せます。
気象要素ごとのカラースケール
気温、降水量、風、雲、気圧、湿度、雷雨、UVのそれぞれに、範囲と凡例を備えた独自のカラーランプがあります。赤と緑のグラデーションだけに頼るものはひとつもありません。第2色覚の色覚特性は男性の6%に見られ、配色を誤った気象地図は彼らにとって判読不能になります。
キーボードで操作できるタイムスライダー
左右の矢印キーで時刻を、Shift+矢印キーで日付を切り替え、スペースキーでアニメーションを再生し、Homeキーで現在時刻に戻ります。ショートカットはヘルプの中に隠さず、スライダーのすぐ下に書かれています。
文章による地図の説明
地図の下にある「地図の内容を文章で読む」リンクは、地図が示している内容をテキストで伝えます。スクリーンリーダーの利用者には欠かせないもので、副次的に検索エンジンにも読み取れます。検索エンジンにとって、canvasで描かれた地図は空の画像にすぎないからです。
ひとつだけの、セルフホストのフォント
Nunitoのバリアブルフォントをサイトのドメインから配信しています。Google Fontsへのリクエストはありません。毎日閲覧されるサービスでサードパーティのフォントを使えば、ネットワーク依存が生じるうえ、法的根拠のないまま国外へデータが転送されることになります。
プロジェクトのカラーパレット
スカイブルー
#2E7BB6
構造、リンク、見出し
スレート
#1F2933
本文テキスト
小麦
#C9A227
農業気象セクション
アラート
#C6413B
閾値超過、注意喚起
タイポグラフィ体系
見出し用書体
Nunito 700
本文用書体
Nunito 400
セルフホストしたバリアブルフォントのファミリーひとつだけです。数字は等幅(タビュラー)数字にしています。そうしなければ、気温が変わるたびに1時間ごとの表の列全体がずれてしまいます。
その裏側にある技術。
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
ネイティブJavaScript、11のモジュール
menu、logique、couches、meteo-api、agro、app、climat、comprendre、glossaire、bandeau、そしてベンダーのMapLibre。各ページは必要なものしか読み込みません。観測所の気候データページには、農業気象エンジンもレーダービューアーも含まれません。
MapboxではなくセルフホストのMapLibre
APIキーも、表示回数に応じた課金も、読み込みのたびの第三者への呼び出しもありません。背景地図はIGN(フランス国土地理院)のもので、フランスの公共データです。市町村を扱うサービスにふさわしい選択です。
247点の格子による補間
公開されている予報モデルが提供するのは格子データですが、インターフェースには連続した場が必要です。補間と描画はブラウザ内で予報時刻ごとに1パスで行い、72の予報時刻をキャッシュします。APIを再度呼び出すことなく、アニメーションは滑らかに動きます。
/api/ルートへのクローラーのアクセスを禁止
robots.txtで/api/を除外しています。そうしなければ、クローラーが巡回するたびにOpen-Meteoのクォータが無駄に消費されます。クォータが尽きれば、実際の訪問者にとってサービスが利用できなくなります。
サーバー側のデータ関数
予報モデルへの呼び出しはサーバー関数を経由し、そこでレスポンスを正規化し、キャッシュし、範囲を制限します。ブラウザがデータ提供元と直接通信することはありません。データソースを変更する日が来ても、インターフェースは変わりません。
検索で見つけてもらうための仕組み。
358のURL、4つのテンプレート
180の市町村ページ(/meteo/lyon-69001)、141の気候データページ(/climat/…)、16の解説ページ(/comprendre/…)、12のテーマ別地図ページ(/cartes/radar…)。各テンプレートは異なる検索意図に応えており、別のページの見た目だけを変えたページはひとつもありません。
市町村ごとに固有のコンテンツ
プログラマティックSEOは、重複した瞬間に失敗します。各市町村ページには、その座標、標高、対応する観測所の平年値と記録が掲載されています。いずれも都市ごとに実際に異なる値です。
3種類の構造化データ
WebApplication(気象カテゴリ、無料であることを明記)、実際のサイト内検索を指すSearchActionを備えたWebSite、そしてページ内で実際に扱っている質問から生成したFAQPageです。
意味のある内部リンク
フッターは上位16都市を結び、各ページはその気候データページ、地図、用語集へリンクしています。内部リンクは読者の閲覧経路に沿って張られており、リンクを敷き詰めたものではありません。
一貫したサイトマップとcanonical
各ページのcanonicalはひとつだけで、サイトマップには実際に配信している358のURLだけを正確に掲載しています。サイトマップにないURLはクロールされず、ページの存在しないサイトマップ上のURLはソフト404となり、ドメイン全体の評価を下げます。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
目で見なくても存在する地図
地図のテキストによる説明はalt属性ではありません。表示中の予報時刻に合わせて生成されるコンテンツであり、キーボードで到達でき、音声合成で読み上げられます。
すべてをキーボードで
レイヤー、市町村、予報時刻の切り替えも、アニメーションの再生も、マウスを必要とする操作はひとつもありません。ショートカットは画面上に記載されています。
色覚特性をシミュレーションしたカラーランプ
各カラーランプを、第1色覚、第2色覚、第3色覚の見え方でシミュレーションしました。値は区別可能なままで、凡例には常に数値の範囲が記載されています。
納品したもの。
- トップ — アニメーション地図と検索
- /meteo/<市町村>-<郵便番号> — 180の市町村ページ
- /climat/<観測所> — 平年値と記録を載せた141のページ
- /cartes/<レイヤー> — レーダー、赤外・可視衛星画像、雷、UV…
- /meteo-agricole — 土壌、ET0、水収支、農薬散布
- /comprendre — 16の解説ページと用語集
- /lune、/contact、法的表示、プライバシー、利用規約・販売条件、アクセシビリティ
プロジェクトの流れ。
データモデル
公開データソース(Open-Meteo、IGN)の選定、気象要素の正規化、クォータの設計。
地図制作
格子、補間、カラーランプ、タイムスライダー。
農業気象セクション
FAO-56によるET0、P − ET0の水収支、積算温度、Delta T、ビューフォート風力階級3の閾値。
プログラマティックSEO
4つのテンプレート、358ページの生成、サイトマップ、内部リンク。
コンプライアンス
法的表示、農薬に関する規制上の留保、アクセシビリティ、GDPR。


