2018/02/22

ベクターのアイコンをWebフォントに変換する環境をつくる<第1部>

こんにちは、ドリーム・アーツのプロダクトデザイン本部で、ビジネスチャット「知話輪®」のPC版アプリを担当している @rettar5 です。普段はWindowsとMac向けのアプリの開発をしています。

今回は、その開発中にハマってしまった、Webフォントを使ったアイコンについてお話しします。

PC版の「知話輪」では、画面のデザインやアイコンにSemantic UIというOSS(Open Source Software)を利用しているのですが、これに関してちょっと困ったことがありました。
それは、どうしても機能に対するイメージと、Semantic UIのアイコンのイメージがズレてしまったり、アイコンの形や色によっては全体のバランスが崩れてしまったりする、という問題です。
まずはこちらをご覧ください。

Semantic UI icon

これは、いわゆるタスクToDoをイメージしたSemantic UIのアイコンです。
「知話輪」にも自分がやるべきことを管理するToDoの機能がありますが、このアイコンでは少し「知話輪」のToDoとイメージがズレてしまいます。
とはいえ、「知話輪」の開発チームは毎週最新バージョンをリリースしていて、専用のアイコン作成にまで時間を割けず…一旦はPNG形式の画像をアイコンとして使用していました。

知話輪PC版 ToDo拡大

Semantic UIのアイコンはベクターの画像。しかしToDoのアイコンだけラスターの画像。
よーく見ると少し浮いて見え、画像ではわかりませんが、クリック時の色の反転などもタイミングがズレてしまいます。
また今後、オリジナルのアイコンを表示したい、といったUI/UXデザイナーからの要望もあるでしょう。
そのため、今回ベクターのオリジナルアイコンを表示できるようにするというチャレンジをしてみました。

が、これがなかなかハマってしまい…。
ということで、今回チャレンジした内容を2本立てでお送りします。
この第1部では「Webフォント変換環境の構築からWebページ上に表示するまで」、第2部では「Webフォントに変換できるアイコンの作成」についてです。


ここからようやく本題のベクターのアイコンをWebフォントに変換する話に入ります。
ベクター形式のひとつであるSVGで書き出した画像ファイルをWebページ上に表示するには、HTMLのSVGタグを使う方法や、スタイルシートを使って表示する方法などがあります。
ですが、今回はWebフォントに変換し表示するようにしました。その理由としては、

  • フォントにすることで、簡単に色を変えることができる
  • アイコンと文字はセットで表示することが多く、スタイルシートで微調整ができるフォントが扱いやすい
  • Semantic UIのアイコンもフォントで表示されているため、コードの可読性を落とさず適用できる

などがあります。
というわけで、早速実装です。

今回作成するプログラムはGitHub上に公開しているので、わからなくなった際は参考にしてください。
また、プログラムの実行にはNode.jsが必要になるため、必要に応じてインストールをしてください。

それでは、まずはじめに作業用のフォルダーを作成しましょう。

フォントの変換にはNode.jsのgrunt-webfontを利用するため、最初にnpmの初期化をしてpackage.jsonを生成します。

対話形式でプログラム名などを確認されるので、適当な名前を入力してください。
次に、必要なライブラリを追加していきます。

ライブラリが追加できたかどうかは、npm listで確認ができます。
ライブラリ名の@以降に差があるかもしれませんが、gruntとgrunt-webfontが表示されていれば問題ありません。

Gruntfile.jsというファイルを作成して、以下の内容をペーストしてください。

最後に変換元のSVGファイルを保存するフォルダーを作成します。

これで変換する準備ができました。

フォントへ変換するSVGファイル(todo.svg)をフォルダーchiwawa_svgsにコピーし、以下のコマンドを実行することでフォントへの変換処理が実行されます。

変換されたフォントはdistというフォルダーの下に保存されています。

fontsの下に保存されている.eot.ttfなどがフォントファイルです。
stylesの下にあるchiwawa_fonts.cssがフォントに対応するスタイルシートで、今回はCSSが生成されています。
同じくstyleschiwawa_fonts.htmlがデモページと呼ばれるもので、ブラウザで開くと生成したフォントの一覧が表示されます。
今はchiwawa_svgsにひとつのアイコンしか入れていないためひとつしか表示されていませんが、今後アイコンの数が増えても、このデモページを見れば一覧で確認できます。

grunt-webfontのデモページ

生成されたフォントは、一緒に生成されたスタイルシートを読み込むことで使えるようになります。
フォントを挿入したい箇所にiタグを入力し、クラスにchiwawa_fontschiwawa_fonts_アイコンのファイル名を追加するとアイコンが表示されます。

test.html 画面キャプチャ

これで自分で作成したSVGファイルを、フォントとしてWebページ上に表示できるようになりました。
もちろんフォントなのでCSSで色を変えることもできますし、Node.jsが使える環境であれば、チームの他のメンバーでも簡単に使うことができます。
また、今回生成されたスタイルシートは、デフォルトのテンプレートから自動生成されましたが、テンプレートをカスタマイズすることもできます。
共通のクラスにスタイルを追加したい場合などに利用できますね。
テンプレートについての詳細なドキュメントは見つけきれませんでしたが、grunt-webfontのテスト用サンプルが参考になります。

さて、これでSVGファイルをフォントに変換できるようになりましたが、実はこれだけではうまく変換できないケースがあります。
原因は変換元のSVGファイルにあるわけですが…それは第2部で紹介します!
今回は以上です、お疲れさまでした!

Webフォントに変換できるアイコンを作成する<第2部>はこちら