「操作しやすい」を表現するデザインの技…3

	「操作しやすい」を表現するデザインの技…3
	→	クリック可能領域を広めに設定して 操作しやすさを向上させる

文＝小山田晃浩（（株）メタフェイズ）

	GOOD	CSSでクリック可能領域を広げる
	短いテキストでもa要素に対してpaddingを設定したり、display: blockにしておけばクリック可能領域が広くなる。ボタンの場合もボタン画像を大きめにつくるなど、小さな工夫でクリック可能領域が大きくなる

	BAD	リンク個所のテキストが短いと クリック可能領域が小さくなる
	ページャーのように、テキストが短いと必然的にクリック可能領域は小さくなる。また、上のようなテキストを使ったメニューなども、テキスト部分しかクリックできないので指先カーソルになっていない。クリック領域が小さいことで、ユーザーはストレスを感じてしまうだろう。ほしい情報をすぐに見れず、とても不便だ。

たとえば、マウスカーソルのスピードを速く設定している場合、クリック可能領域が小さいとすぐにマウスカーソルを合わせられず、苦労してしまう。また、iPhoneのようなタッチスクリーンのデバイスでは、マウスではなく自分の指先を使うためクリック可能領域が小さいと選択しづらい。そのため、クリック可能領域を設定する際は、異なる環境やデバイスのことを十分に考慮しなければならない。ボタンに使う画像を大きくしたり、クリック可能領域を大きくすれば、ユーザーは戸惑うことなく操作できるだろう。最近は、ユーザーの使いやすさを考えて、ログインのIDやパスワードなどの入力領域を大きくしているWebサイトもよく見かける。操作性は、小さな工夫で向上させることができるのだ。



INDEX
多くのユーザーが求める「操作しやすいデザイン」とは？
ユーザーインターフェイスを工夫するために、設計を理解する
「操作しやすい」を表現するデザインの技
→技1　クリック可能な部分と不可能な部分を区別して操作しやすくする
→技2　わかりづらい言い回しや類似したアイコン・ボタンを排除する
→技4　ページ遷移のないタブメニューで操作しやすくする