Strategy / Design

このページの先頭へ

Insight

Web制作のさまざまな情報をご紹介

UIとは?Webサイト・アプリを発注する人・作る人・学ぶ人の立場別に「何を知ればいいか」を解説

「UIという言葉を雰囲気でしか掴めていない」あなたへ

「UIとは何なのか、なんとなくわかるけれど、人に説明できるほどではない」。Webサイトやアプリを発注したい担当者、あるいはこれからデザインを学びたい初学者の方から、こうした声をよく聞きます。打ち合わせや記事の中で「UIを改善しましょう」「UI/UXが大事です」と言われても、具体的に何を指しているのかがつかめず、判断に自信が持てない。そんなモヤモヤを抱えていないでしょうか。

本記事では、UI(ユーザーインターフェース)の意味を最初に一言で示したうえで、身近な具体例、UXとの違い、そして「発注する人・作る人・学ぶ人」という立場別に知っておくべき範囲を、わかりやすい言葉で順を追って解説します。読み終わるころには、UIという言葉を自分の状況に当てはめて語れるようになっているはずです。

UIとは「ユーザーとシステムの接点」のこと

ひとことで言えば、UIとは「ユーザーとシステムの接点(ふれる部分)」のことです。UIは「ユーザーインターフェース(User Interface)」の略で、「インターフェース」とは日本語にすると「接点」「境界面」を意味します。つまりユーザーインターフェースとは、人間とコンピューターやサービスとが出会い、やりとりする場所を指す言葉なのです。「UIとはWebの世界だけの専門用語」と思われがちですが、実際にはもっと広い概念で、人が機械やシステムを操作するために触れる部分すべてがUIに含まれます。

この「接点」という捉え方が大切なのは、UIが良いか悪いかで、ユーザーが目的を達成できるかどうかが大きく変わるからです。どれほど優れた機能や情報を持つWebサイト・アプリであっても、ユーザーが触れる接点がわかりにくければ、その価値は伝わりません。逆に、接点がわかりやすく整理されていれば、ユーザーはストレスなく目的にたどり着けます。UIはサービスの「玄関」や「窓口」のような存在であり、ここでつまずくと中に入ってもらえない、と考えるとイメージしやすいでしょう。

具体例を挙げてみます。あなたがスマートフォンで買い物をするとき、商品画像をタップし、「カートに入れる」ボタンを押し、住所を入力するフォームに記入し、最後に「購入する」ボタンを押すはずです。この一連の流れで触れるボタン、メニュー、入力フォーム、アイコン、画面のレイアウト、文字の大きさや色――これらすべてがUIです。テレビのリモコンのボタン配置や、電子レンジの操作パネル、銀行のATMの画面も、人と機械の接点という意味では立派なUIです。「UIとはわかりやすく言うと何?」と聞かれたら、「アプリやサイト、機械を使うときに、あなたが実際に目で見て、指でふれて操作する部分のこと」と答えれば、たいていの人に伝わります。

この章でおさえておきたいのは、UIは「見た目」だけを指すのではなく、「操作のための接点全体」を指すという点です。色やフォントといったデザイン要素はもちろんですが、ボタンの配置、押したときの反応、次に何をすればいいかを示す案内なども含めて、ユーザーが迷わず操作できる接点をつくることがUIの役割です。UIとはIT業界に限らず、家電や自動車、券売機など、人が何かを操作するあらゆる場面に存在しているのだと理解しておくと、この先の話がぐっとわかりやすくなります。まずは「UI=ユーザーとシステムの接点」という一文を、頭の片隅に置いておいてください。

UX/UI

身近なUIの具体例で「接点」をイメージする

前章で「UIとはユーザーとシステムの接点」だと述べました。ここでは、その接点が具体的にどんな形で私たちの身の回りに存在しているのかを、できるだけ身近な例で見ていきます。具体例を丁寧に追うのは、UIは抽象的な概念のままだと「自分の仕事や生活とどうつながるのか」が見えにくく、結局なんとなくの理解で終わってしまうからです。具体物に落とし込むことで、初めて「あれもこれもUIだったのか」と腑に落ちます。

