マテリアルデザインのアイコン： Webとアプリデザインの構成要素

  マテリアルデザインは、最も人気のあるデザインシステムの一つです。Android端末をお持ちの方は、毎日Material Designを使用していることでしょう。多くの企業が、モバイルおよびウェブアプリケーションを構築するための基盤として、マテリアルデザインシステムを使用しています。

このシステムの包括的なコンポーネントライブラリと、マテリアルアイコン（現在はマテリアルシンボル）を含むリソースには、組織やスタートアップ企業がゼロからデザインすることなく製品を無限に拡張するための構成要素があります。

本記事では、次の製品開発プロジェクトで使用できるマテリアルシンボルやその他のマテリアルリソースについて見ていきます。

UXPinの各プランには、マテリアルデザインのUIとアイコンが標準装備されています。無料トライアルにサインアップして、今日からUXPinとマテリアルデザインで美しいアプリを構築しましょう。

マテリアルデザインとは

マテリアルデザインは、Googleが開発したデザインライブラリで、UIコンポーネント、アイコン、タイポグラフィなどが含まれます。すべてのマテリアルコンポーネントには、実装、使用方法、構造、動作などのガイドラインが含まれており、デザイナーやエンジニアが高品質なユーザー体験を提供しながら最高の成果をあげられるようサポートします。

Googleは、2014年のGoogle I/O会議でマテリアルデザインの最初のバージョンを発表しました。2021年5月、GoogleはDynamic Color、折りたたみ可能なデバイスコンポーネント、デザイントークンなどの注目すべき機能を含むMateri Design 3（M3）を発表しました。

マテリアルシンボルの発表

マテリアルデザインの最もワクワクするアップデートの1つは、5つのスタイルで2,000以上のオープンソースのアイコンを含む、カスタマイズ可能なアイコンセットである「マテリアルシンボル」の発表でした。お気に入りのマテリアルアイコンをすべて見つけることができますが、製品やブランドの要件に合わせて、より柔軟にカスタマイズできるようになりました。

マテリアルアイコンはまだ利用可能ですが、シンボルのようなカスタマイズはできません。そしてシンボルでは4つの可変オプションがありますが、サイズと密度しか調整できません。

マテリアルアイコンセット

Googleは、シンボルのカタログより少ないとはいえ、旧マテリアルアイコンを残しており、アイコンは、【Outlined】、【Filled】、【Founded】、【Sharp】、【Two-tone】の5つのスタイルで利用できます。

マテリアルシンボル：最新情報

マテリアルアイコンは、Google Fontsの下に移され、【Outlined】、【Rounded】、【Sharp】の3つのスタイルで可変のアイコンセットがあります。また、デザイナーは、以下の4つの変数または軸でアイコンセットをカスタマイズすることができます：

• 塗り：塗りつぶしまたは塗りつぶしなしの外観
• 太さ：シンボルの線を100から700のウェイトで確定
• グレード：強調を伝えるのにシンボルの太さを細かく調整
• 光学サイズ：アイコンのサイズを20、24、40、48ピクセルに設定可能

可変方式では、エンジニアは複数のバリエーションを複数のファイルではなく、1つのフォント（またはアイコン）に保存することができます。ファイルサイズとファイル数を減らすことで、エンジニアにパフォーマンスの向上と管理すべきアセットの削減がもたらされるのです。

3種のスタイル

Googleは、ブランドのアイデンティティやUIデザインに合わせた3つの新しいスタイルの導入もしました。

• 輪郭：クリーンで軽やか。デザイナーは、製品のフォントを補完するのにアイコンの重さを調整することができる。
• 丸み： 曲線の美しさは、丸みを帯びたロゴと重厚なフォントと相性がいい。
• 鋭さ：直線的なエッジと90度のコーナーのスタイリングを持つUIにマッチするようにデザインされている。

マテリアルアイコンを作成する

マテリアルシンボルの膨大なカタログの中から必要なアイコンを見つけられない場合、Googleは下記のようなカスタムアイコンをデザインするためのガイドラインを用意しています：

