【ウェブ制作】ウェブでGoogle Fonts Iconsの可変アイコンフォントMaterial Symbolsを使おう!

ウェブ制作
この記事は約9分で読めます。

Googleアイコンを使ってみようと思って検索したら

「Material Symbols」っていうのが出てきたんですけど??

spica
spica

「Material Symbols」はGoogleのアイコンで間違いないですよ!

スポンサーリンク

Google Fonts Iconsの「Material Symbols」とは

「Material Symbols」とは、Googleが無償提供している可変アイコンフォントのことです。

2022年4月21日、Google Fontsが可変フォント技術に対応したことを発表しました。

4つの可変フォントスタイル(Fill,Weight,Grade,Optical size)をパラメーターで調整することができます。

  • Fill(FILL軸) : 塗りつぶし
  • Weight(wght軸) : 線の太さを100~700の間で指定
  • Grade(GRAD軸) : グレードをLow(-25)~High(200)の間で指定。暗い背景には低グレードを使うとグレアが低減される。
  • Optical size(opsz軸) : アイコンのサイズに応じて線の太さを自動的に調整。サイズは20dp~48dpの間

有名なウェブアイコンフォント「Font Awesome」では、塗りつぶしなしや細い線のアイコンは無料では使えません。

しかし、「Google Fonts Icons」では、ありがたいことに塗りつぶしなしも細い線も無料で使えてしまうんです!

EDIT ON CODEPENをクリック!

See the Pen outlined thin by spica (@spica_blog) on CodePen.

spica
spica

線が細いとかわいらしいですね!

Google Fontsの公式サイトでは、スライダーを動かして可変フォントスタイルの変化を確認することができます。

お名前.com

Material Symbolsの使い方

Material Symbolsを使うには、CDNとダウンロードの2通りの方法があります。

ここではCDNでの導入方法をご紹介します。

Material Symbolsの導入

スタイルシートの読み込み

Google fonts 公式サイトで自分のサイトに適切なアイコンのタイプを選びます。

「Outlined」「Rounded」「Sharp」の3タイプあります。

「Customization」のスライダーを動かします。

[Fill] 塗りつぶしを0(なし)~1(あり)で指定。

[Weight]線の太さを100(細)~700(太)の間で指定。

[Grade] グレードを-25(低)~200(高)の間で指定。暗い背景には低グレードを使うとグレアが低減される。

[Optical size]アイコンのサイズに応じて線の太さを自動的に調整。20dp~48dpの間で指定。

カスタマイズ後、使いたいアイコンをクリックするとコードが生成されます。

「Variable icon font」の<link>タグを<head>タグ内に貼り付けます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

「Outlined」「Rounded」「Sharp」のどれを選ぶかによってコードが変わります。

CSSファイルに記述

「Variable icon font」の<style>タグの中身をCSSファイルに貼り付けます(<style>タグは必要ありません)。

<head>タグ内に<style>タグをそのまま貼り付けることも可能ですが、メンテナンスのことを考えるとCSSファイルに貼り付けるほうが管理しやすいです。

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 700,
  'GRAD' 200,
  'opsz' 48
}

「Outlined」「Rounded」「Sharp」のどれを選ぶかによってコードが変わります。

HTMLファイルに記述

「Inserting the icon」の<span>タグをHTMLファイルの使いたい場所に貼り付けます。

<span class="material-symbols-outlined">home</span>

アイコンはspanタグ以外でも表示できます。

サイズや色を変更する

Material Symbolsはフォントと同じように扱えます。

サイズの変更は「font-size」で、色の変更は「color」で指定します。

疑似要素でアイコンを使う

リストマーカーなどとして疑似要素で使いたいのなら、「Code point」をコピーして、CSSファイルのcontentプロパティの値に、バックスラッシュ(\と同じ)を頭に付けて貼り付けます。

ul.icon li:after {
  font-family: "Material Symbols Outlined";
  content: "\e87d";
  position: absolute;
  left: 1em;
  font-size: 1em;
  color: tomato;
}
EDIT ON CODEPENをクリック!

See the Pen Untitled by spica (@spica_blog) on CodePen.

「Outlined」「Rounded」「Sharp」のどれを選ぶかによってfont-familyが変わります。

ムームードメイン

様々なパターン

Rounded + 塗りつぶしなし

EDIT ON CODEPENをクリック!

See the Pen material icons rounded by spica (@spica_blog) on CodePen.

Outlined + 細い線 + 塗りつぶしあり

EDIT ON CODEPENをクリック!

See the Pen outlined fill by spica (@spica_blog) on CodePen.

より簡単なMaterial Symbolsの使い方

静的アイコンフォント

可変ではない、静的アイコンフォントの導入方法もご紹介します。

スタイルシートの読み込み

公式ではこちらのコードをHTMLに読み込むよう記載されていました。

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

上記のスニペットにはデフォルト値が含まれており、塗りつぶしなし、線は400,グレード0、オプティカルサイズ48となっています。

EDIT ON CODEPENをクリック!

See the Pen Untitled by spica (@spica_blog) on CodePen.

「Customization」のスライダーを動かして、自分用にカスタマイズすることもできます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,700,1,200" />
EDIT ON CODEPENをクリック!

See the Pen GoogleFonts static by spica (@spica_blog) on CodePen.

HTMLファイルに記述

「Inserting the icon」の<span>タグをHTMLファイルの使いたい場所に貼り付けます。

<span class="material-symbols-outlined">home</span>
EDIT ON CODEPENをクリック!

See the Pen material icons styling by spica (@spica_blog) on CodePen.

Webデザインコース

Material Iconsとは

Google Fonts Iconsには、「Material Symbols」の他に「Material Icons」があります。

この2つの違いは、「Material Symbols」が可変に対応しているのに対し、「Material Icons」は可変に対応していないということです。

「Material Symbols」は発表されたばかりですので、現在使われているGoogle Fonts Iconsのほとんどが「Material Icons」かもしれません。

「Material Symbols」になってカスタマイズ性は格段にアップしていますが、「Material Icons」にあった「two-tone」がなくなっているようですね。

「two-tone」を使いたい場合は「Material Icons」を選択しましょう。

スタイルシートの読み込み

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

HTMLファイルに記述

<span class="material-icons">face</span>

まとめ

今回は、Googleが無償提供しているアイコン「Material Symbols」をウェブで使う方法について解説しました。

アイコンをいろいろとカスタマイズできて楽しいですね!

spica
spica

Font Awesomeのアイコンだとイメージが合わない時に、

Material Symbolsをカスタムして使うといいかもしれませんね。

アイコンのダウンロードには、SVGだけでなくPNGが選べるところもポイント。

GoogleのMaterial Symbolsを上手に使って、ウェブ制作の可能性を広げましょう!

コメント