最もわかりやすいのがボタンです。Webサイトの「お問い合わせ」ボタン、アプリの「送信」ボタン、動画の再生ボタンなど、私たちは一日に何度もボタンに触れています。良いUIのボタンは、押せることがひと目でわかり、押したあとに反応が返ってきて、何が起きるかが予測できます。逆に、リンクなのかボタンなのか判別がつかなかったり、押しても無反応に見えたりすると、ユーザーは不安になります。

次にメニューです。Webサイト上部にずらりと並ぶナビゲーション、スマートフォンでおなじみの三本線(ハンバーガーメニュー)などがこれにあたります。メニューはサイトという建物の「案内板」であり、ここが整理されていないと、ユーザーは目的のページにたどり着けず迷子になってしまいます。

そして入力フォームも重要なUIです。会員登録や問い合わせの際に名前やメールアドレスを入力する欄、検索ボックスなどがフォームです。フォームは入力ミスを防ぐ工夫が成果を大きく左右する場所で、たとえば郵便番号を入れると住所が自動で表示されたり、入力エラーがあったときにどこを直せばいいかをその場で教えてくれたりすると、ユーザーの負担が減ります。このほかにも、選択肢から一つを選ぶラジオボタン、オン・オフを切り替えるトグル、進捗を示すプログレスバー、操作のヒントを出すアイコンなど、数えきれないほどのUIの部品(UIパーツ)が組み合わさって、一つの画面ができあがっています。

ここで、リモコンやATMといった画面の外の例も思い出してください。エアコンのリモコンのボタンが多すぎて目的の操作にたどり着けない、券売機の画面の文字が小さくて高齢の方が困っている――これらはすべてUIの良し悪しの問題です。つまりUIとはWebやアプリだけの話ではなく、人が何かを操作する接点すべてに関わるものだとわかります。日常の中で「これは使いやすいな」「これは使いにくいな」と感じる瞬間があれば、それはあなたがUIの良し悪しを体で評価している証拠です。この感覚を意識的に観察する習慣をつけると、UIへの理解は一気に深まります。仕事でWebサイトやアプリを発注・制作する立場の方は、まず自分が日々触れているUIを「接点の集まり」として眺め直すことから始めてみてください。

UIとUXの違いをわかりやすく整理する

UIを語るうえで必ず登場するのが「UX」という言葉です。両者をひとことで分けるなら、UIは「ユーザーがふれる接点そのもの」、UXは「その接点を通じて得られる体験全体」を指します。混同されやすい二語ですが、指している範囲が違うと理解すれば、迷うことはなくなります。

この違いを押さえておきたいのは、UIだけを良くしても、ユーザーの満足(UX)が高まるとは限らないからです。ボタンの見た目が美しくても、そもそも探している情報にたどり着けなければ、ユーザーの体験は良くなりません。逆に、UIが体験の入口である以上、UXを良くするにはまずUIを整える必要があります。UIはUXの一部であり、UXという大きな器の中に、UIという接点が含まれているという関係を理解しておくことが大切です。

具体例で考えてみましょう。レストランにたとえると、UIは「メニュー表の見やすさ、テーブルの配置、店内の照明や内装」といった、お客様が直接ふれる部分です。一方でUXは「料理がおいしかった、店員さんの対応が気持ちよかった、また来たいと思った」という、来店から退店までを通じて得た体験の全体を指します。Webサイトに置き換えれば、UIは「ボタンや文字、レイアウトの見やすさ・操作のしやすさ」で、UXは「探していた情報がすぐ見つかってストレスなく注文できた、また使いたいと感じた」という満足そのものです。「ユーザーインターフェースとは接点」「ユーザーエクスペリエンス(UX)とは体験」と覚えておくと、両者の関係をすっきり整理できます。両者の関係を一枚の図で確認しておきましょう。

UIとUXの関係図(UIはUXに含まれる接点であることを示す図)

上の図のように、UIはUXという大きな器の中に含まれる接点です。だからこそ、UIを整えることはUXを良くするための第一歩になります。

