マテリアルデザインを使用する理由長所と短所を比較検討する

5年以上前に導入された、Googleのマテリアルデザインガイドラインは、ウェブサイトやアプリベースのサービスの特徴的な外観になっています。 彼らはすぐにグーグルと提携していると認識され、会社のブランディングに恩恵をもたらします。

マテリアルデザインは、より幅広いデザインコミュニティでも採用されており、現在、Googleのネイティブプラットフォームのはるか外にあるウェブサイトやアプリ（さらには競合するプラットフォーム）でも見つけることができます。 たとえば、Simplenoteは、デスクトップおよびモバイルプラットフォーム向けのアプリ全体でマテリアルデザインの美学を使用しています。 これは、マテリアルデザインがさまざまな設計実装に最適である理由の一例にすぎません。

マテリアルデザインとは何ですか？

マテリアルデザインは、Google Nowで使用されているカードベースのレイアウトに一部基づいて、2014年にGoogleによって作成されました。 紙をベースにしたデザインスタイルは、当時広く使われていたフラットなデザインスタイルとは一線を画しています。

ほとんどのデザインシステムと同様に、マテリアルデザインは、さまざまなデバイス、プラットフォーム、入力方法で統一されたユーザーエクスペリエンスを提供するために作成されました。 Appleが標準としてフラットデザインの原則を実装した方法と同様に、Googleはマテリアルデザインを使用して、ユーザーが製品にアクセスする方法に関係なく、一貫したユーザーエクスペリエンスを提供できるようにしました。

マテリアルデザインの仕様には、タイポグラフィ、グリッド、スペース、スケール、色、画像など、すべてのガイドラインが含まれています。 しかし、マテリアルデザインは、デザイナーに物事をどのように見せるかを教えるだけではありません。 これにより、設計者は、最終結果に階層、意味、および焦点を合わせた意図的な設計を作成できます。

マテリアルデザインを使用する理由

他の確立された設計システムと同様に、設計者が考慮すべきマテリアルデザインの使用にはいくつかの主要な長所があります。

マテリアルデザインは、スタイルガイドラインのセットではなく、事実上、デザインエコシステム全体です。 潜在的な設計状況が存在する場合、マテリアルデザインには、その処理方法に関する包括的な一連のルールがある可能性があります。 これには、あまり包括的でない設計システムでは見落とされがちな複雑なユースケースが含まれます。 これは、そのような構造を望む設計者にとって非常に快適です。

Googleはマテリアルデザインを維持し、その使用方法と実装方法に関する広範なドキュメントを保持しています。 この種のサポートとドキュメントは、多くの最新の設計システムでは不足している可能性があります。

このすべての包括性とドキュメントにもかかわらず、マテリアルデザインはかなり柔軟なデザインライブラリのままです。 ガイドラインの範囲内で、設計を実装する方法の詳細の多くは、完全に設計者に任されています。

マテリアルデザインのよりきめ細かい利点には、フラットなデザインとは一線を画し、多くのユーザーにとってより直感的な微妙なスキューモーフィズムなどがあります。 もう1つのユーザーフレンドリーな機能は、触覚フィードバック、微妙なアニメーションなどの形式のユーザーフィードバックがガイドラインに組み込まれていることです。 物理学の感覚も非常に単純化されているため、対話がより直感的になります。

マテリアルデザインはモバイルファーストの感性に基づいて構築されました。これは、Androidアプリの設計が本来の目的であったことを考えると理にかなっています。 また、ユーザーフィードバックと、さまざまな機能がどのように機能するかを示唆するために、デザインのアニメーションを促進します。

最後に、ダークテーマのオプションが利用可能になり、デザイナーの視覚的な柔軟性がさらに高まりました。 もともと、マテリアルデザインは非常に明るく明るいため、一部のブランドの美学ではうまく機能しませんでした。 ダークテーマガイドラインを追加すると、その問題が修正されます。

マテリアルデザインを使用することの欠点

マテリアルデザインには非常に明白な長所がありますが、それはそれを使用することに伴う短所がないという意味ではありません。

