スマプロラボ

ユーザーにイラっと感を与えないボタン作り。

2014年10月21日


PCサイトをスマートフォンで見ていて、本当にイライラする瞬間…。それはタップが上手く出来なかったとき。
 
一度タップをしてみたけれど、何の反応も無し。「あれ?スクリーンが汚れてて、上手くボタンをタップできていないかな?」そんなことを思いながら、スマートフォンの画面を拭いてもう一度タップ。
 
すると、隣のボタンを押してしまっている…『あ゛~!!もうこんなサイト二度と見るかぁ!』といった経験をお持ちの方、決して一人や二人では無いはずです。
 
「自分の親指が太過ぎるのが悪いのか?」と思って人差し指や、中指、細さを重視した結果小指の先に神経を集中して操作をする方も…でも、指が悪いわけでは決してありません。サイト側に必ず改善できるポイントがあるはずなんです!
 
クリックとタップ、操作性の違いからボタンサイズを考える


PCのマウスを使えば、ポインタを対象に合わせてクリックするという特性を考えると…見やすさや押しやすさを考えればある程度の大きさは必要にはなりますが、それなりに小さなボタンでもクリックすることは可能です。
 
一方、スマートフォンのスクリーンをタップする場合にはiOSでもAndroidでもタップ可能な最少領域として44px×44pxというサイズが定義されています。「このサイズ以下のボタンだとダメなのか?!」と思われる方も居るかもしれませんが、実際はこのサイズ以下のボタンも結構存在しています。
 
注意すべきはタップの最少可能領域という点。指が触れたところから44px×44pxであればボタンはタップが可能なわけです。ですから、仮にものすごく小さなボタンが密集した状態であればその範囲内にあるいずれかのボタンが押下される可能性があるということ(まぁ、当然そんなサイトは存在しないでしょうし、ユーザーにも好まれません)。
 
44px以上という基準を頑なに守る必要はありませんが、ある程度の基準として考えておくことは大切です。
 
ボタンが沢山ある場合には、適度な距離を設けよう


前述した通り44px基準というモノが存在することで、スマホ向けサイトにおけるボタンサイズにはそれなりの考慮が必要であることをお解りいただけたと思います。
 
ある程度スマホ向け最適化がなされているサイトでもユーザーの操作によっては、誤タップというのは起こるもの。
パソコン向けに作られているサイトをスマホで閲覧するときは、タップできる領域は狭いわ、そもそも表示が小さいから猛烈に拡大しなくてはいけないわ…自分がイライラした経験を、決して他人にさせてはいけません。
 
自分があの時感じた怒りにも似た感情、自社のサイトを閲覧しているユーザーにもさせてしまっていると考えれば、どれだけスマホ最適化が大切かはわかるはずです。
 
まとめ


隣り合うボタンがある場合には、ある程度横幅が広めのボタンにしておくといったことで、誤タップを減らすことは可能になります。
 
リンクの貼られているテキストメニューの場合にも、ある程度間隔を空けておきましょう。適度な距離感というのが、何においても大切ってことですね。