KAKERU Design Showcase

Design Evolution

v1 (Stitch初期) → v2 (洗練) → v3 (最終版) の進化。各画面がどう変わったか比較できます。

v1

Explore

v2

Explore

v3 Final

Explore

v1

Route Generation

v2

Route Generation

v3 Final

Route Generation

v1

Riding View

v2

Riding View

v3 Final

Riding View

v1

Ride Summary

v2

Ride Summary

v3 Final

Ride Summary

v1

Profile

v2

Profile

v3 Final

Profile

v1

Settings

v2

Settings

v3 Final

Settings

3-Phase UI System

計画 → 走行 → 振り返り。状況に応じてUIの密度とトーンが変化する3フェーズ設計。

Planning Phase - 情報リッチ

Spot Discoveryスポット検索・発見

Route Selectionルート選択・比較

Trip Planner旅程カルーセル

AI Route Input1画面統合入力UI

Riding Phase - 極限シンプル

Full Dashboard日中 フルUI表示

Minimal Mode日中 最小限表示

Night Mode夜間 赤系低刺激UI

Reflection Phase - エモーショナル

Reflection View振り返りメイン

Emotional Summary走行サマリー

Stats Dashboard統計ダッシュボード

Onboarding Flow

30秒でAI価値を体感。4ステップのオンボーディング。

Step 1バイク選択

Step 2位置情報許可

Step 3AI生成デモ

Step 4ルートプレビュー

Dark Mode

Light/Dark両対応。走行中は自動でダークモードに切り替え。WCAG AA/AAA準拠。

Homeホーム画面

Exploreスポット検索

Riding走行画面

Profileプロフィール

Paywall課金画面

Night Riding夜間走行モード

Share Cards

SNSシェア用カード。OGP (1200x628) と Instagram (1080x1080) テンプレート。

OGP Template1200 x 628px - Twitter/Facebook/LINE

Instagram Template1080 x 1080px - Instagram/Stories

Color System

AppColors.swift で定義済み。ブランドカラー + セマンティック + ダークモード対応。

Brand Colors

Semantic Colors

Dark Mode