最近はスマホでWebサイトを見るユーザーが増加し、サイト訪問者のほとんどがスマホユーザーである場合も少なくありません。スマホで見やすく、操作しやすいデザイン設計にするためには、どのような点に気をつければ良いのでしょうか。

UI（ユーザーインターフェース）とは

「UI（ユーザーインターフェース）」とは、ユーザーとの接点のことです。

WebサイトのUI設計を行うときは、「画像やテキストがバランス良く配置されているか」「適当な余白が取られているか」「ボタンはタッチしやすいか」などについて、ユーザー視点で見ていく必要があります。

UIを決める上で欠かせないターゲット設定

UI設計をする際にもう一つ押さえておきたい点が、Webサイトのターゲットユーザーです。ターゲットユーザーの年齢や性別などによって、UIも変わります。例えば、ターゲットユーザーの年齢が高い場合、「Webサイトのテキストを大きく表示して読みやすくする」などの対応が考えられます。

ターゲットの設定方法としてよく使われる手法が、「ペルソナ設定」です。アンケートやアクセス解析を参考にして、Webサイトを訪れる人物像（ペルソナ）を設定し、ユーザーが何を求めているかを明確にします。

コンテンツの表示方法

記事一覧などコンテンツ一覧ページにおける、コンテンツの表示方法もさまざまです。

コンテンツが縦に並ぶ画面を下にスクロールすることで新しいコンテンツを表示する方法（無限スクロール）、その都度ボタンをタップしてコンテンツを読み込む方法、コンテンツを複数ページに分けて表示する方法（ページング）などがあり、ユーザー視点に立ったコンテンツの表示方法が求められます。

Webサイトをスマホ対応にするための方法

スマホは画面が小さく、画面を正確にタッチしたり、文字を入力したりすることが難しいため、スマホサイトでは指で操作しやすいデザインが求められます。

ボタンやリンク同士の距離が近いと、PCでは問題なく操作できても、スマホではミスタッチが起こりやすくなります。

また、Webサイトをスマホ対応にするための方法として、「レスポンシブデザイン導入」と「スマホ専用サイト作成」の2つがあります。

レスポンシブデザイン

ユーザーの画面サイズに合わせてページレイアウトを自動調整する方法が、「レスポンシブデザイン」です。

1つのページでさまざまなデバイスに対応させることができるため、PC向けページ・スマホ向けページのようにデバイスごとに別々のページを設ける必要がありません。また、管理の手間を省いたり、URLを統一したりできる点もメリットです。

レスポンシブデザインは、画面サイズ別でCSSを切り換える仕組みです。スマホユーザーに対して、メニューバーをプルダウンで表示したり、横長のテーブルを縦に表示したりすると使いやすさが向上します。

スマホ専用サイト

既存のPC向けページをレスポンシブに対応させることが難しい場合もあります。このようなケースでは、スマホ専用サイトを作成します。スマホユーザーに絞ってWebサイトの企画・設計から構築までを行うため、スマホに最適化されたWebサイトを作ることができます。

まとめ

今後もスマホユーザーは増加し、スマホサイトのUI設計の重要性は一段と高まるでしょう。PC向けWebサイトの操作性が良くても、スマホに対応していないWebサイトでは、スマホユーザーにストレスを与えてしまいます。他のWebサイトのUIを参考にしながら、ユーザーにとって使いやすいサイト作りを目指しましょう。

Tweet