1. トップ
  2. デザイン
  3. UIとUXの違いとは?Webデザイナー必見「UI/UXデザイン」をわかりやすく解説

UIとUXの違いとは?Webデザイナー必見「UI/UXデザイン」をわかりやすく解説

デザインに関わる業務をしている方など、UIデザイン、UXデザインという言葉を聞いたことがある方は多いと思います。

それでは、UI(ユーザーインターフェース)とUX(ユーザーエクスペリエンス)では、具体的にどんな違いがあるのでしょうか。
UI/UXデザイナーの役割とはどんなものなのか、具体例とともにご紹介していきます。

UIUXの違いと、「UI/UXデザイン」とは?

Webサイトやアプリはもちろん、製品やサービスをつくる上で欠かせないのが、UI/UXデザインの考え方です。
この記事を読んでいる皆さんの中にも、この言葉を耳にしたことのある方が多いのではないでしょうか?

なんとなく一緒にまとめて語られることが多いUIUXですが、この2つの意味は異なります。

UIとは「ユーザーインターフェース」の略で、ユーザーが見たり触れたりして接する部分のことを指します。

UXは「ユーザーエクスペリエンス」の略で、ユーザーがサイトや製品、サービスなどを通じて得られる体験や経験のことです。

つまり、「UI/UXデザイン」とまとめて呼ぶときは、UIデザインとUXデザインの二つの要素を合わせたものということになります。

UI 

このUIUXの違いについて、分かりやすいように図書館を例にしてご説明します。

例えば、館内に設置されている端末から蔵書検索のシステムを使うとします。この蔵書検索の画面が、ユーザーインターフェース(UI)のひとつです。

インターフェースとは、接点や接触面という意味ですので、ユーザーが目にするものや触れる部分は、UIとみなすことができます。

一方、ユーザーエクスペリエンス(UX)は、もう少し広い意味での体験や経験を指します。
読みたい本があるときに、あなたが「よし、図書館で探してみよう」と思い、実際に図書館を訪れ、蔵書検索のシステムを見つけてそこに著者名や書籍名を入力して検索した後、実際に棚に行って本を見つける。そして、その本をカウンターに持って行って、図書館利用者カードを見せて、本を借りる。

その一連の体験がユーザーエクスペリエンスです。

図書館の蔵書検索システムのUIデザインは、いかにスムーズにかつ正確に図書を見つけられるかを目的として作られています。

一方、UXデザインは、本を探しに図書館を訪れる利用者の満足度を高いものにするために、建物の内装、司書による相談などを含めた統合的な体験を設計するものです。

UX

つまり、優れたユーザーインターフェース(UI)は、ユーザーエクスペリエンス(UX)を向上させるためのひとつの要素と言えます。
ただし、UXUIだけで完結するものではないので、画面操作の部分以外の、より大きなユーザーの体験全体を設計します。

UIUX、「UI/UXデザイン」の違いを具体例で解説

WebサイトやアプリのUI/UXデザインとは、どのようなものでしょうか。

ショッピング(通販)サイトでは、UI/UXデザインの質が直接、売り上げに関わります。そのため、ショッピングサイトの運営にかかわる人たちは、常にユーザーの流れを計測して分析し、得られたデータをもとに仮説を立て、画面遷移の最適化や顧客体験の向上を目標に、UIのアップデートやUXの改良を行っています。
このような場面では、UI/UXデザイナーが重要な役割を担っています。

ショッピングサイト UI

ショッピングサイトでは、どんな人でも操作を間違えることなく、安心して買い物ができるようなページを設計する必要があります。

そのために、商品ページの写真は見やすいか、ユーザーが必要な情報はきちんと整理されて見やすく表示されているか、文字の色やサイズは読みやすいか、ボタンやリンクは押しやすいかなどに気を付ける必要があります。

これらは、UIデザインの領域です。
また、ページの見た目の部分のみがUIではありません。

目の不自由な方向けに音声読み上げ機能に対応したり、色の識別が苦手な方にも見やすい色や表示を整えたりすることも大切です。
さらに、スマートフォンやパソコン、スマートデバイスなど、さまざまなデバイスで閲覧できるようにすることも重要です。

UXデザインは、もう少し大きな視点で買い物の体験全体をデザインします。

単にショッピングサイトの使いやすさだけでなく、そこでの商品選びや購入体験が楽しく、安心できるもので、さらに心地よくワクワクするものであるかという視点から、ユーザーの体験を考えます。

例えば、商品選びから購入までの流れは分かりやすく、ストレスなく設計されているか。
もしも、購入の途中でユーザーが離脱している場合は、ページのUIを改善するだけでなく、カスタマーサポートを充実させたり、メールで通知を送ったりと、いろいろな手法を活用して、ユーザー体験を向上させるための施策を行います。

 

UI/UXデザイナーがすべきこととは?

ここからは、UI/UXデザイナーの心得についてご説明します。

UI、UXに共通して言えるのは、対象となるWebサイトやアプリ、製品、サービスについて、とことん知るべきだということです。
可能な限りあらゆるデータを集め、仮説を立て、解決策を導き出していきます。

その際に大切なのは、ユーザーの視点で考えるということです。どうすれば使いやすくなるか、心地よい体験をしてもらえるかについて、ユーザーの視点に立って考えることが大切です。

