UI は、ウェブサイトやアプリをデザインする際に重要な要素のひとつです。ウェブデザイナーやウェブエンジニアでなくても、 UI という言葉を一度は耳にしたことがあるのではないでしょうか？
今回は、 UI の重要性や UX との違いのほか、 UI をデザインするうえで押さえておきたいポイントを紹介します。 UI の改善に必要な視点にもふれていますので、ウェブサイトやアプリのデザインに役立ててください。
UI とはユーザーインターフェースのこと
UI は User Interface（ユーザーインターフェース）の略で、「利用者との接点」という意味です。単にインターフェースと記載される場合は、パソコンなどの機器と別の機器をつなぐための接続部分や、無線接続するための Bluetooth などの仕組みを表します。つまり、機器と機器をつなぐ接点を表すのがインターフェースです。
ユーザーインターフェースという場合は、人とサービスなどとの接点を指します。例えば、パソコンやスマートフォンの画面に表示されるボタンや文字、それらを含むデザイン全体が UI と考えていいでしょう。
ウェブにおける UI は 2 種類
ウェブにおける UI には、大きく分けて下記の 2 種類があります。
CUI とは、文字のみで構成される UI を表します。コンピューターが開発された当初はキーボードによるコマンド入力のみで操作していたため、 UI といえば CUI のことを指していたのです。
その後、直感的な操作が可能な GUI が登場したことにより、手軽にコンピューターを操作できるようになりました。フォルダにファイルをドラッグ＆ドロップ操作で移動したり、マウスでウェブサイトやアプリを操作できたりするのは、コンピューターが GUI に対応しているからです。
ウェブでは文字の見せ方を CUI と呼び、ボタンやバナーの配置といったレイアウト要素を GUI と呼ぶことがあります。ユーザーにとって扱いやすい UI を構築するには、 CUI と GUI の両面を考慮することが大切です。
UI と UX の違いと関係性
UI とよく似た言葉に UX があります。 UX とは User Experience の略で、ユーザーがサービスを利用したときの「体験」を表す言葉です。
ウェブサイトやアプリを利用する際、「使い勝手が良い」とか「使いづらい」とか感じた経験はないでしょうか。こうした使用感や利用体験が UX と捉えてください。
優れたUXを実現するには、ユーザーの視点に立った UI の設計が必須となります。ですから、 UI と UX を切り離して考えることはできません。 UX には UI の概念が含まれているのです。
優れた UI が求められる理由
優れた UI は、以前にも増して重要視されつつあります。なぜ、使い勝手の良い UI を追求する必要があるのでしょうか。近年の動向から、次の 2 点が主な理由として挙げられます。
IoT の浸透
近年、 IoT（モノのインターネット）が急速に浸透しています。電化製品をはじめ、自動車や住宅設備などをスマートフォンやタッチパネルから操作するシーンが増えたことは、多くの方々が実感しているでしょう。
さまざまな機器を操作する際、操作方法がわかりにくいようではユーザーを困惑させてしまいます。特に家庭用の電化製品は、子供から高齢者まで利用しますので、幅広い年齢層向けに設計する必要があるのです。
裏を返せば、優れた UI を備えた製品であれば、有名メーカーの製品でなくてもユーザーから支持されやすいといえます。ですから、企業規模や資本力だけでなく、 UI 次第でユーザーを獲得できる可能性があります。
CX が重視されている
市場にモノやサービスがあふれ、国内の人口が減少へと転じている状況では、製品やサービスを売るだけでなく、リピート購入を視野に入れた施策が必要です。
そこで、重視されているのが、 CX（Customer Experience）になります。 CX は「顧客体験」を意味し、 UX よりも対象となる範囲が広いのが特徴です。具体的には、 UX が製品やサービスを使った体験であるのに対し、 CX は広告などを見て製品を認知したところから始まり、販売店でのやりとりや、購入後のアフターフォローを含めての体験になります。
ですから、優れた UI がなければ UX は向上しませんし、優れた UX を実現できなければ、 CX は向上しません。つまり、結果として UI の重要性が高まっていると言えます。
優れた UI に必要な要素と実現するために必要なこと
UI とひと口にいっても、そこにはさまざまな要素が含まれています。優れた UI を構築するうえで必要な要素とは、どのようなものがあるか見ていきましょう。
わかりやすい構成
優れた UI デザインを実現するうえで、わかりやすい構成は不可欠な条件です。ウェブサイトやアプリの画面を目にしたユーザーが、どこに何が配置されているのかをひと目で判断できる構成にしなければなりません。
構成がわかりにくい UI は、ユーザーにストレスを与えます。構成がわかりにくければ、ユーザーが求める情報にたどり着くまでに時間を要したり、目的を果たせずに別サイトに移動してしまったりする原因になります。 UI デザインを考える際には、ユーザー視点に立った構成を念頭に置いてデザインしましょう。
整理された情報
コンテンツが整理されていることも UI の重要な要素です。情報にまとまりがなく重要なポイントがわかりにくいようでは、ユーザーは必要な情報を得ることができません。結果としてユーザーの時間を奪うことになるため、 UX を低下させる直接的な原因になります。
情報を整理するには、重要度の高い情報を目立たせたり、概要を把握しやすいように箇条書きにしたり、初めて目にするユーザーにとってもひと目でわかるようにする必要があります。より詳しい情報を得たいユーザーには詳細な説明を別ページに設けるなど、見せ方を工夫してください。
使い心地の良さ
使い心地の良さも、 UI デザインにおいては非常に重要な要素のひとつです。設置されたボタンを押した際の挙動が容易に予測できるようにするなど、必要な情報を得るためにどこをクリック、タップすればよいのかが直感的にわかるよう配慮する必要があります。
また、ユーザーの操作に対して即座に反応することも、使い心地を大きく左右する要素です。ユーザーは基本的に「待たされる」ことを嫌うため、次の画面への遷移は可能な限り速くする必要があります。ユーザーが意図したとおりに迅速に動作し、ストレスを与えない挙動の UI をデザインしましょう。
ユーザー分析とペルソナ設定
ウェブサイトやアプリの想定ユーザーを絞り込み、行動や価値観を分析することは重要です。おおよその年齢層といった漠然としたユーザー像ではなく、特定の人物像を「ペルソナ」として想定し、設定することをおすすめします。
例えば、高齢者向けのウェブサイトであるにもかかわらず、掲載されている文字が小さすぎるようでは使い勝手が良いとは言えません。あるいは、働き盛りのビジネスパーソン向けのウェブサイトであれば、情報を効率良く取得できるよう、要点を先に示すといった配慮が求められるでしょう。
ユーザー分析とペルソナ設定を通じて、ユーザーが求める UI デザインの方向性が絞り込まれていくのです。
デバイスごとの最適化
ユーザーは、さまざまなデバイスで利用することが想定されます。パソコンやスマートフォン、タブレットなど、どのデバイスで利用しても快適な利用体験を提供できるよう、デバイスごとに最適化することも大切な要素です。
ウェブサイトにおいては、デバイスの画面サイズに応じてレイアウトを最適化するレスポンシブウェブデザインが一般的になっています。特定のデバイスのみでの利用を想定するのではなく、幅広いデバイスで活用できる UI デザインの実現を目指しましょう。
UI を改善する 4 つのポイント
ウェブサイトやアプリの開発時はもちろんのこと、リリース後も UI の改善を継続していく必要があります。これは、 UI によってコンバージョンや売上が大きく変わることが珍しくないからです。 UI を改善する際に意識しておきたいのは PDCA サイクルです。
検証を繰り返す
UI を改善するうえで大前提となるのは、検証を繰り返して PDCA サイクルを回すことです。 PDCA サイクルとは、プロジェクトなどに対して仮説を立て、「Plan（計画）」「Do（実行）」「Check（測定・評価）」「Action（対策・改善）」のサイクルで検証することです。
PDCA サイクルを利用して UI に問題がないかを検証する理由としては、ユーザーに十分配慮して UI をデザインしても、意図したとおりにユーザーが反応するとは限らないからです。
ですから、必要に応じてヒートマップを活用するなど、ユーザーの行動を客観的に分析し、どこをどう改善すればよいのかを検討して、 UI に反映します。そして、反映後も効果測定と検証を繰り返すことで、ユーザーにとってより使いやすいウェブサイトやアプリを目指すのです。
ゴールを設定する
UI の改善に終わりはないものの、当面のゴールを明確にしたうえで改善に取り組むことは非常に大切です。検証結果から得られた課題については、いつまでに何を改善すべきかを明らかにしましょう。漠然と改善を続けるのではなく、対象と期日を決めて取り組むことが重要です。
改善策を講じた結果、望む結果が得られないことも十分に考えられます。その際には、なぜ効果が表れなかったのか、どうすれば求める結果を得られるのかを、あらためてユーザーの目線に立って検証する必要があるでしょう。
定量的に改善を行う
UI の改善は定性的な面が注目されがちですが、実は定量的なデータにもとづいて施策を講じることが改善への近道です。 CVR（コンバージョン率）や回遊率、ヒートマップから得られる情報など、定量的な情報をもとに改善策を講じてください。
改善後の効果に関しても、定量的なデータを収集・分析したうえで成果を判断する必要があります。定量的に改善を進めることでユーザーの反応にもとづく改善策を講じ、独りよがりにならないようにすることが大切です。
ターゲットを理解する
UI の改善は機能性に着目して進めがちですが、ターゲットについてしっかり理解する必要があります。
例えば、ターゲットユーザーが高齢者であれば、機能を作り込むことで複雑化した印象を与えるよりも、「シンプルな操作感」を意識した UI が最適です。 UI の改善策は、常にターゲットを理解したうえで講じましょう。
Slack の UI の特徴
コミュニケーションツールは、単に情報伝達のために用いられるものではなく、感情やニュアンスも含めて伝え合うためのものです。そんなコミュニケーションを実現する、 Slack の UI の特徴をご紹介します。
直感的で使いやすい Slack の UI
コミュニケーションツールの Slack は、ナビゲーションツールバーやワークスペース、サイドバーなど、直感的で使いやすい UI を備えているのが大きな特徴です。
コミュニケーションツールには、部門を問わずあらゆるチームのあらゆるメンバーが参加します。ですから、チームのコミュニケーションを活性化するためには、「誰にとっても使いやすい UI」であることが重要です。
コミュニケーションを効率化
Slack を活用することで、コミュニケーションがより手軽になります。メールや電話で伝えるほどの内容ではなくても、細かな確認事項や相談事項は業務内で発生するものです。
そういった細かい用件の場合、例えばダイレクトメッセージで確認内容を送り、受け取った側はフェイスマークや絵文字のグッドなどを選ぶことで、スムーズなやりとりができます。 Slack には、このような効率的なコミュニケーションをとれる UI が実装されています。
UI デザインはユーザー視点を大切に
UI は優れたUXを実現するうえで欠かせない要素であり、ユーザー体験を決定付けることも珍しくありません。今後、さらに IoT 化が加速していくなかで、顧客体験の向上はいっそう重要性を増していくでしょう。
今回ご紹介したポイントを参考に、ぜひ効果的な UI デザインとユーザー視点に立った改善策を実現してください。 UI 改善を継続的に繰り返すことが良質な UX を醸成し、顧客体験の向上へとつながっていくはずです。
よくある質問
HOME > Slack 日本語ブログTOP > 変革 > UI はなぜ重要？ UX との関連性やデザインのポイントを解説
助かります！
ご意見ありがとうございました！
了解です！
ご意見ありがとうございました！
うーん、システムがなにか不具合を起こしてるみたいです。後でもう一度お試しください。