まず、マテリアルデザインはすぐに識別可能であり、Google、特にAndroidと強く関連しています。 これは必ずしもすべての人にとって悪いことではありませんが、一部の人にとってはマイナスになる可能性があります。

それがネガティブであるかもしれない1つの大きな理由は、それがデザインシステムを使用している間、他のブランディングの有効性を制限することです。 はい、デザイナーはロゴ、カラーパレット（マテリアルデザインガイドライン内）、およびその他の差別化要因を組み込んでブランドアイデンティティをサポートできますが、マテリアルデザイン仕様に従った製品は、ほとんどの場合Googleにも関連付けられます。

モーションとアニメーションはマテリアルデザインガイドラインの範囲内で宣伝されているため、モーションとアニメーションが組み込まれていないサイトやアプリは、ユーザーには何かが欠けているように見える可能性があります。 人々はマテリアルデザインの動きの特徴を視覚的な特徴と関連付けます。これにより、動きを欠くことなくデザインを残すことができます。

確かに、1つの解決策は、マテリアルデザインの仕様に従うデザインに常にモーションを組み込むことです。 ただし、モバイルデバイスでは、大規模なアニメーションはリソースを大量に消費する可能性があるため、データ使用量が多くなり、バッテリーの消耗が早くなります。 これは、マテリアルデザインガイドラインの範囲内で作業するときに設計者が考慮しなければならないバランスの取れた行為です。

初心者は、マテリアルデザインの仕様がフラットデザインのような他のスタイルよりも複雑で実装が難しいことに気付くかもしれません。 マテリアルデザインシステムは非常に包括的であるため、多くの新しい設計者が満足できるよりも、考慮し、遵守することがたくさんあります。

その包括性はまた、一部のデザイナーが制約を感じ、自分の創造性を完全に実現できないことにつながる可能性があります。 また、事実上すべての設計上の課題が計画され、ソリューションが提供されているため、イノベーションを阻害する可能性があります。 多くの場合に役立ちますが、これにより、設計者が問題に対して新しいアプローチをとることができなくなり、発生する可能性のある新しいアイデアの数が制限される可能性があります。

マテリアルデザインには、ウェブサイトやアプリを非常にユーザーフレンドリーにする可能性のあるユーザビリティの問題もいくつかあります。 最大の問題の1つは、多くのモバイルデザインアプリで遭遇するいわゆる「ミステリーミート」ナビゲーションにあります。 アイコンはテキストの代わりに使用されることが多く、アイコンがすぐに認識できてかなり使用できる場合もあれば、そうでない場合もあります。

「家」を示す円は、以前はほとんどのAndroidインターフェースで使用されていた家のアイコンよりも識別が非常に困難です。 これは、マテリアルデザインのフラットなデザインのルーツから引き継がれた、機能の上にフォームを配置する代表的な例です。

そして、それは下部のナビゲーションバーだけではありません。 円形のフローティングアクションボタンを含めるというマテリアルデザインの好みも、使いやすさの問題です。 これらの円形のボタンには、アイコン用のスペースのみが含まれ、補助テキストは含まれていません。 また、アイコンは非常に自由に解釈できるため、多くの場合、ユーザーはこれらのボタンが実際に何をするのか疑問に思っています。

結論

アプリが主にAndroidプラットフォーム向けに構築されている場合は、マテリアルデザインを使用するのが簡単です。 Googleが広く採用されているため、マテリアルデザインの原則に基づくアプリは、ネイティブアプリのように感じられます。

とはいえ、Androidプラットフォーム以外にも、マテリアルデザインが確実な選択肢となるユースケースはたくさんあります。 設計システムがさらに成熟するにつれて、これらの状況は必ず増加します。 設計者は、少なくともガイドラインに精通して、マテリアルデザインを使用するのが適切な時期や、他のシステムがより適している時期を自分で判断できるようにする必要があります。

•••

Toptal Designブログでさらに読む：

• 効果的なデザインフレームワークを構築する方法（無料のスケッチファイルを使用）
• より良いUXのためのUIスタイルガイドの作成
• デザインシステムとパターンを理解する
• コンポーネントベースのフレームワークのUXのA/Bテスト
• デザイン心理学と素晴らしいUXの神経科学