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

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

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

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

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

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

Javaでユニットテストケースを書く方法

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

確立された他の設計システムと同様に、マテリアルデザインを使用することにはいくつかの大きな利点があります。 デザイナー 考慮する必要があります。

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

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

anglejsプロジェクトを開始する方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Photoshopでフォントを作成する方法

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

結論

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

@media screen and（min-width 321px）and（max-width 480px）

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

•••

ApeeScapeデザインブログの詳細：

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

基本を理解する

マテリアルデザインが重要なのはなぜですか？

Googleが使用する署名デザインフレームワークとして、マテリアルデザインフレームワークはブランドに関連付けられているものとしてすぐに認識できるようになりました。ただし、設計者は、その包括性とさまざまなユースケースのために、Googleのエコシステムの外部でマテリアルデザインガイドラインを使用することを検討する必要があります。

マテリアルデザインは何に使用されますか？

マテリアルデザインフレームワークは、もともとGoogleのウェブサイトとアプリ（Androidアプリを含む）の公式スタイルとして開発されました。それ以来、さまざまなブランドのウェブサイトやアプリにGoogleのプラットフォームを超えて使用されています。

マテリアルデザインとフラットデザインの違いは何ですか？

マテリアルデザインはフラットデザインから派生していますが、より多くのスキューモーフィズムと物理学が組み込まれているため、よりユーザーフレンドリーになり、全体的なユーザーエクスペリエンスが向上します。これが、多くの設計者が現在マテリアルデザインフレームワークを使用している理由です。

マテリアルデザインはフレームワークですか？

マテリアルデザインは、単純なフレームワークを超えた包括的な設計ガイドラインのセットです。 Googleのマテリアルデザインパターンは、フレームワークではなくデザインライブラリと見なすことができます。これは、現在利用可能な最も包括的なオープンソースライブラリの1つです。