マテリアル アイコンの概要 - その取得場所、プロジェクトへの統合方法。
マテリアル アイコンとは
マテリアル デザインのシステム アイコンは、シンプル、モダンで、フレンドリーで、時には一風変わったものです。各アイコンは、UI 全体で一般的に使用される一般的なコンセプトをシンプルかつ最小限の形式で表現するためのデザイン ガイドラインに従って作成されています。これらのアイコンは、大小両方のサイズで読みやすさと鮮明さを確保するため、すべての一般的なプラットフォームとディスプレイ解像度で美しい表示になるように最適化されています。
マテリアル デザイン アイコンの一覧については、マテリアル アイコン ライブラリをご覧ください。
アイコンを取得する
アイコンにはいくつかの形式が用意されており、さまざまなタイプのプロジェクトやプラットフォーム、デベロッパーのアプリ、モックアップやプロトタイプで使用するデザイナーに適しています。
ライセンス
これらのアイコンは、Apache License バージョン 2.0 の製品に組み込むことができます。これらのアイコンやドキュメントは、ご自分のプロダクトで自由にリミックスしたり、共有したりできます。アプリの [概要]about 画面にアトリビューションを表示することをおすすめしますが、必須ではありません。
個々のアイコンの閲覧とダウンロード
マテリアル アイコンの完全なセットは、マテリアル アイコンのライブラリから入手できます。アイコンは、ウェブ、Android、iOS プロジェクトに適した形式、またはデザイナー ツールに組み込むのに適した形式の SVG または PNG でダウンロードできます。
すべてをダウンロードしています
すべてのアイコンが収録されている最新の Stable 版の zip アーカイブ(最大 310 MB)またはマスター版を入手します。
Git リポジトリ
マテリアル アイコンは、Git リポジトリから入手できます。Git リポジトリには、使用可能なすべての形式を含む、アイコンの完全なセットが含まれています。
$ git clone https://github.com/google/material-design-icons/
ウェブ用のアイコンのフォント
マテリアル アイコンのフォントは、マテリアル アイコンをウェブ プロジェクトに組み込む最も簡単な方法です。すべてのマテリアル アイコンを 1 つのフォントにパッケージ化し、最新のブラウザのタイポグラフィ レンダリング機能を活用しています。これにより、ウェブ デベロッパーはわずか数行のコードでこれらのアイコンを簡単に組み込めます。
フォントの使用は最も便利な方法であるだけでなく、効率的で見栄えが良い方法です。
- 1 つの小さなファイルから 900 以上のアイコンすべてを利用可能。
- Google ウェブフォント サーバーから配信するか、自社でホストできます。
- 最新のすべてのウェブブラウザでサポートされています。
- 色付け、サイズ設定、配置はすべて CSS で行います。
- ベクターベース: あらゆるスケールで鮮明に再現します。Retina ディスプレイ、低 dpi のディスプレイ画面に対応しています。
アイコン フォントの容量は、最小の woff2 形式では 42 KB、標準の woff 形式では 56 KB です。これに対し、gzip で圧縮された SVG ファイルのサイズは、通常約 62 KB ですが、必要なアイコンのみをシンボル スプライトを含む 1 つの SVG ファイルにコンパイルすることで、サイズを大幅に削減できます。
設定方法 1. Google Fonts 経由で使用
ウェブページで使用するアイコン フォントをセットアップする最も簡単な方法は、Google Fonts です。必要な作業は、HTML を 1 行記述することだけです。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
他の Google ウェブフォントと同様に、適切な CSS が提供されると、ブラウザに固有の「マテリアル アイコン」フォントが有効になります。.material-icons
という CSS クラスを追加で宣言します。このクラスを使用するすべての要素には、ウェブフォントからこれらのアイコンをレンダリングするための適切な CSS が設定されます。
設定方法 2. セルフ ホスティング
ウェブフォントを自社でホストする場合は、追加の設定が必要です。特定の場所(https://example.com/material-icons.woff
など)でアイコン フォントをホストし、次の CSS ルールを追加します。
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
また、フォントを適切にレンダリングするには、アイコンをレンダリングするための CSS ルールを宣言する必要があります。通常、以下のルールは Google ウェブ フォント スタイルシートの一部として処理されますが、フォントをセルフホストする場合は、これらのルールをプロジェクトに手動で追加する必要があります。
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
HTML でのアイコンの使用
ウェブページにアイコンを組み込むのは簡単です。次の例をご覧ください。
顔
<span class="material-icons">face</span>
この例では、合字というタイポグラフィ機能を使用しています。これにより、テキストの名前だけでアイコンのグリフをレンダリングできます。置換はウェブブラウザによって自動的に行われ、同等の数字参照よりも読みやすいコードを提供します。
この機能は、パソコンとモバイル デバイスの両方の最新のブラウザでサポートされています。
参照者 | 合字をサポートするバージョン |
---|---|
Google Chrome | 11 |
Mozilla Firefox | 3.5 |
Apple Safari | 5 |
Microsoft IE | 10 |
Microsoft Edge | 18 |
オペラ | 15 |
Apple MobileSafari | iOS 4.2 |
Android ブラウザ | 3.0 |
合字をサポートしていないブラウザでは、代わりに、以下の例のように数字参照を使用してアイコンを指定します。
<span class="material-icons"></span>
アイコンを選択してアイコン フォントパネルを開くと、マテリアル アイコン ライブラリでアイコン名とコードポイントの両方を確認できます。各アイコン フォントには Git リポジトリにコードポイント インデックスがあり、名前と文字コードの完全なセットを確認できます(こちら)。
マテリアル デザインのスタイル アイコン
これらのアイコンはマテリアル デザイン ガイドラインに基づいて設計されており、推奨されるアイコンのサイズと色を使用すると最も見栄えが良くなります。以下のスタイルを使用すると、推奨されるサイズ、色、アクティビティの状態を簡単に適用できます。
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
サイズ調整
フォント内のアイコンは任意のサイズに変更できますが、マテリアル デザインのアイコンのガイドラインに沿って、18、24、36、48 ピクセルのいずれかで表示することをおすすめします。デフォルト値は 24px です。
標準的なマテリアル デザインのサイズ設定ガイドラインに関する CSS ルール:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
マテリアル アイコンは 24 ピクセルが最適ですが、アイコンを別のサイズで表示する必要がある場合は、上記の CSS ルールを使用すると便利です。
<span class="material-icons md-18">face</span>
<span class="material-icons md-24">face</span>
<span class="material-icons md-36">face</span>
<span class="material-icons md-48">face</span>
塗り絵
アイコン フォントを使用すると、あらゆる色のアイコンのスタイルを簡単に設定できます。マテリアル デザインのアイコンのガイドラインに沿って、アクティブなアイコンを明るい色の背景と暗い背景で使用するときは、黒(不透明度 54%)または白(不透明度 100%)を使用することをおすすめします。アイコンが無効または無効な場合、明るい背景と暗い背景にはそれぞれ黒(26%)または白(30%)を使用します。
上記のマテリアルの CSS スタイルを使用した例を次に示します。
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
明るい背景に暗い前景の色にアイコンを描画する例:
<span class="material-icons md-dark">face</span>
<span class="material-icons md-dark md-inactive">face</span>
暗い背景に明るい前景色を使用してアイコンを描画する例:
<span class="material-icons md-light">face</span>
<span class="material-icons md-light md-inactive">face</span>
アイコンのカスタム色を設定するには、フォントに使用する色を指定する CSS ルールを定義します。
.material-icons.orange600 { color: #FB8C00; }
アイコンを参照するときにクラスを使用します。
<span class="material-icons orange600">face</span>
ウェブのアイコン画像
マテリアル アイコンは通常の画像としても提供されています(PNG 形式と SVG 形式の両方)。
SVG
マテリアル アイコンは、ウェブ プロジェクトに適した SVG として提供されます。各アイコンはマテリアル アイコン ライブラリからダウンロードできます。SVG は、以下のパスの下にあるマテリアル デザイン アイコンの git リポジトリからも入手できます。
material-design-icons/src/
たとえば、マップのアイコンは src/maps にあります。
material-design-icons/src/maps/
ウェブサイトで複数のアイコンを使用している場合は、画像からスプライトシートを作成することをおすすめします。詳しくは、Git リポジトリの sprites ディレクトリのドキュメントをご覧ください。
PNG
PNG は、ウェブ上でアイコンを表示するための最も伝統的な方法です。マテリアル アイコン ライブラリからダウンロードしたアイコンでは、各アイコンの密度が 1 倍と 2 倍になりました。ダウンロードでは、それぞれ 1x
、2x
と呼ばれます。アイコンは、以下の Git リポジトリからも利用できます。
material-design-icons/png/
ウェブサイトで複数のアイコンを使用している場合は、画像からスプライトシートを作成することをおすすめします。詳しくは、Git リポジトリの sprites ディレクトリにある推奨事項をご覧ください。
Android のアイコン
Android に適した PNG はマテリアル アイコンのライブラリから入手できます。画面密度はすべてサポートされているため、どのデバイスでも適切に表示されます。
マテリアル デザイン アイコンの Git リポジトリからも、同じ色とサイズの組み合わせ(下記を参照)で入手できます。
ベクター型ドローアブルは現在、黒の 24 dp アイコンとしてのみ利用可能です。これは、ほとんどの標準的なアイコンサイズとの互換性を維持するためです。アイコンを別の色でレンダリングするには、Android Lollipop で利用可能なドローアブルの色合い調整を使用します。
ベクター型ドローアブルを使用する場合は、xxxhdpi 密度 PNG を含める必要はない場合があります。その画面密度をサポートするデバイスは、ベクター型ドローアブルをサポートしていない可能性はまずないからです。
iOS 用のアイコン
マテリアル アイコンは iOS アプリ内でも適切に機能します。マテリアル アイコン ライブラリと Git リポジトリでは、これらのアイコンが Xcode イメージセットにパッケージ化されており、Xcode Asset Catalogs(xcassets)と簡単に連携できます。これらのイメージセットは、Xcode アセット カタログにアセット カタログにドラッグするか、フォルダを xcasset フォルダにコピーすることで、任意の Xcode アセット カタログに追加できます。
イメージセットには、単一密度、2 倍、3 倍の密度の画像(1x、2x、3x)が含まれているため、既知のすべての iOS 画面密度で動作します。黒と白の両方のアイコンが用意されていますが、UIImage の imageWithRenderingMode と UIImageRenderingModeAlwaysTemplate を併用することをおすすめします。これにより、画像を任意の色に着色できるアルファマスクとして使用できます。
Objective-C の例:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Swift の例:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
RTL のアイコン
アラビア語やヘブライ語などの言語は、右から左に読む(RTL)必要があります。RTL 言語の場合、UI をミラーリングして、ほとんどの要素を RTL で表示する必要があります。RTL 用にユーザー インターフェースをミラーリングする場合は、一部のアイコンもミラーリングする必要があります。テキスト、レイアウト、アイコンをミラーリングして右から左への UI をサポートする場合、時間に関連するものはすべて右から左に移動するものとして描写する必要があります。たとえば、前進すると左になり、後退すると右側を指します。ただし、アイコンを配置するコンテキストも、アイコンをミラーリングするかどうかに影響することに留意してください。
アイコンの向きが RTL モードの他の UI 要素と一致する場合にのみ、アイコンをミラーリングする必要があります。アイコンがウェブサイトの視覚特性を RTL と異なっている場合は、RTL でもアイコンをミラーリングする必要があります。たとえば、番号付きリスト内の数字が RTL 言語の右側にある場合、数字はミラーリングされたアイコンの右側に配置します。
Android の RTL アイコン
Android デベロッパー向けのこちらの記事では、RTL ユーザー インターフェースの実装方法を詳しく説明しています。Android のデフォルトでは、レイアウト方向をミラーリングしてもアイコンはミラーリングされません。必要に応じて、RTL 言語専用のアセットを用意するか、フレームワーク機能を使用してアセットをミラーリングすることで、適切なアイコンをミラーリングする必要があります。
RTL 言語専用のアセットを提供するには、リソース ディレクトリで ldrtl
修飾子(res/drawable-ldrtl/
など)を使用します。このようなディレクトリ内のリソースは、RTL 言語にのみ使用されます。Android API 19 以降を搭載するデバイスの場合、フレームワークにはドローアブル用の autoMirrored 属性も用意されています。この属性を true に設定すると、ドローアブルは RTL 言語で自動的にミラーリングされます。
autoMirrored を使用する場合:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
autoMirrored を使用するか、代替のドローアブル リソースを指定できない場合は、ImageView の scaleX 属性を使用してドローアブルをミラーリングすることもできます(たとえば、res/layout-ldrtl
ディレクトリに RTL 固有のレイアウトを指定します)。
レイアウト ファイル内のミラーリング:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
最後に、ドローアブルはプログラムでミラーリングできます。
getLayoutDirection を使用して、レイアウト方向を手動で確認します。
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
プログラムによる ImageView コンテンツのミラーリング
imageView.setScaleX(-1);
iOS の RTL アイコン
iOS には、各ビューにアタッチされる UISemanticContentAttribute というコンセプトがあります。値は unspecified
、forceLeftToRight
、forceRightToLeft
、playback
、spatial
です。iOS はこの値と、インターフェースを表示するデバイスの(左から右(LTR)と RTL の設定を使用して、ビューの validLayoutDirection を決定します。この effectiveLayoutDirection は、画像が表示されるときに画像をミラーリングするかどうかを決定します。
デフォルトでは、画像のセマンティック コンテンツは unspecified
に設定されています。これにより、RTL モードでミラーリングされます。アイコンを一切ミラーリングしない場合は、明示的に forceLeftToRight
に設定する必要があります。Apple は、メディアの再生(早送り、巻き戻しなど)、音符、時間の経過を示す画像など、ミラーリングすべきではない例外をいくつか呼び出しています。
Objective-C の例:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Swift の例:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
iOS や macOS に RTL を実装する方法について詳しくは、Apple の RTL に関するドキュメントをご覧ください。
セマンティック コンテンツは iOS 9 で追加されました。以前のバージョンの iOS をサポートしている場合、マテリアル国際化フレームワークによって一部の機能が iOS 8 にバックポートされています。
ウェブ上の RTL アイコン
ウェブ上の RTL の入門編として、https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1、https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
ウェブのデフォルトでは、レイアウト方向をミラーリングしてもアイコンはミラーリングされません。必要に応じて、特に適切なアイコンをミラーリングする必要があります。
下の例は、単純な RTL CSS ルールの実装方法を示しています。Codepen で表示することもできます。
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
ImageMagick を使用して独自の RTL アイコンを生成する
コード内でアイコンをミラーリングできない場合は、ImageMagick を使用して画像を水平方向にミラーリングします。
convert -flop my_icon.png my_icon_rtl.png
RTL 用にミラーリングする必要があるアイコンはどれですか?
RTL にプログラムでミラーリングできるアイコンのリストを次に示します。
戻る矢印 | の矢印を戻る(iOS) | 右矢印 |
右矢印(iOS) | 左矢印 | 右矢印 |
件の課題 | 課題の返却( | )Backspace |
のバッテリー残量が不明です | 件の通話 | 通話の統合 |
件の不在着信 | 件の不在着信 | 件の通話の着信 |
通話の分割 | 残り | 山形山形(右) |
Chrome リーダー モード | 不明なデバイス: | 台DVR |
件の予定メモ | 件の注目の再生リスト | の注目動画 |
ページ目 | のフライトの着地 | の離陸 |
形式のインデントを減らします | 形式のインデントを増やします | 形式リストの箇条書き |
転送済み | 関数 | の入力 |
個のキーボード タブ | 個のラベル | ラベルが重要 |
ラベルの概要 | 最後のページ: | の起動 |
個のリスト | のリアルタイム ヘルプ | のモバイル画面共有 |
の複数折れ線グラフ | 前に移動 | が次に移動 |
来週の | 件のメモ | が新しいウィンドウで開きます |
件の再生リストへの追加 | の音楽をキューに追加 | やり直し | 回
件の返信 | さんが全員に返信 | の画面共有 |
の送信 | 短いテキスト | のグラフの表示 |
の並べ替え | つ星(半分) | 個のテーマ |
は横ばい傾向 | 目次 | は下降傾向です |
が上昇中 | 元に戻す | 件のビューリスト |
: キルトを表示 | でテキストを折り返す |