こんにちは！ アンドパッドでプロダクトデザイナーをしているエモトです。反抗期が始まった小６の長男、ゲームとサッカーばかりしている小２の次男の子育てに奮闘しながらも、日々デザインに本気で向き合っています！
この記事は ANDPAD Advent Calendar 2023 16日目の記事です。
アンドパッドでモバイルアプリをデザインする中での悩みや、その悩みに対してどのように向き合っているのかをお話しできればと思います。
モバイルアプリのデザイン、ここが悩ましい！
モバイルアプリのデザインは、自由度の高いWebに比べて、利用できるUIコンポーネントやデザインパターンがOSによってある程度規定されています。その点において私は比較的作りやすいと感じていますが、以下のようなことについて、よく頭を悩まされています。
画面内が要素で埋まってしまい、これ以上追加できない！
モバイルアプリのデザインを考える時について回るのが、画面サイズの制約です。特にSaaSのプロダクトは機能も多いので、新たに機能を追加する時など、もうどこにも要素を配置できないような状況に陥ることがあります。
iOSとAndroidでデザイン思想が異なる
iOSとAndroidには、それぞれのデザイン思想に基づいたHuman Interface Guidelines、Material Designと呼ばれるガイドラインが存在します。モバイルアプリを開発する際には、これらのガイドラインに従うことで、OSの利用者に一貫性のある操作体験を提供することができます。
ANDPADのモバイルアプリも、基本的には各OSに合わせてデザインを調整しますが、iOSとAndroidの差異が大きい場合、エンドユーザーへの操作説明が煩雑になる可能性があります。そのため、どこまではガイドラインに合わせ、どこからは共通のUIとするのかを検討する必要があります。
ANDPADらしさとANDPADならではの使いやすさの追求
iOSとAndroidのバランスを考慮しつつ、ANDPADのブランドを反映し、ユーザーのニーズや課題を理解したUI/UXを検討し、使いやすいプロダクトにしていく必要があります。
悩みに向き合うための6つの武器
これらの悩みに向き合い、モバイルアプリ独自のデザインを模索するために、以下の武器を手に日々奮闘しています。
1. オブジェクト構造を整理する
画面の構成を考える際には、オブジェクト構造の整理が重要です。整理されたオブジェクト構造は、プロダクトの情報構造を明確にし、画面の構成案やナビゲーション設計を考える上での有益な手助けとなります。もし「もうどこにも要素を配置できない！」と感じた場合は、オブジェクト構造の整理に戻り、新たな配置場所を検討します。
オブジェクト構造の整理は初めは難しいかもしれませんが、アンドパッドのデザイン部では各自が担当するプロダクトのオブジェクト構造を整理し、共有する場があります。また、OOUIの社内勉強会も開催されており、そこで理解を深めることができます。私も徐々に理解が進み、これを武器として活用できるようになっています。
2. OSのガイドラインを味方につける
OSのガイドラインは量が多いので、意外と、1文1文時間をとってすべて読んだことがある方は少ないのではないでしょうか。OSのガイドラインを味方につけることで、ユーザーの操作体験が向上するだけではなく、実装やメンテナンスのコストが下がり、スピーディーな価値提供が可能になります。
アンドパッドでは、エンジニアとデザイナーのガイドラインの理解と、共通認識を作るために勉強会も行われていて、私も参加しています。一人だとなかなか時間も取れないので、とても良い機会となっています。
また、デザインをしていて迷った時にガイドラインに立ち戻るようにすると、さらに理解が深まります。どちらのガイドラインもわかりやすく言語化されているため、どのコンポーネントを使えば良いか判断する時や、それを他のメンバーに説明する時にも役立ちます。
勉強会の様子についてはこちらをご覧ください。
3. エンジニアとコミュニケーションし、実装を理解する
Webの実装は自分である程度コーディングまで行うデザイナーも多いと思いますが、モバイルアプリについてはエンジニアにお任せする範囲が大きいかと思います。少しでも実装を理解しておくと、開発がとてもスムーズになります。
これは私の体験談ですが、どのように実装されるのかを理解するため、修正をお願いするたびにエンジニアの隣に座って、修正されていく様子を見ていたことがありました。この体験のおかげで、実装方法や実装が困難なポイントを想定できるようになり、検討が進めやすくなりました。
現在は実装を想定しながらデザインを進めていき、ここは難しそうかな、と思ったタイミングで、事前にエンジニアに相談をするようにしています。実現可能だけど工数がかかるということもあるので、そういった部分も加味しながらデザインを決めていきます。
4. デザイン確認をペルソナと近い環境で行う
デザインを作成しているPCとスマートフォンでは、デバイスと目からの距離や角度も異なるので、サイズ感やどこに目が行くかなどが結構違います。モバイルアプリのデザインをする際には、必ずFigmaで制作したデザインをスマートフォンに映して確認するようにしています。
配色やレイアウトも確認をしますが、文字サイズやボタンが近接する箇所については特に注意して確認するようにしています。私の指はANDPADのペルソナより細いので、大工の指を想像して、親指でタップしてみて問題ないかどうか確認しています。
ANDPADは屋外での使用も想定されるため、電球にスマートフォンを近づけて擬似的な環境を作り、見え方を試したりもしています（色は飛んじゃうけど、黒くはっきりとした文字は見えるなど、発見があります）。
視認性や操作性を担保するとともに、実装後のテストでUIの問題に気づくと手戻りが多く発生してしまうので、デザインの時点で検証をしておきたいと考えています。
5. モバイルアプリをたくさん触り、デザインの引き出しを増やす
たくさんアプリを触って、引き出しを増やしておくこともやはり重要だなと感じています。自分の引き出しが足りず答えが出ない時には、他のアプリや海外のアプリのデザインを探索しに行きます。
ユーザーがよく使うアプリや、ユーザーのリテラシーが同程度のアプリ、デザインやエンジニアリングが優れているアプリなどを参考にしています。iOSのデフォルトアプリやGoogleのアプリも、ガイドラインや実装の理解を深めるのにおすすめです。
6. チームメンバーで共通の指針を持つ
どんな形でも良いと思うのですが、プロダクトマネージャー、エンジニア、デザイナーの間で共通認識となる、何らかの指針があると、格段に開発が進めやすくなると思います。
アンドパッドでは、デザインシステム「Tsukuri」を構築しています。モバイルアプリについてもエンジニアとコミュニケーションを取りながら、標準のUIコンポーネントのANDPADとしての使い方や独自のUIコンポーネントについて検討を進めています。
両OSのガイドラインとANDPADのプロダクトとのバランスを取っていく作業に難しさを感じていますが、品質の高いプロダクトをスピーディーに開発できる環境を整えていくためにも、検討を加速させていきたいと考えています。
デザインシステム「Tsukuri」については、先日公開された@sizuccaさん、@zouzei8to10さんの記事も、是非合わせて読んでみてください。
さいごに
私の日々の悩みとそれに向き合うための6つの武器を紹介させていただきました。少しでも参考になれば幸いです。
悩みの3点目として挙げた「ANDPADらしさとANDPADならではの使いやすさの追求」については、特にまだまだ検討が必要であると感じています。ユーザーのニーズや課題を理解し、最適解を導き出して、それをプロダクトに反映していくことが、デザイナーに求められている課題だと考えています。
アンドパッドには成長させてくれる環境と、知識と経験豊富な仲間がいます。ぜひ一緒にユーザーに向き合ってみませんか？
