アイコンウェブフォントの作り方

原文: Creating an icon webfont
チュートリアル
Glyphs Mini
Rainer Erich Scheichelbauer著
en zh
2022年8月1日 2014年3月23日公開

あなたのアイコンセットをウェブフォントに変えて、より速く、より見栄えの良いウェブページを作りましょう！

最近のウェブブラウザは、ほぼすべてウェブフォントを表示する機能を持っています。ですから、アイコンをJPEG、PNG、GIF、SVGに変換する代わりにフォントに入れて帯域幅を節約するのは良いアイデアです。さらに、ラスタライズを避けられるため、アイコンの解像度非依存性を保つことができます。

新しいアイコンフォントを作る
アイコン用のPUAグリフを作る
他のアプリでアイコンを準備する
フォントにアイコンを入れる
ピクセルパーフェクション
グリフをまとめて作成する
フォントをテストする
ウェブフォントを書き出す
ウェブページにアイコンを配置する
便利なスクリプト
関連記事

新しいアイコンフォントを作る

まず、Glyphsを起動し、ファイル > 新規を選び、作業中のファイルをファイル > 保存で都合の良い場所に保存します。次に、ファイル > フォント情報 > フォントに移動して、フォントに名前を付けます。ファミリー名を入力し、必要であればデザイナー（アイコンを描いた人）とそのURL、製造元（フォントを制作する人や会社）とそのURLも入力します。最終的に、丸い矢印の更新ボタンをクリックすると、Glyphsが著作権表示を自動生成してくれます。

Glyphs Miniの場合は、フォント情報はメインウィンドウのタブになっています。

その他の項目は私たちにとって重要ではありません。完了したら、フォント情報ウィンドウ（またはタブ）を閉じてフォントウィンドウに戻り、もう一度フォントを保存しておきましょう。

アイコン用のPUAグリフを作る

フォント内のスロットはグリフと呼ばれ（私たちのお気に入りのフォントエディタの名前の由来です）、それらのグリフは通常、文字に対応しています。簡単に言うと、文字はあなたたちがタイプするもの、グリフはあなたたちが見るものです。文字とグリフの関係は、グリフに割り当てられたUnicode値を通じて確立されます。時には、グリフにUnicode値がないこともありますが、私たちのアイコンフォントでは、各グリフに一つずつ値があります。Unicode、グリフ、文字についてもっと知りたい場合は、Unicodeチュートリアルを読んでください。

Unicodeが割り当てられたグリフには、そのUnicode値の意味に合った絵だけを入れるべきです。例えば、U+0041 LATIN CAPITAL LETTER Aには、少なくとも漠然とAに似たものだけを入れるべきです。なぜアイコンではダメなのでしょうか？なぜなら、何らかの理由で私たちのアイコンウェブフォントが読み込めず、フォールバックフォントに置き換えられた場合に、検索エンジンやウェブサイトの検索機能、あるいは画面に表示されているものを理解しようとしている人を混乱させる可能性があるからです。

そこで、フォントウィンドウでまず行うことは、すべてのグリフを選択し、ウィンドウ下部のマイナスボタンをクリックすることです。Glyphsがあなたが何をしているか分かっているか尋ねてきたら、削除と言います。

さて、これでフォントにはもう文字がなくなりましたが、アイコンはどこに入れればいいのでしょうか？簡単です。私用領域（Private Use Area、PUA）のUnicode値に関連付けられた新しいグリフに入れます。

私用領域とは何でしょう？説明します。Unicode値の長大な範囲の中には、あなたが使いたい目的のために予約されている領域がいくつかあります。言い換えれば、Unicodeコンソーシアムの親切な方々が言うところの、私的利用のための領域です。

Unicode標準にはいくつかのPUAがありますが、私たちにとって最も便利なのは、基本多言語面（Basic Multilingual Plane、BMP、つまりU+0000からU+FFFFまでのすべてのUnicode）内のPUAです。BMP内のPUAはU+E000からU+F8FFまでの範囲です。

では、そこにグリフを作成するにはどうすればいいでしょうか？先ほど押したマイナスボタンの隣にあるプラスボタンをクリックします。newGlyphという名前の新しいグリフが表示されます。次のような見た目になるでしょう。

ここで知っておくべきことは、Glyphsはグリフに割り当てた名前に基づいて、そのグリフのUnicode値を自動的に設定するということです。ですから、グリフをBと名付ければ、GlyphsはそのUnicodeをU+0042（LATIN CAPITAL LETTER BのUnicode）に設定します。グリフをBMPのPUAに入れるには、uniに続けてE000からF8FFまでの4桁の16進数コードを付けた名前にする必要があります。つまり、uniE000からuniF8FFまでの間の名前なら何でも構いません。

カテゴリが私用に変わるのがわかるでしょう。また、グリフのプレースホルダー画像とUnicode値の両方が、このグリフが公式に私用領域内に存在することを示すように変わりました。クールですね。

いや待ってください、実はあまりクールではありません。アイコンが2つか3つしかない場合は大した問題ではありませんが、20個、100個、あるいはそれ以上のアイコンがある場合、これらの名前はあまり役に立ちません。ここにちょっとしたコツがあります。グリフの名前をuniE000のように変更してUnicode値を割り当てたら、その名前をもう一度変更できます。今度はtwitterIconやshoppingCartIconのような分かりやすい名前にしても、グリフはUnicode値を保持します。

グリフ名を変更した後は、そのUnicode値に注意してください。もしそれが再びPUAの外の何かに変わってしまったら、それはおそらく別のグリフのために予約されている名前を選んでしまったということです。Glyphsには認識するグリフ名の組み込みリストがあり、必要であればウィンドウ > グリフ情報で確認できます。あるいは、単にグリフ名の最後にIconを追加すれば、すべてのトラブルを避けられます。

グリフ名について一言。大文字と小文字のASCII文字、つまりA-Zとa-zのみを使い、名前の最後には数字（0-9）を付けることもできます。スペースは許可されておらず、名前を数字で始めることはできません。したがって、homeIconやloginIconはOKですが、home buttonやMäxIconのような名前はNGです。グリフ名についてもっと知りたい場合は、グリフ名を正しく設定するを読んでください。

他のアプリでアイコンを準備する

Glyphsは優れた描画ツールを提供していますが、すでにベクターアイコンを持っている可能性が高いでしょう。ほとんどのベクターアプリからは、Glyphsに単純にコピー＆ペーストできます。そして、Glyphsでのスケーリングは丸め誤差につながる可能性があるため、アートワークをフォントに取り込む前に正しいサイズに拡大縮小するのが最善です。

Illustratorなどでの1ポイントが、Glyphsでの1ユニットになることを覚えておいてください。そして、通常はアイコンを大文字とほぼ同じサイズにしたいと思うでしょう。平均的な大文字の高さは、UPM（units per em）サイズの70パーセントです。デフォルトではUPMは1000ユニットに設定されているため、平均的な大文字の高さは700ユニットになります。

ですから、アイコンをGlyphsにコピー＆ペーストする前に、元のアプリケーションで約700ポイントに拡大してください。

このチュートリアルで知っておくべきことはこれだけです。もし興味があって、Adobe IllustratorとGlyphsの間でベクターを移動させることについてもっと知りたい場合は、Illustratorから読み込むチュートリアルで読むことができます。

また、ファイル > フォント情報 > その他 > グリッドの間隔をゼロに設定するか、サブディビジョンを10や100に設定することで、丸め誤差を最小限に抑えることができます。すべての座標は、これら2つの設定に従って丸められます。

なぜ丸め処理があるのか、とあなたは尋ねるかもしれません。それは、一部のフォント形式は整数単位に丸められた座標しかサポートしておらず、整数単位は実際には編集を容易にするからです。

フォントにアイコンを入れる

さて、最初のアイコンの準備ができました。PUAコードを持つグリフをダブルクリックすると、Glyphsは新しい編集タブを開き、そのグリフを挿入してくれます。あなたのグリフは次のような見た目になるでしょう。

いくつかの線、その背後にある灰色のプレースホルダー画像、そして下にある灰色のグリフ情報ボックスが見えます。Cmd-0を押して、グリフをウィンドウのサイズに拡大します。

これらの線はグリフメトリクスと呼ばれます。下から2番目の線はベースラインです。アイコンをこの線の上に置きたいと思うでしょう。上から2番目の線はキャップハイトで、デフォルトでは700ユニットです。アイコンがこの高さに達するようにしたいと思うでしょう。他の水平線はアセンダー（デフォルトで800）、エックスハイト（500）、ディセンダー（-200）です。これらの値はファイル > フォント情報 > マスター（Glyphs Miniでは単にファイル > フォント情報）で変更できますが、値は同じような範囲に保ってください。値を大きく変えすぎると、後で頭痛の種になることがあります。これについてさらに読みたいですか？ありますよ：縦のメトリクスチュートリアルです。

2本の垂直線は、左と右のサイドベアリングを示しており、しばしばLSBとRSBと略されます。これらの間の距離は、アドバンス幅または単にグリフの幅と呼ばれます。これらは下部の灰色の情報ボックスで変更できます。

プレースホルダー画像は、グリフに何らかの描画がされるとすぐに消えます。では、単純にアイコンを描画またはペーストしてみましょう。

フォントレンダリングのためにパスを最適化するには、すべてのパスを選択し（または何も選択しない状態にし）、次のコマンドを呼び出します。パス > パスの向きを修正（Cmd-Shift-R）、次にパス > 極点を追加、そして最後にパス > パスを整頓（Cmd-Opt-Shift-T）です。Glyphs Miniでは、これらのコマンドはグリフメニューにあります。良いパスを良くするものについてもっと知りたい場合は、良いパスを描くチュートリアルを読んでください。

灰色のグリフ情報ボックスのLとRのフィールドに数字を入れて、左と右のサイドベアリングを調整するのを忘れないでください。良い値がわからなければ、LSBとRSBの両方に50から始めてみてください。

