» BASE91詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら

Font Awesomeを使ってみよう

知識と経験|2019年01月13日

2019年01月13日
  • このエントリーをはてなブックマークに追加

WEBデザインをしていると、アイコンを使う機会がたくさんあります。
近年は、文字よりもアイコンで情報を伝えることも多くなってきました。
テキストはアイコンよりも視認性で劣るので、的確なアイコンで素早く意味を伝えたいものです。

ただ、アイコンって、作るのがとても面倒だったりしますよね。
言葉の意味をビジュアルとしてデザインするのは、なかなか難しいスキルです。
時間も手間もかかるので、なるべく使いまわしていきたいものです。

実際、これまでは、illustrator等でアイコンを作り、ストックしていました。
過去に作ったアイコン集を作り、よく使い回していたのです。

しかし、今はすごく時代も進化して、そんなことする必要はなくなりました。
なぜなら、Font Awesomeというサービスが現れたからです。

Font Awesome
https://fontawesome.com/

Font Awesomeはソースコードに一行追加するだけで、数百パターンのアイコンを使えます。
もはやこれだけ質の高いパターンがあれば、作る必要なんてありません。
アイコンという面倒な作業を一気に短縮できるサービスなのです。

しかも、画期的なのは先程も言った通り、コードを1行追加する手軽さです。
ソースコードで描画できる特殊な形式を使用しているので表示も軽い。
わざわざ画像として切り出す必要さえありません。
また、どれだけ拡大・縮小しても、画像が荒れることもありません。
表示もキレイで軽くて、かつ変形しても荒れない。

さらに、大きさの調整やカラーの変更等もCSSで出来ます。
Font Awesomeは文字通り、フォントのように使えるアイコンなのです。
CSSでテキストに対してかけられるプロパティはすべて使えます。
ホント、至れりつくせりですね。

具体的な使い方について

それでは、ここから、具体的な使い方についてご説明していきましょう。
あまりにも簡単なので説明する必要さえ無いかもしれませんが。

まず、下記のソースコードを<head>の中に挿入してください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

上記が、Font Awesome用のタグを使えるようにする一文です。
Font Awesomeのサーバーから、必要なファイルを読み込んでいます。
準備はこれだけです。
あとはこちらから、使いたいアイコンを調べましょう。
日本語ではなく、英語で検索してください。

たとえば、pcで検索すると、このような結果が出ます。

グレーになっているアイコンは有料版ですね。
黒く色が塗られているアイコンがフリーで使えるものです。
黒く塗られているアイコンから、好きなアイコンをクリックします。

すると下記のような画面がでてきました。

あとは、ソースコードをコピーするだけです。
下記の赤枠内にあるソースコードをクリックするだけでコピーされます。

コピーしたら、お好きな場所にソースコードを貼り付けましょう。
選択したアイコンが表示されているはずです。

ちなみに、STARTOUTのアイコンも、全てFont Awesomeを使っています。

このように、設定用のファイルを読み込んで、ソースコードを貼るだけでアイコンが使えます。
今までは、こうしたアイコンもすべて自分で書いていたので、本当にありがたいサービスですね。
WEBサイト制作効率も大幅にアップしますので、ぜひ作ってみてください。

なお、デザインをする時は、まずデザインツールでデザインを作ると思います。
デザインツールではFont Awesomeを直接使えませんので、アイコンを画像で欲しいですよね。
デザインでFont Awesomeのアイコンを使いたい時は、下記のサイトが便利です。

http://fa2png.io/

上記のウェブサイトでFont Awesomeのアイコンを画像でダウンロードできます。
デザインをする際は、ぜひとも試してみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら