ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！
今回はブログリニューアルで使用した中から「Webフォントアイコン」についてを語ります。
画像を使わない事を心がけてデザイン
ブログという形態である以上、画像を使用するページが多くなってしまいます。
そこでベースとなる部分にはサイトの軽さを意識して画像を使わずに表現しようと決めていました。
そこでWebフォントアイコンの登場です。
Webフォントアイコンを使うメリット
Webフォントアイコンを使用する事でこのようなメリットがあります。
- いくらでも大きくできる。
- Retinaディスプレイにも問題無し
- CSSを使えばサイズ・色も簡単に制御可能
- CSS3でリッチな表現も簡単。
画像でアイコンを制作した時と比べると修正が必要となった時の手間が段違いです。
WebフォントであればCSSで色・サイズを変更できるので調整がしやすい。
そして昨今、Retinaディスプレイによってデザイナーが泣かされている中でWebフォントアイコンを使用すれば、Retinaなんて関係ないのです！
今回はフラットデザインでの使用でしたのでベタ塗りで使いましたが、CSS3のtext-shadowなどを使えばボタンのように見せる事もできます。
では、そのWebフォントアイコンはどうやって作るのか？
IcoMoonというサイトが便利
Webフォントアイコンを作ることができるサイトは数々ありますが、オススメなのが「IcoMoon」
ここで使いたいアイコンを選んで書き出すだけでCSSファイルと選んだアイコンが入ったファイルがダウンロード。
制作したHTML・CSSに組み込む事で簡単に使用できます。
icomoonではオリジナルのアイコンも制作できちゃいます
今回、ドウラクで使用したアイコンでabout、Feedly、LINE、はてなブックマークは自分でトレースしました。
手順は簡単でIllustratorでSVG形式のファイルで書き出したファイルをicomoonのサイトで読み込むだけでオリジナルのWebフォントとして書き出す事ができます。
手順1. Illustratorなどで画像をトレース
Pocketのトレースしたデータです。
手順2. SVGファイルで書き出す
この時に注意したいのはトレースしたデータを保存する際のアートボードのサイズです。
今回は50×50のアートーボード内に配置をしました。
手順3. icomoonで読み込む
インポートボタンから制作したデータを選択します。
選択してインポートが完了すると1番上の段の「Your Custom Icons」に表示されます。
手順4. 選択して書き出し
あとは簡単です。
選択して書き出すだけ！
これでオリジナルのアイコンがWebフォントとして使用可能になります。
「既存のデータだと満足できない！」「欲しいアイコンがテンプレートにない！」という方はオリジナルでアイコンを作ってみてはいかがでしょうか？
需要があるか分かりませんが、今回トレースしたFeedly、LINE、はてなブックマークのSVGファイルを公開しておきますので、ご自由にダウンロードして使ってください。
おまけでPocketも同梱しておきました。
※@sw2xがトレースしたものなので完全なオリジナルで無い事を理解した上でダウンロードして下さい。また、各ロゴマークの著作権は各団体に帰属します。
今回はWebフォントを使ったことを紹介しました
今回はフラットデザインでの制作ということでアイコンを画像で使わずWebフォントにして制作をしました。
Webフォントにする事で、「細かいサイズ変更」や「背景によって簡単に色を変えられる」などができるのでとても便利です。
画像で制作してしまうとPC用とスマホ用とタブレット用さらにはRetinaディスプレイ用と作らなければキレイに表示はできないのでアイコンを使う事を考えたらWebフォントをオススメします。
今回は表面的な部分を紹介しました。
デザイン面で見ると特筆すべきはWebフォントくらいしかありません。
次は内部(HTML,PHP,CSS)についてご紹介していきます。
