いつのまにか「Font Awesome」が新しくなってたので調べてみた




ランディングページ(LP)のデザインでフォームを導入しようと考えて「Font Awesome」にアクセスしてみたらページが新しくなってましたね。

サンプルコード付き。前回の記事の「Font Awesome」を使ってアンケートフォームをより見やすくしてみよう!

Font Awesome」はざっくり言うと、CSSでピクトグラム化したアイコンを読み込むサービスで、
フォーム部分のデザインでも難しいコードを書き込まずにカスタムできます。

なので、ランディングページ(LP)のデザインばかり制作している私にとってはとても重宝しているサービスです。
最近だと、アンケートフォーム型の広告をデザインするときに手早く用意できるし使い回せるので便利かと思っています。

では、「Font Awesome」を確認していきましょう。

無料で十分?「Font Awesome」は使いやすくなった?

基本的にはウェブアイコンの使い方は変わっていません。
旧バージョンも新バージョンもプロバージョンが存在していて60ドル程度支払えばライセンス付与され豊富なアイコンが使用できます。しかし、フォームタグのような使い回しがしやすいデザインなら無料で十分なのかなと思います。

さっそくCDNのURLを貼付けます

BootstarapCDN
link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”

前回同様でホスティングコードです。ここからいつでも最新のWebフォントが手に入ると考えていただければ良いと思います。尚、旧バージョンも使えるので時間がない場合は旧バージョンで進めましょう。

新しいフォントリストからアイコンをピックアップ

メニューの「icons」から一覧ページへ遷移します。必要なアイコンは検索してみましょう。
今回は「cheack」からアイコンを探します。

見つかったアイコンをクリックすると、コーディングに必要な詳細が確認できます。

コードを貼付ければアイコン表示が可能です。
Font Awesome」は専用のクラス名を使ってアイコンの大きさや色を変えたり、回転させたりできます。
このあたりの調整はお好みで試してみてください。

さいごに

サンプルコード付き。前回の記事の「Font Awesome」も使ってアンケートフォームをより見やすくしてみよう!

ランディングページ(LP)の広告デザインはスピード勝負です。
フォームデザインを一からこだわって制作するより「Font Awesome」のような準備されたサービスを活用してどんどんコンテンツを量産していきましょう。

この記事はここまで!

ここからはよく読まれる記事をまとめてご紹介します。
ひとあじ違うデザインノウハウに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

【男性編】薄毛・育毛・増毛商材向けランディングページ(LP)デザインについてまとめてみた

2018.08.05

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27

電通グループが開発したAIのバナー自動生成ツールADVANCED CREATIVE MAKER β版のプレスで感じた事

2018.05.20

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

デザイナーとしてひと味違うランディングページ(LP)構成案の制作方法

2018.04.01

いつのまにか「Font Awesome」が新しくなってたので調べてみた

2018.03.11

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14


お気に入りの情報
が無かったでしょうか?
この記事の最後には、今までのデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google