Google マテリアル デザイン: プロフェッショナル向けチートシート - TechRepublic

Google マテリアル デザイン: プロフェッショナル向けチートシート - TechRepublic

2014年のGoogle I/Oカンファレンスで初めて発表され、後にAndroid 5.0 Lollipopで初登場したGoogleのマテリアルデザインは、同社のデザインアプローチにおけるモバイル中心の転換を象徴しています。紙とインクからヒントを得たマテリアルデザインは、影とエッジを用いて、主要なプラットフォームとデバイスすべてに拡張可能なミニマルなエクスペリエンスを生み出すビジュアル言語です。

開発者、デザイナー、IT リーダーがマテリアル デザインをすぐに理解できるように、Google の新しいデザイン言語に関する最も重要な詳細と関連リソースをこのライブ ガイドにまとめました。このガイドは、新しい情報が利用可能になると定期的に更新されます。

参照: TechRepublic のすべてのチートシートと賢い人向けガイド

エグゼクティブサマリー(TL;DR)

マテリアル デザインとは何ですか?マテリアル デザインは、Google が Web およびモバイル製品全体に一貫性を持たせるために開発したデザイン言語です。

なぜマテリアル デザインが重要なのでしょうか?マテリアル デザインは、Google 製品に欠けていた統一感のあるエクスペリエンスを提供します。モバイル中心のアプローチは、同社のデザインアプローチにおける重要な転換を表しています。

マテリアル デザインは誰に影響を与えるのでしょうか?エンドユーザーは、多くの Google プロダクトの UX の変化に気づくでしょう。開発者やデザイナーは、マテリアル デザインを最大限に活用するために、アプローチを少し変更する必要があります。

マテリアル デザインはいつリリースされましたか?マテリアル デザインのソース コードは 2014 年 11 月 3 日に一般公開され、無線 (OTA) アップデートは 2014 年 11 月 12 日に開始されました。

マテリアル デザインはどのように使用すればよいですか? Google は、適切な実装のためのベスト プラクティスとマテリアル デザイン ガイドラインを提供しています。

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

Google のマテリアル デザインは、2014 年 6 月 25 日に Google I/O 開発者会議で最初に発表されたもので、Google 製品全体およびプラットフォーム全体でユーザー エクスペリエンスを統一することを目指すデザイン言語です。

マテリアルデザインは当初、「Quantum Paper」というコードネームで知られていました。このデザインの最初の実装例の一つは、Google Nowの「カード」でした。Googleのマテリアルデザインのウェブサイトによると、その目標は、古典的なデザインの多くの原則と、科学技術に期待される革新性を融合させることです。

概念的には、マテリアルデザインはまさに現実世界の素材に基づいています。影と照明を用いて奥行きとエッジを表現することで、要素は現実世界で私たちが期待するのと同様の反応を示します。繰り返しになりますが、Googleはマテリアルデザインが紙とインク、そして印刷物をベースにしたデザインをベースとしており、特定のカラースキームを活用していると述べています。

Google によれば、そこには 3 つの基本原則が働いています。

  1. 物質は比喩である
  2. 大胆、グラフィック、意図的
  3. 動きは意味を与える

マテリアルデザインは、いわゆるフラットデザインを基盤としていますが、ドロップシャドウやグラデーションを用いて物理的な空間を表現するハイブリッドなデザインです。フラットデザインは主に2D環境内で行われるのに対し、マテリアルデザインは3D環境を活用し、各オブジェクトはX、Y、Z軸に沿って寸法を持ちます。

マテリアルデザインでは、大胆な色使いとRobotoとNotoの両方の書体を使用しています。最後に、デザイン要素の動きとアニメーションに関する具体的なルールは、要素と機能の適切な関係性を維持する上で重要です。

続きを読む:

  • マテリアルデザイン:Google の新しい UI 言語を披露する 10 個のアプリ (TechRepublic)
  • GoogleのマテリアルデザインはAndroidとWebのユーザーインターフェースを統合する(CNET)
  • GoogleがAndroidを刷新、「マテリアルデザイン」を導入(ZDNet)

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

Google のマテリアル デザインの導入が真に重要である理由はいくつかあります。その第一は、優れた製品であっても、優れたデザインがなければ限界があるという認識です。

優れたデザインは重要です。ビジネスの大部分を外部のデザイナーや開発者に頼り、自社のプラットフォームやフレームワーク上でサードパーティ製アプリケーションを開発している場合、多くの問題が発生する可能性があります。マテリアル デザインにより、Google はモダンかつ実用的なデザイン言語を提供することで、ブランドの尊厳をより強固に守っています。

Googleは自社ブランドを守るだけでなく、エンタープライズ市場への進出も進めています。検索大手のGoogleはここ数年、エンタープライズ市場への進出に力を入れており、従来のデザインの「使いにくい」部分を解消することで、ビジネスユーザーからの支持をさらに獲得できるでしょう。

