「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」があたらしくなってたので調べてみた。
使い方は同じですが、コードの書き方が以前よりシンプルになっています。

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

【実話】私、転職先の本当の実態を知って失敗したWebデザイナーです。

2019.01.14


良い構成のCVエリアのアイデアをいろいろと考察してみる

2017.12.24

【検証】本物のデザイナーだけが知っているCVエリアのボタンは何色がよいか?

2018.06.03


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

2018.09.01

日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!

2019.02.11

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12

記事でもランディングページ(LP)でもないアンケートページの構成・デザインの作り方

2018.08.26


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

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



スポンサード広告 by google