最近はスマホで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を参考にしながら、ユーザーにとって使いやすいサイト作りを目指しましょう。