また、Appleがデザインを本当に重視していることも示しています。これは長年Googleにとって大きな弱点でした。Apple製品の最大のセールスポイントの一つはデザインへのこだわりであり、マテリアルデザインはGoogleが最終的にその分野で競争するための基盤となる可能性があります。

デザインの質とほぼ同等に重要なのは、マテリアルデザインがもたらす一貫性です。特に最近Alphabetに分割されたことを考えると、ブランド間でデザインの一貫性を維持できることは、新しい企業組織の成功にとって極めて重要です。

マテリアル デザインはモバイル中心であり、Google のような大企業がそのデザイン哲学全体をモバイル エクスペリエンスを中心に据えているという事実は、Web にアクセスするための好ましい方法としてモバイルが今後も優先されるという考えを裏付けています。

続きを読む:

  • Googleのマテリアルデザインの真髄とは(Wired)
  • Android のマテリアル デザインが Linux にまで浸透 (TechRepublic)
  • Googleの新しい企業構造の模索はAlphabetで終了(TechRepublic)

マテリアル デザインは誰に影響を与えますか?

マテリアルデザインの影響を最も受けるのはAndroidユーザーです。この言語自体の原則がOSのUXとモバイルアプリのデザインに大きな影響を与えるからです。しかし、マテリアルデザインがGoogleエコシステム全体に広がり続けるにつれ、Googleの製品とサービスのあらゆるユーザーに、たとえわずかでも影響を与えるでしょう。

開発者にとって、マテリアルデザインは、見た目も美しく、使いやすいアプリの開発を容易にする新しいツールを提供します。アプリケーション開発以外にも、プロのWebデザイナーや趣味でWebサイトを開発する人でも、Material Design Liteを使用して、ウェブサイトにマテリアルデザインのルックアンドフィールを加えることができます。

続きを読む:

  • ラリー・ペイジがついに製品は美しく見える必要があると言ったとき、Googleのデザイナーたちは「ほとんど幻覚のような瞬間」を経験した(Business Insider)
  • トップデザイナーがGoogleの新しいデザイン言語「マテリアル」に反応 (VentureBeat)

マテリアル デザインはいつリリースされましたか?

2014年のGoogle I/Oカンファレンスの基調講演で発表された後、マテリアルデザインは同週にAndroid Lプレビューを通じて初めて利用可能になりました。2014年11月3日にはソースコードが公開され、その後、2014年11月12日に一部のデバイス向けに公式OTAアップデートが初めて配信されました。

新しいデザインスペックは毎月追加され、マテリアルデザインのウェブサイトで閲覧できます。例えば、2017年5月には、Googleはアプリケーション構築用のマテリアルコンポーネントライブラリと、新しいマテリアルデザインカラーツールを発表しました。2018年のGoogle I/O開発者カンファレンスでは、マテリアルデザインチームが新しいブランディングのためのマテリアルテーマ、テーマエディタなどを発表しました。

この時点で、Google のコアアプリの大部分はマテリアル デザインに変更されているはずです。

続きを読む:

  • マテリアル デザイン: 新機能 (Google)
  • Android 向け Google ハングアウト 4.0 がリリースされ、マテリアル デザインのインターフェースとパフォーマンスが向上 (ZDNet)

マテリアル デザインはどのように使用すればいいですか?

マテリアルデザインを最大限に活用するには、まずGoogleがマテリアルデザイン向けに公開している仕様ガイドを確認することをお勧めします。Googleは非常に具体的なルールとガイドラインをまとめています。

マテリアル要素は高さと幅(X軸とY軸)が異なりますが、常に1dp(密度非依存ピクセル)という均一な厚さで表現されます。マテリアル要素はX軸とY軸に沿って拡大したり移動したりできますが、他のマテリアル要素を通過することはできません。

各要素には、コンポーネントの種類とデザイン内の他の要素との相互作用に応じて、独自のエレベーションレベル(dpで測定)があります。Googleはマテリアルデザインガイドで、エレベーションルールとオブジェクト階層について説明しています。マテリアルデザインの原則は、アイコン、テキストフィールド(アドレスバーなど)、タブ、アニメーションなどの要素を対象としています。利用可能なタイポグラフィのオプションは、こちらで提供されているタイプスケールで確認できます。

Android 開発者は、Android 開発者向けのマテリアル デザイン サイトを参照して、モバイル デバイスにマテリアル デザインを導入するために必要なすべてのツールと機能を完全に理解する必要があります。

続きを読む:

  • Android のマテリアル デザインを体験: アプリのテーマ設定 (TechRepublic)
  • Google が Web ライブラリを立ち上げ、サイトのマテリアル デザインを刷新 (ZDNet)
  • Android Lollipop のマテリアルデザイントリックは、より洗練された UX を提供します (TechRepublic)
  • Google マテリアル デザイン ライトを使用してウェブサイトを構築する方法 (PC Advisor)
  • Android のマテリアル デザインのドロップ シャドウに関するさらなる問題 (TechRepublic)
  • Android 開発者向けマテリアル デザイン (Udacity コース)
  • Google マテリアル デザイン仕様ガイド (Google)

Tagged: