ユーザーインターフェース(UI)とは?意味やUXとの違い、種類、業界別の活用実態を解説
Check!
- UIの意味とUXとの違いがわかる
- UIの種類と基本ルール、改善の進め方がわかる
- UIを変えたときの周知と効果の確認がわかる
ユーザーインターフェース(UI)とは、人がコンピューターや製品、サービスを使うときに直接触れる接点のことです。Webサイトの画面やボタン、アプリのメニュー、入力フォーム、機械の操作パネル、音声で操作するスマートスピーカーまで、人と機器のあいだでやり取りが行われる部分はすべてUIにあたります。UIの出来は使いやすさを左右し、問い合わせの数や操作ミス、申し込みの完了率といった業務の成果にも関わります。本記事では、UIの意味と語源、UXとの違い、種類、重視される理由、デザインの基本ルール、改善の進め方、業界別の活用実態を整理します。あわせて、UIを変えたときに必要になる「周知」と「効果の確認」を支えるサービスの一例も紹介します。
UIの話題、いま一番気になるのはどこ? かんたん診断
Q1. いま一番知りたいことは?
おすすめ記事
目次
開く
閉じる
開く
閉じる
UI(ユーザーインターフェース)とは?意味・語源と、UIを変えるときに必要なこと
UI(ユーザーインターフェース)とは、人と製品・サービスのあいだで情報をやり取りする接点のことです。画面の見た目だけでなく、操作の方法や、エラーが起きたときの案内の出し方まで含みます。
インターフェースの語源と、日本語での言い方
インターフェース(interface)は、もともと「境界面」「接触面」を意味する言葉です。コンピューターの分野では、本体と周辺機器をつなぐ規格(USBなど)を指して使われてきました。この「何かと何かをつなぐ部分」という考え方が人と機械のあいだにも当てはめられ、人が機械を操作するための接点をユーザーインターフェースと呼ぶようになりました。製造業や機器設計の分野では、人と機械を強調した「ヒューマンマシンインターフェース(HMI)」という言い方も使われます。
日本語に言い換えるなら、「利用者との接点」「操作画面・操作方法」といった言い方になります。表記には「ユーザーインターフェース」「ユーザーインターフェイス」「ユーザインタフェース」などのゆれがありますが、意味は同じです。JISの規格(JIS Z 8521)の本文のように、長音を省いて「ユーザ」と書く表記も見られます。
インターフェースの3つの分類
インターフェースは、何と何をつなぐかによって大きく3つに分けられます。UIはこのうち、人が関わる部分を指します。
| 分類 | つなぐもの | 具体例 |
|---|---|---|
| ハードウェアインターフェース | 機器と機器 | USB、HDMI、LANケーブルの端子 |
| ソフトウェアインターフェース | ソフトウェアとソフトウェア | API(システム同士がデータをやり取りする仕組み) |
| ユーザーインターフェース | 人と機器・ソフトウェア | 画面、ボタン、キーボード、タッチパネル、音声操作 |
UIは「作って終わり」ではない|変更のたびに生まれる2つの手間
UIは一度作れば完成するものではなく、利用者の声や数字を見ながら直し続けるものです。ここで担当者がつまずきやすいのが、次の2点です。1つは、画面や操作の手順を変えたあとに、社内の利用者や顧客へ使い方を伝える「周知」の手間です。変更のたびに説明資料を作り直していると、改善を重ねるほど負担が積み上がります。もう1つは、変えた結果が良くなったのかを、感覚ではなく数字で確かめる「効果の確認」です。次の表は、この2つの場面で使えるサービスの一例を、優劣ではなく役割の違いで並べたものです。
UIを変えたあとの「周知」と「効果の確認」を支えるサービスの比較
自社の状況を選ぶと、合うサービスが強調されます。優劣ではなく役割の違いで並べています
この状況に合う一例:Video Craft。撮影なしで説明動画を作れるため、画面が変わるたびの操作説明を作り直しやすくなります。
資料を無料ダウンロードこの状況に合う一例:TETORI。ABテストと効果検証レポートの機能で、変更に対する利用者の反応を確かめられます。
資料を無料ダウンロード| サービス | Video Craft |
TETORI |
|---|---|---|
| 向いている会社 | 画面や手順を変えるたびに、操作説明や研修の動画を撮影なしで用意したい会社 | 自社サイトの案内や表示を変え、利用者の反応を数字で確かめたい会社 |
| 特徴 | AI音声とアバターで撮影なしに動画を作成。PowerPointと同じような操作感で、PDFやPowerPointのデータも取り込める | Web接客ツール。ポップアップや生成AIチャットボット、ABテスト、効果検証レポートの機能がある。ノーコードで施策を作成できる |
| 注意したい点 | PowerPointの変換では一部対応していない要素がある。利用できる人数はプランによって異なる | UIそのものを設計するツールではない。料金体系やプランの詳細は問い合わせで確認が必要で、一部の機能はオプション |
| 資料・詳細 |
表は横にスクロールできます。料金はプランによって異なるため、資料や公式サイトで確認してください。
UIを変えるたびに操作説明を作り直す負担を減らしたい場合の一例が、Video Craft(株式会社Stand Technologies)です。AI音声とアバターを使い、撮影なしで説明動画を作れるサービスで、PowerPointと同じような操作感で作成でき、PDFやPowerPointのデータを取り込めます。説明の内容に変更が出たときも、ナレーション原稿を直せば動画を修正でき、再撮影は不要です。一方で、PowerPointのデータを変換する際は一部対応していない要素があるため反映内容の確認が必要で、利用できる人数もプランによって異なります。料金はプランによって異なるため、資料や公式サイトで確認してください。
株式会社Stand Technologies
Video Craft
株式会社Stand Technologies
Video Craft
AIで簡単作成!効率的に高品質な動画を作成したい方におすすめ

