UI / Design System
Designer:
Mio Shimizu
ファッションとの新しい出会いを届けるアパレルショッピングアプリです。統一したデザインシステムを軸に、商品の魅力を引き立てるビジュアルと、直感的に探して購入できる体験を丁寧に作り上げました。
課題設定
アパレルECでは、写真がユーザーの心を動かす大きな要素になります。一方で、検索・絞り込み・カート・詳細と機能が増えていく中で、写真をどう主役に保つかは悩ましいテーマです。もしファッションアプリで、気になる一着をその場で比較しながらシームレスに探索でき、気になるアイテムが保たれたまま次の発見へ進めるとしたら——それだけでユーザー体験は大きく変わります。機能とビジュアルのバランスをどう取り、画面移動の多さをどう減らすか。ここを本プロジェクトの出発点としました。
観察・洞察
方向性を固める前に、既存のアパレルアプリのデザインと動きを観察しました。画面の構成や、詳細を開いてから一覧へ戻るまでの一連の動きを追いながら、どの要素が写真を引き立て、どの操作が体験のノイズになっているかを見ていきました。ここで見えてきた必要な要素をもとに、まずワイヤーフレームで情報の優先度と画面構成を整理し、色や装飾に惑わされない段階で土台を固めています。
アイデア展開
ワイヤーフレームで固めた土台をもとに、カラー・タイポグラフィ・レイアウトを与えてデザインへと構築していきました。軸に据えたのは、写真を主役にすることと、画面移動を減らすことです。商品は画像を大きく見せるレイアウトを基本としています。商品詳細はページ遷移ではなく、モーダルで一覧の上にそっと重ねる形を選びました。閉じればすぐ元の場所へ戻れるので、買い物の流れを途切れさせることなく、心地よく商品を探し続けられます。
検証
デザインを進める中で、各画面は複数の案を並べて比較・検証しました。ホームのカテゴリーは、ブロック状の並びと円型を比較。その結果円型の方がメイン画像の存在感を保ちながら視覚的な優先順位を整理できることがわかりました。一覧画面では、グラデーションブラーを用いた情報の重ね方が面積を十分に確保でき、没入感との両立に優れていることが検証で明らかになりました。こうした比較検証を重ね、より快適なユーザー体験を目指します。
馴染む質感、途切れない操作
ナビゲーションや検索バーなどのシステム的なUIには、iOSらしいすりガラスの質感を採り入れ、背景の写真を透かしながらOSと地続きの操作感を持たせました。商品詳細はページ遷移ではなくモーダルで画面の上に重ね、閉じれば元のスクロール位置へそのまま戻れる設計に。画面移動の回数を減らすことで、見ていたアイテムの文脈を断たず、写真に没頭したまま買い物を続けられる体験としました。
直感的なアイテム選び
PCの一覧画面では、画像がより主役になるよう、気になったアイテムにカーソルを重ねたときにだけ情報が現れる仕組みにしました。文字が視界を邪魔しないぶん写真の面積を最大化できるため、ユーザーが直感的にアイテムを選べます。
ALTO.
到達したのは、ビジュアルを主役に据え、UIは必要な瞬間にだけ静かに現れる設計です。バブル型カテゴリー、グラデーションブラーの一覧、モーダル詳細、いずれも「何を足すか」ではなく「何を引くか」で選んだ結果です。モーダルによって文脈を断ち切らない商品閲覧を実現し、一貫したデザインシステムがどの画面でも心地よい操作感を実現します。核となるルールを作り込み、そこから型を展開する進め方は、要素の多いプロダクトでも一貫した品質を保つ、私たちの標準的なアプローチです。
つくりたい体験の、その先まで。
事業に並走してUI/UXをデザインします。
お問い合せ
プロジェクトの課題をお聞かせください
イノベーションはコラボレーションを通して実現されます。
私たちがどのように新しい製品体験の創出をサポートできるかご提案いたします。
ご相談いただいた内容は、守秘義務契約の有無にかかわらず機密情報として取り扱いいたします。