レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。

これまでのWebにおけるUI／UX

これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。

当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで対象を動かしたりする動作がメインになります。

UI／UXで言えば、ボタンをクリックするにしても、マウスでカーソルを移動させればボタンの色が変わったり、カーソルの矢印が人の指に変わったりするマウスオーバーアクションと言われるものです。

テキストリンクであれば、カーソルを対象に持って行くと、テキスト下線が消え、カラーが変わるなどの変化が当たり前になっていました。すべてはマウスでの移動させることが中心にあったのです。

でも時代はモバイルファースト

ニールセンの調査によると、大手サイトのPCからのアクセスは軒並み減少に転じており、アクセスの中心はモバイルに移行しています。

PCからのアクセス1位はYahoo！JAPAN（前年比7％減）、2位はGoogle（9％減）、3位はFC2（11％減）、4位はYouTube（8％減）、5位は楽天（同8％減）となっており、ベスト10すべてで利用者数が減少している。
PCからのWebサービス訪問者、軒並み減少　13年は「スマホへの転換の年」　ニールセン

また「食品、服飾、美容」など、業種によってはすでにスマートフォンのアクセスがPCを上回っているものもあります。

スマホ経由のアクセスはPCの65％に　食品、服飾、美容などはすでに逆転

BtoC向けの業界では特にこの流れは加速していて、おそらく2015年にはほとんど全てのサイトでスマートフォンのアクセスがPCを上回る予測がされています。このようにスマートフォンのネット接続が主流になる中で、果たして今までのWebのUIをそのまま適応してもいいのでしょうか。

レスポンシブWebデザインで成功するUI／UXのポイント

このようなモバイルデバイスが主流の中で、今までのようなマウス操作中心の操作から、タッチデバイスを中心においた設計を意識する必要があります。

またこちらのブログでも取り上げているレスポンシブWebデザインは、スマートフォンだけでなく、タブレットなどの多様なデバイスに1ソースで対応することができるため、マルチデバイス時代のサイト運用を効率的に進めることができます。

ではレスポンシブWebデザインでサイトを構築する中でポイントとなるUI／UXはどのようなところになるのでしょうか。まとめてみました。

タップ領域を確保する

スマートフォンやタブレットなどのタッチデバイスは指を使って直感的に操作できる一方、マウス操作に比べ正確にタップをすることが難しくなります。タッチをしてほしい要素（ボタンなど）の周りにタッチを感知できるスペースを設け、タッチができる領域を確保しましょう。

ちなみに、アップルのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。

マウスオーバーアクションは使わない

マウスオーバーをした時に下位メニューが現れたり、画像が拡大したりする動作はタッチデバイスでは動作せず、ユーザーには認識させることはできません。

タッチデバイスを使うユーザーを困惑させる要因となるので使用しないようにしましょう。この場合、ボタンのタップでサブメニューが出ることが分かるような工夫が必要です。

フォントサイズを意識する

デモサイト

文字サイズもタッチデバイス、特にモバイルファーストではスマートフォンを中心に設定しなければなりません。一般的にフォントサイズは14px以上が推奨されていますが、実機で確認をして読みやすいサイズを調整しましょう。

また画像内に文字を入れる場合、PC画像を起点にスマートフォンへ縮小した際に文字が潰れてしまい読めなくなるケースを多く見かけます。ここもモバイルファーストを意識してスマートフォンでの画像文字を中心に設計が必要です。

参考：失敗するレスポンシブWebデザインにありがちな2つのミス

ボタン操作時のフィードバック

フィードバックとはユーザーの操作に対して、結果を返すことです。ウェブサイトであれば操作したことを実感させる必要があります。何か操作をした時にフィードバックに違和感を感じると、ユーザーは「使いにくい」と感じ、離脱する可能性があります。

例えばボタンであれば、タップをした際の動作フィードバックは確実に行わなければなりません。

全体としては、物理的な操作に対して現実の社会でも発生し得る同様の動作を用いることで、ユーザーは直感的に理解することができます。

左右脳の特性を意識する

一般的に人は、「右手が左脳＝論理的思考や意思決定／左手が右脳＝感性への訴求」と言われています。

タブレットの場合、2つの指で操作をするケースもあります。

例えば左側にはカテゴリを選択したり、商品画像を並べたり、右側にはバリエーション選択や「カートに入れる」などのコンバージョン機能というように、画面内のエリアでユーザーが意識せず操作を使い分けられるようにするのもポイントです。

人間の右脳左脳の特性を捉えて設計をすることで自然な意思決定を促すことができるのではないでしょうか。

（おまけ）人はどのようにスマートフォンを持つのか

人はどのようにスマートフォンを持つのか、についてある調査がありました。結果は以下のようになっています。

参考：How Do Users Really Hold Mobile Devices?

one handed（片手）—49%
cradled（片手で支えて、もう一方で操作）—36%
two handed（両手）—15%

ほぼ半数の人が、片手のみ、そして3割以上が片方で支えながらもう片方の手で操作をしているという結果でした。つまりほとんどの人はスマートフォンは片手で操作をしています。

Webクリエイターボックスでも「モバイルサイトのナビゲーションメニューは画面下に置くべき」という記事があるように、本来人がスマートフォンの操作でタップしやすい範囲というのは、

画面の下の方に集中しているようです。

つまり、タップをよくするであろうナビゲーションなどのボタンは本来下にあってもいいのかもしれません。

PC時代の名残でナビゲーションはどのデバイスでも上部に設置されているケースがほとんどで（モバイルファーストラボもですが）、下に設置しているサイトはあまり見かけません。

今後モバイルファーストな設計を行う上ではよく検討した上でナビゲーションを設置する必要がありそうです。

上林

 

投稿 by モバイルファースト・マーケティングラボ.