【HP制作】基本をおさえてスマホUIを使いこなす

近年、iPadやスマホなど様々なマルチデバイスが普及したことで、Webサイトの見栄え面、操作性面が重要となってきました。
そのためWeb制作者には、ユーザビリティを意識したサイトを構築できるかが問われてきており、これが大変、頭を悩ませています。
今回、Web制作者が頭を悩ませているスマホUIについてのポイントを紹介をします。

UIに適したデザイン

スマホUIに適したデザインには、グリッドレイアウト、マイクロインタラクションなど様々です。
グリッドレイアウトは、それぞれの要素をグリッド上に並べるので、サムネイルのように一気に参照する事が出来、情報の視認性を高める事が出来ます。
また余白の取り方によって、ユーザへ与える印象が変わるのが特徴です。
マイクロインタラクションは、ユーザが何らの操作をした際に、アクションを発生させるものです。
具体例では、スマホの画面をタップすると水の波紋が広がる様なアクションなどがこれにあたります。
これらは、ユーザ自信が何処をタップしたのかが一目瞭然となりますので、操作性を上げ、またストレスを生む事を避ける効果があります。

スマホUIの重要性

近年、iPadやスマホを使用してサイトを閲覧している人が多い状態となり、サイトのモバイル端末への対応が重要視されています。
特に近年では、パソコンを持たずにスマホで操作をしている人が増えていますので、Webサイト製作者は、これらのユーザを満足させる対応が必要となっています。
その際に意識するポイントは4つあります。
それは回線速度、タッチインターフェース、使用状況、優先順位です。

早くなる回線速度

最近のスマホは、LTEや4G回線を利用した高速アクセスがスタンダード化されていますが、ユーザがサイトを閲覧する際、ストレスを起こさせない様にする必要があります。
そこでポイントとなるのが画像の選定です。
サイトでは、表示される画像が多いと全て表示するのに時間が掛かりますので、これによるサイト離れは避けたいところです。
そのため必要な物だけを表示するようにダイエットをして軽量化する必要があります。
また画像サイズを下げる、CSSでの再現のし易さを意識したデザインとするのも一つの手です。
ただしサイトを閲覧する方の中には、スマホだけに留まらず、高精細ディスプレイで閲覧者している人もいますので、これらのユーザをもサポートするようなWeb製作を意識する必要があります。

タッチインターフェース

PCとスマホで大きく異なるところは、ユーザがマウスを使用せずに、画面をタッチして操作を行うところです。
そのため、タッチするポインターは、操作がし易いように状況に応じた大きさとしたいところです。
このようにWeb製作者は、ユーザの視点に立って、使い易いサイトを製作する必要があります。

ユーザの使用状況

ユーザーに配慮した設計をするには、ユーザがどのようにスマホを使用しているのかを知る必要があります。
まず第一にユーザがどのようにサイトを閲覧しているかを把握する必要があります。
PCからの閲覧者は、基本的には座りながら落ち着いた場所で操作を行いますが、スマホでは移動しながらの操作が主となります。
そのため、いかに素早くユーザが求めるゴールへと導くかが重要となります。
二つ目に、意外に見落としがちなのがスクリーンショットです。
スクリーンショットは、端末に表示される画面を、カメラ機能で撮影して画像として保存する機能です。
多くのユーザは、このスクリーンショットをメモの代わりに使用する傾向にあります。
これを考えると画面に表示する情報は、1ページ内に収まる様に画面設計をしたいところです。

情報の優先順位付け

一画面内に不要な情報は表示すべきではありません。
昔のWebコンテンツは、大画面からPCでアクセスする方が殆どであったため、一度に表示する情報は、沢山ある方が好まれる傾向にありました。
しかし近年では、PCよりも画面がはるかに小さいスマホからの閲覧者が多くなっているため、閲覧者の多くが過剰な情報は必要としない風習となっています。
そのため、ごちゃごちゃとしたサイトは非常に解り難いサイトと認識され、これが切っ掛けでサイト離れに繋がる事もあります。
これを避けるためにも、情報の優先順位を付け、ピンポイントでの情報表示がとても重要となります。
例えば、共通認識ルールを採用したリ、ユーザが良く使用するであろう情報を集めてサイト構築するとUIは向上します。

まとめ

Web制作者がUIに注意すべきポイントは、ここに挙げた以外にも沢山あります。
ただひとつUIで最も重要なことは、基本をしっかりと抑えてサイトを構築する事、これがUIが向上する近道です。
これから先、新たなデバイスが登場する事は避ける事が出来ませんので、新たな問題が浮上する事もあります。
そのためWeb制作は、これらに対応する技術を持っている専門の制作会社に相談・依頼するのが良いかもしれません。