開発日記(2013/09/27)

本日はモバイル対応のツールバーで使用するアイコンを作成中です。アイコンはWebフォントを利用する予定ですが、アイコンに画像を利用した場合と比較して次のようなメリットが挙げられます。

Glyphs Miniを利用して作成中のフォント

Glyphs Miniを利用して作成中のフォント(クリックして拡大)

1つ目は、画像と比較して加工が容易である点です。例えばツールバーの背景色を変更した場合、それに応じてツールバー上にあるアイコンの色も変更する必要があるでしょう。画像であれば追加で作成することになりますが、アイコンがフォントであればCSSで色指定を行うだけで対応できます。もちろん、シンプルな塗りの場合に限られますが、最近流行のフラットなデザインの場合は問題なさそうです。

2つ目は、iPhoneやiPadで採用されているRetinaディスプレイなどの高解像度ディスプレイでも美しく表示できる点です。これはモバイル対応の1つとして有効です。アイコンを画像にしている場合、高解像度ディスプレイに対応するには別途高解像度用のファイルを用意する必要があります。しかし、フォントを利用した場合はそのような対策が必要はありません。そのままで美しく表示することが可能です。

FMPress Publisherで自動生成したWebアプリをお試しください

Publisherのライブデモを試す