スマートフォンでアプリやスマホ専用サイト等を使用する際に、「設定」だと歯車、「タイマー」だと時計、「ホームボタン」だと家などアイコンをタッチして操作することがあるかと思います。
普段あまり意識していませんが、アイコンを使うことにより、文字として「ホーム」とするよりもより直感的に分かりやすく操作ができ画面スペースも抑えることができます。
そんなアイコンですが、ゼロからイメージに合うアイコンを作るのも大変なので素材を利用してみましょう。
「アイコン 素材」と検索すれば色々なアイコンが出てくるかと思います。
画像アイコンは少し大変
素材を利用すると比較的簡単に反映できますが、画像で作られた素材アイコンで大変なのは大きさや色を変える場合。
画像加工ソフトを立ち上げて加工・・それをアップロードとひと手間かかってしまいます。
そんな時に便利なのがWebフォントのアイコンを利用する方法です。
Webフォントとは
ホームページなどを作成する際に制作側でブラウザに表示させるテキストのフォントを指定することができます。但し、閲覧者側のパソコンに指定のフォントが入っていない場合、代替で表示されたりと意図通りのフォントを表示させることができない場合があります。
従来は画像としてテキストなどを作ることもありましたが、その場合はやはり大きさや色を変えるなど変更があった際に大変ですし検索エンジンからもテキストとして認識されません。
そんな時に利用するのがWebフォントです。Webフォントはサーバー上にフォントファイルが置かれるため閲覧者のパソコン内に指定フォントが入っていなくても表示させることができます。
Webフォントでアイコン利用
アイコンもWebフォントとして用意されたものを使用することができます。使えるアイコンの詳細は下記等ご参考下さい。
http://fortawesome.github.io/Font-Awesome/icons/
http://typicons.com/
画像と違いテキストデータなのでCSSを使って装飾ができ拡大縮小や色づけなどをする場合は大変便利です。
アイコンを利用したホームページ制作などを考えている場合はご相談下さい。
