上流の降水確率を段階に丸め、先の日の予報は薄く出す

Open-Meteoのprecipitation_probability_maxは気象庁が発表する降水確率とは
別物で、「6時間区切りで1mm以上」に対して「時間ごと(閾値0.1mm相当)の日最大」
を返す。定義が違うぶん構造的に高く出るため、数値のまま出すと国内の予報と
突き合わせられて同じものだと誤解される。precipChanceTextで「雨の可能性
低/中/高」に丸め、weatherGradeの判定も同じ境目(POP_HIGH)から取るように
して、画面の表記と判定がずれないようにした。

あわせて5日以上先(FAR_FORECAST_DAYS)の予報を薄く出す。その範囲はモデル
ごとに解が割れ、気象庁の週間予報でも信頼度の低い日が並ぶ。アイコンを消さ
ないのは、気温のように先でも揃う要素が服装の見当を付ける役に立つため。
日付と操作は読めるまま、天気の部分だけ薄くする。

何日先かはJSTの今日から数える(todayKeyJst)。実行環境のTZに依らせると、
サーバーとブラウザで同じ予報が別の「何日先」になる。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: claude

CLAUDE.md

@@ -1276,7 +1276,19 @@ CSVインポートは差分更新で、`AdminView`側が事前読み込み済み
 - **1日ぶんを1行にたたむときは、いちばん悪い地点に合わせる**(`summarizeDay`)。
   旅程は**1か所でも降れば雨具が要る**ので、平均で均すと「全体としては晴れ」に見えてしまう。
   良し悪しの3段階(`weatherGrade`)は**降るかどうか**を境目にし、くもり・霧と
-  「晴れているが降水確率50%以上」は言い切らずに間へ置く
+  「晴れているが雨の可能性が高い」は言い切らずに間へ置く(境目は下記`POP_HIGH`と共有する)
+- **上流の降水確率は数値で出さない**(`precipChanceText`で「雨の可能性 低/中/高」に丸める)。
+  `precipitation_probability_max`は**気象庁が発表する降水確率とは別物** ——
+  あちらは「6時間区切りで1mm以上」を10%刻みにしたもの、こちらは「時間ごとの降水確率
+  (閾値0.1mm相当)の、その日の最大値」で、**定義が違うぶん構造的に高く出る**。
+  数値のまま並べると国内の予報と突き合わせられ、同じものだと誤解される。
+  段階の境目(`POP_MID`=40・`POP_HIGH`=70)が高めなのはこの差を見込んでいるため
+- **`FAR_FORECAST_DAYS`(5日)より先の予報は言い切らない。** そこから先はモデルごとに解が
+  割れる(気象庁の週間予報でも信頼度の低い日が並ぶ範囲)ので、`WeatherAskLink`はアイコンを、
+  `PlanWeatherFinder`は行の天気部分を薄く出す。**消しはしない** ——
+  気温のように先でも揃う要素は服装の見当を付ける役に立つ。
+  判定の`isFarForecast`は**JSTの今日**から数える(`todayKeyJst`)——
+  サーバーとブラウザでTZが違うと、同じ予報が別の「何日先」になる
 - **予報が無い日を空欄にしない。** 予報が出るのは先15日ほどまでなので、遠い予定では
   前後1週間のほとんどが範囲外になる。黙って飛ばすと「候補が無い=悪い日」と読めるため、
   「予報なし」と書いて**おすすめの判定からも外す**(`known === 0`)

components/PlanWeatherFinder.tsx

@@ -4,8 +4,11 @@ import { useCallback, useEffect, useState } from "react";
 import { api } from "@/lib/api-client";
 import {
   diffDays,
+  FAR_FORECAST_DAYS,
   formatWeatherDateWithDay,
+  isFarForecast,
   outlookScore,
+  precipChanceText,
   shiftDate,
   summarizeDay,
   weatherLook,
@@ -29,6 +32,10 @@ const WINDOW_DAYS = 7;
  * 遠い予定では前後1週間のほとんどが範囲外になる。そこを黙って飛ばすと
  * 「候補が無い=悪い日」と読めてしまうため、「予報なし」と書いて数からも外す。
  *
+ * **先の日ほど確度が落ちることを画面に出す。** 5日以上先はモデルごとに解が割れるので
+ * 薄く表示する(`isFarForecast`)。並びの中で近い日と遠い日が同じ濃さだと、
+ * 「遠いほうが天気が良い」を根拠にして日をずらしてしまう。
+ *
  * 日付を選ぶと、**旅程の長さを保ったまま**開始日・終了日をずらす
  * (3日間の旅程なら3日間のまま動く)。
  */
@@ -130,6 +137,10 @@ export default function PlanWeatherFinder({
             <b>いちばん天気の悪いスポットに合わせて</b>表示するので、
             どこか1か所でも雨なら雨として出ます。日付を選ぶと、
             旅程の長さを保ったまま予定日をずらします。
+            <b>{FAR_FORECAST_DAYS}日以上先は薄く出します</b>——
+            そこから先は予報が日替わりで変わるので、日をずらす根拠にはしないでください。
+            「雨の可能性」は<b>気象庁が発表する降水確率とは別の基準</b>なので、
+            数値ではなく段階で出しています。
             予報の出どころはOpen-Meteo(CC BY 4.0)です。
           </HelpTip>
         </p>
@@ -151,6 +162,8 @@ export default function PlanWeatherFinder({
             {days.map((day) => {
               const isPlanned = day.date === date;
               const isBest = best != null && day.date === best.date && !isPlanned;
+              // 確度の落ちる先の日。日付と操作は読めるまま、天気の部分だけ薄くする
+              const far = isFarForecast(day.date);
               return (
                 <li
                   key={day.date}
@@ -167,12 +180,21 @@ export default function PlanWeatherFinder({
                     </span>
                   ) : (
                     <>
-                      <span aria-hidden="true" className="shrink-0 text-base leading-none">
+                      <span
+                        aria-hidden="true"
+                        className={`shrink-0 text-base leading-none ${
+                          far ? "opacity-50" : ""
+                        }`}
+                      >
                         {weatherLook((day.worst as DailyWeather).code).icon}
                       </span>
-                      <span className="min-w-0 flex-1 truncate text-xs text-gray-600">
+                      <span
+                        className={`min-w-0 flex-1 truncate text-xs ${
+                          far ? "text-gray-400" : "text-gray-600"
+                        }`}
+                      >
                         {weatherLook((day.worst as DailyWeather).code).text}
-                        {day.pop != null && ` 降水${day.pop}%`}
+                        {day.pop != null && ` ${precipChanceText(day.pop)}`}
                         {day.tmax != null && ` ${Math.round(day.tmax)}℃`}
                         {day.known > 1 && (
                           <span className="text-gray-400">
@@ -213,6 +235,8 @@ export default function PlanWeatherFinder({
             </p>
           )}
           <p className="mt-2 text-[11px] text-gray-400">
+            薄い日は{FAR_FORECAST_DAYS}日以上先で、予報が変わりやすい範囲です。
+            <br />
             予報: Open-Meteo(CC BY 4.0)
           </p>
         </>

components/WeatherAskLink.tsx

@@ -2,6 +2,8 @@
 
 import {
   buildSpotWeatherAskUrl,
+  FAR_FORECAST_DAYS,
+  isFarForecast,
   weatherLinkLabel,
   weatherLook,
   weatherSummary,
@@ -19,6 +21,10 @@ import type { Spot } from "@/lib/types";
  * 「その日は晴れる」と読めてしまっていた。予報が出るのは先15日ほどまでなので、
  * それより先の予定では「天気」のボタンのまま置く(押せばAIが平年の傾向を答える)。
  *
+ * **先の日の予報は言い切らない。** 5日以上先はモデルごとに解が割れるので、
+ * アイコンを薄くし、説明にも変わりうることを書く(`isFarForecast`)。
+ * 消さないのは、気温のように先でも揃う要素は見当を付ける役に立つため。
+ *
  * **リスト詳細と地図の経路詳細で同じものを出す。** 旅程を見る場所は2つあり、
  * 片方だけに天気があると「地図から見たときだけ調べ直す」ことになる。
  * **行のボタンの中には置けない**(ボタンの入れ子になる)ので、独立したリンクとして隣に並べる。
@@ -36,8 +42,12 @@ export default function WeatherAskLink({
   className?: string;
 }) {
   const ask = weatherLinkLabel(spot.name, date);
+  const far = isFarForecast(date);
   // 予報の出どころ(Open-Meteo)はCC-BYで出典表示が要る。押す前に読める場所に置く
-  const label = weather ? `${ask}(予報: ${weatherSummary(weather)} / Open-Meteo)` : ask;
+  const note = far ? `${FAR_FORECAST_DAYS}日以上先なので変わることがあります / ` : "";
+  const label = weather
+    ? `${ask}(予報: ${weatherSummary(weather)} / ${note}Open-Meteo)`
+    : ask;
   return (
     <a
       href={buildSpotWeatherAskUrl(spot, date)}
@@ -54,7 +64,9 @@ export default function WeatherAskLink({
       }
     >
       {weather ? (
-        <span aria-hidden="true">{weatherLook(weather.code).icon}</span>
+        <span aria-hidden="true" className={far ? "opacity-50" : undefined}>
+          {weatherLook(weather.code).icon}
+        </span>
       ) : (
         "天気"
       )}

lib/weather.ts

@@ -75,9 +75,17 @@ export function weatherLinkLabel(spotName: string, date: string): string {
 export interface DailyWeather {
   /** WMOの天気コード(0=快晴 … 95=雷雨) */
   code: number;
-  /** 最高・最低気温(℃)と降水確率(%)。欠けることがあるのでnullを許す */
+  /** 最高・最低気温(℃)。欠けることがあるのでnullを許す */
   tmax: number | null;
   tmin: number | null;
+  /**
+   * 上流の`precipitation_probability_max`(%)。
+   * **気象庁の「降水確率」とは別物なので、この数値をそのまま画面に出さない**
+   * (`precipChanceText`で段階に丸めてから出す)。気象庁が発表するのは
+   * 「6時間区切りで1mm以上の降水確率」を10%刻みにしたものだが、こちらは
+   * 「時間ごとの降水確率(閾値0.1mm相当)の、その日の最大値」。
+   * 定義が違うぶん構造的に高く出るので、並べて比べると食い違って見える。
+   */
   pop: number | null;
 }
 
@@ -102,6 +110,60 @@ export function weatherLook(code: number): { icon: string; text: string } {
   return { icon: "🌡️", text: "天気" };
 }
 
+/**
+ * 降水確率を段階に丸める境目(%)。
+ *
+ * **上流の値をそのまま出さないための丸め。** `DailyWeather.pop`は気象庁の降水確率と
+ * 定義が違い、構造的に高く出る —— 数値で見せると気象庁・民間予報の発表と
+ * 突き合わせられてしまい、同じものだと誤解される。段階なら、定義の差が
+ * 吸収できる粒度でしか言わないことになる。
+ * 境目が40/70と高めなのは、上流の閾値(0.1mm相当)が気象庁(1mm)より低いぶん、
+ * 同じ空模様でも高い値が返るため。
+ */
+const POP_MID = 40;
+const POP_HIGH = 70;
+
+export type PrecipChance = "low" | "mid" | "high";
+
+export function precipChance(pop: number): PrecipChance {
+  if (pop >= POP_HIGH) return "high";
+  if (pop >= POP_MID) return "mid";
+  return "low";
+}
+
+/** 「雨の可能性 中」。`pop`を画面に出すときは必ずこれを通す */
+export function precipChanceText(pop: number): string {
+  const chance = precipChance(pop);
+  return `雨の可能性 ${chance === "high" ? "高" : chance === "mid" ? "中" : "低"}`;
+}
+
+/**
+ * 予報の確度が落ちる境目(何日先か)。
+ *
+ * **これより先はモデルごとに解が割れる。** 気象庁の週間予報も、この辺りから
+ * 信頼度(A/B/C)の低い日が並ぶようになる。数値を消しはしないが、
+ * 言い切っているように見せない(画面では薄く出して、変わりうることを添える)。
+ */
+export const FAR_FORECAST_DAYS = 5;
+
+/**
+ * 今日(JST)の日付キー。**実行環境のTZに依らせない** ——
+ * サーバーとブラウザでTZが違うと、同じ予報が別の「何日先」になる。
+ */
+export function todayKeyJst(): string {
+  return new Date(Date.now() + 9 * 3600_000).toISOString().slice(0, 10);
+}
+
+/** 今日(JST)から何日先か。過去はマイナス */
+export function forecastLeadDays(date: string): number {
+  return diffDays(todayKeyJst(), date);
+}
+
+/** 確度の落ちる先の日かどうか(画面で薄く出す対象) */
+export function isFarForecast(date: string): boolean {
+  return forecastLeadDays(date) >= FAR_FORECAST_DAYS;
+}
+
 /**
  * 天気の良し悪しを3段階にする。**旅程で知りたいのは「傘が要るか」**なので、
  * 降るかどうかを境目に置き、くもりは晴れと雨の間に独立して置く。
@@ -112,8 +174,9 @@ export function weatherGrade(weather: DailyWeather): WeatherGrade {
   // 45/48=霧も含めて、降らないが視界・見晴らしが良くないものは fair に寄せる
   if (weather.code >= 51) return "bad";
   if (weather.code === 3 || weather.code === 45 || weather.code === 48) return "fair";
-  // 晴れていても降水確率が高い日は言い切らない(予報の幅を潰さないため)
-  if (weather.pop != null && weather.pop >= 50) return "fair";
+  // 晴れていても雨の可能性が高い日は言い切らない(予報の幅を潰さないため)。
+  // 境目はPOP_HIGHと共有する —— 画面の「雨の可能性 高」と判定がずれないようにする
+  if (weather.pop != null && precipChance(weather.pop) === "high") return "fair";
   return "good";
 }
 
@@ -210,14 +273,14 @@ export function diffDays(from: string, to: string): number {
   return Math.round((b - a) / 86_400_000);
 }
 
-/** 「くもり 26/21℃ 降水20%」。リンクの説明に添える1行 */
+/** 「くもり 26/21℃ 雨の可能性 低」。リンクの説明に添える1行 */
 export function weatherSummary(weather: DailyWeather): string {
   const parts = [weatherLook(weather.code).text];
   if (weather.tmax != null || weather.tmin != null) {
     const max = weather.tmax != null ? Math.round(weather.tmax) : "－";
     const min = weather.tmin != null ? Math.round(weather.tmin) : "－";
     parts.push(`${max}/${min}℃`);
   }
-  if (weather.pop != null) parts.push(`降水${weather.pop}%`);
+  if (weather.pop != null) parts.push(precipChanceText(weather.pop));
   return parts.join(" ");
 }