リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

【HTML】出来るだけ押しやすいチェックボックスを作る


HTMLで普通にチェックボックスを作ると、こんなふうになると思います。

<input type="checkbox" />チェックしてください

チェックしてください

しかしこれだと、チェックボックスの小さな□の部分だけしかクリックできなくて、非常に押しづらいです。そこで、チェックボックスを押しやすくするために、<label>というタグを使います。

<input type="checkbox" id="sample_checkbox" />
<label for="sample_checkbox">チェックしてください</label>

 <label>タグを使って「チェックしてください」というテキストをチェックボックスのラベルにしたので、テキストの部分もクリッカブルになっています。これで随分押しやすくなりましたね。

しかしまだもう一歩です。このままだと、チェックボックスと「チェックしてください」の間の隙間はクリックできません。 そこで、チェックボックスとテキストをセットで<label>タグの中に入れてしまいましょう。

<label for="sample_checkbox">
<input type="checkbox" id="sample_checkbox" />チェックしてください
</label>

 こうすると、チェックボックスとテキストの間に隙間があっても、そこもラベルの領域に含まれるためクリッカブルになります。

さらにもう少しだけ気を配って、ラベルとチェックボックスのマウスカーソルをポインタ(指マーク)に変更しておきましょう。

CSS:

label, input[type='checkbox'] {
    cursor: pointer;
}

HTML:

<label for="sample_checkbox">
<input type="checkbox" id="sample_checkbox" />チェックしてください
</label>

こうしておくと、マウスポインタの形状が変わるので、どこからどこまでがクリッカブルかというのが直感的に分かります。この方がより親切ですね。

まとめ

いかがでしょうか。最初と最後のチェックボックスを並べてみると、

チェックしてください

ほんの少しの工夫で、かなり押しやすいチェックボックスになったのではないでしょうか。

こんな風に、技術的に難しいことをしなくても、ちょっとした気配りでUIを改善できることはよくあります。大切なのはユーザの視点に立って考えるということでしょう。「自分がユーザだったら、こんな風に作られていたら助かるのに」という気づきを自分のコードにどんどん反映していけるといいですね。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

Facebookもチェック