⛅

あなたの「天気」とつながる癒やしの体験：「おてんきぐらし」を作りました！

に公開
Next.js
Vercel
Web
個人開発
openweatherapp
idea

あなたの「今」とつながる癒やしの体験：「おてんきぐらし」を作りました！🌤️

こんにちは！突然ですが、天気予報を確認するのって、少し面倒に感じるときはありませんか？
~ありますね！！！~
でも、急な雨に降られたり、気圧の変化で体調が悪くなったりするのは避けたいですよね。

そんな「天気予報を見ないあなたの、いちばん優しいおまもり。」になりたいという想いから、Webサービス 「おてんきぐらし」 を開発しました。

「おてんきぐらし」は、あなたのいる場所の現実世界の天気や時間とリアルタイムで連動する、新感覚の育成Webサービスです。✨

「おてんきぐらし」ってどんなサービス？

『おてんきぐらし』の世界では、「てんちゃん」というキャラクターがあなたを待っています。
この世界は、あなたが今いる場所の天気や時間と繋がっています。

例えば、あなたの街で雨が降れば『おてんきぐらし』の世界も雨になり、夜になればてんちゃんも眠りにつきます。

面倒だった天気予報の確認が、「雨だから、てんちゃんの世界では何か特別なことが起こるかも？」という、
ちょっとした楽しみや癒やしに変わることを目指しています。

🚀 主な機能紹介

天気・時間とのリアルタイム連動

あなたのデバイスの位置情報をもとに、現在地の実際の天気と時間がゲーム内の背景やキャラクターの様子に反映されます。
晴れの日、雨の日、曇りの日、雪の日、そして夜。毎日変わる景色を楽しめます。

おさんぽ機能

てんちゃんを「おさんぽ」に出すことができます。
おさんぽに行くと、その日の天気に応じた特別なアイテムを見つけてきてくれることがあります。
雨の日には「あじさい」や「かたつむり」、晴れの日には「ひまわりのタネ」など、天気によって出会えるアイテムが変わります。

コレクション（ずかん）機能

おさんぽで集めたアイテムは「ずかん」に記録されていきます。
アイテムにはそれぞれちょっとした説明やレアリティがあり、コンプリートを目指すのも楽しみの一つです。
レベルアップのようなノルマはないので、自分のペースでゆっくり集められます。

実績機能

「はじめておさんぽに出かけた」「雨の日におさんぽした」「アイテムを10種類集めた」など、
てんちゃんとの様々な思い出が「実績」として記録されます。
ゲームを進める上でのちょっとした目標や、これまでの歩みを振り返るアルバムのようになります。

使っている技術について

『おてんきぐらし』は、モダンなWeb技術を使って開発されています。

カテゴリ 技術
フレームワーク Next.js (React)
スタイリング Tailwind CSS
アニメーション Framer Motion
データベース Vercel Postgres + Prisma
デプロイ Vercel
外部API OpenWeatherMap API

特に、Next.js と Vercel の組み合わせにより、API機能も含めた開発と高速なデプロイを実現しています。
天気情報は OpenWeatherMap API から取得し、ユーザーの位置情報に基づいてリアルタイムで表示を更新しています。
アイテムや実績のデータ管理には Prisma を使って Vercel Postgres データベースを操作しています。
UIは Tailwind CSS で効率的に構築し、Framer Motion でキャラクターの動きなどにちょっとしたアニメーションを加えています。

開発で考えたこと・工夫したこと

  • 天候とアイテムの連動
    単に天気を表示するだけでなく、「その天気だからこそ出会えるもの」がある体験を提供したかったため、
    天気に応じたアイテムの出現確率を調整するロジックを実装しました。
    レアアイテムは特定の天候の時に出やすくなるようにしています。

  • シンプルなUI/UX
    毎日気軽に触ってほしいので、複雑な操作は極力なくし、直感的に使えるシンプルなデザインを心がけました。
    キャラクターの表情や背景の変化で、今の状況がすぐにわかるように工夫しています。

  • サーバーレス構成
    Vercelのサーバーレスファンクションを使ってAPIを構築することで、
    インフラ管理の手間を減らし、開発に集中できるようにしました。

実際に触ってみてください！

『おてんきぐらし』は以下のURLからアクセスできます。
ぜひ、あなたの街の天気とてんちゃんの世界がつながる様子を体験してみてください！

🙏 おわりに

『おてんきぐらし』が、あなたの毎日にちょっとした癒やしや楽しみを届けられたら嬉しいです。
ぜひ、てんちゃんと一緒に、日々変わる空模様を楽しんでみてください！
よかったらいいねとStarsもしてね！

Discussion