• デザイン原則：ユーザーにとって意味があり、役に立つ明確な図像を作成するためのベストプラクティス
• アイコンのサイズとレイアウト：デザインツールを使ってアイコンをデザインする際のグリッドサイズとレイアウトの設定方法
• グリッドとキーライン図：一貫したアイコンセットを作成するためのテクニック
• アイコンメトリクス：コーナー、ウェイト、ストローク、複雑さなど、アイコンのデザイン構造

このようなガイドラインに従うことで、マテリアルの包括的なアイコンセットを活かしながら、自身のブランドに関連するアイコンをいくつか追加することができます。

Googleのマテリアルアイコン＆シンボルの使用方法

デザイナーやエンジニアがマテリアルアイコンやシンボルを使用する方法はいくつかあります。

SVGまたはPNGをダウンロードする

アイコンとシンボルは、SVGまたはPNG形式でダウンロードすることができますが、パフォーマンスとカスタマイズの利点を考慮し、SVGを使用することをお勧めします。PNGファイルはサイズが大きく、デザイナーやエンジニアが編集したりサイズを変更するのがより複雑になります。

Googleでは、ダウンロード前にアイコンやシンボルをカスタマイズできるため、プロジェクトで使用する最終的なアセットが得られます。

CSS/CDN

マテリアルシンボルには、Google Fontsに使用するものと同様のウェブサイト設置用のCSSファイルがありますが、この方法は、ウェブサイトに追加のリクエストを行う必要があり、パフォーマンスに深刻な影響を与える可能性があるという問題があります。

なので、複数のマテリアルシンボルを使用する場合は、別の方法で設置した方がよいでしょう。

運営システムとフレームワーク

マテリアルアイコンとシンボルには、プロジェクトのアセットとしてインストールするためのAndroidとiOS用のダウンロードがあり、実装のためのコードスニペットも用意されています。マテリアルデザインには、Flutter（Googleが開発したプログラミング言語）とAngularの説明書があり、Reactの説明は、MUIのドキュメントに掲載されています。

デザイナーの使用方法

大抵のデザインツールには、マテリアルアイコン用のプラグインやエクステンションがありますが、UXPinをご利用の場合、すべてのプランにマテリアル アイコン セットが標準装備されています。

また、自分で作成したSVGアイコンをインポートしてUXPinで編集し、デザインシステムに保存して他のチームメンバーと共有することも可能です。

マテリアルアイコンやシンボルをタイポグラフィと一緒に使う

GoogleのMaterial 3（M3）ドキュメントには、アイコンとタイポグラフィの組み合わせに関するヒントとベストプラクティスが紹介されています。

ウェイト

アイコンとテキストに別々のウェイトを絶対に使わないでください。 Googleは、こういったアセットをマテリアルシンボルのウェイトカスタマイズ変数と簡単に組み合わせられるようにしています。クリーンで一貫した美しさを実現させるべく、確実にフォントのウェイトとアイコンのウェイトを常に一致させましょう。

（正）フォントのウェイト

（誤）フォントのウェイト

サイズと配置

アイコンのサイズと配置は、常にテキストと一致させましょう。ユーザーは両方を読んで、それらが関連していると認識できなければいけません。Googleは、デザイナーに「シンボルのベースラインを、文字サイズの約11.5%にシフトダウンする」ことを推奨しており、このやり方でアイコンやテキストが統一され、整列した状態に保たれます。

マテリアルアイコンのアクセシビリティ

Googleは、アイコンのアクセシビリティについて、デザイナーに簡潔ながら有益なアドバイスを提供しています。デザイナーは、特にナビゲーションのために、常にアイコンに有意義でよく説明されたラベルを使わなければいけません。テキストラベルのないアイコンは、ユーザーにとってあいまいで混乱を招く可能性がありますからね。また、スクリーンリーダーやその他の補助的な技術のための「代替（Alt）テキスト」も含めなければいけません。

