MOMENT Studio
← 一覧へ

モード切り替えに連動する画面ビジュアル

2025.09.29技術記録#product-ui#content

モード選択に応じて背景の色とグラデーションが動的に切り替わるよう画面構造を再設計し、状態間のフェード遷移を実装した。

従来の実装では、モードを変更しても背景は単一のトーンを維持していた。ヒーリングや瞑想のように性質の異なるモード間で視覚的な差別化がなく、モード選択の意味がユーザーに十分に伝わっていなかった。

今回の変更では、モードの状態と背景ビジュアルを直接連携させた。選択されたモードに応じて背景の色とグラデーションが動的に決定され、遷移時には前の状態が急に切り替わるのではなくフェードで置き換わるよう処理した。色の境界で生じていた急激な断絶を除去したことが主な変更点である。

モーメント画面も合わせて整備した。スクロールに応じて上部が自然に折りたたまれ展開される構造に改善し、ボタン配置を整理して視覚的な優先順位を明確にした。ミニプレーヤーの位置も他のUI要素との整合性が取れるよう調整している。

遷移速度やフェードの持続時間といった細部のパラメータは目立たないが、モード切り替え時のインターフェースの一貫性を直接左右する要素である。