マテリアルデザイン – インタラクションなどの機能紹介

マテリアルデザインは、デザイナーと開発者の両方が、モバイルアプリケーション、ウェブサイト、ウェブアプリケーション、その他のデジタル製品を構築することができる包括的なデザインライブラリのことを言います。

Googleのマテリアルデザイン UIは、世界で最も人気があり、多くの人々に使われているデザインライブラリの一つです。Googleの製品（Gmail、Meet、Docsなど）やAndroid端末を使っている人は、実は日常的にこのマテリアル UIに触れているのです。  UXPinのデザインエディタにはこのマテリアルデザインが組み込まれているため、高品質のモックアップやプロトタイプの作成をすぐに始めることができます。プラグインなしでファイルのデータ移行も不要です。

マテリアルデザイン とは？

マテリアルデザインは、Googleが開発したデザインライブラリで、UIコンポーネント、アイコン、タイポグラフィなどが含まれます。Googleは、デザイナーや開発者がマテリアルデザインを最大限に活用できるように、ガイドラインやチュートリアルまで用意しています。 Googleは2014年、Google I/Oカンファレンスでマテリアルデザインを発表しました。その目的は、インクと紙をベースにした「タンジブル」なデザインライブラリーを作ることでした。 マテリアルデザインは、デザインシステムにおける中核的な機能であるインタラクションに焦点を当てることで、その特徴を際立たせています。そして、それこそが、より多くのデザイナーがマテリアルデザインを採用する理由なのです。

マテリアルデザイン のメリット

マテリアルデザインの最大のメリットは、GoogleのUXデザイナーがすべての要素やコンポーネントをテストしたデザインライブラリを使用することで、テストと反復に何百時間も費やす必要がないことです。

また、何十億ものユーザーに親しまれているため、ほとんどの人が新しいデザインシステムを学ぶことなく、すぐに製品を使い始めることができます。これは、デザイン心理学や認知負荷の軽減にとって大きなメリットとなります。 マテリアルデザインでデザインするもうひとつの大きなメリットは、スピードです。

上記に加えて、オープンソースであるため、ブランドや製品の要件に合わせてデザインライブラリーをカスタマイズすることができます。このシステムはAndroidとiOSに対応しており、1つのデザインライブラリを両方のオペレーティングシステムで使用することができます。

マテリアルデザイン の特徴

マテリアルデザインには、あらゆるプロダクトの構築を支援する機能が豊富に用意されています。今回は、デザイナーがユーザーインターフェイスを構築するのに役立つ、マテリアルデザインの注目すべき機能をいくつかご紹介します。

コンポーネント

マテリアルデザインには、ボタン、アプリ/ナビゲーションバー、メニューなど、17のカテゴリーにわたる膨大な数のコンポーネントとUIパターンのライブラリがあります。  UXPinのエディタを使用すると、マテリアルデザインのUIコンポーネントのサイズを簡単に変更できます。コンポーネントを使用する際は、オートレイアウト機能により、サイズ、配置、コンポーネント間の間隔を好きなように調整することができます。また、マテリアルデザインのコンポーネントにオートレイアウトを追加し、UXPinのライブラリにプッシュバックすると、そのプロパティを保持することができます。Googleはすべてのコンポーネントに対して開発者向けの実装を提供しているため、エンジニアはHTMLとCSSのスターターコードをコピー＆ペーストすることができます。こちらの マテリアルコンポーネントは、特にWebサイト・アプリのために作られました。開発者は、React、Vue、Angularなどのためのマテリアルライブラリも見つけることができます。

アイコン

マテリアルアイコンは、5つのスタイルで2,000以上のアイコンを収録しています。

• アウトライン
• 塗りつぶし
• 丸みを帯びた
• シャープ
• トーン

Web用のマテリアルアイコンをSVGまたはPNG形式でダウンロードするか、Android、iOS、Flutter用のコードスニペットを使用することができます。また、GitHubからマテリアルアイコンのスタイルシートをあなたのWebサイトプロジェクトのヘッダーにインストールすることもできます。

タイポグラフィ

タイポグラフィは、UIデザインやブランディングには欠かせない要素です。Androidのマテリアルデザインのデフォルトの書体は、RobotoとNoto Sansです。Noto Sansは150以上の文字と800以上の言語をサポートしているため、美観と統合性を維持しながらマテリアルデザイン製品を簡単に翻訳することができます。Googleの膨大なフォントライブラリを使用したり、カスタムフォントをインストールしたりする自由性もあります。

マテリアルデザイン モーション＆インタラクション

デザインの中では小さな部分が、一番重要であることがあります。アラームからテキストメッセージ、ほとんどあらゆる種類の通知まで、そうした小さなパーツであり、マテリアルデザインのルーツであるマイクロインタラクションは、私たちの日常生活には欠かせないものです。これは、下記の点で役に立ちます。

• 分かりやすさとシステムフィードバックの伝達
• ガイダンスを提供する
• エラーを表示または防止する
• エンゲージメントと共有を促進する
• ブランディング体験の向上

