データ・気象サービス

Météo Climat France

インデックス可能な358ページ、72の予報時刻を描くアニメーション地図。フレームワークのコードは一行もありません。

年
2026
制作期間
6週間
技術スタック
JavaScript · MapLibre · HTML/CSS · Vercel
  • 情報設計
  • UIデザイン
  • 開発
  • 地図制作
  • プログラマティックSEO
  • 科学的なライティング

Kayzen Webが開発・運営する製品です。正式なドメインに移行するまで、Vercelのプレビュー用アドレスで公開しています。

https://meteo-climat-france.vercel.app/
Météo Climat FranceのWebサイトのトップページ――データ・気象サービス、Kayzen Web制作
インデックス可能なページ市町村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ページのプリレンダリング、そして農学用語への細心の配慮です。

デザイン・アートディレクション

すべての判断に、理由がある。

  1. 地図をトップページに

    最初の画面は検索フォームではなく、現在時刻ですでに描画されたフランスの地図です。訪問者は何か操作する前に答えを目にします。市町村名や郵便番号での検索はそのすぐ下にあり、どこからでも「/」キーで検索欄にフォーカスを戻せます。

  2. 気象要素ごとのカラースケール

    気温、降水量、風、雲、気圧、湿度、雷雨、UVのそれぞれに、範囲と凡例を備えた独自のカラーランプがあります。赤と緑のグラデーションだけに頼るものはひとつもありません。第2色覚の色覚特性は男性の6%に見られ、配色を誤った気象地図は彼らにとって判読不能になります。

  3. キーボードで操作できるタイムスライダー

    左右の矢印キーで時刻を、Shift+矢印キーで日付を切り替え、スペースキーでアニメーションを再生し、Homeキーで現在時刻に戻ります。ショートカットはヘルプの中に隠さず、スライダーのすぐ下に書かれています。

  4. 文章による地図の説明

    地図の下にある「地図の内容を文章で読む」リンクは、地図が示している内容をテキストで伝えます。スクリーンリーダーの利用者には欠かせないもので、副次的に検索エンジンにも読み取れます。検索エンジンにとって、canvasで描かれた地図は空の画像にすぎないからです。

  5. ひとつだけの、セルフホストのフォント

    Nunitoのバリアブルフォントをサイトのドメインから配信しています。Google Fontsへのリクエストはありません。毎日閲覧されるサービスでサードパーティのフォントを使えば、ネットワーク依存が生じるうえ、法的根拠のないまま国外へデータが転送されることになります。

プロジェクトのカラーパレット

  • スカイブルー

    #2E7BB6

    構造、リンク、見出し

  • スレート

    #1F2933

    本文テキスト

  • 小麦

    #C9A227

    農業気象セクション

  • アラート

    #C6413B

    閾値超過、注意喚起

タイポグラフィ体系

見出し用書体

Nunito 700

本文用書体

Nunito 400

セルフホストしたバリアブルフォントのファミリーひとつだけです。数字は等幅(タビュラー)数字にしています。そうしなければ、気温が変わるたびに1時間ごとの表の列全体がずれてしまいます。

エンジニアリング

その裏側にある技術。

  • JavaScript
  • MapLibre
  • HTML/CSS
  • Vercel
  1. ネイティブJavaScript、11のモジュール

    menu、logique、couches、meteo-api、agro、app、climat、comprendre、glossaire、bandeau、そしてベンダーのMapLibre。各ページは必要なものしか読み込みません。観測所の気候データページには、農業気象エンジンもレーダービューアーも含まれません。

  2. MapboxではなくセルフホストのMapLibre

    APIキーも、表示回数に応じた課金も、読み込みのたびの第三者への呼び出しもありません。背景地図はIGN(フランス国土地理院)のもので、フランスの公共データです。市町村を扱うサービスにふさわしい選択です。

  3. 247点の格子による補間

    公開されている予報モデルが提供するのは格子データですが、インターフェースには連続した場が必要です。補間と描画はブラウザ内で予報時刻ごとに1パスで行い、72の予報時刻をキャッシュします。APIを再度呼び出すことなく、アニメーションは滑らかに動きます。

  4. /api/ルートへのクローラーのアクセスを禁止

    robots.txtで/api/を除外しています。そうしなければ、クローラーが巡回するたびにOpen-Meteoのクォータが無駄に消費されます。クォータが尽きれば、実際の訪問者にとってサービスが利用できなくなります。

  5. サーバー側のデータ関数

    予報モデルへの呼び出しはサーバー関数を経由し、そこでレスポンスを正規化し、キャッシュし、範囲を制限します。ブラウザがデータ提供元と直接通信することはありません。データソースを変更する日が来ても、インターフェースは変わりません。

