目次
はじめに
Webサイトやシステム開発のデザイン制作を行う際、「Google Material Icons」を使用することがあります。
私がよく使っているもの、よく目にするものを紹介します。
検索するときのワードも記載します。
Google Material Iconsとは
Google Material Iconsのガイドラインはこちらです。
- Googleが提供するオープンソースのアイコン
- アイコンの色変更、サイズ変更、コピー＆ペーストが可能
- 太さ、塗りつぶしなどを変更できます
- SVG、pngで利用可能
使用時の注意点
綴りが間違っているとアイコンが何も表示されません。
「downroad」と検索した場合の結果がこちらです。
「もしかして：download？」というのも出ないので、もし検索欄に何も出ない場合はスペルミスがないか確認してみてください。
アイコン一覧
ユーザー
ユーザーアカウント
人の顔
使用例：ユーザーページ、アカウント情報
検索ワード：user
絞り込み、フィルター
理科の実験で使う「濾過（ろか）」のアイコン
使用例：絞り込み機能がある一覧
検索ワード：filter
矢印
＜ の形の矢印
使用例：リンク、トップへ戻るボタン
検索ワード：arrow, chevron
補足：「chevron（シェヴロン）」とは、「山形（逆V字形）の模様」や「V字形のマーク」を意味します。
矢印というと「arrow」のイメージがありますが、「chevron」と表現されることもあります。
外部サイト
使用例：外部サイトへのリンクを行う場合
URLやテキストの後ろにこのアイコンを使うことがあります。
これがあると、新しいタブで開かれることが分かります。
検索ワード：link, external
虫眼鏡
使用例：検索フォーム、検索ページ
検索ワード：search
グラフ
折れ線グラフ、棒グラフ
使用例：データを表示するページ
検索ワード：graph
アクセス
マップ、ピン、現在地などのアイコン
使用例：GoogleMapなどへのリンク、アクセス情報
検索ワード：map
追加
使用例：要素を追加するとき
例）＋をクリックすると入力欄が増える
検索ワード：add
クリップ
クリップのアイコン
使用例：ファイルアップロードエリア、添付
検索ワード：clip, file
ファイル
使用例：ファイルのコピー・保存、ファイルのアップロード
検索ワード：file
ダウンロード
使用例：ファイルダウンロード、ダウンロード完了、クラウドからのダウンロード
検索ワード：download
データベース
データベースのアイコン
検索ワード：database
「db」では結果に表示されません
参考サイト