はじめまして！ デザイナーのみやです。
この前、黒猫が襲ってきたと思ったら風に舞ったゴミ袋でした。
刺激の多い毎日で充実しております。
突然ですが、アイコン使ってますか？
サイトデザインに欠かせない要素の一つとしてアイコンがあります。
適切なアイコンを置くだけでユーザーの理解を高めることができますが、みなさんは普段デザインするときにどのようにアイコンを用意していますか？
おそらく素材サイトで探してきたり、一つ一つ作成したりと様々だと思います。
ただ、配布されているアイコンセットは数が多くなかったり、始めからすべて作るとかなりの手間だったりと、時間がかかってしまっているのではないでしょうか。
そんなとき便利なのがアイコンフォントです。
そこで今回はアイコンフォントをPhotoshopでのデザインに取り入れ、デザインの効率化を図る方法をご紹介します。
アイコンフォントとは
アイコンフォントとは、簡単に言うとWebフォントのアイコン版です。
Web上のフォントファイルを参照し、CSSで指定したアイコンを表示できる技術です。
もちろんフォントなのでCSSで色や大きさを自由に変更したり、解像度の高いデバイスで閲覧したりしてもボヤけることがないというメリットがあります。
1. アイコンフォントをインストール
それでは、実際にアイコンフォントを使ってみましょう。
商用利用可能なアイコンフォントをピックアップしました。
各リンクからダウンロードを行い、インストールをしましょう。
Fontelico
https://github.com/fontello/fontelico.font
アイコンの数自体は多くありませんが、表情やローディングアニメーションが用意されていて、他のアイコンフォントとは一線を画すアイコンが揃っています。
Font Awesome
http://fortawesome.github.io/Font-Awesome/
600弱のアイコンが用意されており、これひとつでかなりの表現をカバーできます。
こちらは目にしたことがある方も多いのではないでしょうか。
Entypo
角が丸い優しい印象のアイコンが約250種類用意されています。
淡い印象のサイトや女性的なデザインによく合いそうです。
Typicons
こちらも角の丸い、かわいい印象のアイコンが用意されています。
細かい部分の作り込みが素晴らしく、縮小しても視認性が高いです。
Iconic
こちらは直線や角を上手く取り入れたシャープな印象のフォントアイコンです。
220個のアイコンが用意されています。
Meteocons
http://www.alessioatzeni.com/meteocons/
ウェザー系のアイコンが充実しています。
天候や気温などを扱う場合に重宝しそうなアイコンフォントです。アイコン自体にもクセが少なく、どんなデザインにもマッチしそうな印象です。
すべてのアイコンフォントをインストールする必要はなく、自分が使うものだけで構いません。
次は利用するアイコンフォントを選んでいくのですが、複数のアイコンフォントを一括で管理できるサービスを利用します。
2. 「Fontello」で使用したいフォントを選択
次に、「Fontello」でフォントを選択しましょう。
「Fontello」は様々な種類のアイコンフォントを横断的に利用することができる便利なサービスで、ご紹介した以外にも多くのアイコンを使用することができます。
自分が必要なアイコンだけをパッケージして使用できるため、より広い表現をカバーすることができます。
先ほどご紹介したアイコンフォントは、このサービスで使用できるものばかりです。
以下の手順で、アイコンを選択しましょう。
1. 使いたいアイコンを選択
クリックで使いたいアイコンを選択していきます。
2. アイコンをコピー＆ペースト
アイコンを選択後、「Customize Names」のタブをクリックすると、選択したアイコンの一覧が表示されます。
こちらは本来アイコンの名前をオリジナルのものに変更するための画面ですが、この画面のアイコンは選択も可能なので、コピーして自在に使用することができます。
3. 該当アイコンフォントを選択
あとはPhotoshopにペーストしてフォントを選択するだけでデザインに組み込むことができます。
4. テキストフォントと同様に編集が可能
テキストフォントと同じように、サイズや色の編集が可能です。
もちろんIllustratorでも同様に使用することができます。
さいごに
今回「Fontello」というサービスを利用したのは、アイコンを一覧で見られるのでトンマナを合わせやすいだけでなく、デザインからコーディングまでをスムーズに行えるためです。
コーディングの際にアイコンをスライスする必要がなくなり、CSSで指定するだけで表示できるため作業時間が短縮できます。
また、後々変更が必要になった場合もCSSの変更だけで済み、メンテナンス性の向上にもつながります。
あまり制作期間が取れない場合など、ひとつの方法として参考にしていただけると幸いです。
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