SEO対策

検索で見つけてもらうための仕組み。

  1. 358のURL、4つのテンプレート

    180の市町村ページ(/meteo/lyon-69001)、141の気候データページ(/climat/…)、16の解説ページ(/comprendre/…)、12のテーマ別地図ページ(/cartes/radar…)。各テンプレートは異なる検索意図に応えており、別のページの見た目だけを変えたページはひとつもありません。

  2. 市町村ごとに固有のコンテンツ

    プログラマティックSEOは、重複した瞬間に失敗します。各市町村ページには、その座標、標高、対応する観測所の平年値と記録が掲載されています。いずれも都市ごとに実際に異なる値です。

  3. 3種類の構造化データ

    WebApplication(気象カテゴリ、無料であることを明記)、実際のサイト内検索を指すSearchActionを備えたWebSite、そしてページ内で実際に扱っている質問から生成したFAQPageです。

  4. 意味のある内部リンク

    フッターは上位16都市を結び、各ページはその気候データページ、地図、用語集へリンクしています。内部リンクは読者の閲覧経路に沿って張られており、リンクを敷き詰めたものではありません。

  5. 一貫したサイトマップとcanonical

    各ページのcanonicalはひとつだけで、サイトマップには実際に配信している358のURLだけを正確に掲載しています。サイトマップにないURLはクロールされず、ページの存在しないサイトマップ上のURLはソフト404となり、ドメイン全体の評価を下げます。

アクセシビリティ

誰もが使えるように。

2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。

  1. 目で見なくても存在する地図

    地図のテキストによる説明はalt属性ではありません。表示中の予報時刻に合わせて生成されるコンテンツであり、キーボードで到達でき、音声合成で読み上げられます。

  2. すべてをキーボードで

    レイヤー、市町村、予報時刻の切り替えも、アニメーションの再生も、マウスを必要とする操作はひとつもありません。ショートカットは画面上に記載されています。

  3. 色覚特性をシミュレーションしたカラーランプ

    各カラーランプを、第1色覚、第2色覚、第3色覚の見え方でシミュレーションしました。値は区別可能なままで、凡例には常に数値の範囲が記載されています。

サイト構成

納品したもの。

  • トップ — アニメーション地図と検索
  • /meteo/<市町村>-<郵便番号> — 180の市町村ページ
  • /climat/<観測所> — 平年値と記録を載せた141のページ
  • /cartes/<レイヤー> — レーダー、赤外・可視衛星画像、雷、UV…
  • /meteo-agricole — 土壌、ET0、水収支、農薬散布
  • /comprendre — 16の解説ページと用語集
  • /lune、/contact、法的表示、プライバシー、利用規約・販売条件、アクセシビリティ
進め方

プロジェクトの流れ。

  1. データモデル

    公開データソース(Open-Meteo、IGN)の選定、気象要素の正規化、クォータの設計。

  2. 地図制作

    格子、補間、カラーランプ、タイムスライダー。

  3. 農業気象セクション

    FAO-56によるET0、P − ET0の水収支、積算温度、Delta T、ビューフォート風力階級3の閾値。

  4. プログラマティックSEO

    4つのテンプレート、358ページの生成、サイトマップ、内部リンク。

  5. コンプライアンス

    法的表示、農薬に関する規制上の留保、アクセシビリティ、GDPR。

Q&A

よくいただくご質問。

サイトで最も重いページがcanvasの地図だからです。主なコストはグラフィックの描画であり、コンポーネントツリーの更新ではありません。フレームワークを使えば、しばしば3G回線のスマートフォンでダウンロードして実行するJavaScriptが増えるだけで、何も解決しません。これはイデオロギーによる選択ではありません。インターフェースの状態が本当に複雑なプロジェクトでは、私たちはReactを採用します。

いいえ。ページにもそのことを明記しています。フランスでは、植物保護製品の使用に関する助言は認可を必要とする規制対象の業務です。サイトは予報された気象条件を表示し、2017年5月4日の省令が定める風速の閾値を示すにとどめます。判断を下すのは農業経営者とその認可アドバイザーです。この留保は法的表示の一部ではなく、設計そのものの一部です。

予報はOpen-Meteoが集約する公開の予報モデルから、背景地図はIGNから取得しています。どちらの出典もフッターに明記し、リンクしています。数字の出どころを示さないデータサービスは、検証することができません。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有