Otenki(天気予報)

概要

デジタルサイネージ向けの天気予報サイトです。

全国と各地区の代表都市の現在の天気と、都道府県内の代表6市町村の週間予報を表示します。

Points

テレビの天気予報を基準に、遠目でも直感的に把握できるデザインを意識して設計しています。 都道府県のSVGデータや天気アイコンには、視認性と精度を重視して品質の高い素材を採用し、 ライセンス表記を行ったうえで適切に使用しています。

外部APIへの過剰なアクセスを避けるため、OpenWeatherMap APIの呼び出しには Next.js の ISRを採用し、 リアルタイム性とコストのバランスを取っています。

デジタルサイネージ用途を前提に以下の点を重視しています。

  • ・サイネージで表示したときの表示の見やすさ
  • ・表示遅延を感じさせないスケルトンローディング
  • ・スクロールやホバーによるナビゲーションの補助表示
  • ・+αスマートフォンのニーズに先回りしたレスポンシブデザイン

Stacks

  • フロントエンド :
    • Next.js、
    • CSS(TailwindCSS、shadcn/ui)、
    • 天気のアイコン(weather-icons by bas)、
    • 都道府県SVG(japanese-prefectures)
  • バックエンド :
    • Next.js、
    • OpenWeatherMap(One Call API 3.0)
  • インフラ・その他 :
    • Vercel
画像 1
画像 2
画像 3
画像 4
画像 5
画像 6
画像 7
画像 8
画像 9
画像 10
アクティブ画像