観察・洞察

方向性を固める前に、まずムードボードで表現の引き出しを集めました。ここで着目したのが、情報を弁当箱状に整理するBento UIです。予約・カロリー・進捗と要素が多い本アプリでこそ有効だと考えました。多様な情報を一望させつつ各項目を独立させる構成は、「毎日開いても疲れない」体験に直結します。あわせて、ネオンカラーのグラフや写真を大胆に使ったUIも取り入れました。数値やグラフが主役として際立ち、写真が画面に躍動感を与える表現に習慣化を後押しする手応えを感じ、これらを軸にラフスケッチへ落とし込んでいます。

アイデア展開

スケッチで固めた骨格をもとに、まずワイヤーフレームで画面構成と情報の優先度を整理しました。色や装飾に迷わされない段階で、要素の配置とBento UIのブロック分けを徹底的に検討しています。その構造をベースに、FigmaのAIエージェントで複数のデザイン案を一気に展開し、カラーリング・質感・ビジュアルの見せ方を変えたバリエーションを並べて、比較・検証できる状態をつくりました。この中には紫を基調とした案もあり、世界観は魅力的でしたが、次の検証で見送りを決めています。捨てた案を残したことが、最終案の説得力につながりました。

検証

ライトモード／ダークモード両対応を前提に検証を進める中で、当初有力だった紫は、両端の明度で彩度が落ち、画面に映えない問題が判明しました。彩度の推移を分析し、より広い明度域で安定した鮮やかさを保てる「緑」を新しいメインカラーに変更しています。これにより、どちらのモードでも視認性が高く、統一感のあるUIを実現しました。色を感覚ではなく数値で検証して選び直したことが、ブランドカラーの決め手になっています。