「Font Awesome」を使ってアンケートフォームをより見やすくしてみよう!




「う~ん。もっとフォームのオリジナリティを出したいなぁ。」
「特にスマホページは見やすくするだけでページ離脱率も変わってくるけど。フォームのアイコンって端末依存されやすいので調整が難しいなぁ。」
という感じで、フォームまわりのデザインが苦手で後回しにしているひといませんか?

こちらの記事もどうぞ!「Font Awesome」があたらしくなってたので調べてみた。

まぁ、私はそんなダメな一人ですが・・・。
でも、Webアイコンフォントを知ってからは、少し自信が持てた気がするので、ざっくりですがご紹介したいと思います。

Webアイコンフォントって何?

私が使ったのは「Font Awesome」というサービスです。
これは、導入するだけであらかじめ登録しているフォームアイコンを呼び出しCSSで調整しながらフォームデザインを向上させていくサービスなのです。

CSSで調整というのは、位置情報だけでなく、カラー指定も簡単にできちゃいます。

Webフォントをさっそく導入してみよう

まず、BootstarapCDNのURLを貼り付けます。

BootstarapCDN
http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

これは、Bootstrapが提供しているホスティングサービスです。ざっくり言うと、ここからいつでも最新のWebフォントが手に入ると考えていただければと良いと思います。詳しくはBootstrapのURLをご確認ください。

フォントリストから使いたいアイコンをピックアップする

Font Awesomeのメニューから「Icons」をクリックすると大量のアイコンがそろったページに遷移できます。お問い合わせフォームで使うならページ中ごろにある「Form Control Icons」が良いかなと思います。

今回は「check-square-o」をCSSでコントロールしていきましょう。ソースをいじっていただければわかるかなと思ったので、今回のDEMOファイルを用意してみました。DLして自由に触ってみてください。

WebフォントはCSSのcontentに任意のUnicodeを記述すると表示されます。

あとはそれぞれの環境に合わせて調整してみてください。

こちらの記事もどうぞ!
「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