そうだWEBフォント使おう！アイコンフォントとセットで簡単スマホ対応。

via www.flaticon.com, Icons made by Freepik

今さらながらWEBフォントやアイコンフォントについて、振り返りをかねてまとめてみます。
面倒な気がして取り入れていない方は、すごく簡単ですので使用してみましょう！

見出しや画像文字は、WEBフォントで解像度フリーに。

各見出しやキャッチを画像として表現してしまうと、スマホなど高解像度デバイス対応のために、ファイルサイズが大きくなってしまったり、修正が必要になった際に面倒です。WEBフォントを利用して表現してしまえば、解像度に依存せず綺麗な見出しを表示でき、さらに修正時の手間も最小限で運用できます。レスポンシブデザインとの親和性も高く、それらはSEOにおいても有利に働きます。

【振り返り】WEBフォントとは？

旧来のfont-familyプロパティではユーザーのローカル環境にあるフォントしか指定できませんでしたが、CSS3から追加された@font-face規則によって、どのようなフォントでもサーバーにアップロードして指定できるようになりました。それによって、閲覧したユーザーの環境に指定したフォントがダウンロードされ、共通の表示が可能になります。現在では、これらをCDNを介して提供しているサービスが数多くあるため、CSSに数行追加すればすぐに使用できます。

重い、遅いは過去のもの？WEBフォントの今日この頃。

日本語WEBフォントといえば、文字数の多さゆえデータが重い、遅い、といったイメージがついてまわります。Google Noto Sans Japaneseが公開されて話題となりましたが、そのままだと重くて到底使えません（1ウェイトあたり15-6MB）

そこでこれらを使うとなるとサブセット（必要な文字のみを抽出）して利用することになるわけですが、動的な部分には使えないことや、文章に修正があった場合にメンテが必要なこと、さらにそもそもサブセット化のハードルが高いためなかなか普及していません。

ただ有料サービス（一部有料含む）にまで目を向ければ、サブセット技術の向上によって負荷が大きく軽減され、利用するハードルがずいぶん低くなっています。モリサワのTypeSquareをはじめとした有料サービスでは、ページを解析して動的にサブセットを生成（＝ダイナミック・サブセット）が一般的になっています。これらは有料とはいえ、比較的安価で利用できます。PV課金のものが多く、よほど大規模サイトでない限りは、月額1000円~2000円ほどで利用が可能です。また機能制限版の無料プランもあります。こういったサービスをうまく利用すれば、解像度に依存しないサイトを目指せます。

ここでいくつかメジャーなWEBフォントサービスをご紹介します。

TypeSquare

言わずと知れたモリサワが運営するWEBフォントサービス。クラウドフォントと銘打つ同サービスでは、スクリプトタグを挿入し、書体名を指定するだけで、サイト内で必要な文字が自動検知され、クラウド上から閲覧環境に最適なフォントが配信されます。1万PV/月までは無料で利用できます。APIの利用は有料プランのみとなっています。

月額2,160円~、無料プランあり
http://typesquare.com/

FONTPLUS

モトヤフォントや、イワタ、モリサワなど大手フォントメーカーの高品質なWEBフォントが利用できます。ページ内の文章を自動で解析し、使用する文字だけを抽出するダイナミック・サブセットに対応しています。10万PV/月で1,080円、別途入会金が必要です。こちらも独自制御が可能なAPIを公開しています。

月額1,080円~、入会金10,800円
http://webfont.fontplus.jp/

アマナイメージズ

タイプラボ、タイプバンクといったメーカーフォントが、1フォント×1ヶ月540円から利用できます。特定要素のみにWEBフォントを使用するための、簡単な初級者向けエディタも用意されています。50万PV/月程度までを想定。

月額540円~、無料プランあり（バッジ表示）
http://amanaimages.com/font/web/

使用方法

使用方法は至って簡単。どれも同じような感じですが、例えばGoogle Fontsの場合、