お客様の視点で考えるうえで、ユーザーの姿を的確に認識するために「ペルソナ」を作ってみるのもよいでしょう。ペルソナとは、その製品やサービスを利用する代表的な人物像のことです。

実際のユーザーデータをもとに、もっとも典型的で平均的な人物像をペルソナとすることもありますし、あるいは「こんな人に来てもらいたい」というターゲットユーザーとして架空の人物像を作ることもあります。具体的なユーザー像を設定することで、顧客体験のシナリオをつくりやすくなります。

また、ゴールを設定することも大切です。
どのくらい認知度を高めたいのか、ユーザーに来てもらいたいのか、売り上げをアップさせたいのか、あるいはリピーターのお得意さんを増やしたいのかなど、目標を立ててみると良いでしょう。

 

Googleが提唱するUXデザインの指標

最後に、Googleが提唱するUXデザインの指標「Core Web Vitals(コアウェブバイタル)」についてご説明します。
検索エンジンの表示ランキングに関係するため、サイトデザインやUI/UX改善に関わる人は、ぜひ参考にしてください。

Googleは、Web上におけるユーザー体験の質の向上を目指して「Web Vitals(ウェブバイタル)」という指標を提唱しています。

また、GoogleWeb Vitalsの中でも特に重要な3つのことを「Core Web Vitals(コアウェブバイタル)」として20205月に発表しました。

以下では、この時に発表された3つの項目 について、詳しくご説明します。

  1. Largest Contentful Paint LCP):ラージェスト・コンテントフル・ペイント
  2. First Input Delay FID):ファースト・インプット・ディレイ
  3. Cumulative Layout Shift CLS):キュムラティブ・レイアウト・シフト

1.Largest Contentful Paint (LCP):ラージェスト・コンテントフル・ペイント

Largest Contentful Paint (LCP)はWebページの読み込み時間を表す指標のひとつで、ページ内のメインとなるコンテンツが読み込まれるまでの時間のことです。

読み込み時間

LCPの値が2.5秒未満だと良好、2.5~4秒の場合は要改善、4秒以上かかってしまうと遅すぎる判定となり、ページの価値が下がってしまいます。

LCPについて詳しく知りたい方はこちら

2.First Input Delay (FID):ファースト・インプット・ディレイ

First Input Delay (FID)とは、ユーザーが最初にページ上のボタンやリンクを押した際に、一時的にブラウザが読み込み処理中に無反応な状態になった後、再び反応できる状態になるまでの時間のことです。

100ミリ秒未満でしたら良好なので問題なし。100~300ミリ秒未満は注意が必要、300ミリ秒以上だと遅すぎるという判定です。

FIDについて詳しく知りたい方はこちら

3.Cumulative Layout Shift (CLS):キュムラティブ・レイアウト・シフト

Cumulative Layout Shift (CLS)は、ページ読み込み中にレイアウトがずれる現象を表した指標です。

例えば、Webサイトを閲覧していて、ページ内の文章が先に読み込まれた後に、時間差で後から画像が表示されことがあると思います。
その際に、後から表示された画像に押される形で、下方にあるページの一部分が下方向に押し下げられてしまうことがあります。
このように、表示中にページがずれる現象を数値化した指標がCLSです。

計算式としては、「impact fraction(画面上のどのくらいの領域がずれたか)」と「distance fraction(どのくらいの距離をずれたか)」を掛けた数値が用いられます。

この数値が0.1未満でしたら良好、0.1以上0.25未満の場合は要改善の注意、0.25以上だとずれが大きすぎるということになります。

CLSについて詳しく知りたい方はこちら

Core Web Vitalsのまとめ

これら3つのCore Web Vitalsは、今後Googleの検索ランキングを決める重要な指標となるものですので、
今のうちに理解しておきましょう。

簡単にまとめると以下のようになります。

LCPはspeed(読み込みスピード)
FIDはresponsiveness(レスポンシブネス/反応)
CLSはvisual stability(読み込み時のレイアウトの安定)

Google側で、この検索ロジックの更新が行われることは、少なくとも2020年中にはありません。
変更が実装される6か月以上前に、Googleよりアナウンスがあるとのことですので、Webデザインを行ってる方は注意しておいてください。

Googleの検索ロジックについて(Evaluating page experience for a better web)

 

UI(ユーザーインターフェース)とUX(ユーザーエクスペリエンス)について、それぞれの違いや、UI/UXデザイナーの役割などをご紹介しました。

UIはお客様との接点となる操作性に関わる部分であり、UXはUIを含むお客様の体験全体です。
UI、UXいずれの場合も、ユーザーの視点で考え、現状をしっかりと把握して分析しつつ、目標を立てながら最適な方法を導き出すことが重要です。

 

WEBデザイン学習者が学ぶべきスキルセット

Webサイト制作の一連の流れを理解!

Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

ワイヤーフレームの作成からコードに落とし込むまで、Webデザインに挑戦したい人が一気通貫して学べる

明日、企画を通したいかた必見!

〜デザイナーの頭の中、大公開〜 企画を「1枚の紙」で、伝えきる。
〜デザイナーの頭の中、大公開〜 企画を「1枚の紙」で、伝えきる。

アイディアを形にし、企画を1枚の紙にまとめる力が身につく!

クオリティの高い動画を制作

業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版
業界最先端の動画制作テクニックを制覇!Adobe Premiere Pro 完全版

初心者からワンランク上の動画クリエイターを目指す人向け、PremierePro最新版コース!