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

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

画像アイコンは少し大変

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

Webフォントとは

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

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

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

Related Posts

Vimeoのレスポンシブ動画埋め込み対応ができない時

Vimeoのレスポンシブ動画埋め込み対応ができない時

Vimeoは色々カスタマイズもできてホームページに動画を埋め込みたい時は便利なサービスです。 ただ、最近ではレスポンシブデザインのサイトが多くなっているので固定サイズのまま埋め込むとおかしなことになってしまいます。 Vimeoの埋め込みコード発行はレスポンシブにも対応しているのですが、オプションのカスタマイズ設定をしないと対応できないので注意が必要です。 オプションのカスタマイズ設定が見当たらない場合...

重要 総額表示義務化に伴うホームページ修正キャンペーン

2021年4月より総額表示が義務化されます。 今まで経過措置として10000円(税別)の記載でホームページ上OKだったものも11000円(税込)等に修正する必要があります。 主な対象としてはBtoC(不特定への一般消費者向け価格表示)であり、 具体的には接骨院、歯医者、眼科、皮膚科等のクリニックやサービス業、ECサービス等幅広く対象とされています。 まだご自身のホームページを修正されていない場合はお早めにご対応下さい。 なお、弊社では初めてのクライアント様は特別料金(無料~)で対応させて頂いています。...

Youtube活用

ウェブサイトで文字だらけのページを見るといくら内容が充実していても読んでみようという気持ちのハードルが上がってしまいます。