スマートフォンからのアクセスを考慮したデザインの必要性
「食品、服飾、美容」など、業種によってはすでにスマートフォンのアクセスがPCを上回っている。
BtoC向けの業界では特にこの流れは加速していて、
ほとんど全てのサイトでスマートフォンのアクセスがPCを上回る予測がされています。
PCだけのデザインだけでなくスマートフォンからのアクセスを元から考慮したデザインにしなければならない。
今までのようなマウス中心の操作から、タッチデバイスを中心においた設計を意識する必要がある。
まず、デザインを考える前にスマートフォンでの操作性や読みやすさ、ボタンの配置などを考慮する。
①ボタンの配置
スマートフォンやタブレットなどのタッチデバイスは指を使って直感的に操作できる一方、マウス操作に比べ正確にタップをすることが難しくなる。
タッチをしてほしい要素の周りにタッチを感知できるスペースを設け、タッチができる領域を確保する。 ボタンが上下に配置してある場合など、特に回りのスペースに気を付けなければならない。 他のボタンをクリックしてしまうという事がないようにスペースを設けることが大事である。
アップルのiOSヒューマンインターフェイスガイドラインでは44ピクセル×44ピクセルのタップ領域を割り当てることを推奨している。
②マウスオーバーアクションは使わない
マウスオーバーをした時に下位メニューが現れたり、画像が拡大したりする動作はタッチデバイスでは動作せず、ユーザーには認識させることはできない。
タッチデバイスを使うユーザーを困惑させる要因となるので使用しないようにする。この場合、ボタンのタップでサブメニューが出ることが分かるような工夫が必要。
メディパートナーのデザインではマウスオーバーでクライアントを表示させるという点を考えていたが、
小さい画面で大きい動きが加わるとどこにいるのか分からなくなるという点があり無くした。
③フォントサイズを意識する
文字サイズもタッチデバイス、特にモバイルファーストではスマートフォンを中心に設定する。
一般的にフォントサイズは14px以上が推奨されているが、実機で確認をして読みやすいサイズを調整する。
私は読みやすさという点で、最低18pxで設定している。
また画像内に文字を入れる場合、PC画像を起点にスマートフォンへ縮小した際に文字が潰れてしまい読めなくなるケースを多く見かける。
ここもモバイルファーストを意識してスマートフォンでの画像文字を中心に設計が必要。
④ボタン操作時のフィードバック
フィードバックとはユーザーの操作に対して、結果を返すこと。ウェブサイトであれば操作したことを実感させる必要がある。
何か操作をした時にフィードバックに違和感を感じると、ユーザーは「使いにくい」と感じ、離脱する可能性がある。
例えばボタンであれば、タップをした際の動作フィードバックは確実に行わなければならない。
全体としては、物理的な操作に対して現実の社会でも発生し得る同様の動作を用いることで、ユーザーは直感的に理解することができる。
⑤右脳左脳の特性を使う
一般的に人は、「右手が左脳＝論理的思考や意思決定／左手が右脳＝感性への訴求」と言われている。
タブレットの場合、2つの指で操作をするケースがある。
例えば左側にはカテゴリを選択したり、商品画像を並べたり、右側にはバリエーション選択や「カートに入れる」などのコンバージョン機能というように、
画面内のエリアでユーザーが意識せず操作を使い分けられるようにするのもポイント。
人間の右脳左脳の特性を捉えて設計をすることで自然な意思決定を促すことができる。
⑥ゲームニクス理論
説明書を読まなくても楽しめる仕組み作り。 画面をみただけで理解できる構成と演出作り。
フォームを作る上でこの理論を取り入れるとフォームを入力するというめんどうな作業も 楽しくスムーズに入力でき、入力フォームからの離脱率を防げるというメリットがある。
結果
レスポンシブデザインで気を付けるポイントを押さえておくことでデザインをする前に意識しておくことが出来る。 また、スマートフォンで実際に操作してみること、スマートフォンサイズで画面を縮小して逐一みておくことで スマートフォンになった時の表示を意識することが可能である。
[calltoaction05]