UI（ユーザーインターフェース）とは？意味とUXの違いをくわしく解説

UIとは

UIとはユーザー・インターフェース(User Interface）の略称です。ユーザー（利用者）と、製品・サービスをつなぐ接点（インターフェース）のことです。

インターフェースは、パソコンやスマートフォンなどのデバイスを主に表します。アプリケーションやWebサイトなど、デバイスとユーザをつなぐ部分をUIと呼びます。

GUI・ CUIとは？

UIを語るうえで知っておきたいのが、CUIとGUIです。

• CUI（キャラクタユーザインターフェース）
• GUI（グラフィカルユーザインターフェース）

CUIはコンピュータとユーザのやり取りをキーボード入力の文字（キャラクタ）で行う方式です。CUIはWindowsのコマンドプロント（Macはターミナル）を用いて操作しますが、文字だけなので読解力が必須。直感的な分かりづらさは否めません。
そこでカーソルやファイルなどのアイコン（グラフィカル）を用いたのがGUIです。GUIはマウスでカチカチ操作できますので、コンピュータに疎いユーザでもカンタンに操作できます。

GUIは1984年にAppleが発売したMacで一般化され、翌年にはWindows 1.0のGUIが発売されました。CUIからGUIへと進化したことで、コンピュータにおけるUIは格段に向上しました。

UIとUXの違い

UIと似ている用語で「UX」（ユーザーエクスペリエンス）があります。UIはあくまでユーザとデバイスの接点に限定されますが、UXは接点に限らず、すべての体験が含まれます。　

例えば、ECサイトのUIはWebサイトの操作性に限られますが、UXはカスタマーサポートや送料無料、即日発送など一連のユーザ体験が含まれます。購入した商品やサービスから得られるワクワク感や喜びもUXに含まれます。

1.現状のUI課題を分析し洗い出す

UIを向上させるには、ユーザが感じる「使いづらさ」や「操作に悩んだ箇所」を見つけ出します。ユーザが抱く感情は、年齢層や性別などの属性によって変化します。例えばご年配のユーザであれば、文字が小さいとストレスを感じやすくなります。

オシャレで美しいサービス・プロダクトは、必ずしもUIが優れているとは限りません。芸術性を求めるあまり、UIを意識できていない失敗例はいくつもあります。UIを高めるには、他人(ユーザ)により添いえる「人間力」が大切と言えるでしょう。

定量分析と定性分析でUI改善のヒントをみつける

Webサイトのように、実物のユーザを観察することができないケースでは、「定量分析」、「定性分析」の2つの方法で分析すると効果的です。

• 定量分析（Googleアナリティクスなど）
• 定性分析（ユーザーテストなど）

定量分析はGoogleアナリティクスなどで蓄積したビックデータを解析し、ユーザ心理を読み解く方法です。ただし、閲覧時間や離脱率などを把握できますが、「ページのどの箇所で離脱したか？」「なぜクリックしてくれないのか？」という細かな点はわかりません。細かなユーザ心理を知るには、実際のユーザに協力してもらう定性分析が有効。実際の操作をモニタリングすることで、想定外の操作方法や、つまずいた箇所を発見できます。

2.ゴールを設定し課題を発見する

定量分析と定性分析によって、多くのUIにおける課題が見つかります。次に課題リストの中から、早急に取り組むべき課題を選んで優先順位を決めましょう。

優先順位は、「達成したいゴール」によって変化します。例えば「コンバージョン率を○○％アップさせて売上を○○円達成する」や「離脱率を○○％改善して回遊率をアップさせる」など。具体的なゴールを設定することで、進むべき道が明確になります。

3.UIの改善策を検討し実行する

UIの課題を解決するために、どのようなデザイン・配置が良いかメンバーと話し合いましょう。注意するべき点は、運営者側が理想とする「制作・開発のしやすさ」は、UI改善の目的とは異なるケースが多いことです。

たいていのプロジェクトは予算や時間に制限があるため、目的があいまいだと異なる結果に進む恐れがあります。「なぜ改善するのか？」「改善することで何を達成したいか」をプロジェクトメンバー間で共有し、ベクトルをあわせることが大切です。

4.結果の分析・検証を繰り返す

施策を実行し、期待どおりの結果がでたかを確認しましょう。UI施策は手探りの部分が多いため、1発で成果がでなくても心配はいりません。
想定より結果が悪くなることだってあるでしょう。期待どおりの結果が出なければ、原因を分析し考察することが大切です。

「配置」と「大きさ」に配慮する

UIデザインは、ユーザが使用するデバイスに対して個別に最適化を行うことが基本です。ユーザはスマートフォン、タブレット、パソコンとさまざまなデバイスを使用します。デバイスによって画面サイズは異なりますし、操作方法も指やマウスで異なります。それぞれのデバイスにおいて、最も見やすく、操作しやすいコンテンツの大きさや配置を考えましょう。　

例えば上記の画像を例にみると、左側は各要素に間が取られていて、直感的にコンテンツのグループがわかりづらいですよね。右側のように各要素を集約することで、わかりやすくなります。ただし、デバイスによって見やすさは異なるので、実画面で確認しながら調整は必要です。

レスポンシブルデザインはUIが高い？

レスポンシブルデザインとは、1つのHTMLソースで各デバイスの画面サイズに応じて自動的に最適化する手法です。ユーザに応じて最適化されるためUIは高く思えますが、一概にそうとはいえません。

レスポンシブルデザインは一方のデバイスを最適化すると、他のデバイスのUIが低下します。各要素で細かな設計が求められるため、手が負えなくなりやすいケースは珍しくありません。そのため、あえてデバイスごとにHTMLソースを用意し、個別のUI向上を目指すほうが、コスト的にも適当である場合があります。

配色に気をつける

UIデザインにおいて、必ず抑えておきたいのは色の配置です。見やすい配色は、「３色配色」、「４色配色」、「類似色」の3つの法則があります。　

３色配色は基本の色構造であり、もっともバランスがとれる配色です。4色配色は対象の色（補色）を選ぶことでコントラストが強くなり、目立ちやすくなります。類似色は調和や連続性を出すときに用いられます。

Webサイトにおいては、色の選択を誤るとクリックできるボタンと認識されずスルーされてしまうことはよくあります。スルーされているか確認するには、ユーザーテストやヒートマップが有効です。

ページの表示スピードを向上させる

ユーザの通信環境は常に高速であるとは限りません。特にスマートフォンにおいては4Gが届かない地域や、建物の構造的に電波が入りづらいエリアもあります。ユーザの約50%は、2秒以内のページ表示を期待し、読み込み速度が3秒以上かかると40%のユーザが離脱すると言われています。Googleもページ速度がSEOに影響すると公言しており、UIの向上には欠かせない指標となっています。

参考文献：https://neilpatel.com/blog/loading-time/?wide=1

表示速度を向上させるためには、画像・動画を軽くすることや、CSSやJava Scriptなどの読み込みを改善するなど行います。

コンテンツを意識する

UIデザインは「使いやすさ」が重要な指標ですが、コンテンツの「魅力をひきたてる」ことも大切な役割です。例えば文章の大きさを11ポイント以上にして見やすく配慮し、行や文字の間隔を十分にとり読みやすくするなど。

文字色と背景色を適切に設定することで読みやすさも変わります。また、正しく見出し（Hタグ）を設置することは、UIが高いだけではなくクローラーロボットも認識しやすくなるメリットもあります。