🌊
Fragment #3 – ホーム画面の波紋と静けさ
はじめに
Fragment アプリのホーム画面は、ユーザーを静かに迎え入れる入り口として設計しました。
ここでは、過剰な説明や要素を避け、波紋と色の変化、そしてわずかな導線だけで「Fragment を手に取る」体験を作り上げています。
デザインの方向性
- 波紋は「Fragment を手に取る」という体験の象徴。
- 最初は水面のような
#3F9BE2を背景に、放射状のグラデーションが広がる。 - 中心から波紋が 2 段階で広がり、静かに消える。
- 波紋が消えた後、"Enter ←" がそっと現れ、次の画面への導線となる。
動画デモ
技術的な実装ポイント
🌀 複数の波紋を非同期でアニメーション
-
Animated.Valueを使って、ripple1 / ripple2 を別々に管理 - ripple1: 100 → 300 に拡大しながら色も
#3F9BE2 → #231AC3 - ripple2: 100 → 100 で元の位置へ戻る、自然な残像のような演出
🎨 Radial 風の背景グラデーション
-
expo-linear-gradientを活用し、放射状に見えるようstart/endを工夫 - 初期状態はグラデーション、アニメーションで
#eeeに遷移
🎭 背景色の変化は Animated.Value × opacity で実現
-
Animated.Valueにopacityを割り当て、白背景がふわっと重なるように配置 -
z-indexを意識せずとも直感的な背景切り替えが可能に
⌨️ "Enter ←" の表示位置とアニメーション
- ripple2 の最終位置と文字の中心が一致するよう調整
-
Animated.Text+opacity + translateYで浮かび上がるように表示
苦労した点・工夫した点
-
ripple2が非同期で走るタイミングと軌道の自然さ - 背景が上書きされないよう、
opacityによるレイヤー調整 - 実際に触れてもらって「癒されるか」を意識した細かな動きの設計
次にやること
- 「Fragment」を生成するためのピース（色・言葉・音）を選択する画面を実装
Discussion