スマートフォンのラジオボタンを使いやすいサイズにするには？
スマートフォンは画面をタッチして操作をするので、フォームを使ったページではラジオボタンとチェックボックスのサイズは入力のしやすさに大きく関わってきます。
情報を入力しているときにボタンサイズが小さくてタッチしにくいと、イライラしてしまったり入力を諦めてしまったりするので、ECサイトなどでは購入機会の損失につながる深刻な問題になりかねません。
それを防ぐ為にも、ボタンは最適サイズにしておきたいものです。
そこで、どのようなCSSプロパティを使うとiPhone、Android端末でボタンをタッチしやすいサイズに調整出来るのか実際に確認してみます。 iPhoneとAndroid端末では結果が少し違っていたので、その結果をまとめてみました。
関連記事：
スマートフォンのフォームボタン
ラジオボタンとチェックボックスのあるサンプルコンテンツを作成しました。このコンテンツを元に、ボタンサイズの実験を行っていきたいと思います。
HTMLファイルとCSSファイルは以下のとおりです。（一部抜粋）
<form action="#" method="get"> <div class="title">色を選択</div> <input name="color" type="radio" value="1" checked="checked">赤 <input name="color" type="radio" value="2">青 <input name="color" type="radio" value="3">白 <div class="title">希望商品を選択</div> <input name="goods" type="checkbox" value="1">Tシャツ <input name="goods" type="checkbox" value="2">スカート </form>
input[type="radio"] {font-size:x-large;}
input[type="checkbox"] {font-size:x-large;}
スマートフォンではfont-sizeプロパティにx-largeを指定すると見やすい文字の大きさになるので、その値を指定しました。これをiPhoneとAndroid端末であるXperia arcでみてみると、次のように見えます。（iPhone：右 Xperia arc：左）
input、selectタグにfont-sizeプロパティを指定していますが、iPhone、Xperia arc(Android端末)共にボタンサイズが小さいのでタッチしにくい状態です。
widthとheightプロパティでサイズ調整をする
ラジオボタンとチェックボックスがタッチしやすくなるようにボタンサイズ変更をするには、widthとheightプロパティに値を指定して調整するのが一般的です。
まずはwidthとheightプロパティに30pxを指定してボタンサイズを調整してみます。CSSファイルは以下のとおりです。（一部抜粋）
input[type="radio"] {font-size:x-large;height:30px;width:30px;}
input[type="checkbox"] {font-size:x-large;height:30px;width:30px;}
これをiPhoneとAndroid端末であるXperia arcでみてみます。（iPhone：上 Xperia arc：下）
iPhone（上）ではボタンサイズが少し大きくなりタッチしやすくなりましたが、Xperia arc(Android端末)（下）では何も変化がなくタッチしにくいままです。
なんとAndroid端末では、width、heightプロパティでボタンサイズの調整ができないようです。スマートフォンはPCサイトと同じ技術を使えると思っていたので意外でした。
でも何とかAndroid端末でもボタンサイズを調整して使いやすくしたいので、他のCSSプロパティを変えるとどのようになるのか確認してみたいと思います。
また、そのときにiPhoneとAndroid端末の見た目の差がどのくらいあるのかもみていきたいと思います。
プロパティを変更・追加してみる
① font-sizeプロパティの値を大きくする
font-sizeプロパティをx-largeから200%に変えてみます。テキストに対して指定すると相当な大きさの違いになるはずのサイズ変更です。ボタンサイズは変わるのでしょうか。
input[type="radio"] {font-size:200%;height:30px;width:30px;}
input[type="checkbox"] {font-size:200%;height:30px;width:30px;}
iPhoneとAndroid端末であるXperia arcでみてみます。（iPhone：左 Xperia arc：右）
iPhone（左）Android端末（右）共にボタンの両脇にマージンが出来ました。inputセレクタに対してfont-sizeプロパティを指定すると、ボタンの横幅サイズが変わるようです。
横幅が増えた分左右のタッチミスはなくなり使いやすくなりましたが、まだ上下の幅が狭いので画面を拡大しないと使いにくい状態です。
② ラジオボタンとチェックボックスの上下左右にmarginをつける
追加でmarginプロパティを追加します。上下左右に20PXのマージンをつけてみます。
input[type="radio"]
{font-size:200%;height:30px;width:30px;margin:20px;}
input[type="checkbox"]
{font-size:200%;height:30px;width:30px;margin:20px;}
iPhoneとAndroid端末であるXperia arcでみてみます。（iPhone：左 Xperia arc：右）
マージンをつけることでさらに上下に隙間が出来たので、やっとiPhoneでもAndroid端末でもボタンをタッチしやすいサイズにすることが出来ました。
iPhone、Android端末の微調整
どちらともタッチしやすくはなりましたが、もう少し細かく調整するのであれば、iPhoneはボタンサイズが大きくなっている分（width、heightプロパティが効いている分）ラジオボタンとチェックボックスの周辺の空白が少し多いように感じます。
そこで、iPhoneとAndroid端末でmarginプロパティの値を変えてみることにします。iPhoneは15px、Android端末は20pxです。
iPhoneのCSSファイル（一部抜粋）
input[type="radio"]
{font-size:200%;height:30px;width:30px;margin:15px;}
input[type="checkbox"]
{font-size:200%;height:30px;width:30px;margin:15px;}
Xperia arc(Android端末)のCSSファイル（一部抜粋）
input[type="radio"]
{font-size:200%;height:30px;width:30px;margin:20px;}
input[type="checkbox"]
{font-size:200%;height:30px;width:30px;margin:20px;}
iPhoneとAndroid端末であるXperia arcでみてみます。（iPhone：左 Xperia arc：右）
微妙な差なので写真だと分かりにくいかも知れませんが、ラジオボタンとチェックボックスのサイズが端末ごとに最適になりました。
このように細かい端末ごとの調整はCSSスタイルシートを出し分けて行うのが一般的ですが、ラウンドアバウトのCSS変換機能を使うと1つのファイルで簡単に調整できます。CSS変換機能があればどんな端末が発売しても柔軟に対応できますし、使い方も簡単なのでぜひ試してみて下さい。（もちろんガラケーも同時に調整できます）
まとめ
iPhone、Xperia arc(Android端末)共に調整することができたので、簡単にまとめます。
| iPhone | width、height属性でボタンのサイズ調整ができる。 fontsizeプロパティを使うとボタンの左右に余白をつくることが出来る。 marginプロパティを使うとボタンに余白をつくることが出来る。 |
| Xperia arc （Android端末） |
width、height属性でボタンのサイズ調整はできない。 fontsizeプロパティを使うとボタンの左右に余白をつくることが出来る。 marginプロパティを使うとボタンに余白をつくることが出来る。 |
CSSプロパティを変えることでどのように調整できるのかは確認できたので、そのページに合わせて最適な値に調整してラジオボタンとチェックボックスを使いやすくしたいと思います。
ラジオボタンとチェックボックスのボタンサイズというのは細かいことですが、入力フォームの使い勝手というのは深刻な問題につながりかねないので、今後も注目していきたいです。
関連記事：