ここで初学者の方が注意したいのは、世の中の多くの解説が「UIとUXの違い」の説明にとどまり、「で、何をすればいいのか」まで踏み込まないことです。違いを知ること自体はゴールではありません。大事なのは、自分の立場(発注する・作る・学ぶ)に応じて、UIとUXの両方を意識しながら、ユーザーが迷わず目的を達成できる接点をつくる・選ぶことです。

たとえば、若い女性向けの服を扱うアパレル企業が、新しいオンラインショップを立ち上げる場面を考えてみましょう。見た目の美しいUIを整えるだけでなく、「商品を探しやすいか」「購入手続きで離脱されないか」という体験(UX)まで見据えてはじめて、売上につながる設計になる、というわけです。UIとUXは対立する概念ではなく、車の両輪のように一緒に考えるべきもの――この感覚を持っておけば、打ち合わせでこれらの言葉が飛び交っても落ち着いて理解できるはずです。

UIにはどんな種類がある?基本を知っておく

「UIとは接点のこと」と理解できたら、次に知っておきたいのがUIの種類です。UIは大きくCUI(文字で操作するUI)とGUI(絵や図で操作するUI)に分けられ、近年はそこにVUI(音声で操作するUI)などが加わっています。種類を知っておくと、技術の歴史や今後の流れまで見通せるようになり、初学者から一歩抜け出した理解が手に入ります。

種類を知っておくと役立つのは、私たちが今あたりまえに使っているスマートフォンの画面が、実は長い進化の途中にある一つの形だと気づけるからです。今後どんなUIが普及していくのかを考える土台にもなりますし、制作の現場で「どの操作方法をユーザーに提供するか」を判断するヒントにもなります。

具体的に見ていきましょう。CUI(キャラクターユーザーインターフェース)は、画面に文字を表示し、キーボードからの文字入力を中心にコンピューターを操作する方式の総称です。エンジニアが黒い画面にコマンド(命令文)を打ち込んでいる様子を見たことがあるかもしれませんが、あれはCUIの代表的な形です。なお、このコマンドを打ち込む形式は英語圏では「CLI(コマンドラインインターフェース)」と呼ばれ、CUIは主に日本で使われる呼び方だと知っておくと、海外の情報を調べるときにも戸惑いません。慣れれば素早く正確に操作できる一方、何を打てばいいかを覚えていないと使えないため、一般の利用者にはハードルが高い方式です。

これに対してGUI(グラフィカルユーザーインターフェース)は、アイコンやボタンといった絵を画面に表示し、マウスや指のタップで直感的に操作できる方式です。今あなたが使っているスマートフォンやパソコンの画面は、ほぼすべてGUIです。「UIとはITの中でどう発展してきたのか」をたどると、文字だけのCUIから、誰でも直感的に使えるGUIへと進化してきた歴史が見えてきます。この進化こそが、コンピューターを専門家だけのものから万人のものへと広げた立役者でした。

さらに近年は、スマートスピーカーに代表されるVUI(ボイスユーザーインターフェース)が普及しつつあります。「明日の天気は?」と話しかけるだけで答えが返ってくる、あの音声操作です。画面を見なくても、手がふさがっていても操作できる点が大きな魅力で、家事や運転の最中など、これまで操作が難しかった場面に新しい接点を生み出しています。

このほかにも、画面に直接ふれて操作するタッチUIや、身振りで操作するジェスチャーUIなど、技術の進歩とともにUIの形は広がり続けています。ここで押さえておきたいのは、UIの種類は「どれが正解」という話ではなく、使う人・使う場面に合わせて最適な接点を選ぶことが本質だという点です。たとえば、高齢者向けの見守りサービスを提供する会社が新しいアプリを作る場面では、複雑なGUIよりも、大きなボタンと音声案内を組み合わせた接点のほうが使いやすいでしょう。UIの種類を知っておくと、こうした「誰のための、どんな接点か」という発想が自然とできるようになります。

なぜUIが重要なのか――悪いUIが招くリスクと良いUIの効果

