ユーザーインタフェース（UI）とは、何らかの操作を行う際の、見た目や操作感を指します。
UIが低いサイトはユーザーが離脱してしまう可能性が多いため、サイトデザイン時にはUIを考える必要があります。
Webサイトは見た目のオシャレさだけではなく、ユーザーの使いやすさという点が非常に重要です。パソコンスマホどちらでもストレスなく操作を行えるようにUIを考慮してサイトを設計しましょう。
ユーザーインタフェースとは
ユーザーインターフェース（User Interface）は、ユーザーとサービスの接点を意味する言葉。「UI」と略される場合もあります。
Webデザインやユーザーサイドの表現としては、何らかの操作を行う際の、見た目や操作感、もしくは単にユーザーにとっての使いやすさを指す言葉としても使われています。
デザインの４原則のレッスンで“WEBデザインを行ううえで一番大切なのは、「ユーザーが目的を容易に達成出来る」デザインであること”と紹介しました。これまでのレッスンでも「ユーザーが操作しやすいか（使いやすいか）」という部分は何度も出てきましたよね。
こうした設計も、UIの領域に入ってきます。
下の図を見てみてください。
左のサイトでは、「BLOG」「SEO」などの文字がリンクになっているとします。
一見グラフィカルで、おしゃれなデザインに見えるかもしれません。が、初見でブログページに移動できる人はどのくらいいるでしょうか？ テキスト部分がリンクとは気づかず、望んだページ遷移が出来ないままサイトを閉じてしまうのではないでしょうか？
反対に、右のサイトは文字が入っていなくても、瞬時にどのパネルが何を示しているか何となく分かります。動画や音楽のページに移動できない人はほとんどいないはずです。 アイコン全体がリンクであれば、マウス操作が苦手なお年寄りの方・スマートフォンからの閲覧でもイライラ感なくページを開けますね。
Webサイトはただ眺めるだけのものではなく、見たいページに移動したり、フォームから申し込みをしたりとユーザーに操作してもらう箇所も多くあります。UIが考えられていないと、ユーザーはWebサイトを使って目的を果たせない・果たすのが困難になってしまいます。
このためWebサイトのデザイン時には、ユーザーインタフェースの向上を心がけ、ユーザーにとって使い勝手の良いサイト＝ユーザーが目的を容易に達成出来るサイトかを考える必要があります。
- 良いUIデザイン：スムーズに使える（目的が達成しやすい）
- 悪いUIデザイン：スムーズに使えない（目的が達成しづらい
モバイルファーストとは
webサイトの制作は、ユーザーの環境に合わせて制作する事が重要です。
現在、webサイトの閲覧をスマートフォンから行う人がとても多くなってきています。
その為、モバイルファーストとは「利用率の高い、スマホからのアクセスを意識した制作」という考え方になります。
小さな画面を考慮する
スマホは、PCと比べ「画面が小さく横幅が狭い」という点があります。
更に指でタップする操作方法という点もPCとは異なります。
では、スマホからの閲覧で「操作しやすい」デザインとはどのようなものでしょう。
上の写真の様にスマホを片手で操作する人が多いのではないでしょうか。
その場合、親指の届く範囲に使用頻度の高いコンテンツを置いた方が、使い勝手が良いですね。スマホを持ち変えたり、もう片方の手を使わずに済むので手間がかかりません。
また、指でタップする時に「コンテンツ同士の距離が近い」と、押そうとしていないものを押してしまうという事が起こってしまうかもしれません。コンテンツが小さすぎても押しにくいですね。ですので、ユーザーがタップするコンテンツは「適度な大きさ」と「コンテンツ同士の距離を離す」事が重要です。
スマホ表示での工夫例
スマホは画面が小さいので、狭い範囲にいかに分かりやすくきれいにコンテンツを配置していくかが重要です。
ユーザーに不便さ・使いにくさを感じさせない為には、様々な工夫が必要となってきます。
以下は「toyota」のスマホ版サイトです。
情報量の多い車種部分は格納し、「スポーツ」など車のタイプをタップすることで画面遷移なく一覧が見られるようになっています。
また、見積もりやカタログ請求など、ユーザーにアクションを起こして欲しい部分は、アイコンを使用したボタンデザインになっていますね。目を引きますし、タップもしやすいので使いやすいと感じるユーザーが多いはずです。
このように、狭い範囲内でも工夫次第で使い勝手を損なわずにレイアウトしていくことが出来ます。スクロールも多すぎると手間になりますので、あまりにも縦長になりすぎないよう配置するコンテンツを考えましょう
また、「ピンチ」というスマホ独特の操作も考慮する必要があります。
「ピンチ」とは、２本の指で拡大や縮小を行う事です。ピンチも出来るだけ行う必要がないように、コンテンツのサイズなどに気を配りましょう。
ボタンなども、男性の指と女性の指ではタップしやすい大きさが異なります。
どのユーザーでも操作しやすいように、設計していくことが重要です。