@import url(http://fonts.googleapis.com/css?family=Abel);

p { font-family: 'Abel' }

これだけ。インポートせず直接記述する場合は、

@font-face {
  font-family: 'font-name';
  url('YourPass/font-name.woff') format('woff'),
  url('YourPass/font-name.ttf') format('truetype'),
}

これだけ。（※ターゲットブラウザによっては記述がもう少し増えます）
動的にサブセットを生成するような場合は、スクリプトタグも必要です。

日本語Webフォントの革命 – 3846masa’s memo

本筋から少しズレますが、フリーの日本語フォントを使って、無料でダイナミック・サブセッティングを可能にするOSSが、最近公開され話題になっていたのでご紹介します。駄文として紹介されているWebフォントの歴史が、分かりやすく勉強になります。
http://3846masa.hatenablog.jp/entry/2015/04/08/100000

そうだ、ついでにアイコンフォントも使おう。

WEBフォントを使ってサイト内の画像文字をテキスト化しても、繰り返し使用するアイコン類がサイズ固定の画像になっていたのではイケてないですよね。そこでアイコンフォントを使って、さらに解像度に依存しないレスポンシブなサイトを目指しましょう。

【振り返り】アイコンフォントとは？

アイコンごとに画像データを作成して表示するのではなく、書体としてパッケージになったアイコンデータを、フォントとして一括で読み込んでおき、文字種を指定して表示させる方法、またはそのデータ。フォントとして読み込むため、cssのfontプロパティで扱うことができ、解像度に依存せず拡大縮小が可能です。同様の理由でテキストとのベースラインも揃いやすくなります。自作も可能。

当サイトで利用しているものを含め、メジャーなアイコンフォントをご紹介します。

Font Awesome

おなじみのオーサムフォント。当サイトでも利用しています。必要なアイコンはほぼすべて揃っています。ただ利用サイトが非常に多いため、他サイトと差別化したい場合は不向きです。

http://fortawesome.github.io/Font-Awesome/

IcoMoon

こちらもメジャーなIcoMoon。必要なアイコンだけを選択してダウンロードできる上、自作アイコンをImportしてアイコンフォント化することも可能です。

https://icomoon.io

Batch

全体的に丸っこいアイコンフォント。もちろん商用利用も問題ありません。いつもと少しだけ違ったアイコンを、という場合にちょうどいいかもしれません。

http://adamwhitcroft.com/batch/

使用方法

これまた使用方法はすごく簡単。フォントファイルをアップロードして、cssファイルを読み込んで指定するだけ。使用するアイコンフォントによって差はあるでしょうが、おおむねこんな感じです。

<link rel="stylesheet" href="YourPass/font-awesome.min.css">

<ul>
<li><span class="fa fa-facebook fa-1x"></span>フェイスブック</li>
<li><span class="fa fa-twitter fa-1x"></span>グーグルプラス</li>
<li><span class="fa fa-google-plus fa-1x"></span>ツイッター</li>
</ul>

これだけ。before/after::疑似クラスを使って、contentプロパティと合わせて使用すればspanタグを挿入しなくても済みます。

li::before {
	font-family: FontAwesome;
	content: "\f00c";
	padding-right: 5px;
	color: red;
}

これらを使ってアイコン表示すれば、解像度やデバイスに依存せず、いつも綺麗なアイコン表示が可能になります。

まとめ

スマホでネットを見ていると、粗い文字だけの見出し画像や、ぼやけたアイコン画像をまだまだ見かけます。まだ取り入れていない方は、WEBフォントとアイコンフォントを使って、簡単なところからスマホ対応していきましょう。ではまた！

【ちょっとしたやつ】
フォントのプレビューでよく見かける、

・Grumpy wizards make toxic brew for the evil Queen and Jack.
・The quick brown fox jumps over the lazy dog.　

こういうのはパングラムと呼ばれるアルファベット26字すべてを使った文字遊びらしいです。
特定の文字だけを使わずに文章を書くリポグラムも有名ですが、こういうのおもしろいですよね！

クレジット・リンク不要／商用可／アプリOK！アイコンフリー素材まとめ【2015年4月版】

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