P2HACKS2025 アピールシート

プロダクト名

PrismStep（ぷりずむすてっぷ）

コンセプト

沢山歩くと雫（キラキラ）が大きくなって、より素敵な宝石の花（キラキラ）が生まれます。

「沢山歩きたい！」と思うような、キラキラを詰め込んだヘルスケアアプリです。

対象ユーザ

• 運動不足の人
  • 歩くきっかけが欲しい
• 歩くことに新しい目標が欲しい人
  • 痩せる！体力つける！みたいな目標じゃ長続きしない
• いつも歩いている道に飽きてきた人
  • 新しい道を探すのは面倒だけど違う景色を見たい

利用の流れ

1.今日の歩数に応じた大きさの雫が誕生

2.歩けば歩くほど（歩数が増えるほど）雫が大きくなる

3.一日の終わりに今日の歩数を「樹録」する

4.雫が大きいほどより豪華な宝石の花が生まれる

5.宝石の花が樹の上に飾られる

推しポイント

雫へのこだわり

• 雫状態とカメラ状態の2つの状態を楽しめるようにした
• カメラの上から薄い青フィルターを重ねることで雫を通して見た景色を再現した（カメラ状態）
• 雫の縁を白くすることでコントラストを表現（雫状態）
• 画面上部の太陽を模したバーを動かすと、そのバーの位置を判別し、雫がキラキラさせて楽しむことができる（カメラ・雫状態）
• 雫をタップするとぷるんっと動く！（カメラ・雫状態）

雫が歩数によって大きくなる

• 雫を「もっと大きくさせたい！」＝「沢山歩きたい！」と思わせるような実装

  雫が大きくなると…?

  • 雫状態のとき
    • より雫のキラキラがわかる様になる
    • より雫のぷるんっ感が味わえる
  • カメラ状態のとき
    • より大きな範囲で「雫を通してみた景色」を味わうことができる

宝石の花へのこだわり

• ただの花ではなく、「宝石の花」の3Dモデルを用いてよりキラキラ感を出した
• 2D素材ではなく、3D素材を使うことで本物の宝石のようなキラキラを目指した
• 宝石の花を回転させて登場させることにより、より美しさを際立つような実装にした

大きい雫になるほど、豪華な宝石の花が誕生する

• 「より豪華な宝石の花を咲かせたい！」＝「沢山歩きたい！」と思わせるような実装
  • 花のレベルごとにより豪華な見た目の3Dモデルを用いた
  • 宝石の花ごとに色や名前を設定し、より次のレベルの花を目指したくなる様にした

スクリーンショット(任意)

ここにはスクリーンショットを貼ります。そのままでもよいですし、画像を編集しておしゃれにしてもよいです(全くの捏造というのはしないでください)。GitHub のエディタに画像をドロップ&ドロップすると張り付きます。

ScreenRecording_12-20-2025_23-01-30_1.mov

ScreenRecording_12-20-2025_23-45-09_1.mov

開発体制

役割分担

田中琳菜：モバイル（iOS）、デザイン、発表資料作成

三上凪咲：モバイル（iOS）

開発における工夫した点

モバイル (iOS)

• SwiftUI と RealityKit の連携
  • RealityView を使い、SwiftUI のライフサイクル内で 3D コンテンツを管理
  • .spatialTracking を有効にし、現実空間と連動した AR 体験を実装
• パフォーマンスの最適化
  • 非同期モデル読み込み: Swift Concurrency (.task, await) を活用し、容量の大きい 3D モデル（.usdz）の読み込みを裏側（バックグラウンド）で実行することで、画面操作のフリーズを回避
  • 状況に応じたリソース管理: ダイアログ表示中は背景の AR 機能（RealityView）を条件付きで停止・破棄し、GPU の処理能力を解放することで描画負荷を軽減
  • 処理速度に左右されないアニメーション: SceneEvents.Update で取得した deltaTime（経過時間）を計算に使うことで、端末の処理速度に関わらず一定の速さで滑らかに回転するように調整
• 3D / AR 実装の工夫
  • Turntable パターンの採用: 3D モデルの位置や大きさの調整を行う「子」と、回転を担当する「親（Turntable）」を分けることで、軸がブレない綺麗な回転を実現
  • コード記述によるマテリアル生成: 画像データを使わず、コード上で SimpleMaterial (roughness: 0.0, isMetallic: false) を設定し、宝石や氷のような質感を軽量に表現
  • サイズの自動統一: visualBounds を取得し、大きさの異なる 3D モデルを規定のサイズに自動で調整（スケーリング）する仕組みを実装（ModelTestView）
• UI / UX デザインの実装
  • すりガラス風の表現: ZStack を活用し、透明度、ぼかし、影、枠線を多層に重ねることで、奥行きのあるガラスの質感を SwiftUI だけで再現
  • 独自の操作部品: 標準の部品を使わず、計算式と DragGesture を用いて円形の軌道を描く「太陽スライダー」を自作
  • 操作に連動したアニメーション: タップした位置の判定とバネのような動き（spring）を組み合わせ、ユーザーの操作に合わせて「ぷるん」と変形する動きを実装
  • 振動によるフィードバック: ボタン操作時に UIImpactFeedbackGenerator を動かし、物理的な手応えを提供
• HealthKit を用いたデータ連携
  • HKStatisticsQuery の .cumulativeSum オプションを使い、その日の合計歩数を正確かつ高速に取得
  • 取得したデータを DispatchQueue.main.async でメインの処理（メインスレッド）に渡し、安全に画面を更新

開発技術

利用したプログラミング言語

• Swift

利用したフレームワーク・ライブラリ

モバイル (iOS)

• Apple Frameworks
  • SwiftUI: アプリケーション全体の画面構築
  • RealityKit: 3D モデルの描画、AR 空間の構築、アニメーション制御
  • HealthKit: ユーザーの歩数データ取得 (HKHealthStore, HKStatisticsQuery)
  • Combine: データの監視と状態管理 (@Published, ObservableObject)
  • UIKit: 色の管理 (UIColor) および振動フィードバック (UIImpactFeedbackGenerator)
  • Foundation: 非同期処理、日付管理

その他開発に使用したツール・サービス

• Xcode
• GitHub
• Figma
• FigJam
• Notion
• Gemini