しっかり考えていますか?スマートフォンwebサイトのレイアウトと操作性

スマートフォンに特化したレイアウトを考える

スマートフォンはパソコンに比べて画面が小さいため、サイドバーなどは使わないシンプルなレイアウトが基本です。画面が小さければ表示できる情報量はそのぶん減るので、必要最小限の情報を載せるようにしましょう。また、スマートフォンの大きさは様々なので、横幅を固定しないリキッドレイアウトも基本になります。さらに、パソコンに比べてスマートフォンは画面の表示速度が遅いため、できるだけ早く目的の情報にたどり着ける構造が重要です。そのため、そのページで重要な情報は一番上にもってくるようにしましょう。ナビゲーションなどにより他のページに遷移させることはよくあると思いますが、画面遷移にはデータの通信が必要になるためそのぶん時間がかかります。特にスマートフォンでは、なるべく3クリックほどで目的の情報にたどり着ける構造にすることで、ユーザビリティの低下を避けられるでしょう。

スムーズな操作性でユーザーを満足させる

スマートフォンwebサイトではボタンやリンクに気を使う必要があります。マウスのカーソルによって点で操作するパソコンに対して、スマートフォンは指による面での操作が基本です。そのためリンク同士が近すぎたり、ボタンのサイズが小さすぎたりすると、誤タップを起こしてしまい大きく操作性を損ないます。ですのでボタンは十分な大きさにし、リンク同士も適度な余白を設けることが重要です。また、画面の表示スピードにも十分に気をつけなければなりません。表示スピードに大きく関わってくるのが画像です。そのため、CSSで再現可能な簡単なデザインなどは積極的にCSSを用いて、画像は必要最小限にするようにしましょう。

スマホサイトとは、スマートフォンに最適化したwebサイトのことです。パソコンに比べ画面が小さく、画像の読み込みも遅くなりがちなスマートフォンからでも見やすいように作られています。