🎛
Fragment #4 – Fragmentの“選ぶ”という体験のデザイン
はじめに
Fragment では、ユーザーが「色」「言葉」「音」をひとつずつ手に取って Fragment をつくる体験を提供しています。
この「Choose」画面では、ただの選択 UI ではなく、“静かで、意味のある選択”をデザインしたいと考えました。
デザインの方向性
- ✨ UI は静かで、押しつけがましくないこと
- 🎨 背景はダークトーン（#12171D）で、ピースが浮かび上がるように
- 🧩 色・言葉・音はそれぞれ 3 つの選択肢。選ぶごとに静かにハイライトされる
- 🎧 音のピースはアイコンで表現（ex. 風＝ air、水＝ music-note、森＝ headphones）
動画デモ
技術的な実装ポイント
- ピースはすべて Pressable で構成、選択状態は useState で管理
- 選択時には背景色と白いボーダーで状態を明示
- 「Fragment をつくる」ボタンは、3 つすべてが選ばれたときのみ表示
- 背景とのコントラストに配慮して、ボタンの背景色は #2C2C2C / #3F3F3F を使用
苦労した点・工夫した点
- margin / padding / spacing はすべて 32px ベースで設計
- React Native のインスペクターや borderColor を使って、視覚的に間隔を確認
- アイコンは Expo に内蔵の
@expo/vector-iconsを利用- Google Material Icons
次にやること
- 選んだピースから「Fragment」を生成する画面を実装
Discussion