Blogブログ

2014.06.11

web制作

web制作の修正が楽になる(?)小さくてかわいいwebアイコンフォント

初めまして、unzipでwebと紙のデザインをしているコウムラです。
このブログは半分備忘録として、もう半分は日々になにか役立つことが紹介できればと思っております。
あ、あと社内への発信も。

いやあそれにしても、小さいものってかわいいですよね。
動物も生後3ヶ月までは絶対みんなかわいいですもんね。
ということで、今日は僕が最近感動したwebのちいさいもの

webアイコンフォント

について書いていきたいと思います。凄く画期的ですよねこれ。(なによりアイコンがかわいい)

web制作側のメリット
  1. フォントなのでテキストとのベースラインが合わせやすい
  2. フォントなので拡大縮小はcssのfont-sizeで指定出来る
  3. フォントなのでcssで簡単に色を変えられる
  4. ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。

といいことづくしな感じです。
日本語のwebフォントだと文字数も多く、データ容量が大きくなりがちですが自分で選択して(サブセット化のようにして)使うことも出来ます!

http://fontello.com/

むしろ、”ここのアイコンはこれじゃないと!”という時には、
イラレで作成したものをアップするとwebアイコンフォントとしてまとめてくれるサイトも有るようです。

http://liginc.co.jp/web/design/font/33237

デメリット
  1. 単色しか使えない
  2. SEO的にビジュアルのためにテキストを入れるので、HTMLの構造的に適切でないものになる
  3. 自分で作成する場合アイコン、フォントデータ、コードの用意など、汎用性を高めるのに手間がかかる

というとことでしょうか。
単色のみに関してはアイコンは単色こその魅力だと思っているので問題は無いと個人的にはないかと、後はCSS3を使えばまたちょっと変わった表現もできるかなと。
SEOに関しては、リガチャ(合字)やIE8から対応の疑似クラス「:after」「:before」などで回避も出来るようです。

http://design.kayac.com/topics/2012/02/webFontIcons.php

自作でのデータ作りは仕事内容やケースで使い分けていくべきなのかと感じますね。
まだ個人や社内レベルでしか使いづらいかと思いますが、こんなアイコン×webフォントのように面白い組み合わせや新機能で楽しく効果のあるサイトが作れるようになりたいですね!

この記事を書いた人

blogger1

blogger1エンジニア

blogger1と申します。

最近書いた記事

Contactアンジップへのお問い合わせ

お問い合わせ・お見積りは無料です。
ホームページ制作・システム制作からブランディング提案まで全てお任せください。

お問い合わせはこちら