マイクロインタラクションは至る所にありますが、マテリアルデザインは、レスポンシブなインタラクションは「人々がより深いところまで行くよう促すものである」とそのコンセプトを明確に示しています。マイクロインタラクションは喜びや驚きを与えることができますが、究極の目標は、ユーザーがさらに探索することを促すことです。 マテリアルデザインは、モーションとインタラクションに関する詳細なガイドラインを提供しています。

モーション

モーションとは、ユーザーのインタラクションに反応するUIアニメーションのことです。Googleは、”MotionはUIを表現力豊かに、使いやすくするのに役立つ “と述べています。マテリアルデザインでは、Motionの3つの原則を掲げています。

• 情報提供：要素間の関係、アクションの可否、アクションの結果を強調することで、ユーザーに情報を提供するのに役立つ。
• 焦点：余計な邪魔をすることなく、必要なものをユーザーに示す。
• 表現力：ユーザージャーニーの瞬間を祝い、一般的なインタラクションに個性を与え、ブランドのスタイルを表現することができる。

Motionドキュメントは、UXデザイナーのためのマスタークラスで、以下の内容が含まれています。

• モーションシステム：ユーザーがアプリを理解し、ナビゲートするのに役立つ一連の遷移パターン。
• スピード：トランジションがスムーズでレスポンス良くなるように調整する方法。
• コレオグラフィー：インターフェイスが適応している間、ユーザーのフォーカスを維持するための調整されたモーションシーケンス。
• カスタマイズ：ブランドのスタイルを表現するために、Motionをどのようにカスタマイズするか。

インタラクション

マテリアルデザインのインタラクションは、ユーザーとのインタラクションによって引き起こされる動きやアニメーションを定義しています。

• ジェスチャー：ユーザーがタッチ操作で画面の要素を操作できるようにします。
• 選択：ユーザーがアクションを起こそうとする特定のアイテムを示す方法。
• 状態：コンポーネントやインタラクティブ要素の状態を伝えるために使用されるビジュアル表現。

マテリアルデザインでは、よくある間違いや誤用も含め、デザイナーがこれらのインタラクションを各カテゴリーでどのように使用すべきかを深く掘り下げています。 たとえば、はリアルタイムでジェスチャーに反応し、タッチインタラクションをユーザーが直接操作できるように表現します。タッチ操作によってアニメーションの速さや遅さをコントロールし、本物のユーザーエクスペリエンスを提供することができます。

マテリアルデザイン 3

2021年5月、Googleは 「これまでで最も表現力豊かで適応性の高いデザインシステム 」とも呼べる、新しく進化した「マテリアルデザイン3」を発表しました。マテリアルデザイン3は、Android 12とGoogle Pixelデバイスで最初にリリースされ、2021年の後半には他のテクノロジーにも展開される予定です。 ここでは、マテリアルデザイン3における3つの新機能を紹介します。

ダイナミックカラー

ダイナミックカラーは、マテリアルデザインの新機能です。この機能により、ユーザーは壁紙の選択やその他のカスタマイズ設定を通じて、視覚体験をカスタマイズすることができます。 ダイナミックカラーは、ユーザーの壁紙をスキャンして、アクセントカラーとニュートラルカラーからなる5つのトーンパレットを生成するアルゴリズムです。端末は、これらの色を設定、メニュー、Androidアプリケーションに使用します。

折りたたみ式デバイス

マテリアルデザイン3のもう一つの特徴は、折りたたみ式デバイスのUIを考慮したことです。特筆すべきUXの追加として、折りたたみ式携帯電話特有の画面構成である「ポスチャー」があります。これは、デバイスが折りたたまれているときと展開されているときを示すものです。ポスチャーは、横向きと縦向きに展開することができ、それぞれ異なる画面サイズとアスペクト比を表示します。 その他の折りたたみ式マテリアルデザインの特徴は以下の通りです。

• リーチャビリティ：ユーザーが折りたたまれていないデバイスの一部に手が届かない場合、どうなるのか。
• センターヒンジ：画面の折り返し部分とコンテンツとの間に空間をつくるヒンジ。
• スクリーン分割：開いた状態の折りたたみ式デバイスのためのレイアウト。

デザイン・トークン

デザイントークンを使用すると、色やフォントなどのスタイル値を保存して、デザイン、コード、ツール、プラットフォーム間で適用することができます。その目的は、組織がデザインシステムの構築、維持、更新を効率化することにあります。デザイナーとエンジニアが同じ色やフォントを適用することで、デザインの流出を防ぐことができる、素晴らしい機能です。

UXPin Mergeでデザインドリフト防止

デザインドリフトを回避するもうひとつの方法は、UXPin Mergeを使用することです。Mergeを使用すると、UXPinのデザインエディタをリポジトリに保存されている組織のデザインシステム（GitまたはStorybookとの統合）と同期させることができます。 デザイナーは、完全に機能するコードコンポーネントを使用して、新しい製品やユーザーインターフェイスを構築することができます。また、開発者はUXPinのプロパティパネルに表示されるプロップを設定し、デザイナーがコンポーネントを操作および編集できるようにすることもできます。

マテリアルデザインでプロトタイプ作成

マテリアルデザインで何かを作ってみたいという方は、UXPinの無料トライアルにご登録してご体験いただけます！UXPinには、iOS、Bootstrap、Foundation、User Flowsなど、他にも人気のデザインライブラリがいくつかあります。