スマホのタップ状態を色で伝える方法｜押した感覚を作るWEB UI

スマホのボタンを押しても見た目がまったく変わらないと、操作が伝わったのか迷うことがあります。タップ状態は、指が触れてボタンを押している間の短い反応と、操作後の処理状況を分けて考えることが大切です。ここでは、図書館の蔵書検索ボタンを例に、色の変え方と確認すべき点を紹介します。

押下中の色は一時的に変え、処理中とは区別する

タップした感覚を作るなら、通常のボタンより押下中の背景色を少し暗くし、影を小さくする方法があります。指を離した後は通常の見た目に戻し、「押したまま」と誤解させないことが重要です。操作中のボタンを表す「押下中」と、選択した項目がそのまま残る「選択中」は、別の状態として設計します。

WEBページではCSS（ページの見た目を指定する仕組み）の「:active」という指定で、ボタンが操作されている間の色を変えられます。一方「:hover」は主にマウスを乗せた状態のため、タッチ画面では反応しなかったり、触れた後も残ったりすることがあります。スマホの押下表示を「:hover」だけに頼らず、実際の端末で確認しましょう。

検索を実行した後に結果の取得が続く場合は、押下中の色を保持するのではなく「検索中…」という表示などで処理状況を伝えます。色が変わったことだけでは、操作を受け付けたのか、まだ処理しているのかが分かりません。

図書館の蔵書検索ボタンで配色を比較する

図書館サイトの検索画面を例にします。ページ背景は淡いブルーグレー ■#F4F6F8、検索欄を載せるパネルは白 ■#FFFFFF、説明文は濃いスレート ■#263647 にします。説明文と白いパネル ■#FFFFFF のコントラスト比は約12.35:1、ページ背景 ■#F4F6F8 に対しては約11.40:1です。

通常の「本を探す」ボタンは深いティール ■#176B6F を背景に、文字は白 ■#FFFFFF を使います。文字とボタンの比は約6.23:1で、通常サイズの文字に必要な4.5:1以上です。ボタンと白いパネル ■#FFFFFF の比も約6.23:1あり、押す領域を周囲から区別できます。

指で押している間はボタン背景だけを暗いティール ■#104E52 に変え、文字は白 ■#FFFFFF のままにします。押下中の文字と背景の比は約9.40:1、押下中のボタンと白いパネル ■#FFFFFF の比も約9.40:1です。通常背景 ■#176B6F と押下中背景 ■#104E52 の比は約1.51:1なので、色の変化だけに頼らず、押下中だけ影を弱めるなど形の変化も添えるとよいでしょう。

キーボードで操作するときの焦点表示（フォーカス）は押下表示と分けます。例えば、白いパネル ■#FFFFFF 上でボタンの外側にオーカー ■#8A6519 の輪郭線を置くと、線とパネルの比は約5.31:1です。輪郭を見失わないよう、ボタンとの間隔や線の太さも調整します。

短いタップでも分かるか、実際の動作で確かめる

軽く一度触れた場合、長押しした場合、指を離した場合を試し、押下中の色がいつ表示され、いつ戻るかを確認します。処理が始まったら「検索中…」と示し、結果が出たら一覧や件数で完了を伝えます。処理中の二重送信を防ぐ場合も、操作できない理由が分かるようにします。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、通常サイズの文字と背景のコントラスト比は4.5:1以上、操作部品を識別するために必要な視覚情報は原則3:1以上が基準です。ただし、通常色と押下中の色を直接比較して一律に3:1必要という意味ではありません。両方の状態で文字やボタンを識別できることと、操作への反応が伝わることを別々に点検します。

HueRollでは選択した色と白・黒のコントラストや濃淡候補を確認できますが、任意の2色同士の直接比較やWCAGの自動判定には対応していません。今回の通常背景 ■#176B6F と押下中背景 ■#104E52 の差は、別のコントラスト計算でも確かめてください。