おすすめ!
- 日本語AIアバターとAI音声により、撮影不要で高品質な動画を作成
- パワーポイントと同じ操作感覚で、研修やeラーニングなどに適した動画作成が可能
- ワンクリックで50ヶ国語に翻訳でき、翻訳作業の効率化を図れる
気になる…
- グループ共有できる人数はプランによって異なる
「研修動画の作成にあたり、これまでPowerPointに音声を吹き込んでいましたが、録り直しが多く作業負荷が掛かっていました。」
出典:みずほ信託銀行株式会社様のVideo Craft導入事例(PR TIMES、2026年6月4日)
自社サイトの表示や案内を変えたときに、反応を数字で確かめたい場合の一例が、TETORI(グルービーモバイル株式会社)です。UIの設計そのものを行うツールではなく、変えた案内に利用者がどう反応したかを確かめる手段の1つです。ユーザーの属性や行動に応じてポップアップなどで案内するWeb接客ツールで、複数のデザインを比べるABテストや、シナリオごとの効果を見る検証レポートの機能があります。ノーコードで施策を作成でき、100種類以上の業種別シナリオテンプレートも用意されています。一方で、料金体系やプランの詳細は問い合わせで確認する必要があり、一部の機能はオプションとして別途費用がかかります。料金は資料や公式サイトで確認してください。
グルービーモバイル株式会社
TETORI
グルービーモバイル株式会社
TETORI
一人ひとりに適した接客を実現!初めてでも本格的なWeb接客を行いたい方におすすめ
おすすめ!
- ユーザーのアクセス情報・行動履歴を自動取得し、一人ひとりに合わせた案内を表示
- ノーコード作成機能や100種以上のテンプレートがあり、専門知識がなくても扱える
- シナリオ作成の支援や操作レクチャーなど、充実したサポートを無料で受けられる
気になる…
- 詳しい料金プランの確認には問い合わせが必要
「JIS X 8341-3:2016(適合レベルAA)に準拠した専用テンプレートの提供を開始いたしました。」
出典:グルービーモバイル株式会社のプレスリリース(PR TIMES、2026年5月28日)。同リリースでは、長野県諏訪市役所が自治体サイトでのアクセシビリティへの配慮を導入の前提にしたと紹介されています。
UIとUXの違い(見るものと感じるもの)
UIとUXの違いは、UIが「ユーザーが見て触れる接点」であるのに対し、UXが「製品やサービスを通じてユーザーが得る体験全体」である点です。UX(User Experience、ユーザーエクスペリエンス)の例を、ECサイトで考えてみます。商品ページの見やすさやカートボタンの位置はUIです。一方、商品を知ってから購入し、届いた商品を使い、問い合わせに対応してもらうまでの一連の流れと、そのとき感じた満足や不満がUXです。
| 比較項目 | UI(ユーザーインターフェース) | UX(ユーザーエクスペリエンス) |
|---|---|---|
| 意味 | 人と製品・サービスの接点 | 製品・サービスを通じて得る体験全体 |
| 範囲 | 画面、ボタン、操作方法など目に見える部分が中心 | 利用前の期待から利用後の評価まで、目に見えない感情も含む |
| 問い | 迷わず操作できるか、見やすいか | 目的を果たせたか、また使いたいと思えるか |
| 関わる部門 | デザイナー、エンジニア、サイト担当者 | 上記に加え、営業、カスタマーサポート、物流、経営層など |
| 評価の方法例 | ユーザビリティテスト、クリック率、入力完了率 | 顧客満足度調査、継続利用率、口コミ、問い合わせ内容 |
「UX/UI」「UI/UX」と並べて書かれることがありますが、これは画面の設計(UI)と体験全体の設計(UX)をあわせて扱う分野や職種を指す呼び方として使われる表記です。意味としてはUIとUXは別のものなので、記事や資料を読むときは、どちらの話をしているのかを切り分けると理解しやすくなります。
よくある誤解が「UIを良くすればUXも必ず良くなる」「UXはUIの言い換えにすぎない」というものです。実際には、画面がどれほど使いやすくても、配送が遅れたり、サポートの対応が不十分だったりすれば、UXは悪くなります。逆に、UIが多少古くても、必要な情報がすぐ見つかり、対応が丁寧なサービスは高く評価されることがあります。UIはUXを構成する重要な要素の1つであり、UXのすべてではありません。
また、UIの改善は「デザインの刷新」と同じ意味ではありません。色や画像を一新しても、操作の手順やボタンの文言が変わらなければ、使いにくさは残ります。反対に、見た目をほとんど変えずに、入力項目を減らす、エラーの理由を具体的に表示する、といった地味な変更だけでユーザビリティが大きく改善することもあります。
UIとUXの関係性(優れたUXに必要なUI設計)
UIとUXの関係は、UXという大きな目標を実現するための手段の1つがUIだと考えると整理しやすくなります。家づくりに例えると、UXは「家族が快適に暮らせること」、UIは「ドアノブの形、照明のスイッチの位置、階段の手すり」です。快適な暮らしにはスイッチの位置だけでは足りませんが、スイッチが使いにくければ毎日小さなストレスが積み重なります。
UXを支えるUI設計の基本原則
良いUIには、業界や媒体を問わず共通する原則があります。代表的なものを5つ挙げます。
- 一貫性:同じ意味のボタンは同じ色・形・位置にそろえ、ページごとに操作方法を変えない
- わかりやすいフィードバック:押した、送信した、エラーが起きたといった状態を、すぐにわかる形で返す
- 迷わせない導線:次に何をすればよいかが一目でわかるように、選択肢を絞り、主要な操作を目立たせる
- ミスの予防と回復:間違えにくい入力方法を用意し、間違えたときは理由と直し方を具体的に示す
- 誰でも使える配慮:文字の大きさやコントラスト、スマートフォンでの押しやすさ、音声読み上げへの対応など、利用者の多様な状況を想定する
ボタンや入力欄が「押せそう」「入力できそう」と一目で伝わるかどうかは、アフォーダンスという考え方で整理できます。詳しくはアフォーダンスとは?シグニファイアとの違いとUI設計の実践ステップで解説しています。
デジタル庁が公開している「デジタル庁デザインシステム」は、行政サービスのWebサイトやアプリで使う配色や書体の考え方、UI部品とその使い方、アクセシビリティを踏まえた設計・実装のガイドをまとめたものです。行政向けに作られていますが、部品の一貫性やアクセシビリティの考え方は民間企業のサイトにも参考になります。自社でUIのルールを作る際の出発点として目を通しておくとよいでしょう。
UIの種類(CUI・GUI・NUI・VUIなど)
UIの種類は、操作の方法によってCUI・GUI・NUI・VUI・対話型などに分けられます。コンピューターの歴史とともに、専門家向けの文字入力から、誰でも直感的に使える操作へと広がってきました。
| 種類 | 操作の方法 | 主な利用場面 | 特徴 |
|---|---|---|---|
| CUI(Character User Interface) | キーボードで文字のコマンドを入力 | サーバー管理、開発作業 | 動作が軽く、繰り返し作業の自動化に強いが、コマンドを覚える必要がある |
| GUI(Graphical User Interface) | アイコンやボタンをマウスやタッチで操作 | パソコン、スマートフォン、Webサイト全般 | 直感的で専門知識がなくても使いやすく、現在最も普及している |
| NUI(Natural User Interface) | タッチ、ジェスチャー、視線など自然な動作 | タブレット、ゲーム機、VR機器 | 体の動きで操作できる一方、誤反応への配慮が必要 |
| VUI(Voice User Interface) | 音声で話しかける | スマートスピーカー、カーナビ、電話の自動応答 | 手がふさがっていても使えるが、周囲の騒音やプライバシーに注意が必要 |
| 対話型(チャット)UI | 文章で質問や指示を入力し、会話形式で操作 | チャットボット、生成AIツール | メニューを探さずに目的を伝えられるが、何ができるかが見えにくい |
GUIとCUIの違い
GUIとCUIの違いは、操作を「見て選ぶ」か「文字で指示する」かにあります。GUIは画面上のアイコンやボタンを見ながら選ぶため、初めての人でも操作しやすい一方、画面にない操作はできません。CUIはコマンドを正確に入力する必要があるものの、同じ操作を自動化したり、離れた機器を軽く操作したりするのに向いています。どちらが優れているかではなく、利用者と作業の内容によって使い分けられています。
UIとAIの違い
UIとAIは、別の層の言葉です。UIは人と機器の接点、AI(人工知能)は文章の生成や判断などを行う技術を指します。両者は対立せず、AIを使った対話型UIのように、AIが接点の役割を担う場合もあります。近年は、生成AIの普及によって、文章で指示するだけで操作が完了する対話型のUIが急速に広がっています。ただし、対話型UIは「何を聞けばよいかわからない」という新しい使いにくさも生みます。質問の例を表示する、よく使う操作はボタンでも選べるようにするなど、GUIと組み合わせて設計するのが現実的です。
UIが重視される理由とユーザビリティの考え方
UIが重視される理由は、使いやすさが利用者の満足だけでなく、業務の成果と社会的な要請にも関わるためです。主な理由を3つに分けて整理します。
- 利用する機器と場面が多様になったこと:パソコンに加えて、スマートフォン、タブレット、音声操作、店頭の端末など、同じサービスを異なる環境で使う人が増え、環境ごとの操作しやすさが求められています
- 業務の成果と負担に直結すること:入力フォームが分かりにくければ申し込みが完了せず、案内が見つけにくければ問い合わせや電話対応が増えます。社内システムのUIが分かりにくいと、操作の教育や確認の手間も増えます
- アクセシビリティへの要請が高まっていること:高齢の方や障害のある方を含む、さまざまな人が同じように使えるかが問われるようになっています
3つ目のアクセシビリティについては、障害者差別解消法の改正により、事業者による合理的配慮の提供が2024年4月1日から義務化されています(内閣府「障害を理由とする差別の解消の推進」)。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」では、文字と背景のコントラスト、画像の代替テキスト、キーボードだけで操作できることなど、具体的な配慮点が紹介されています。なお、法的な対応範囲は個別の状況によって異なります。この記事は法的助言ではないため、詳しくは専門家や所管官庁の情報をご確認ください。
UIの良し悪しを測る「ユーザビリティ」
UIの使いやすさを表す言葉がユーザビリティです。JIS Z 8521:2020(国際規格ISO 9241-11:2018をもとにした規格)では、ユーザビリティを、特定のユーザが特定の利用状況で、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合いと定義しています。3つの観点は、次のように整理できます。
| 観点 | 規格での定義(要旨) | UIでの見方の例 |
|---|---|---|
| 効果 | ユーザが目標を達成する際の正確性及び完全性 | 入力ミスなく、最後まで手続きを終えられるか |
| 効率 | 達成された結果に関連して費やした資源 | 目的の操作に着くまでの時間や手数が少ないか |
| 満足 | 利用に起因するユーザのニーズ及び期待が満たされている程度についての、身体的、認知的及び感情的な受け止め方 | 使っていて迷いや不快さがなく、また使いたいと思えるか |
「なんとなく使いにくい」という感覚を、この3つに分けて考えると、どこを直すべきかが具体的になります。なお、旧版(JIS Z 8521:1999)では「有効さ」「効率」「満足度」という用語が使われていたため、古い資料では表記が異なります。
UIデザインの基本ルール|配置・配色・表示速度・端末
UIデザインの基本は、情報を整理して見せ、読みやすい配色にし、表示を軽くし、端末ごとに操作しやすくすることです。上位の解説記事でもよく取り上げられる論点を、確認できる基準とあわせて整理します。
配置と見た目の4原則(近接・整列・対比・反復)
画面の配置には、デザインの基本原則として広く紹介される4つの考え方があります。
- 近接:関連する情報を近くにまとめ、関係のない情報とは距離を空ける
- 整列:文字やボタンの端をそろえ、視線の動きを一定にする
- 対比:重要な要素と補足的な要素の大きさや色に差をつけ、主役をわかりやすくする
- 反復:同じ種類の要素には同じ見た目を繰り返し使い、一貫性を保つ
あわせて、1つの画面に情報や選択肢を詰め込みすぎないことも大切です。目的の操作が埋もれて見つからなければ、利用者は迷って離れてしまいます。
文字と背景のコントラスト
読みやすさの基準として、W3CのWCAG 2.2では、レベルAAで通常の文字と背景の明るさの比(コントラスト比)を4.5:1以上、大きな文字では3:1以上にするよう定めています。薄いグレーの文字を白い背景に置くようなデザインは、見た目が整って見えても、基準を満たさないことがあります。
ページの表示速度
表示の速さも使いやすさの一部です。Googleのweb.devでは、ページの主要な内容が表示されるまでの時間(LCP)が2.5秒以下であれば良好、4.0秒を超えると不良という目安が示されています。画像を大きいまま載せていないか、不要なスクリプトを読み込んでいないかを点検するところから始められます。
端末ごとの確認とレスポンシブ対応
パソコンの画面だけで確認し、スマートフォンでボタンが小さすぎる、文字がはみ出すといった崩れに気づかないケースは少なくありません。実際の利用が多い端末で、表示と操作を確かめることが基本です。画面の幅に合わせてレイアウトが変わるレスポンシブ対応をしていても、指で押しやすい大きさと間隔になっているかは、別に確認が必要です。
画面の試作(プロトタイプ)で確かめる
GUIの画面を実装する前に、試作(プロトタイプ)を作って利用者に触ってもらうと、手戻りを減らせます。紙とペンの簡単なものから、画面デザイン用のツールで画面遷移まで再現するものまで方法はさまざまです。ツールを選ぶときは、画面遷移を試作できるか、複数人で共有してコメントを集められるか、開発担当へ引き渡しやすいかを確認するとよいでしょう。
UI改善の進め方|現状把握から検証までの4ステップ
UI改善は、担当者の感覚や社内の好みで決めるのではなく、利用者の実際の行動をもとに進めるのが基本です。一般的には、現状把握、課題の特定、改善案の実施、検証の4ステップを繰り返します。
- 現状把握:アクセス解析でどのページで離脱が多いか、どのボタンが押されていないかを確認し、問い合わせ内容から「わかりにくい」と言われている箇所を集める
- 課題の特定:数人の利用者に実際に操作してもらうユーザビリティテストや、専門家が原則に沿って画面を点検するエキスパートレビューで、つまずく理由を明らかにする
- 改善案の作成と実施:原因に合わせて、文言、配置、手順などを変更する。一度に多くを変えると効果が見えにくくなるため、優先度の高いものから順に行う
- 検証:変更前後の数値を比べ、効果がなければ元に戻すか別の案を試す。可能であれば、2つの案を並行して見せて比べるA/Bテストを使う
定量と定性、2種類のデータを使い分ける
現状把握では、2種類のデータを組み合わせます。定量データは、アクセス数、離脱率、入力完了率のように数字で測れるものです。どこで問題が起きているかを見つけるのに向いています。定性データは、利用者の操作の様子や問い合わせの声のように、数字に表れない理由を知るためのものです。数字で場所を絞り、観察や声で理由を確かめる、という順序で使うと、改善案の的が外れにくくなります。
ユーザビリティテストは小さく始める
ユーザビリティテストは大がかりに考える必要はありません。社外の協力者や、そのサイトに関わっていない社員の数人に「この商品の問い合わせをしてみてください」と頼み、操作の様子を横で見るだけでも、作り手が気づかなかったつまずきの多くが見つかるといわれています。
UI改善の回し方、今のやり方で足りている?セルフチェック
当てはまるものを選んでください(登録不要)
業界別に見るUIの活用実態
UIはWebサイトやアプリだけの話ではありません。業界によって利用者や利用場面が異なるため、UIで重視される点も変わります。代表的な業界の傾向を整理します。
| 業界 | 主なUI | 重視される点 |
|---|---|---|
| 金融 | ATM、ネットバンキング、スマホ決済アプリ | 金額や振込先の誤入力防止、確認画面のわかりやすさ、本人認証の手軽さと安全性の両立 |
| 製造 | 工作機械の操作パネル、生産管理システムの画面 | 誤操作の防止、異常時に一目でわかる表示、手袋をしたままでも押せる大きさ |
| 小売・EC | ECサイト、セルフレジ、店頭のタッチパネル | 商品の探しやすさ、購入までの手順の少なさ、初めての人でも迷わない案内 |
| 飲食・サービス | モバイルオーダー、予約サイト、券売機 | 混雑時でも短時間で操作が終わること、多言語対応 |
| 医療・介護 | 電子カルテ、受付機、オンライン予約 | 入力ミスの防止、忙しい現場でも少ない操作で記録できること、高齢の利用者への配慮 |
| 行政 | 電子申請、自治体のWebサイト | 誰もが使えるアクセシビリティ、専門用語を避けた案内、手続きの途中で迷わない画面構成 |
金融では、1回の誤操作が大きな損失につながるため、操作を少なくすることよりも、確認と取り消しのしやすさが優先される傾向があります。製造の現場では、機械を操作する画面のわかりにくさが事故や不良品の原因になり得るため、異常を色や音で知らせる、危険な操作には二段階の確認を設けるといった設計が重視されます。一方、小売やECでは、購入までの手順が増えるほど途中で離れる人が増えやすいため、入力項目を減らす、会員登録をしなくても購入できるようにするなど、手間を省く工夫が中心になります。
業界を問わず共通しているのは、UIの改善が「現場の業務負担」や「問い合わせの削減」といった社内の成果にもつながるという点です。たとえば、自社サイトの「よくある質問」が見つけにくいだけで、電話やメールの問い合わせが増え、担当者の時間が奪われます。逆に、情報の置き場所と案内を整えるだけで、問い合わせが減り、利用者の満足度も上がることがあります。行政分野ではデジタル庁がデザインシステムを公開し、UIの部品やルールを統一する取り組みが進んでおり、利用者がどの手続きでも同じ操作で迷わず使える状態を目指しています。
社内で使う業務システム(SaaS)のUIを選ぶ側の視点では、SaaS UIとは|使いやすさの基準と選定時の5つの確認ポイント・トライアル活用法が参考になります。
UI改善でよくある失敗パターン
UI改善に取り組んだものの成果が出なかった、かえって使いにくくなったというケースには、いくつかの共通点があります。代表的な失敗と、改善の方向性を整理します。
| 失敗パターン(Before) | 改善の方向性(After) |
|---|---|
| 見た目の刷新だけを行い、操作の手順やボタンの文言はそのまま | 利用者がつまずいている箇所を特定し、手順や文言から直す |
| 社内の担当者や役員の好みでデザインを決める | アクセス解析やユーザビリティテストの結果をもとに判断する |
| 一度に多くの箇所を変えて、何が効いたのかわからない | 優先度の高い箇所から順に変え、変更ごとに効果を確認する |
| パソコンの画面だけで確認し、スマートフォンで崩れている | 実際の利用が多い端末で表示と操作を確認する |
| 画面を変えたのに、使い方の周知が文章の連絡だけで終わり、問い合わせが増える | 変更点と操作手順を、見ればわかる形(画像や動画)で残して共有する |
| ページごとにボタンの色や形がばらばら | UI部品とルールをまとめたデザインガイドを作り、テンプレートで統一する |
特に見落とされやすいのが、周知と統一の2点です。画面を変えたのに使い方が伝わらなければ、利用者は戸惑い、問い合わせが増えて、改善の効果が相殺されてしまいます。また、ページを追加するたびに担当者が独自にデザインを作っていると、サイト全体の一貫性が崩れ、利用者は毎回操作方法を覚え直すことになります。変更のたびに操作説明を作り直す負担が大きいなら、撮影なしで説明動画を作り直せる仕組みを持っておくと、周知を続けやすくなります。次のボックスは、そうした場面で使えるサービスの一例です。
よくある質問(FAQ)
Q1. ユーザーインターフェース(UI)とは簡単にいうと何ですか?
A. 人が製品やサービスを使うときに直接触れる接点のことです。Webサイトやアプリの画面、ボタン、メニュー、入力フォームのほか、機械の操作パネルや音声で操作する仕組みも含まれます。
Q2. UIとUXの違いは何ですか?
A. UIは画面や操作方法など、ユーザーが見て触れる接点を指します。UXは、利用前の期待から利用後の評価まで、製品やサービスを通じて得る体験全体を指します。UIはUXを構成する重要な要素の1つです。
Q3. UIとAIの違いは何ですか?
A. UIは人と機器の接点、AI(人工知能)は文章の生成や判断などを行う技術で、指しているものが異なります。AIを使ったチャットなどの対話型UIのように、AIが接点の役割を担う場合もあります。
Q4. 「ユーザーインターフェース」は日本語で何と言いますか?
A. 「利用者との接点」「操作画面・操作方法」のように言い換えられます。表記は「ユーザーインターフェース」「ユーザーインターフェイス」「ユーザインタフェース」などゆれがありますが、意味は同じです。
Q5. UIにはどのような種類がありますか?
A. 文字のコマンドで操作するCUI、アイコンやボタンで操作するGUI、タッチやジェスチャーで操作するNUI、音声で操作するVUIなどがあります。近年は、生成AIなどで使われる対話型のUIも広がっています。
Q6. UI改善は何から始めればよいですか?
A. まずアクセス解析や問い合わせ内容から、利用者がつまずいている箇所を把握することから始めます。数人に実際に操作してもらうユーザビリティテストも有効です。そのうえで優先度の高い箇所から1つずつ直し、変更前後の数値で効果を確かめます。
まとめ
ユーザーインターフェース(UI)は、人と製品やサービスをつなぐ接点であり、その使いやすさは利用者の満足だけでなく、問い合わせの数や操作ミス、申し込みの完了率といった業務上の成果にも影響します。押さえておきたいポイントは次の4つです。
- UIは見て触れる接点、UXは体験全体であり、UIはUXを支える重要な要素の1つである
- CUI、GUI、NUI、VUI、対話型などの種類や業界ごとの重視点を踏まえ、利用者と利用場面に合わせて設計する
- UI改善は感覚ではなく利用者の行動をもとに、現状把握、課題の特定、実施、検証を小さく繰り返す
- UIを変えるたびに必要になる周知と効果の確認を支えるサービス(説明動画の作成、ABテストなど)の資料を取り寄せ、自社に合うかを検討する
まずは自社サイトで、問い合わせの多い内容や離脱の多いページを1つ選び、利用者がどこで迷っているのかを確認するところから始めてみてください。
参考文献
- デジタル庁「デジタル庁デザインシステム」https://design.digital.go.jp/
- デジタル庁「ウェブアクセシビリティ導入ガイドブック」https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook
- 内閣府「障害を理由とする差別の解消の推進」https://www8.cao.go.jp/shougai/suishin/sabekai.html
- W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- web.dev「Largest Contentful Paint (LCP)」https://web.dev/articles/lcp
- JIS Z 8521:2020「人間工学-人とシステムとのインタラクション-ユーザビリティの定義及び概念」(本文の閲覧先)https://kikakurui.com/z8/Z8521-2020-01.html
- PR TIMES「みずほ信託銀行株式会社様が研修動画の作成を目的にVideo Craftを導入」https://prtimes.jp/main/html/rd/p/000000110.000056192.html
- PR TIMES「Web接客ツール「TETORI」、ウェブアクセシビリティ対応テンプレート提供開始」https://prtimes.jp/main/html/rd/p/000000077.000004987.html