【2024年最新】UIの基本！成果がでるUIを作る4つのコツをご紹介！

そもそもUIとは？

UIとは「ユーザーインターフェース」のことを指します。

インターフェースとは、異なる機器同士を接続する装置やソフトウエアのことを指していて、パソコンと周辺機器をつなぐケーブルなどをインターフェースと呼びます。それだけではなくAPIやWiFiなど、有形無形を問わず異なるものをつなぎ、中間的な役割を果たすものが幅広くインターフェースと呼ばれます。

人間とハードウエア、ソフトウエアをつなぐ入出力部分のこともインターフェースのひとつとして扱われ、ユーザーインターフェースと呼ばれます。例えば、パソコンならキーボードやマウスがUIであり、スマホやタブレットならタッチスクリーンがUIに該当します。

UIの種類

UIにはCUI（Character User Interface）とGUI（Graphical User Interface）の2種類あります。

CUIは、キーボード入力のみでコンピューターを操作するインターフェースを指し、開発者向けのUIです。Windowsのコマンドプロンプトなどは代表的なCUIといえるでしょう。

GUIは、日常的に使用するパソコンやスマホ向けのUIで、パソコンのマウスキーボード、スマホやタブレットのタッチスクリーンのことを指します。

CUIは文字入力、GUIは画像入力のことをイメージしてもらえれば、わかりやすいでしょう。パソコンのキーボードもCUIではないのかと思ってしまいそうですが、開発に関わらないものは基本的にGUIと考えてもらって問題ありません。広い意味ではカーナビなどもGUIに該当します。

UIとUXの違い

UXとは、User Experienceのことで、ユーザーが製品を通して得られる体験のことです。UIはユーザーが触れる部分であり客観的にわかるものですが、UXは「文字が大きくて見やすかった」「入力フォームが見づらく不快だった」など、主観的な意見も含みます。

よいUIが与える効果・メリット

「よいUI」とは、ユーザーにとって使いやすいUIのことを指します。では、よいUIにはどのような効果やメリットがあるのでしょうか。

ここからは、よいUIが与える効果やメリットを、ユーザー側と提供する側に分けて解説していきます。

ユーザー側のメリット

よいUIによるユーザー側のメリットは、なんといっても操作の際のストレスが減ることでしょう。

ごちゃごちゃしていて見にくかったり、操作ミスが起こりやすいUIだと、操作しているだけでイライラしてしまいます。ユーザー目線で設計されたよいUIなら、こうした操作時のストレスがなくなり、快適に製品やサービスを利用できます。

提供する側のメリット

ユーザーにとって使いやすいUIにすることで、提供側にもメリットが生まれます。

ユーザーにとってストレスな使いにくいUIだと、離脱率が上がったり、悪い評判がついたりしてしまいます。反対に、ユーザー目線で使いやすいUIにすれば、離脱率が減り成約率が上がったり、ユーザー満足度が上がりリピーターになってくれる確率が高くなるでしょう。

成果がでるUIと成果がでないUI

成果がでるUIと成果がでないUIの差はどこにあるのでしょうか。

UIに求められるものは一にも二にも使い勝手で、一般的には使い勝手のことをユーザビリティと呼びます。とはいえ、ユーザビリティはアメリカの工学博士であるヤコブ・ニールセンによってISO（国際標準化機構）で定義されていて、ISO9241-11に規定や評価の基準が書かれており、こちらがユーザビリティを測るための指標としてよく使われます。

ヤコブ・ニールセンによるユーザビリティの定義は5つの要素によって構成されています。

• 学習しやすさ
• 効率性
• 記憶しやすさ
• エラー
• 主観的満足度

学習しやすさは、ユーザーがシステムを理解し使いこなすまでの学びやすさを示しています。効率性は、使い方を理解したあとの目的を達成するための生産性の高さを指し、記憶しやすさは使い方を理解したあとにすぐに忘れてしまうような複雑な構造をしていないかを表します。

エラーは、安定して使うことができるか、またエラーが起こってもすぐに復帰できるかどうかの度合いを示します。主観的満足度はユーザーの満足度で、楽しく好んで利用できるかどうかが指標となります。