ここまでUIの意味と種類を見てきましたが、改めて「なぜUIがそれほど大切なのか」を整理しておきましょう。UIの良し悪しは、ユーザーの離脱や売上、ブランドへの信頼に直結する経営上の重要事項です。デザインの好みの問題ではなく、ビジネスの成果を左右する要素だと理解しておくことが大切です。

ユーザーは、わかりにくい接点に出会った瞬間にストレスを感じ、多くの場合そのまま離れてしまいます。インターネット上には代わりとなるサービスがいくらでもあり、ユーザーは「使いにくい」と感じたら我慢して使い続けてくれません。つまり、悪いUIは知らないうちに見込み客を取りこぼし続けているのです。これは「UIとはWeb制作における装飾」ではなく「成果を生む仕組み」だと考えるべき理由でもあります。

悪いUIが招くリスクを、身近な例で考えてみましょう。街なかでテイクアウト予約のできるWebサイトを公開している飲食店を思い浮かべてください。注文フォームの入力項目が多すぎたり、エラーが出たときにどこを直せばいいか示されなかったりすると、ユーザーは途中で面倒になり、予約を完了せずに離脱してしまいます。せっかく広告費をかけて集めた訪問者が、最後の接点でつまずいて去ってしまうのは大きな機会損失です。また、文字が小さすぎてスマートフォンで読めない、ボタンが小さすぎて押し間違える、といった不便が重なると、「このお店は使いにくい」という印象がそのままブランドへの不信につながりかねません。UIの問題は、目に見える数字(予約数や売上)だけでなく、目に見えない信頼の部分でもダメージを与えるのです。

一方、良いUIがもたらす効果は大きなものです。先ほどの飲食店の例で、注文フォームを「最小限の入力で済むように整理し」「入力ミスをその場で知らせ」「次に押すべきボタンを目立たせる」よう改善したとします。すると、これまで途中で離脱していたユーザーが最後まで進めるようになり、予約数の増加が期待できます。

良いUIは、ユーザーの負担を減らし、目的の達成をなめらかにすることで、結果的に問い合わせや購入といった成果を押し上げます。さらに、「使いやすい」という良い体験は再訪問やクチコミにつながり、長期的なファンを育てます。ここで強調したいのは、UI改善は派手な機能追加よりも費用対効果が高い場合が多いということです。すでにある接点を整えるだけで、今いる訪問者の行動が変わるからです。発注する立場の方は「デザインを新しくする」という発想だけでなく、「今の接点でユーザーがどこでつまずいているか」という視点を持つことで、無駄なく成果につながる改善ができるようになります。

【立場別】UIについて何を知ればいいか――発注する人・作る人・学ぶ人

ここからが本記事の核心です。UIについて知るべき範囲は、あなたの立場によって大きく異なります。同じ「UIを理解する」でも、Webサイトやアプリを発注する人、実際に手を動かして作る人、これから学ぶ人とでは、必要な深さも視点もまったく違います。自分の立場に合った範囲を見極めることが、遠回りせず最短で役立つ知識を身につけるコツです。

立場別に考えるのは、すべてを完璧に学ぼうとすると膨大すぎて挫折してしまい、逆に何も知らないままだと判断や制作で失敗するからです。「自分はどこまで知っていれば十分か」の線引きができれば、必要な学習に集中でき、自信を持って仕事に臨めます。まずは全体像を一枚の表で確認しておきましょう。

発注する人・作る人・学ぶ人の立場別「何を知ればいいか」早わかり表

上の表のように、同じ「UIとは」という問いでも、立場によって知るべき範囲は変わります。以下、3つの立場ごとに必要な範囲をさらに詳しく整理します。

Webサイト・アプリを発注する人が知るべきこと

発注する立場の人は、自分でUIを設計できる必要はありません。知っておくべきは、「良いUIとは何か」を判断できる目と、制作会社に意図を正しく伝えられる言葉です。具体的には、「誰が・どんな場面で・何を達成するために使うのか」というユーザー像を言語化できること、そして上がってきたデザインを見たときに「このボタンは何のためにあるのか」「ユーザーは迷わず目的にたどり着けるか」と問いを立てられることが大切です。