アイコンは、対象サイズも重要な要素です。指の大きな人や手の不自由な人は、間違ってアイコンのボタンを押してしまい、混乱やフラストレーションの原因になりかねません。

Googleは、デザイナーに最小ターゲットサイズ48ピクセルの使用を推奨しています。20ピクセルのアイコンを使用する場合は、ターゲット領域の合計が48ピクセルになるよう、十分なパディングを設けましょう。

UXPinでマテリアルデザインのアイコンを使ってデザインする

マテリアルアイコンを含め、UXPinで予めインストールされた複数のアイコンセットがあれば、デザイナーはプラグインのインストールや、外部ファイルのアップロードが必要ありません。以下のように、プロジェクトへのアイコン追加は簡単です。

ステップ1：アイコン要素をクリック

キャンバスの左側にあるクイックツールパネルで、アイコン要素をクリックします。または、キーボードショートカットの【OPTION】+【I】（Macの場合）や【ALT】+【I】（PCの場合）でもできます。

ステップ2：キャンバスにアイコンを描く

アイコンを表示させたい場所をクリックして、四角くドラッグします。【SHIFT】キーを押しながらドラッグすると、幅と高さが等しくなります。

ステップ3：アイコンのプロパティパネル

アイコンを描画すると、右側のプロパティパネルにアイコンプロパティパネルが表示され、マテリアルアイコンや、Fonts Awesome、Retina Icons、UXPinセットなど、他のセットのいずれかを選択することができます。

ステップ4：アイコンの選択

利用可能なマテリアルアイコンをスクロールして、必要なものを探します。プロパティパネルで（キャンバス上でアイコンを選択した状態で）任意のアイコンをクリックし、選択状態にします。

ステップ5：アイコンのプロパティを調整

アイコンを選択したら、【アイコン】セクションの上にあるプロパティパネルを使用してスタイルを設定することができます。カラーピッカーの下には、マテリアルデザインを含む利用可能なデザインシステムのドロップダウンがあるので、デザイナーが他の場所からHEXコードをコピー＆ペーストする必要はありません。

ステップ6：インタラクションの追加

プロパティパネルの上部には、「インタラクション」があり、【インタラクション】、【アニメーション】、【トランジション】などを追加して、アイコンをインタラクティブにすることができます。例えば、このユーザーアイコンを使って、パーソナライズされたプロフィールページを開くとします。

UXPinのインタラクティブなUIパターンとアプリの例で、UXPinの機能の仕組みやコードベースのデザインでできることをご覧ください。

UXPinでプロトタイピングとテストを改善しよう

マテリアルアイコンは、UXPinで作業する際の1つの利便性に過ぎませんが、デザイナーが画像ベースのデザインツールとして、より機能的で忠実なプロトタイプをより早く構築できるようにすることが我々の目標です。

UXPinの内蔵デザインライブラリのいずれかを使えば、デザイナーは要素をドラッグ＆ドロップして、インタラクティブなプロトタイプを数分で構築できます。ウェブサイトから企業やB2C製品のウェブおよびモバイルアプリケーションまで、あらゆるタイプのプロジェクトに対応できるよう、人気の高い5つのデザインライブラリを収録しました

UXPinのすべてのプランには、マテリアルデザイン、iOS、Bootstrap、Foundation、ユーザーフローが含まれており、それぞれのライブラリのインタラクティブな要素、カラー、テキストスタイル、アイコンが用意されています。

UXPinのデザインシステム機能では、デザイナーがゼロからデザインシステムを構築し、ライブラリをカラー、アセット、タイポグラフィ、コンポーネントに自動的に分類することができます。また、権限の設定や、デザイナーやエンジニアが従うべきドキュメントを含めることができます。

UXPinのコードベースのデザインツールを使用して、最終的な製品エクスペリエンスを正確に再現する、より優れたプロトタイプを構築しませんか？無料トライアルにサインアップして、UXPinを使用したデザインの可能性を是非ご覧ください。