はじめに

ZOZOTOWN開発本部ZOZOTOWNアプリ部Android2ブロックの鈴木（@s1u2z1u3ki）です。

本投稿ではZOZOTOWN Androidアプリを、Material Designに準拠したUI/UXとするために取り組んでいる内容を紹介します。

Material Designとは？

Material Designは2014年にGoogleが提唱したデザインシステムです。Android、Flutter、Web向けの高品質な体験を構築する手助けをしてくれます。

Androidアプリは、Androidプラットフォームや他アプリと一貫性のある表示・操作を提供するため、Material Designに準拠することが推奨されています。

例えばリストのアイテムを横スワイプで削除する機能は、AndroidプラットフォームやGoogle製のアプリで共通の操作であり、ガイドラインにも記載があります。ガイドラインに準拠しないと、AndroidプラットフォームやGoogle製のアプリと操作方法が異なり、アプリ操作中にユーザがストレスを抱える可能性が高くなります。

さらにMaterial Design Componentsと呼ばれるライブラリが提供されており、ガイドラインを実装したUIコンポーネントが提供されています。

また、2021年にはMaterial Design 3の発表があり、パーソナライズの強化が行われたMaterial Youの登場などアップデートが続いています。

Material Design勉強会について

ZOZOTOWN AndroidアプリにはMaterial Designに準拠していない箇所が存在し、さらにデザイナーとエンジニア両者がMaterial Designの知識に乏しい状況でした。

上記を理由に、ZOZOTOWNに関わるAndroidエンジニアとデザイナーを中心に、下記2つを目的として「Material Design勉強会」を実施してきました。

• Material Designについて理解を深める
• Material Designに準拠したZOZOTOWN Androidアプリを作る

勉強会の流れ

勉強会は、持ち回りで決めた担当者がセクション（e.g. Motion, Interaction）の内容を和訳・要約した資料を準備します。

資料をもとに、担当者が講義形式で内容を紹介します。ZOZOTOWNに関わるAndroidエンジニアとデザイナーが参加し、質問や感想を出し合いながら理解を深めていきます。

勉強会資料の例

この勉強会のおかげでデザイナーとエンジニアがMaterial Designに関する知識をもとに、UI/UXに対する提案・議論が可能になるなど、勉強会の内容をプロダクトに反映できつつありました。

UI/UXに関する提案例

存在した課題

前述の通り、勉強会のおかげで、新規の画面や改修が入る画面については、Material Designに準拠したUI/UXとなりつつありました。

しかし、既存の画面についてはMaterial Designへの準拠が進んでおらず、さらなるUI/UXの向上が見込めました。

課題解決へのアプローチ

前述の課題を解決するために、勉強会の他に「提案会」と「実装会」を新たに実施することにしました。

課題解決のアプローチ

それぞれ取り組みの詳細を説明していきます。

提案会の実施

デザイナーとエンジニアで、どの箇所が改善可能なのか認識を合わせなければ改善が進まないと判断し、月1回で1時間程度の提案会を実施することにしました。

Material Designに準拠できるように、改善できる箇所の認識合わせを目的としました。

提案会の流れ

提案会は下記のように進行します。

提案会の流れ

1. 提案会の準備

提案会までに、担当者が担当するセクション（e.g. Motion, Interaction）について、プロダクトのどの箇所に改善の余地があるかを考えます。

デザイナーとエンジニア両者の視点を提案に含めるため、担当者を2名にし、なるべくデザイナーとエンジニアがペアとなるようにしました。

下記の項目を埋めて提案資料を作成します。

続きはこちら