スマートフォンでは、マウスオーバーによる表現が使用できないという制約があります。
実はこのマウスオーバー表現の有無が、ユーザーインターフェース（UI）のわかりやすさに大きな影響を与えているのです。
わかりやすいUIはEFO（エントリーフォーム最適化）の基本中の基本。本日はマウスオーバー表現に頼らずとも、わかりやすいフォームのUIをデザインするためのポイントをお伝えできればと思います。
マウスオーバーとは
マウスオーバー（マウスホバー）とは、要素にマウスカーソルを当てた時のことを言います。
マウスオーバー時にリンクやボタンなどのクリック可能なエリアの背景を変えたり、色を薄く／濃くする、文字に下線を付ける／消すなどの表現を行うことで、直感的に「ここはクリック可能なエリアだ」とユーザーは認識することができます。
カーソルの変化が自然と操作のヒントになっている
上述のクリック可能なエリアの認識はもちろん、マウスオーバー時のカーソルアイコンの変化も、わたしたちがウェブ上で何かを操作する時に大きなヒントを与えてくれています。
普段はあまり意識することがありませんが、リンク、テキストの入力、十字、処理中、ドラッグ（移動）、リサイズなどの豊富なアイコン型に変化しています。
カーソル変化のパターンの一部。OSやブラウザなどの環境によってデザインは微妙に変化するかもしれません
スマートフォンにはマウスオーバーの概念がない
わかりやすいUIに欠かせないマウスオーバー表現ですが、残念ながらスマートフォンのようなタッチデバイスでは実装することができません。ユーザーはマウスオーバーという「事前情報」を得ずにいきなりタップしなくてはなりません。
したがって、見た目そのままどう操作すれば良いかが明確なインターフェースを制作する必要があります。
とくにタップ、入力など複雑な操作を必要とするフォームでは、なおさらUIが明快である必要がありますね。
具体的に、EFO観点からはどのような点に気をつけるべきかを以下考えていきたいと思います。
タップエリアを明示
まずはどこがタップ可能な領域なのか、見ただけで理解できるようにしておきたいものです。
この視点はテキストボックスやボタンなどのフォームのコンポーネントをデザインする際にも大切ですし、フォームに適切に説明文やアコーディオンメニューなどの補足コンテンツを操作しやすくしたり、不意にリンクをタップしてしまうような誤操作を防ぐという視点でも意識しておきたいポイントです。
具体的にはコンポーネントやタップエリアと他の領域との区別がはっきりわかるように、背景色の変化やボーダーで境界を明示しましょう。
特にスマートフォンでは屋外利用などで視認性が落ちる可能性がありますので、明度差を充分に確保し境界線がはっきりと認識できるようなデザインにすると良いでしょう。
色使いは明度差をもたせ境界をはっきり認識できるようにしたいですね
アイコンを使用する
ただ領域を囲むだけでなく、右向き矢印のアイコンで装飾を行うことで、よりいっそうタップエリアであることを認識しやすくなります。
また、アイコンの矢印の向きを変えるなどの工夫で、元に戻る動作や、折りたたまれたコンテンツを表示する等の操作を連想させることができます。
アイコンがあると、タップ可能なエリアであるとわかりやすくなるうえ、タップ後の動作も連想しやすい
その動作にそのアイコンを使用するかは、OSやアプリケーションで使われている規則に従うとユーザーが戸惑うこともありません。
ひと目でボタンだとわかるデザイン
特にフォームのボタンなど重要なタップ箇所は、ボタンであることが一目瞭然なデザインを心がけたいですね。
具体的には目立つ色で強調したり、いわゆるボタンらしいデザイン（角丸、グラデーション等で立体的に見せる、テキストのセンタリング等）と採用するというのも手です。
イーオンのフォームのボタンは大きく、立体的でいわゆるボタンらしいデザイン
タップ時の表現を用意しておく
スマートフォンにはマウスオーパーだけでなく、クリックの「感触」もありません。
マウスの場合、カチッとボタンを押した感触や音が手指に伝わりますが、タッチデバイスは押している箇所がへこんだりなどの反応がないため、タップした瞬間に何かしら表現がないと、タップできているかどうかが把握しづらいという側面があります。
通常、デフォルトでタップ時の表現が用意されているようですが、OSやブラウザなどにも依ると思いますので、必要に応じてCSSなどで表現を追加するようにしましょう。
Android端末（Sony Xperia GX、標準ブラウザ使用）の項目タップ時。デフォルトでタップした箇所が青色に変化
最後に
いかがだったでしょうか。本日はスマートフォンなどのタッチデバイスでわかりやすいフォームUIをつくるためのポイントを紹介しました。
紹介した点はいずれも「よくある、典型的なUI」を構成するためのポイントとも言い換えられるかもしれません。
凝ったデザインも良いですが、スマートフォンの場合はできるだけオーソドックスでわかりやすいデザインを心がけると、結果EFOにもつながり、良い結果を生むのではないでしょうか。
