アイコンを簡単に作れる?Webフォントの利用

Webアイコン
スマートフォンでアプリやスマホ専用サイト等を使用する際に、「設定」だと歯車、「タイマー」だと時計、「ホームボタン」だと家などアイコンをタッチして操作することがあるかと思います。
普段あまり意識していませんが、アイコンを使うことにより、文字として「ホーム」とするよりもより直感的に分かりやすく操作ができ画面スペースも抑えることができます。
そんなアイコンですが、ゼロからイメージに合うアイコンを作るのも大変なので素材を利用してみましょう。
「アイコン 素材」と検索すれば色々なアイコンが出てくるかと思います。

画像アイコンは少し大変

素材を利用すると比較的簡単に反映できますが、画像で作られた素材アイコンで大変なのは大きさや色を変える場合。
画像加工ソフトを立ち上げて加工・・それをアップロードとひと手間かかってしまいます。
そんな時に便利なのがWebフォントのアイコンを利用する方法です。

Webフォントとは

ホームページなどを作成する際に制作側でブラウザに表示させるテキストのフォントを指定することができます。但し、閲覧者側のパソコンに指定のフォントが入っていない場合、代替で表示されたりと意図通りのフォントを表示させることができない場合があります。
従来は画像としてテキストなどを作ることもありましたが、その場合はやはり大きさや色を変えるなど変更があった際に大変ですし検索エンジンからもテキストとして認識されません。
そんな時に利用するのがWebフォントです。Webフォントはサーバー上にフォントファイルが置かれるため閲覧者のパソコン内に指定フォントが入っていなくても表示させることができます。

Webフォントでアイコン利用

アイコンもWebフォントとして用意されたものを使用することができます。使えるアイコンの詳細は下記等ご参考下さい。
http://fortawesome.github.io/Font-Awesome/icons/
http://typicons.com/
画像と違いテキストデータなのでCSSを使って装飾ができ拡大縮小や色づけなどをする場合は大変便利です。
アイコンを利用したホームページ制作などを考えている場合はご相談下さい。

Related Posts

2021年7月2日にGoogleのコアアップデートが実施されました

2021年7月2日にGoogleのコアアップデートが実施されました

2か月ほど前になりますが、Googleからコアアップデートの実施がアナウンスされ、SEO会社などからの変動分析などもあがってきているのでご紹介します。 なお、7月以前には6月3日にもアップデートが実施されており、7月のアップデートは6月の残りとして一連のものと公式では発表されています。 コアアップデートとは? まず前提としてコアアップデートとはなんでしょうか。...

Windows 11登場。何が変わる?ポイント

Windows 11登場。何が変わる?ポイント

先日マイクロソフトからWindows11のリリース予定が発表されました。 正式には2021年の後半登場予定のようです。 windows10が2015年に登場してから6年ぶりのメジャーバージョンアップです。 Windows10が出た当時はWindows10が最終バージョンと言っていたようなので掟破り感はありますが、Windows7のサポートが昨年終了したり、IE11のサポートが来年切れたりと技術は日々進歩しているのかもしれません。 参考:IE11(Internet Explorer)サポート終了が2022年6月16日...

パソコンから簡単にスマホ表示を確認

パソコンから簡単にスマホ表示を確認

調べ方 スマートフォンからサイトを表示すればスマートフォン対応されているかどうか一発で分かりますが、パソコンで作業を行っている時にスマートフォンを触るのも手間です。そんな時、パソコンからでも疑似的にスマートフォン時の表示を確認することができます。 Googleクロームの場合は下記です。※MicrosoftEdgeの場合も同様 1、キーボード上部のF12を押す。 2、デバイスサイズの切り替えボタン。 3、念のためページの再読み Ctrl+F5 4、上記でデザインが変わった場合はスマートフォン対応されたサイトです。...