UIが成果がでるものかどうか判断する際に忘れてはならないのは、ユーザーの定義です。例えば、プロのデザイナー向けに作られた製品を非デザイナーが使いづらいと、低評価を下したからといって、それはUIが低いことにはならないのです。あくまでも、製品の利用者層として定義されたユーザーからの声がUIの評価につながります。

成果がでるUIを作る4つのコツ！ 

成果のでるUIを作るには、次の4つのコツを押さえてください。

• 効果的に色を使う
• ユーザー目線に立ってデザインする
• 心理学を意識する
• アフォーダンスを利用する

それぞれ詳しく解説していきます。

効果的に色を使う

色が付いている部分には、自然と目がいきます。これを利用し、目立たせたい部分や重要な部分は派手な色にしましょう。例えば、上のイラストのような警告文や、ショッピングサイトの購入ボタンは、ほかと色を変えるとよいでしょう。

ただし、色が多すぎてごちゃごちゃしてしまうと、色による強調効果が薄れてしまうため、色使いはシンプルにするほうがよいです。

ユーザー目線に立ってデザインする

引用元：らくらくスマートフォン F-52B

成果のでるよいUIは、ユーザーにとって使いやすいUIです。アイコンがメインコンテンツを邪魔していないか、閉じるボタンが小さすぎて押しにくくなっていないかなど、ユーザー目線に立って使いやすいデザインを考えましょう。

上の画像は、docomoが開発したらくらくスマートフォンです。ターゲットであるシニア世代に向けて、通常のスマートフォンよりアイコンが大きくデザインされています。

心理学を意識する

ユーザー目線で使いやすいデザインを考える際は、心理学を意識するとよいでしょう。

例えば、入力項目が多すぎると、離脱率が高くなる決断疲れを起こしたり、視覚情報と文字情報が一致しないと理解に時間がかかるサイモン効果などが現れます。この2つを知っていると、ユーザーがどのようなものを不快に感じ、どのようなUIが使いやすいのかが見えてきます。

アフォーダンスを利用する

アフォーダンスとは、直感的に機能が想起される知覚的、もしくは視覚的な性質のことです。アフォーダンスを利用することで、文章での細かい説明がなくてもユーザーにどのような操作をすればよいのかを示せます。

クリックできるボタンに影が付けられていたり、選択できない項目が薄い灰色になっているのもアフォーダンスの一例です。

優れたUIの事例紹介

ここからは、優れたUIの事例として次の10個をご紹介します。

• Rover
• Google
• ABEMA
• Airpods Max
• Google 検索エンジン
• 電通報
• Schooly
• COMICO
• Chrome Music Lab
• フリーボード
• 神戸女子大学

Rover

ペットシッターなどのサービスを提供しているRoverでは、トップページを開いてすぐに検索項目が出てきます。サービス内容の項目はイラスト付きになっているため、パッと見てサービス内容が理解できます。

ABEMA

動画配信サービスのABEMAは、トップページを開くとメニューバーや番組一覧、検索窓が表示されます。ABEMAを利用するうえで必要な機能がすぐに見つかるため、使いやすいデザインといえるでしょう。

AirPods Max

AppleのAirpods Maxの公式サイトは、シンプルでありながら白色をベースに色使いが効果的におこなわれ、製品の特徴をわかりやすく伝える役割を果たしています。

AirPods Maxのウェブページを開くと、まず目に飛び込んでくるのは、非常に鮮明なグラフィックスが使われた説明です。ウェブページをスクロールすると、さらにグラフィックスが現れ、製品の機能について詳しく知ることができます。動画ベースのグラフィックスもあり、テキストを読むことなく製品の魅力を楽しむことができるため、ユーザー目線に立ったデザインといえるでしょう。

Google検索エンジン

AirpodsMax 同様、Googleのページデザインも非常にシンプルで、ロゴと検索窓がページの中央に表示されているだけです。このシンプルなデザインのおかげで、ユーザーはサイトを開いた瞬間に、何をすべきかを直感的に理解することができます。

Googleは「使いやすさ」と「わかりやすさ」を追求することに重点を置いている優れた例といえるでしょう。

電通報

電通報は、電通グループのビジネス情報サイトです。電通報の既存サイトは、今のトレンドに合わず、過去の記事が探しにくいといったUIデザインの改善の課題があったようです。

