Sérein — ウェルネス・モバイルアプリ

コンテキスト

Sérein は、私の Web プロジェクトとは異なるスキル——ネイティブなクロスプラットフォーム開発——を示すために作ったコンセプト・モバイルアプリです。目指したのは、静かでミニマルな、毎日戻ってきたくなるウェルネスアプリ。

デモはブラウザ上で、スマートフォンのフレームの中に表示されます。これはれっきとしたモバイルアプリであり、Web サイトではありません。

目標

• モバイルの定番スタックである React Native / Expo の習熟を示すこと。
• 最小公倍数ではなく、各プラットフォームでネイティブな体験を届けること。
• モックアップの先へ：永続的な状態と完全な導線を備えた、実際に使えるアプリ。

ソリューション

日々の儀式として設計した 4 つの画面：

• 今日 — その日の習慣、進捗リング、継続中のストリーク、そして習慣を作成するフローティングボタン。
• 習慣を作成 — アイコン選択（整理されたグリッド）、カラー選択、ライブプレビューを備えたモーダルシート。ありきたりなものは何もありません。
• 呼吸 — 軽い触覚フィードバックでリズムを刻む、アニメーション付きの心拍コヒーレンス・エクササイズ（5秒／5秒）。
• 進捗とプロフィール — 直近 7 日間のグリッド、最高ストリーク、そしてオンボーディング時に作成するカスタマイズ可能なプロフィール（名前、アバター）。

プラットフォームごとのネイティブ体験

• iOS — SF Symbols アイコン、Liquid Glass タブバー、Taptic Engine。
• Android — Material アイコン、ネイティブな振動。
• すべてに共通 — 丁寧なタイポグラフィ、マイクロアニメーション（Reanimated）、そして完全オフライン動作：データは端末に留まり、サーバーはありません。

スタック

React Native + Expo（expo-router）、Reanimated アニメーション、AsyncStorage によるローカルストレージ、Vercel にデプロイした静的 Web エクスポート。単一のコードベースで、3 つのターゲット。