【前編:フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応

99件のシェア(ちょっぴり話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

匠

みなさんこんにちは、高速化SCSSの記事を書いている野中です。

↑の絵が何かわかる人いますか?
マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。

とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。

マインクラフトとは

わかりやすく解説されているニコニコ大百科を引用。

Minecraft(マインクラフト)とは、Notch(Markus Persson氏)と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。
レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。
家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を作ったり、地球を作ったり…何でも出来る。
ニコニコ大百科:Minecraft

ちなみにクリーパーとはこれのこと。

マインクラフト

会社のロゴの後ろに村がありますが、あれがクラスメソッド株式会社ではありません。

匠ことクリーパー

クリーパーは無音でプレイヤーに近づき、「シュッー」という効果音と共に数秒後爆発します。

プレイヤーの誰しもが一度は彼の洗礼を受けていることから、畏敬の念をこめて「クリーパー様」「クリーパーさん」「先生」と呼ばれることがある。また、爆発によって自宅や建造物を強制的にリフォームしてくれることから某番組よろしく「匠」とも呼ばれたりする。 ニコニコ大百科:クリーパー

ちなみにMincraftはPC, XBOX360, iOS, Androidでプレイできます。
JINXにたくさんグッズが売っているので興味のある方はどうぞ。

前振り長すぎですがこの緩さがブログの良いところですね。他の寄稿するような媒体では書いても削除されるはず・・・。

本題、Webフォントアイコンとは

やっと本題ですが、Webサイトを作る際にアイコンってよく使いますよね?
ここで指すアイコンとは緩いピクトグラムを指します(以降はわかりやすいアイコンという名称を使います)。

ちなみにピクトグラムとは・・・

ピクトグラム(Pictogram、ピクトグラフ(Pictograph)とも)は、一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号(サイン)の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。 Wikipedia:ピクトグラム

アイコンってよく使うけれども、画像にすると書き出したサイズ以上には拡大できない(しない方が良い)しCSS Spriteで対応するのも何かと面倒。
特にhover時のアイコンまで考えだすと大変だしめんどくさい。

そこで1つの解決策となるアイコンのWebフォント化です。
アイコンをWebフォントにすることで、ベクターの軽量なデータが利用でき、複数のアイコンを1つにまとめられ、hoverやactiveなど状態の変更が容易です。

ちなみにgithubがやっていて興味を持ったのですが、こんな風に拡大しても美しい。

github

そこで自分で試行錯誤しながらフォントを作成し、Webフォント化してみた過程を紹介します。

前編の紹介内容

前編となる今回は冒頭で紹介したマインクラフトの「匠の顔」を試しにアイコンにしてフォント化してみたいと思います。
ちなみに環境はWindowsで解説します。
MacOSの解説は別の機会で紹介できたらよいなと思います。

1,アイコンを作成してSVG形式で保存

まずはフォント化したいアイコンを作ります。
ツールは問いません。今回はイラストレーターでちゃちゃっとトレースして匠を作ります。

イラストレーター

1.1,必要ないけどSVGをHTMLに読み込んでみる

こんな感じのベクターデータができあがります。古いブラウザは見られないかも。

<object data="https://cdn-ssl-devio-img.classmethod.jp/wp-content/uploads/2013/03/creeper.svg" type="image/svg+xml"></object>

これで素材の準備はできたので、フォント作成に移りましょう。

2,30日間無料で使えるTTEditを使ってフォント作成

TTEdit

TTEditは有償のソフトウェアです。30日間無料で機能制限もなく利用できるのでまずは試しにダウンロードしてインストールしてみましょう。
ちなみに8,000円で購入できます。

2.1,インストール

インストールはとても簡単なので以下の手順に従ってください。

1セットアップウィザード

2使用許諾契約書

3インストールフォルダの選択

4インストールの確認

5インストール完了

2.2,TTEditの起動

インストールが完了したらWindowsキーを押してプログラムとファイルの検索にTTEditと入力しましょう。

起動したら試用期間で利用するボタンを押して作業を開始します。

試用期間で利用

起動直後の画面。

7起動画面

2.3,フォントファイルの新規作成

ファイルの設定手続きをそれっぽく進めます。
正直ここらへんの違いは自分も理解できていないので正しい情報だとは思わないでください

8シンボルフォントを選択

9等幅を選択

10ラインに関する設定

フォント名は好きなフォント名を入力してください。
ちなみに僕はCreeperフォントにします。

11書体名の設定

2.4,SVGデータをインポートしてフォントを作成

フォントを作り始めます。
先ほど作ったSVGファイルを「ファイル」→「インポート」→「SVGファイル」で読み込みます。

SVGを読み込む

とりあえず読み込めたようです。
真ん中に寄せて文字部分を塗りつぶして真ん中に寄せます。

塗りつぶしたところ

「ファイル」→「名前をつけて保存」とりあえず保存してみる。
フォントをプレビューして確認してみましょう。

フォントプレビュー

なにか表示されていますね。
ためしにインストールボタンを押してインストールしてみます。

3,インストールして使えるのかイラストレーターでチェックしてみる

イラストレーターを再起動して先ほどインストールしたフォントが使えるか試してみます。
起動して適当に「A」と入力してみましょう。

イラストレーターでAと入力

先ほど作成したフォントに変更してみましょう。

クリーパーが表示されてる

Creeperフォントがちゃんと表示されていますね。

実は先ほど適当にフォントを作りましたが、フォントにはShift-JIS(SJIS)やJIS,Unicodeなど文字コードを表す形式がいくつかあります。
先ほど作ったクリーパーの顔はAというコードSJISの40+1、JISの40+1、UnicodeのF040+1というなんの文字なのかを表すコードが指定されています。Unicodeについては正直、あまり理解できていません。理解するにはそれなりに勉強が必要だと思います。

Shift-JISのコードはこちらが参考になります。

できあがった匠顔フォントはこちら

誰も使わないと思いますが一応成果物としてここに残しておきます。
物好きな方がいればダウンロードしてみてください。

Creeperフォントをダウンロード

まとめ

単純なものならそれっぽくできましたがおそらくもっと考えなければならないことが沢山あるんじゃないかと思います。
より良く作るにはフォントに関する知識とツールの使い方も覚える必要がありそうですね。

今回はここまでにして、次回Webフォント化と簡単に利用できるジェネレーター系ツールを合わせて紹介したいと思います。

参考サイト