編集長ブログ―安田英久

Googleのマテリアルアイコンは軽量・デザイン・アクセシビリティOKの優れモノ

このマテリアル・アイコンを使えば、画像ファイルを自分用意しなくてもアイコンをWebページにカンタンに設置できます。

今日は、Webデザインの話題を。Webページの要素をわかりやすく示すアイコンで、デザイン性とアクセシビリティを兼ね備え、さらに軽量で使いやすいものがありました。グーグルの「マテリアル・アイコン」です。その特徴を解説し、ページでの使い方を解説します。

このマテリアル・アイコンを使えば、画像ファイルを自分で用意しなくてもaccessibility(accessibility)やassignment(assignment)、face(face)、directions_run(directions_run)、smoking_rooms(smoking_rooms)、search(search)なんてアイコンを、カンタンにWebページに設置できます。

アイコンはWebフォントファイルで実現されていて、フォントファイルのサイズは最小42KB。サイズを変えたりdirections_run、色を付けたりdirections_runも自由です。

使えるアイコンは900個以上。Material iconsのページに一覧が示されています。

しかも、この仕組みはアクセシビリティにも優れていて、文字読み上げソフトを使うと、アイコンの部分は上記例のかっこで囲んだ文字が読み上げられるのです。

Webフォントを使ったアイコンというのはけっこうあるのですが、その多くは何らかの文字にアイコンを割り当てているので、アイコンのビジュアル表示に対応できない環境では意味を把握しづらいんですよね。

その点このマテリアル・アイコンは「合字(ligature)」の仕組みを使っており、上記の例で言うと、アイコンの部分はHTMLでは「accessibility」「assignment」などの文字列が書かれているため、アクセシビリティ面も配慮されています。

グーグルでは、このマテリアル・アイコンをWeb上ですでに利用しています。たとえば、Google アナリティクス - Google 広告主コミュニティなどのコミュニティ・フォーラム系のページですね。

Google Material Iconsの使用例

グーグル「マテリアル・アイコン」の使い方

使い方はカンタン。「Material Icons Guide」の「Icon font for the web」に書かれているとおりです。

  1. Google Web Fontの仕組みを使って、マテリアル・アイコンのWebフォントとCSSを読み込みます。

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  2. アイコンを置きたい場所に、次のように記述します。

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

    i要素のなかに書くのは、各アイコンが割り当てられている文字列。このHTMLは、マテリアル・アイコンのページでアイコンを選ぶと示されます。

    この文字列を1文字として扱うのが「合字」。これで、制作時のわかりやすさやアクセシビリティに対応してるんですね。

  3. アイコンのサイズや色を調整したい場合は、次のようなCSSをページに追加し、各アイコンのクラス名に指定するといいでしょう。

    ●CSSに追加
    <style>
    /* 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); }
    
    .material-icons.orange600 { color: #FB8C00; }
    </style>
    ●表示例
    大きさ
    directions_run
    <i class="material-icons md-18">directions_run</i>
    directions_run
    <i class="material-icons md-24">directions_run</i>
    directions_run
    <i class="material-icons md-36">directions_run</i>
    directions_run
    <i class="material-icons md-48">directions_run</i>
    背景色に合わせる
    directions_run
    <i class="material-icons md-dark">directions_run</i>
    directions_run
    <i class="material-icons md-light">directions_run</i>
    色を付ける
    directions_run
    <i class="material-icons orange600">directions_run</i>

この合字によるアイコン表示に対応しているブラウザは次のとおり。

  • Google Chrome 11以降
  • Mozilla Firefox 3.5以降
  • Apple Safari 5以降
  • Microsoft IE 10以降
  • Opera 15以降
  • Apple MobileSafari iOS 4.2以降
  • Android Browser 3.0以降

それ以前のブラウザ向けの記述方法もありますが、その場合はアクセシビリティ的に良くないので、ここでは紹介せずにおきますね。

アイコンのライセンスはCC-BY 4.0。単にアイコンを利用する場合のクレジット表記は必須ではありません

この記事が役に立ったらシェア!
tweet50はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

広告代理店
広告を出したい者(広告主)と広告を掲載する者(媒体)の間にたつ存在。 媒体 ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]