「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デザインスキルを磨こう!

2018.11.24

化粧品・コスメで訴求がしっかりしているランディングページ(LP)のデザイン6選

2018.01.28

【第1回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.15

【第5回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.11.13

【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法!

2018.11.23


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

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



スポンサード広告 by google