クリック領域を広げよう!フォームの使いやすさを劇的にアップする、たった3つの工夫

みなさんは、フォームのチェックボックスやラジオボタンをクリックしようとして、クリックし損ねた経験をお持ちではないしょうか?

そのわずらわしさの全ての原因は、フォームのクリック領域によるものです。
本日はそのクリック領域を広げるという観点から、フォームを作る際に必ず実施しておきたい3つの工夫についてお届けします。

今回は少しデザイナー向けの内容となりますが、WEB制作の経験がない方にも理解いただけるような内容を心がけていますので、どうぞお付き合いくださいませ!

悪い例

今回は、このフォームを題材にお話していきます。
悪い例キャプチャー▲弊社EFOツール「エフトラEFO」の姉妹ツール「エフトラウェブコール」のお問合せフォーム。今回の記事用に改悪しています。

フォームのクリック領域を赤色でマークしてみました。
悪い例クリック領域
クリック領域がかなり狭いのがおわかりいただけるでしょうか。

普段からPCに慣れている人にとってはさほど問題でないかもしれませんが、
操作に慣れていない人や細かい作業が苦手な人にとって、とくに12px四方のチェックボックスを選択するのは至難の業。かなりのストレスになるのではないでしょうか。
文字も小さく詰まっていて見難い印象です。

その1:つい忘れがちなlabel要素

チェックボックスやラジオボタンのような小さめの入力欄を使うときは、「ラベル要素」で囲むようにしてください
「ラベル要素って何?」と思った方には少し中級的な内容かもしれませんが、難しいことではありません。

ラベル要素とは?

フォームのパーツそのものは「Name」という属性を持っていますが、これは送信データに名前を付けるためのものであり、実際のブラウザ画面上には表示されません。
普段私たちが目にするチェックボックス/ラジオボタン右横のテキストは、見た目上わかりやすくするためにつけられた説明文であり、これをWEBの世界では「ラベル」と読んでいます。
このラベルをフォームパーツと関連付けるために生まれたHTMLの要素が「ラベル要素」です。

このラベル要素を使うと、ラベルの文言をクリックすることでもフォームが反応するようになります。つまり、その分クリック領域も広がります

実際に見て行きましょう

さきほどの例で、ラベル要素を導入してみました。

ラベル要素の導入例
かなりクリック領域が広がっているのがお分かりいただけると思います。その差10倍以上!

さらにデザインを工夫してもっとユーザーにやさしく

なお、ラベルをクリックできることをユーザーが直感的に理解できるようなデザインの工夫もしたいところです。
ラベル要素:カーソル
上の例ではカーソルの形状を変更しています。標準ではラベル要素にマウスオーバーした際の形状は標準のままですが、カーソルをポインタ表示にするだけでかなりわかりやすくなりますね

その2:余白を広げるだけで劇的なビフォーアフターを狙える!

内側の余白を広げる、ただそれだけのことです。難しいことはありません。
試しに、テキストボックスの余白を5pxずつ、ボタンは10pxずつ余白を開けると…

余白を広げた改善後
いかがでしょうか?かなり見た目にも入力しやすそうなフォームになっていると思います。
入力例/入力中の文字も読みやすくなっていますね。

さらに、クリック領域を比較するとその差は一目瞭然です。
余白のビフォーアフター※ラベル要素もブロックレベル化し余白を加えています ※クリックで拡大表示します

項目数が多い場合にはフォームが縦長になりすぎてしまう点には注意したいところですが、
ほんの数ピクセルの余白をとるだけでもかなり印象が改善されるので、
全体のバランスをみながら2px~5pxの間で調整してみるのがオススメです。

その3:以外な盲点!文字サイズに注目せよ!

こちらも、お伝えしたいことは至極シンプルです。
フォームパーツの文字サイズを大きくする、たったそれだけです。

それでは例を見て行きましょう。
フォントサイズを13pxから18pxに変更、さらにボタン部分は20pxまで上げ太字にしています。
フォントサイズを上げる

いかがでしょうか?さらに入力例が読みやすくなり、当然クリック領域も広がりました。

またこれは私の所感ですが、入力欄の文字が大きいフォームを入力するのは心地が良いです。
入力していて気持ちがいい
同じように感じる方も少なくないのではないでしょうか?
そうでなくても、年齢層の高いサイトのユーザーにあたえるインパクトはかなり大きいのではないでしょうか。

こちらも余白の例と同様にフォームが縦長になるため、やりすぎには注意が必要です。バランスをみながら調整してください。

まとめ

いかがだったでしょうか?
最終的なビフォーアフターは以下のようになりました!
最終ビフォーアフター※クリックで拡大表示します

スタイルシート(CSS)に理解がある方なら、すでにおわかりかと思いますが
今回ご紹介した3つの施策は非常に簡単に実施できるものです。(1行~数行加えるだけです!)

とくに項目数の少ないフォームにおいては実施しない理由はありません

ぜひ、この機会にクリック領域を広げる施策を採り入れてみてくださいね。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です