マテリアルデザインの法則

[(原文) The Rules of Material Design](https://www.uxpin.com/studio/blog/material-design-rules/?utm_source=Blog&utm_medium=qiita&utm_campaign=Japan&utm_content=%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%B3%95%E5%89%87)
![](https://lh4.googleusercontent.com/giEi9wHEDqkkS8aXf2ckqzzLhIoPH0MEUeh-AeffNdz97UB5SJTCzM6KpVk5heuCJrALx6nbr9vVmbKdwAuykAoMOVFkRntvvOiFKZvPGrCtqmRgsD8V857OfVHUZ0ZtMyVmDKcH)
[マテリアルデザイン](https://material.io/design)は、Androidアプリケーションや多くのWebサイトをデザイン・開発する際の標準となっています。しかし、マテリアルデザインから最高の結果を得るためには、作品の一貫性を高め、Androidプラットフォームでの動作を助けるためのいくつかのルールを学ぶ必要があります。

以下のものを、必ず守らなければならない明確なルールとして受け入れる必要はありません。マテリアルデザインのルールのほとんどを破って、素晴らしい製品を作ることができます。しかし、全体としては、以下のガイドラインから大きく逸脱しない方が、あなたとあなたのユーザーはより良い体験ができるでしょう。

### 形よりも機能性を重視する
グラフィックデザイナーと開発者の間で、ちょっとした言い争いが起きているのを感じませんか？それは、マテリアルデザインを使い始めると起こり得ます。マテリアルデザインでは、レスポンシブなアニメーションやトランジションなど、デザイナーがワクワクするような効果を、これまで以上に簡単に追加することができます。これらのコンポーネントは、アプリの機能性を高めるものです。しかし、使いすぎたり、使い方を間違えたりすると、逆効果になってしまいます。

![](https://lh4.googleusercontent.com/uo8oXuNHdJcL0-GGUEeYNK8ajsxIL0L_SbMHxxlXifWOFsYzHio8ZIAZ6MwTbg4KI5XY-_cydbRsTi2k0ynEz6Q5MKNP4O5lbPc2KvRICCgMKry5EQ7hHC34G1M-sgFvhzLAW8b-)

見た目にもこだわったアプリを作りたいが、機能性を犠牲にしてまで形にこだわる必要はない。迷ったときは開発者の味方をしましょう。美しいアプリは多くのユーザーを惹きつけるかもしれませんが、うまく機能しないことがわかると、ユーザーはその製品を手放してしまいます。

### ユーザーが期待するレイアウトに頼る
マテリアルデザインは、あなたにとんでもないことを試してみたいという誘惑を与えます。試すのに時間はかかりませんから、誰も見たことのないレイアウトを作ってみませんか？

Hungry Turtle Code社のAdrian Henry氏は、[この衝動](https://arkenea.com/blog/googles-material-design/)を理解しています。「衝動とは、常にルールを少しだけ破って、他とは違うように見せたいということです」と彼は言います。しかし、それが行き過ぎると、ユーザーにとっては「違和感のある体験」となってしまいます。ユーザーは「すべてのものがどこにあるのかを正確に把握し、UXの流れを直感的に理解する必要があります」。

マテリアルデザインのルールを破ることなく、クリエイティブなアプローチをとることができます。ただし、できるだけ多くの人からフィードバックを得てください。うまくいけば、その中の誰かが、新しいユーザーにとって直観的でないと感じるコンセプトを抑制する必要があることを教えてくれるかもしれません。

UXPinでは、製品をリリースする前にフィードバックを得ることができます。[プロトタイプ](https://www.uxpin.com/studio/prototyping-jp/?utm_source=Blog&utm_medium=qiita&utm_campaign=Japan&utm_content=%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%B3%95%E5%89%87)へのリンクを作成することで、人々がプロトタイプと対話し、フィードバックを残すことができるのです。自分の好きなアイデアが人々をイライラさせることを知って、がっかりするかもしれません。世界に向けてアプリをリリースした後よりも、今のうちに現状を見極めた方がいいでしょう。

### インタラクティブな機能を利用する
1つ目のルールを念頭に置きながら、[マテリアルデザイン](https://www.uxpin.com/studio/blog/an-introduction-to-interactions-with-material-design/?utm_source=Blog&utm_medium=qiita&utm_campaign=Japan&utm_content=%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%B3%95%E5%89%87)を使って、アプリにインタラクティブな機能を追加しましょう。ユーザーは、動きに反応する製品を好む傾向があります。スマートフォンの画面に指を滑らせると、ページがめくれますよね。また、アイコンをタップすると、そのアイコンが開くことを期待します。

しかし、アプリをよりインタラクティブなものにするには、表面的な部分だけではなく、もっと深く掘り下げる必要があります。意味のあるマイクロインタラクションを追加する機会を探してみましょう。通知アラートをタップするなどのマイクロインタラクションは、ユーザーを巻き込み、興味を持たせます。ユーザーは、「大きな」インタラクティブ機能を数分おきにしか必要としないかもしれません。しかし、マイクロインタラクションは、1分間に何度も使うことができます。アプリとユーザーの間に会話が生まれるのです。

### 仕事をラクにするマテリアルデザインのライブラリを活用する
デザイナーは、ユニークなアイコンやインタラクションを時間をかけて作るのが好きです。そのためにプロのデザイナーになったのですから。しかし、製品のすべての部分に真新しいデザインが必要なわけではありません。時には "車輪の再発明 "で時間を無駄にしてしまうこともあります。

また、多くのアイコンは、ユーザーが製品の使い方を理解するための普遍的な意味を持っています。デザインが行き過ぎると、ユーザーを混乱させることになりかねません。

UXPinでは、[600以上のマテリアルデザインアイコンが収録されたライブラリにアクセス](https://www.uxpin.com/material-design-icons?utm_source=Blog&utm_medium=qiita&utm_campaign=Japan&utm_content=%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%B3%95%E5%89%87)できます。「シェア」「チャージ」「カートに入れる」「ボリューム」など、共通の機能を示すアイコンは、新しいデザインを必要としません。少なくとも、ユーザーがアプリを使うときに期待するような魅力的なアイコンがすでにライブラリに揃っている場合は必要ないでしょう。

### 製品が意図したとおりに動作するかどうかを確認するための指標を追跡する
理想的には、マテリアルデザインによってチームは時間を節約し、ユーザーが使うのを楽しみにしているより良い製品を開発することができます。そのような結果が得られるでしょうか？その答えは、[重要業績評価指標（KPI）のトラッキング](https://uxcam.com/blog/top-50-mobile-app-kpis/#What_are_Mobile_App_KPIs)を開始するまでわかりません。

追跡すべき最も重要な指標には、次のようなものがあります:

- ユーザー増加率
- モバイルダウンロード数
- インストール数
- アンインストール数
- クラッシュ
- リテンション率
- セッションの長さ

これらの情報は、ユーザーがアプリをどのように使用しているか、あるいは使用していないかについて多くのことを教えてくれます。

ユーザー数の増加率が高いということは、人々の興味を引く人気アプリがあるということでしょう。多くのモバイルダウンロードも同様ですが、ユーザーが自分のデバイスにアプリをインストールしてくれなければ、あまり意味がありません。

ダウンロードしてインストールした後、ユーザーがすぐにアンインストールしてしまうことはありませんか？それは、期待していたものを手に入れられなかったということでしょう。

![](https://lh5.googleusercontent.com/9bZDN0aoKLDnZz9yB-AKPZyp3BFHpq_DGR_3rFz4dWKXPe95ShNnv-JMD5SI_GxvVHoPndBM5lvbeQW4KzfiXAQduJQk7WOIW3RLHWOOOvkH7b5TCrz9VTKq591uPk8ZAy-3Ksh2)

あなたのアプリを長時間利用してくれたり、頻繁に戻ってきてくれたりしますか？それは、あなたがお客様に愛されるサービスを提供しているということでしょう。

クラッシュが多発している場合は、アプリの機能を改善するために、ボンネットの中を調べてみましょう。ユーザーは頻繁にクラッシュすることを許容しません。問題を迅速に解決しないと、ユーザーは製品を手放して次の興味あることに移ってしまいます。

### ユーザーからのフィードバックに注目する
指標を追跡することで、マテリアルデザインアプリで何が機能し、何が機能しないかについて多くのことを知ることができます。しかし、常に数字に頼る必要はありません。ユーザーは、あなたの作品の好きなところ、嫌いなところを教えてくれるでしょう。

![](https://lh4.googleusercontent.com/jOvfnBZVodJicNBDbCvLIupC1lL2SadUYsPPRzMhz3c0HxCeXiiMmN2ukifMpdEFBZBuTM0pEXB9CR_KXOQC90p6KxFKuHar6TDZDZ94AELYCjiVhva9o5n_Za6urivdfAcaZgZq)

Google Playでアプリに関するフィードバックが投稿されたら、その回答をじっくり読み、相手が書いた内容について考え、協力してくれたことに親切に対応しましょう。冒涜的なレビューを受けて、チーム全員が動揺するかもしれません。そんなことはどうでもいいのです。そのユーザーの不満から学んで、自分のアプリを改善しましょう。他のユーザーもあなたの仕事を評価するでしょう。

### トレンドの先を行くためにマテリアルデザインを学び続ける
Googleは常に製品やサービスを改善しているので、マテリアルデザインも年々進化していくことでしょう。[マテリアルデザインのウェブサイト](https://material.io/develop/web/examples)を頻繁に訪れて、どのように変化したかを確認してください。

ウェブサイトに掲載されているすべてのドキュメントを読む必要はありません。時間がかかりすぎるからです。しかし、Googleがウェブ上でマテリアルデザインを紹介するために選んだ例には、時間をかけて目を通すべきです。そして、それらの例が何を示しているかに注意を払ってください。そうすることで、新しいトレンドを先取りすることができます。

### マテリアルデザインを考慮したデザインとプロトタイピングのツールを選ぶ
マテリアルデザインを採用したからといって、デザインやプロトタイピングのソフトウェアをやめることはできません。それは、マテリアルデザインと協調して動作するツールを選ぶようにする必要があるということです。

UXPinは、デザイナーがマテリアルデザインを採用することを奨励しています。UXPinのプロトタイプを使えば、製品を完成させる前にデザインをテストすることもできます。インタラクティブなプロトタイプは、上司やクライアントに製品を渡す前に、製品のあらゆる側面をテストする機会を与えてくれます。

![](https://lh3.googleusercontent.com/GCFC86YYNGjDzYFR8deod0SMe5q0cUikRTreWbUrPKP-KpPZRRMQfqVdfAlBVzzh9nV8pYXtt80L5BxVYSzQ3q5slHKIMTAb5WnE5hQbOsmzDwagw1Xy7sTBP_cy5GKxJpbWfEEh)

[UXPinを無料でお試し](https://www.uxpin.com/studio/prototyping-jp/?utm_source=Blog&utm_medium=qiita&utm_campaign=Japan&utm_content=%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%B3%95%E5%89%87)いただき、プロトタイプの作成やアイデアの検証にお役立てください。リアルタイムのコラボレーション機能により、他のデザイナーと一緒にコンセプトを検討することもできます。


**本記事は、2021/3/4投稿を翻訳したものです。**