スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

  • あとで読みたい人は…

ちは、@cappeeです。

スマホサイトのコーディングは軽量化が命です。PC版の見出しやメニューなどで使っているアイコンを、スマホ版でもそのまま画像で使ってしまうと重くなってしまいます。

だからと言ってアイコンを使わないのも。。

という悩みはアイコンフォントで解決です!画像のアイコンをWebフォントに変換して使います。

配布されているWebアイコンは商用利用可でない場合もありますので、なら手持ちの画像を自分でWebフォントに変換してしまいましょう。

[2013.5.8追記]Unicodeを使ったWebフォントの場合、一部のAndroid端末でデフォルトで指定されているだろう絵文字が表示されてしまうことを確認しました。文字コードの調整で解決できそうですが、Android対応サイトの場合は十分ご注意ください。そして解決策あれば教えてください!

アイコンフォントを使うメリット

  • スマホサイトなどより軽量化が求められる場合に有効
  • Retina Displayに対応する倍のサイズの画像を用意する必要がない
  • HTTPリクエストがないため高速化につながる
  • gzipで圧縮も可能
  • フォントなので色、サイズの変更が容易
  • CSS3を使ってスタイルの設定ができる

Fireworksで画像をSVGにする

アイコン画像を用意

055515c9c2f03e5283f15203555a16e0 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

まずはWebフォントにしたいアイコン画像を用意します。アイコンの画像は下記の3点に注意してください。(私は2と3でつまづきました)

  1. 画像はパス化する
  2. カンバスを画像に合わせる(Ctrl+Alt+F)
  3. 背景色は透明にする

Fireworksの拡張機能「Export」をインストール

Fireworksの拡張機能に画像をSVGにしてくれる「Export」をインストールします。
Export.mxp をダウンロードして、ダブルクリックするとExtension Managerが立ち上がってインストールできます。

SVGファイルに変換

Export 300x229 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

[コマンド]→[書き出し]→[Export SVG]で画像をSVGに変換します。

複数の画像を一括でSVGにする

画像をページ毎に用意

ddcc9ca44410a85f9ccb32b074e22671 300x108 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

複数の画像を一括でSVGに変換したい場合は、画像をページ毎に準備します。(Fireworksのページ機能のことです)

ページのタイトルを指定すると、SVGのファイル名となって書き出されます。

SVGへ一括書き出し

5dbd9b921b436afc75579310e0fbd707 300x132 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

上記と同じように[コマンド]→[書き出し]→[Export SVG]を選択すると、「全ページ書き出しますか?」というアラートがでるので「はい」を押して書き出すフォルダを選択すれば、ページ毎のアイコンがSVGファイルとなります。

SVGをWebフォントに変換する

「IcoMoon」にSVGをインポート

 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

IcoMoon」というアイコンフォントの配布サイトで変換します。

IcoMoon は、自作のアイコンフォントだけでなく、3種類のフォントセットの中から好きなものを選択してパッケージ化してダウンロードすることができるという素敵なサイトです。
[参考サイト]IcoMoon : 好きなアイコンをピックアップしてWebフォントにできるサービス

74cded622693d6b17fc4959ca816ba0f スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

SVGをWebフォントに変換するには、左上の[Import Icons]という赤いボタンをクリックして、SVGファイルを選択(複数可)し、インポートします。

アイコンをWebフォント化

772ba39bd3a62bbe4c23b5d6e8e38c591 300x98 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

もしアイコンが選択されていない状態だったら矢印の[Select]ボタンをクリックし、Webフォントに変換したいアイコンを選びます。(選択されているとオレンジ色の枠がつきます)

次に画面下に表示されている[Font]ボタンをクリックし、アイコンをWebフォント化します。

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

4c165b83dabbd719bcb2a296c39d80e0 300x129 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

画面下の[Download]ボタンよりアイコンフォントをダウンロードします。

ファイルにはttfデータも含まれていますので、PCにインストールして利用する場合はアイコンの上の方に英数字を入力してキーボードと関連付けをします。

Webフォントを確認

6750a486d9c8382e51841b9f44dcc5fe 300x222 スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

zipファイルを解凍すると、表示や記載例が書かれたHTMLファイルがあるのでブラウザで開いて確認してください。

アイコンフォントを使用する

ダウンロードしたHTMLファイルの通りに記載すれば大丈夫です。
必要な部分だけを抜粋してご紹介します。

HTML

<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<span aria-hidden="true" class="icon-home"></span>
<span aria-hidden="true" class="icon-balloon"></span>

書き出されたCSS

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-home, .icon-balloon {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-home:before {
content: "\68";
}
.icon-balloon:before {
content: "\62";
}

特にスマホサイトへの利用はメリットが大きいですので、アイコンフォントをうまく活用していきたいですね。

[参考サイト]
パス画像をFontに変換!「icoMoon」を使ってみた。
Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる

Pocket
article clipper スマホサイトを軽量化!アイコン画像をWebフォントに変換して使用する方法

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>