AndroidのUI設計に欠かせない、マテリアルデザイン（Material Design）の概要とデザイン原則
UIデザインのガイドラインとして、前回はiOSに適用されているヒューマンインターフェイスガイドラインについて紹介したので、今回はGoogleによって作成され、主にAndroidに採用されているマテリアルデザインの概要とデザイン原則についてざっくりまとめてみます。
※勉強中の自分が忘れないための備忘録です。 日本語訳をわかりやすく勝手に解釈しているところがあるので、ニュアンスなど違ったらすみません。雰囲気理解でお願いします。
▼こちらが本物です
マテリアルデザイン（Material Design）
▼HIG（iOS）の記事
iOSのUI設計に欠かせない、ヒューマンインターフェイスガイドライン（Human Interface Guidelines）のテーマとデザイン原則
現在のマテリアルデザインは「マテリアルシステム」、「マテリアルファンデーション」、「マテリアルガイドライン」の3つの項目に分けて説明されています。ここでもその3項目についてできるだけ全体像がわかるようにまとめてみます。
内容の詳細についてはマテリアルデザインのサイトで画像や動画付きでわかりやすく紹介されています。
マテリアルシステム（Material System）
マテリアルデザインは、Android、iOS、およびWeb向けの高品質のデジタルエクスペリエンスを構築するためにGoogleによって作成されたデザインシステム
※デザインシステムとは・・・デザインの原則やルールとそれらを実現するためのコンポーネントなどをまとめた仕組み。多人数でも高品質で一貫性のあるデザインをすばやく実現することができるようになる。
★3つのデザイン原則
光の反射や影を活用して平面的な質感を持たせつつ、その物質の重なりを表現。素材の表面は、紙とインクの要素で構成している。
タイポグラフィ、グリッド、余白、スケール、色、画像など印刷物のデザイン手法に基づいて、ユーザーに階層、意味、焦点を伝える。
モーション（動き）は注意を集中させ、フィードバックと一貫した画面遷移を通じて自分がどこにいるか理解しやすくする。要素はブラウザや画面サイズに合わせて適切な表示をし、インタラクションによって新しい変化を生み出す。
Introduction - Material Design
マテリアルファンデーション（Material Foundation）
基礎となる環境、レイアウト、インタラクション、色、アイコン、動きなど表現全般について12項目に分けて説明されている
環境（Environment）：面、奥行、光と影
レイアウト（Layout）：グリッド、コンポーネント、余白など
ナビゲーション（Navigation）：アプリ間の移動、階層遷移など
色（Color）：カラーテーマ、UIへの適用など
タイポグラフィ（Typography）：文字の大きさ、書体、言語サポートなど
音（Sound）
アイコン（Iconography）
形（Shape）
モーション（Motion）：階層、ブランド表現、フィードバックなど
インタラクション（Interaction）：ジェスチャー、ステータスなど
コミュニケーション（Communication）：ヘルプ、起動画面、データ形式など
機械学習（Machine learning）
マテリアルガイドライン（Material Guidelines）
★マテリアルシーミング（Material Theming）
マテリアルデザインを体系的にカスタマイズして、製品のブランドをより適切に反映する機能（似たデザインにならず、ブランドの色やサービスを使いやすく機能的にする）
★ユーザビリティ（Usability）
製品のアクセシビリティを改善すると、視力低下、失明、聴覚障害、認知障害、運動障害、または状況障害を含む、さまざまな能力のユーザーも理解し使用可能であることを説明
スクリーンリーダー、拡大ツール、補聴器などの支援技術のほか、色とコントラスト、レイアウトとタイポグラフィ、サウンドとモーションなどアクセシビリティの視点から明記されている
★プラットフォームガイダンス（Platform guidance）
Androidアプリ内のパーツやアイコン、通知、設定など14項目について適切な規則について説明
ステータスバー・ナビゲーションバー（bars）
指紋アイコン（fingerprint）
触覚（haptics）
アイコン（icons）
アプリ間の移動（navigating between apps）
通知（notifications）
権限（permissions）
設定（settings）
スライス（slices）：検索コンテンツ
分割画面（split-screen）
スワイプして更新（swipe to refresh）
テキスト選択ツールバー（text selection toolbar）：切り取り、コピー、貼り付けなど
ウィジェット（widget）
クロスプラットフォームの適応（Cross-platform adaptation）
補足
マテリアルデザインは今回紹介した「デザイン」の他にも「コンポーネント」「開発」などの項目もあり、開発者やデザイナーがプロダクトサービスやユーザーの体験作りに注力できるようにつくられています。