MeteoHealth.pro
公開済みmeteohealth.pro は iOS アプリ「MeteoHealth: Symptom Tracker」の公式サイトです。独自デザインシステム「Liquid Signal」によるエディトリアルなデザイン、React Three Fiber で描画される気圧変化のジェネラティブな WebGL ビジュアライゼーション、ヒーローに表示される選択都市のライブ気象データ、天気と体調の関係をテーマにした SEO ブログ、そしてポリシー・サポート・universal links などアプリのインフラをすべて備えています。アラビア語の RTL レイアウトを含む 6 言語に対応。
/// 主な機能
- WebGL のジェネラティブな「気圧フィールド」：選択した都市の実際の気圧変化・風・降水に反応して描画が変化
- ヒーローにライブ気象データ：気圧、湿度、風、気象病リスクの推定
- 独自デザインシステム「Liquid Signal」：エディトリアルなタイポグラフィと HUD プリミティブ
- 天気と健康をテーマにした SEO ブログ — Zod でバリデーションされた frontmatter を持つ MDX
- アラビア語の完全な RTL レイアウトを含む 6 ロケール対応
- スムーススクロール（Lenis）と prefers-reduced-motion を尊重する GSAP アニメーション
- バックエンド不要の静的ブログ検索（Pagefind）
- アプリのインフラ：ポリシー、サポート、プレスキット、universal links
/// スクリーンショット
プロジェクトについて
meteohealth.pro は、MeteoHealth アプリのマーケティングサイトであり、それ自体がひとつのプロダクトとして作られています。役割は、訪問者を App Store でのインストールへ導くこと、天気と体調の関係についての記事でオーガニックなトラフィックを集めること、そしてポリシーから universal links までアプリのインフラを支えることです。
デザイン：「Liquid Signal」
このサイトは典型的なアプリのランディングページには見えません。核となるのは独自デザインシステム「Liquid Signal」：落ち着いたエディトリアルなタイポグラフィ、技術的なラベル（APP_STATUS、TIME_CODE、PRESSURE_Δ24H）を持つ等幅の HUD 要素、そしてたっぷりの余白です。
構図の中心は React Three Fiber で描画されるジェネラティブな「気圧フィールド」。選択した都市の気象データによってリアルタイムに制御される波状の描画で、天気が穏やかならフィールドも穏やかに、気圧の変動が大きくなると描画も密になります。
主な機能
生きたヒーロー
最初の画面に本物の指標が並びます：気圧、湿度、風、24 時間の気圧変化、そして気象病リスクの推定。都市は手動でもジオロケーションでも選べます。
SEO ブログ
気象病、気圧と頭痛、HRV、睡眠についての記事 — Zod でバリデーションされた frontmatter を持つ MDX、JSON-LD マークアップ、公開済みロケールすべてへの hreflang 付き。検索は Pagefind による静的検索で、サーバーへのリクエストはゼロです。
ローカライゼーション
アラビア語を含む 6 言語。すべてのレイアウトを RTL で検証しています。URL は /{locale}/… 形式でプレフィックス必須 — このポートフォリオと同じ規約です。
技術的な特徴
- Next.js App Router + SSG：コンテンツページは静的生成
- WebGL シーンは優雅にフォールバック：非力なデバイスや
prefers-reduced-motionにはポスターを表示 - スムーススクロールは Lenis、スクロールアニメーションは GSAP
- デプロイは Docker（standalone）でセルフホストの Dokploy へ
医療面の姿勢
サイトは意図的に医療アドバイスを行いません。健康に関する記事はすべて情報提供が目的で、免責事項を添え、「治す」ではなく「影響する可能性がある」という表現を使っています。