専門的な配色理論やデザインツールの操作を覚える必要はありませんが、「UIは見た目だけでなく操作のしやすさを含む接点全体である」という本記事の基本だけは押さえておきましょう。

たとえば、精密機器を製造する中堅メーカーが自社サイトのリニューアルを発注する場面を考えてみます。発注担当者が「とにかくおしゃれに」とだけ伝えるのと、「問い合わせまでの導線をわかりやすく、専門用語を知らない人でも迷わない接点にしてほしい」と伝えるのとでは、出来上がるUIの成果はまったく変わってきます。発注者の理解度が、そのままプロジェクトの成否を左右するのです。

UIを実際に作る人(制作者・デザイナー)が知るべきこと

作る人は、当然ながら最も深い知識が求められます。UIの構成要素(ボタン・フォーム・ナビゲーションなど)の設計原則、レイアウトや配色・余白の使い方、デザインツールの操作、そしてUXまで見据えた設計思考が必要です。ただし、いきなりすべてを完璧にする必要はありません。まずは「ユーザーが迷わず操作できる接点をつくる」という目的を軸に、一つひとつのUIパーツがなぜその形・その位置にあるのかを説明できるようになることが出発点です。

加えて、近年はアクセシビリティ(高齢者や障がいのある方を含め、誰もが使えるUIにすること)や、スマートフォン・パソコンなど画面サイズが違っても崩れないレスポンシブ対応も、作る人にとって欠かせない視点です。作る人は「自分が作りやすいUI」ではなく「ユーザーが使いやすいUI」を常に優先する姿勢が問われます。

これからUIを学ぶ人(初学者・学生)が知るべきこと

これから学ぶ人は、まず本記事のような全体像の把握から始めるのが正解です。UIとは何か、UXとどう違うのか、どんな種類があるのか、なぜ重要なのか――この土台ができていないまま個別のテクニックに飛び込むと、知識が断片的になって身につきません。全体像をつかんだうえで、身の回りのアプリやサイトを「これは使いやすい/使いにくい」と観察する習慣をつけ、なぜそう感じるのかを言葉にする練習を重ねると、学びが加速します。

その先で、デザインツールの基本操作や、優れたUIの事例分析、簡単なUIを実際に作ってみる実践へと進んでいくとよいでしょう。「UIとは初心者には難しそう」と感じるかもしれませんが、最初の一歩は専門知識ではなく、日常の中の接点に目を向けることから始まります。焦らず、まずは「気づける目」を養うことを目標にしてください。

ここまで見てきたように、UIへの向き合い方は立場によって異なります。本記事をハブ(入口)として、自分の立場に合ったテーマ――UIの種類をもっと詳しく、UIの改善方法、発注の進め方など――へと読み進めていくことで、あなたに本当に必要な知識を効率よく深めていけるはずです。

まとめ

改めて整理すると、UIとは「ユーザーとシステムの接点」であり、ボタン・メニュー・入力フォームといった、私たちが日々ふれている操作の入口すべてを指します。UXが「体験全体」を表すのに対し、UIはその体験を生み出す接点そのものです。そしてUIへの向き合い方は、発注する人・作る人・学ぶ人という立場によって、知るべき範囲が変わります。

UIの良し悪しは、ユーザーの離脱や売上、ブランドへの信頼に直結する重要な要素です。今すぐ取り組むべき理由は、悪いUIが今この瞬間も見込み客を取りこぼし続けているかもしれないからにほかなりません。まずは、あなた自身が日々使っているアプリやWebサイトを「使いやすいか・使いにくいか」という視点で眺め直すことから始めてみてください。その気づきこそ、より良いサービスづくりの第一歩です。UIの改善やWebサイト・アプリの発注でお悩みがあれば、クライマークスにお気軽にご相談ください。

Web制作の相談をしてみる(無料)

03‑6773‑5445

受付時間 平日 10:00〜18:00

Web制作

大規模コーポレートサイトからサービスサイトやサテライトサイトまで、アートディレクションと情報アーキテクチャ設計を融合した、クリエイティブで訴求力の高いサイトを構築します。また、フロントエンドのみならずバックエンドのシステム構築、デジタルマーケティング支援までを総合的に提供しています。