アプリUIデザイナー1年生が、HIGとMDGを読んでモバイルエンジニアと共通言語作った話。

はじめまして、PREVENTデザイナーの磯部と申します。

今回は、私がアプリUIデザイナー1年目で、HIG（Human Interface Guidelines）とMDG（Material Design Guidelines）を読んでモバイルエンジニアと共通言語を作った話をしたいと思います。

自己紹介

普段はMystarや医療職向けの管理画面のUIデザイン、コンテンツ作り、ユーザへの案内パンフレット、営業ツールのグラフィックデザインなど自社で制作したプロダクトのデザインを幅広く行っています。

最近ではプロダクトに「UX」を取り入れるべくUXリサーチの勉強も始め、UXデザイナーとしても奮闘しております！

経歴

前職ではWebデザイナーとしてコーポレートサイトやWebアプリのデザインなどをしておりました。

2020年の11月にUIデザイナーとしてPREVENTで働くようになりました！

なぜ共通言語を作る必要があったのか

元Webデザイナーだった私がUIデザイナーに転職して、まず思った事として「Webとアプリでは、UIの作り方が全然違う...」ということでした。

Webデザインではは、クライアントの要望に応えるため、流入や遷移でいかに目的にたどり着かせ購買させるか、といった事を念頭に置きながらデザインしていました。

スマホアプリはユーザーが操作がしやすく、目的を達成できるUIであり、そして毎日使ってもらうものなのでユーザーの体験を向上させる必要がありました。

特にMystarはユーザの年齢層が高いこともあり、UXを高めるためにまずはUIを洗練させる必要があります。

また、アプリ開発には決まったコンポーネント（UIのパーツ）を使ったデザインを行う必要があり、エンジニアとデザイナーの間に共通認識がないと、間違ったデザインを行い、アプリ開発がうまく進まない！なんてことも...。

アプリUIデザインの根本的な概念からコンポーネント単位でエンジニアと一緒に学ぶ事で、共通言語となり、デザイナーとエンジニア双方からアプリ開発をより高いレベルでの作業ができると考えました！

HIG（Human Interface Guidelines）とは？

Appleが開発者向けに提唱しているデザイン原則で、ユーザーの学習コストが少なく直感的に操作ができる、一貫性のある画面設計である、ユーザー自身が操作している感覚を持たせる、ユーザーの目的や課題が解決できるものにする、といった原則がまとめられています。

HIG > https://developer.apple.com/design/human-interface-guidelines/

MDG（Material Design Guidelines）とは？

Googleが開発者向けに提唱しているデザイン原則で、ユーザーを「階層」「意味」「焦点」によりユーザーをモノに没頭させるデザイン、光と影や紙とインクといった現実に存在する現象とリアルな質感をデザインに取り入れる、ユーザー自身が「自分の操作でどんな影響を与えたのか」を理解し、ユーザーを補助するデザイン、といった原則がまとめられています。

MDG > https://m3.material.io/

実際に行ったアクション

①弊社アプリの中で使ってるコンポーネントのリストアップ

②頻出するものを中心にまとめる優先順位づけを行う

③開発者向けのドキュメントとデザイン側のガイドラインをそれぞれ読み、ユースケースなどの認識合わせ

④iOS・Android別にまとめていく

⑤Miroにまとめて成果物とした

まとめ方は？

HIGとMDGはコンポーネントごとにガイドラインが公開されているので、読んで重要な部分をMiroを使ってまとめる。

iOSは、HIGと開発者向けドキュメントでの情報が記載されているので、HIGではデザイナーが読んでまとめ、開発者向けドキュメントはエンジニアがまとめて、お互いに共有し合いました。

MDGは、Webサイトにまとまっているので、重要な部分やNGな使い方などを中心にまとめました。

開発部分でのドキュメントとデザイン部分のドキュメントをそれぞれの専門性をもったエンジニアとデザインナーが読むで説明することで、より理解しやすく認識合わせもスムーズにできました！

まとめてわかったこと

• iOSとAndroidでの設計思想の違い。
• それぞれのOSでしか存在しないコンポーネント、似たコンポーネントの理解。
• 使い方や挙動の違い
• コンポーネントのカスタムの幅
• コンポーネントの呼称や括りなどなど...

まとめ

共通言語を作ることで、アプリ開発時のコミュニケーションが円滑に進み、効率的により高い次元でのデザインが可能になりました。

同じ挙動の機能でも呼び方が違うため、正確なコミュニケーションのためには事前知識がかなり必要だと感じました。

エンジニアの助けをもらいながら知識を身に付けることで、理解しづらい内容も効率的に理解できるので、おすすめです！

また、まだアプリに取り入れていないコンポーネントやカスタムの幅なども見えてくるので、取り入れたらどうか？などの今後の開発につながる議論もできたのがとても良かったです！

是非社内のデザイナーとエンジニアで共通言語を作ってみてはいかがでしょうか？

最後に

現在、PREVENTではUIデザイナーを募集しています！

• 社会課題の解決にチャレンジしたいUIデザイナーの方
• リモートワークでライフバランスを取りながら開発したい方
• 急成長中のスタートアップで挑戦してみたい方

どれかに当てはまった方は是非チェックしてカジュアルにお話しましょう！

また、UIデザイナー以外の募集もありますので、是非ご覧ください！

PREVENTでは一緒に働く仲間を募集しています