東京のWeb制作会社LIGLIGならできるおもしろいこと。デザインシェアどうも!デザイナの王です。2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。有名所ではシャープのIGZO(約500ppi)、ジャパンディスプレイのLTPS(約650ppi)などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという!4K時代の到来を予感させる!(その前に地球が終わらなければいいのだが!)ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。そもそも♥「シンボルフォント」♥って何?読んで字の如し、「図形のフォント」です。タイトルの♥マークがそれに該当する。普通のフォントとは違い、フォントのそれぞれの文字を文字としてではなく、図形として表示するフォントのことです。新しいものでも何でもなく、大昔からあるものだが、WebFont(@font-face)の台頭で急速に注目を集め始めたのです。ところで、面白いのはMacではこんなカラフルなフォントまで存在しているのだw将来的にはWebでもこんなカラフルなフォントが使えたらいいなぁと思っております!厳密に言えばsvgを使えば今すぐでもできるのですが。CSS-Tricks※有料のと無料のが混在してます。シンボルフォントを使うメリットシンボルフォントを使うことで、これらのメリットがあると考えられます。いかなる高解像度のデバイスでも鮮明に表示できるサイズ・色・text-shadow・transitionなど、CSSで制御可能ベクターなので軽い一貫性のあるデザインを手軽にできちゃう!作業効率アップ!シンボルフォントを使うデメリットいいことずくめでしたね。!問題点もちょっとあります。アイコンはセットでついてくるので、セットでの使用を余儀なくされること。言い換えるとセットの中のとある一つのアイコンだけ使ってるのに、フォントごとダウンロードすることを強要される。アイコンを用意してくれるのはありがたいけど、場合によっては独自のアイコンも自作することもある。いう場合はベクターのアイコンをフォントに変換したり、フォントのレンダリングの設定をしたりなど、専門知識も必要だし、何かと面倒だよなぁ!フォントのわけだから、記述とかどうするの?SEO的には大丈夫?という疑問がある。シンボルフォントの問題点を解決!IcoMoon上記挙げた問題を完璧な解決策を提供してくれるウルトラありがたいWebアプリがあるのです!その名もIcoMoon、なんと凛々しいお名前!今日は重点的にこのIcoMoonについて、紹介していきたいと思います。1.アプリの公式ページに行く.※Chromeユーザならオフラインでも使える拡張アプリが提供されています。インストールはこちら。Icons」をクリックして独自のベクターファイル(SVG)或いは別のシンボルフォントを読み込むことも出来る。3.でお持ち帰りです!これで使いたいアイコンだけで構成された一つのシンボルフォントを生成して、必要なcssファイルなども合わせてzipにまとめてくれます。※下図のように、このステップでアイコンに好きな文字を割り当てることができます。IcoMoonで作成されたシンボルフォントを使う生成したZipを解凍すると、専用のCSS(style.css)が用意してあるので、まずそれを読み込む。IE6-7に対応したい方はIte-ie7.jsも合わせてインポートしておこう。src="lte-ie7.js"></script><![endif]-->アイコンのマークアップアイコン自体は実際に一つ一つの文字なので、まずはfont-familyでシンボルフォントを指定して、仮に「f」を「♥」にマッピングされた場合、キーボードで「f」と打てば、アイコンの「♥」になります。この時「ハート」と「f」は直接な関連性を持たず、意味的な解釈ができなく、SEO的にもマイナスなので、なるべくこういうマークアップの仕方は避けておいたほうがいいでしょう。IcoMoonで生成されたstyle.cssを使えば、直接文字そのものを使う代わりに、意味を持った「クラス名」、或いは「dataプロパティ」でアイコン指定が可能です。“-icon”というプリフィクス(step3.で変更することも出来る)をつけて、値は割り当てられた文字になります。割り当てられた文字忘れたという方は、解凍したフォルダのindex.htmlを開いて確認することができます。クラスを使う場合クラス名はstyle.cssの中に記述されてますので、そこからコピペして使います。個人的にはclassを好みますが、どっちでも一緒ですが。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。