スマホのボタンタップUIをCSSとJavaScriptを使って良い感じにしてみる

スマートフォンのボタンのタップUIは、
iPhoneとAndroidではデフォルトのUIが異なります。
iPhoneでは黒く透過し、Androidでは黄色い枠がつきます。

VIEW DEMO
※ スマホで見て下さい。

iPhoneではデザインに余り影響が出ないのでいいですが、Androidは濃い色がついてしまうので、黄色を使っていないサイトのデザインでしたら、どう見ても不自然に目立ってしまします。
大半のスマートフォンサイトはこういったUIのままリリースされているのが現状です。

そういったデフォルトのタップUIを消すには下記のCSSを記述すれば消えます。

body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

VIEW DEMO

デモを見てもらえるとわかるのですが、これではボタンをタップしても何も反応が無いように見えてしまい、UIが良くなったとはとても言えません。

そこで、JavaScriptのTouch Eventを使い、ボタンに指が触れた時と、ボタンから指が離れた時のデザインを変えてみたいと思います。

まずはCSSです。
予め用意しておいたボタンに、タップ時のスタイルを記述します。

/* 1つ目のボタン */
.typeA.tapStyle {
    box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.5) inset;
    background: #e5e5e5;
}

/* 2つ目のボタン */
.typeB.tapStyle {
    background-color: #f50073;
}

/* 3つ目のボタン */
.typeC.tapStyle {
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    transform: scale(1.02);
}

次にJavaScriptです。
</body>の直前にjQueryを読み込んだ後に下記の記述をして下さい。

(function() {
	var init = function() {
		$('.btn').on('touchstart touchend', touchEventHandler);
	};

	var touchEventHandler = function(e) {
		if (e.type === 'touchstart') {
			$(this).addClass('tapStyle');
		} else {
			$(this).removeClass('tapstyle');
		}
	};

	$(init); // onload
})();

jQueryだと、イベントの引数にスペース区切りでいくつも同時に登録できるので、2つのイベントを記述しておきます。
touchEventHandler関数の中で、イベント名で処理を振り分けます。
touchstartがボタンに指が触れた時のイベントで、
touchendがボタンから指を話した時のイベントです。
ボタンに触れた時に、tapStyleというCSSのクラスを触れたボタンに付与され、
ボタンから指を離せばtapStyleクラスも外れます。

VIEW DEMO

こうすることにより、タップ時のデザインを自由に変更できるので、ボタンを押下したようなデザインに変えることもできます。

デフォルトのタップUIでは、タップしてから反応するまでに少しタイムラグもあります。
今回実装したUIでは、触れた瞬間にデザインが変更され、ユーザもボタンが押されているかどうかも瞬時に判るので、UI的に向上したと言えるでしょう。


related article