サイトリニューアル後は、シンプルでユーザーファーストのデザインを実現するため、文字の大きさに強弱をつけ、左側のアイコンに影をつけクリックできるようしました。現在のトレンドに合ったUIを採用した事例といえるでしょう。

Schooly

Schoolyは、無料で使える時間割アプリです。科目ごとに色分けができるため、カラフルで見た目がかわいいだけでなく、ぱっと見で時間割を把握できます。シンプルで洗練されたデザインもユーザーから好評なようです。

comico

comicoは、今では主流となった縦読みを始めて導入したマンガアプリです。縦読みによって、通勤中など片手しか使えない場面でも気軽にマンガが楽しめるようになりました。

Chrome Music Lab

Chrome Music Labは、Googleが提供しているブラウザで使用できる音楽ツールです。作曲ツールは機能が複雑で、初心者には扱いが難しいものも多いですが、Chrome Music Labは直感的な操作で音を出したり、作曲したりできます。さらにカラフルでポップなデザインなので、子供から大人まで楽しめます。

フリーボード

フリーボードは、Appleが提供するホワイトボードアプリで、iOS／iPadOS 16.2、もしくはmacOS 13.1以降で無料で使えます。無限に広がるキャンバスに手書きでメモを書き込んだり、ファイルや付箋を貼り付けたりなどラフに使用できるのが特徴です。

また、ボードには薄いグレーのドットが打たれているので、書き込んでいるうちにずれて見にくくなってしまった…という心配もありません。

神戸女子大学

神戸女子大学の公式サイトは、可愛らしいイラストに小説のようなフォントのキャッチコピーを重ねたデザインになっています。スクロールするごとに、文字や資料請求の画面がアニメーションで現れます。前作の2種類も閲覧できるため、ぜひ一度サイトを訪れてみてください。

おすすめのUIデザインツール

優れたUIは、間違いなく使用目的の効率化を促進します。ここでは、UIデザイナーのためのUIキットの中で、特に優れたUIを誇る2つについて説明することにします。

多くのUIデザイナーが愛用しているUIキットといえば、Adobe XD CCとSketchです。

Adobe XD

Adobe XDはAdobeの製品で、ウェブサイトやモバイルアプリのUIやUXを作成するためのツールで、多くの業界人が使用しています。使用するにはAdobeCreativeCloudへ課金するなど有料になってしまいますが、最初はお試し期間もあります。

Adobe XDの何が優れているかというと、直感的に使えることです。UIの定義を考えると、直感的に使えるということはUIを制作するにあたり必須ともいえることです。いつも説明書を片手に置いておかなければ使えないような製品は、たとえ説明書通りにやれば優れた効率を生むとしても、とても優れたUIとはいえません。UIを制作するための製品がとてもハイレベルなUIであるため、制作者は最もお手軽なプロトモデルに触れながら制作できるので、無限のイノベーションが生まれます。

また、互換性に優れていることもXDの優れた点です。Windows、Macのどちらでも使え、iOSとAndroidの両方で共有しプレビューできるなど、あらゆるデバイスでの利用が可能です。Photoshopなど、ほかのツールから必要なデザインを取り込んだ際、すぐにファイルがXDで使えるようになることもデザイナーの作業効率を促進させます。

Sketch

SketchはMacで使えるグラフィックデザインツールで、Adobe XDに負けず劣らずユーザーの多いツールです。Adobe製品との互換性もあるため、どちらも使っているという方も少なくなりません。

特徴はWordPressのようにプラグインが豊富なことで、さまざまな機能を取捨選択し利用することができます。UIが最も使いやすいと感じる瞬間はどのようなときかと考えると、自分の思い通りにカスタマイズできたときでしょう。その意味でプラグインは複雑な操作をせずともカスタマイズが可能になるため、非常に便利な機能です。

Sketchが優れたUIデザインツールであるため、Sketchを使用しているデザイナーもまた、Sketchの思想を自然と取り入れるようになります。使用しているものに影響されるというのはどこの世界でもあることです。間接的にさまざまな制作物に影響を与えているのが、Sketchなのです。

おわりに

今回は、UIの基本と成果が出るUIを作るコツについて解説しました。

成果のでるUIとは、訪れるユーザーにとって使いやすいものであることが第一条件でしょう。直感的に使いやすく、ストレスを感じさせないUIを意識してみてください。

WEBでのお問い合わせはこちら