iPhoneのアプリでボタンが押しにくいなあと感じる事が度々あります。デザイン上ボタンを大きく出来なかった、または、作者には問題なく押せた、などの理由があるとは思います。が、タッチ画面でボタンが押しづらいのはイラっとしますね。
デザイン的な対策
簡単にいえば、余白を大きく取ればいいのです。余白を大きくしたら見栄えが悪くなるのでは？と思うかもしれませんが、やり方次第で色々できますよ。といっても、見た目重視でボタンを小さくするなんてことは、本当はやってはいけないことですから別の方法で。
画像を使わない場合
iOS7からはUIButtonのデフォルトでは枠線がありません。
ということは、文字のサイズを変更せずにボタンを大きくしたらいいのです。見た目はそのままでもボタン領域が広くなるので押しやすくなります。大きくし過ぎると押したくない時に押してしまうなんてこともあるので注意が必要です。
ボタンが大きすぎて他のコントロールに重なってしまう、なんてこともありますよね。そんな時は重ねる順番を変えればいいですよ。iOSではタッチイベントは上から下に継承されるます。つまり、タッチイベントを持たないコントロールがタッチされた場合は下のコントロールにイベントが発生しますので、重なる順序を気にすることは必要ないです。
このような感じでボタンの大きさを上手に設定するのがポイントです。
ボタンに色を付ける場合はボタンを押しやすいデザインにしないといけませんが、重ね合わせでクリア出来る場合もあるのでお試しください。
画像を使う場合
次に画像を使う場合です。この場合も透明部分を上手に使えば簡単です。画像を背景ではなくボタン自体に画像を指定する場合は、ボタンのサイズを変更するだけで簡単に透明部分が出来上がりますが、背景として使う場合、ボタンサイズを変更すると画像が変形してしまいます。これを防ぐ方法をInkscapeを使って画像を作成する方法を説明します。
これをこのままエクスポートして、Xcodeでボタンの画像に指定し文字を入れると、
このように表示されます。これを円の大きさを変更せずにボタン領域を大きくするには、透明部分のある画像を作成します。
Inkscapeで先ほど作成した円より大きめの透明な正方形を作ります。
この状態のままエクスポートして、ボタンに表示させます。
このように透明部分ができました。
この画像作成方法を使うと面白いUIが出来ますので、色々試してみてくださいね。
ボタンのデザインは重要
静電容量式のタッチパネルの場合は隣り合ったボタンとのタッチミスを少なするUIは大切です。何度押して押せないボタンも、使う側には辛いですよね。ということで、隣り合うボタンは密接しないようにするなどの工夫が必要とともに、見た目的にもボタンの中央を分かりやすくすることが大切です。画像を使った場合の様に透明部分を余白にすることで、どこをタッチしたらいいかを分かりやすくすることができます。
加減が大切
余白は大きすぎてもタッチミスの原因になりますので、大きすぎるくらいなら余白は無い方がわかりやすいですね。指の大きさにもよるので色々な人に試してもらいながら、最適な余白を見つけてください。
余談ですが
指が乾燥してる時、タッチ感度が悪くなってる気がしませんか？これは気のせいではなく、静電容量式の仕様によるもので、スクリーン表面の電気的変化が出にくくなるからです。こういう場合は、指をぺろっとして・・・っていうのはカッコ悪いので、ハンドクリームなどで保湿をしてくださいね。