サイドベアリングは後からいつでも変更でき、フォントタブで選択したすべてのグリフに対して一括で設定することもできます。スペーシング（書体デザイナーがサイドベアリングを調整するプロセスをこう呼びます）についてもっと学びたい場合は、スペーシングチュートリアルを読んでください。

おめでとうございます、アイコンフォントに最初のアイコンが入りました！ここで再びフォントを保存し（Cmd-S）、テキストツール（T）に切り替えて、アンチエイリアスのかかった美しい姿のあなたの作品を鑑賞するのに良いタイミングです。

グリフの前（つまり左側）にカーソルを移動し、編集ツール（ツールバーのペンのシンボル）を選ぶか、単にEscキーを押せば、再びグリフを編集できます。

ピクセルパーフェクション

ピクセルパーフェクションは完全に過大評価されています。しかし、もし本当に、どうしても必要なら、ピクセルパーフェクションチュートリアルを読んでください。

グリフをまとめて作成する

グリフ > グリフを追加…（Cmd-Shift-G、Glyphs Miniでは利用不可）を使って、複数のグリフを一度に作成できます。名前をスペースまたは改行で区切って入力します。例：

uniE000
uniE001
uniE002
uniE003
uniE004
uniE005
uniE006
uniE007
uniE008
uniE009
uniE00A

…といった具合です。生成ボタンを押すと、グリフがフォントに追加されます。編集タブが開いている場合は、サンプル文字列にも挿入されます。

フォントをテストする

理論的には、ファイル > 書き出しでフォントを書き出すだけで（詳細は後述）、準備完了です。しかし…

未完成のフォントを試用する際には一つの問題があります。それはフォントキャッシュです。真面目な話、フォントをテストすると決める前に、これら2つのチュートリアルを読んでください。まず、フォントキャッシュの問題を解消する、そして、もしMacにAdobeアプリがあるなら、Adobeアプリでフォントをテストするです。

私たちが遭遇するサポート問題のほとんどは、フォントキャッシュの問題です。ですから、信じてください、これら2つの記事を注意深く読めば、あなたの人生ははるかに楽になります。読まなければ、悲しみと苛立ちがあなたを待っています。あなたの選択ですが、警告しなかったとは言わせませんよ。

ウェブフォントを書き出す

GlyphsはOpenTypeフォントのみを書き出します。アイコンが揃ったら、ファイル > 書き出し（Cmd-E）を選び、表示されるダイアログでOTFを選択します。ここでアウトラインの種類を選択できます。CFFまたはTrueTypeです。両方を試して結果をテストし、どちらが見栄えが良いか確認してください。でも正直なところ、もはや大差ありません。TrueTypeはアウトラインが変換されることを意味し、その結果シェイプがわずかに不正確になる可能性があります。次にファイル形式を選びます。ウェブ用にはWOFFとWOFF2を選びます。万が一のためにオーバーラップを削除は良い考えです。しかし、アイコンフォントでは自動ヒントはオフにしなければなりません。（なぜかはここで読んでください。）。フォントの書き出し先もすぐに選択できます。複数回書き出す場合に便利です。

特にバージョン9以前のInternet Explorer用にEOT、そして他のすべてのブラウザ用にWOFF 2の両方に変換することをお勧めします。

ウェブページにアイコンを配置する

さて、ウェブフォントができたところで、どうやってこれらのアイコンをウェブページに配置するのでしょうか？EOTとWOFFのためにfont-faceを作成する方法はご存知だと仮定します。もし知らないなら、これやこれやこれ、あるいはGoogleで見つかる他の情報を読んでください。

font-faceを宣言したら、CSSに次のような疑似セレクタを導入します。

[data-icon]:before {
   font-family: "My Icon Font";
   content: attr(data-icon);
   speak: none;
}

HTML5のdata属性はCSSを汎用的に保つので、アイコンごとに特別なクラスを宣言する必要はなく、data-iconを再利用できます。HTMLコードにアイコンを挿入するには、aria-hidden属性を持つ空のspanを使います。

<span aria-hidden="true" data-icon= "">

data-icon属性にUnicode値E000が見えますか？この方法なら、コンテンツは意味的に健全なままであり、したがってスクリーンリーダーに優しくなります。もっと一般的に言えば、デバイス非依存になります。

気の利いた方法ですね。ウェブフォントを楽しんでください！そして、ピクセル画像（やSVG）ソリューションに対する速度向上を享受してください。

Markus Greve氏のtgm Webfontday 2012での素晴らしい講演に感謝します。

便利なスクリプト

mekkablue scripts（ウィンドウ > プラグインマネージャー > スクリプトで利用可能）には、Test > Webfont Test HTMLというスクリプトがあります。書き出し後にこれを実行すると、WOFFの書き出し先にあなたのフォント用のHTMLが作成されます。そして、超便利なことに、お気に入りのブラウザですぐにそれを開いてくれます。

更新履歴 2016-05-02: Glyphs 2向けに更新

更新履歴 2022-08-01: タイトル、スクリーンショット、関連記事、軽微なフォーマットを更新

更新履歴 2022-08-03: 便利なスクリプトを追加し、書き出しに関する段落を書き直し

すべてのチュートリアルを見る →