作品解説：Afternoon Tea Tour（スタンプラリーPWA）

https://zen23.shop/gps_stamprally

1. プロジェクト概要

「週末を彩る、最高の一杯を求めて」 都内のラグジュアリーホテルを中心に、厳選されたアフタヌーンティー・スポットを巡るデジタルスタンプラリー形式のPWA（Progressive Web App）です。日常を離れた優雅なひとときを記録し、自分だけの「ティータイム・コレクション」を完成させる体験を提供します。

2. コンセプトとデザイン

  • 世界観の設定: 「大人の女性に向けた、落ち着きのあるラグジュアリー」をテーマに設定。アイボリー、オールドローズ（くすみピンク）、アンティークゴールドの配色で、上品かつクラシックな印象を統一しました。
  • ビジュアル言語: スタンプ画像には、AI（nanobanana）を活用した繊細な水彩画スタイルのイラストを採用。各ホテルの象徴的なモチーフ（ライオン、鳥籠、茶器など）を取り入れ、コレクションする喜びを最大化しました。

3. 主な機能

  • GPS連動スタンプ取得: Geolocation APIを使用し、実際のスポット半径25m（設定変更可）以内に近づくことでスタンプが取得できるリアルタイム判定機能を搭載。
  • 永続的な進捗保存: Firebase/Firestore（またはLocalStorage）を利用し、リロードや再訪問時でも進捗が保持されるように設計。
  • 動的なスタンプボード: 取得状況に応じてスタンプがモノクロからカラー（水彩画イラスト）へ変化する視覚的なフィードバックを実装。
  • PWA対応: ホーム画面への追加により、ネイティブアプリのような操作感を実現。

4. 技術スタック

  • Frontend: HTML5, CSS3, JavaScript (Vanilla JS / React)
  • Design/UI: CSS Variablesによるカラーシステム構築, Google Fonts (Cormorant Garamond / Noto Serif JP)
  • API/Backend: Geolocation API, Firebase (Auth/Firestore)
  • AI Tools: 画像生成AIを活用したアセット（スタンプ・アイコン）デザインのディレクション

5. こだわり抜いたポイント

  • 文字化け・視認性への配慮: 絵文字に頼らず、セリフ体のタイポグラフィと枠線装飾（double border）を用いることで、あらゆるデバイスで一貫した「高級感」が損なわれないように実装しました。
  • 没入感のあるUX: 現在地取得時の待機アニメーションや、コンプリート時のオーバーレイ表示など、ユーザーが「旅」をしている感覚を楽しめる演出を盛り込みました。

制作時間：7時間