コンテキスト
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 つのターゲット。