昨今のweb制作やデザインを語るうえで欠かせないのが、UIとUXという概念。2つとも混同されがちですが、実はまったく異なる意味の用語です。違いをしっかりと把握して設計に生かすことが、ユーザビリティの向上につながります。
本記事では、UIとUXがどういったものなのか、具体例を交えつつ徹底的に解説していきます。
本記事では、UIとUXがどういったものなのか、具体例を交えつつ徹底的に解説していきます。
UIとは
UIとは、ユーザーインターフェイス（User Interface）の略で、ユーザーが情報にアクセスする際の接触面という意味の言葉。Webサイトにおいては、デバイスでタップするボタンや文字、画像など、ユーザーが得るすべての情報を指しています。
雑誌で例えるならば、書いてある文章や写真、さらにはレイアウトや紙質といったものまでUIといえるでしょう。
スマートフォンやタブレットが普及してから、「いかに操作しやすいUIを作るか」が非常に重要になりました。タッチ操作は、マウスやトラックパッドを使った操作とは使い勝手がまったく異なるため、ユーザーを迷わせない工夫が必要です。
ユーザーを正しくナビゲートし、さらにタッチさせたくなるようなUIを設計を心がけましょう。
雑誌で例えるならば、書いてある文章や写真、さらにはレイアウトや紙質といったものまでUIといえるでしょう。
UIの必要性
スマートフォンやタブレットが普及してから、「いかに操作しやすいUIを作るか」が非常に重要になりました。タッチ操作は、マウスやトラックパッドを使った操作とは使い勝手がまったく異なるため、ユーザーを迷わせない工夫が必要です。
ユーザーを正しくナビゲートし、さらにタッチさせたくなるようなUIを設計を心がけましょう。
UXとは
UXはユーザーエクスペリエンス（User Experience）の略。ユーザーが製品やサービスを通じて得るすべての体験を意味する言葉です。
サービスの使いやすさだけではなく、サービスを使用する前後に感じる印象までがUXに含まれます。
Webサイトにおいて言えば、「このページは使いやすいな」「デザインがおしゃれだな」というユーザビリティについての感想に加えて、「いい商品が揃っているな」「カスタマーサポートがしっかりしているな」というサービスの質に関する感想もUXとしてあげられるでしょう。
消費者の意識が「モノ消費」から「コト消費」に変遷した、という話を聞いたことがあるかもしれません。
いい製品が世の中に溢れかえった現代において、ユーザーは製品そのものに価値を見出すのではなく、その先に得られる「体験」を重要視するようになりました。
他のサービスとの差別化を図るためにも、ユーザーの体験を第一に考えた設計が必要となっているのです。
サービスの使いやすさだけではなく、サービスを使用する前後に感じる印象までがUXに含まれます。
Webサイトにおいて言えば、「このページは使いやすいな」「デザインがおしゃれだな」というユーザビリティについての感想に加えて、「いい商品が揃っているな」「カスタマーサポートがしっかりしているな」というサービスの質に関する感想もUXとしてあげられるでしょう。
UXの必要性
消費者の意識が「モノ消費」から「コト消費」に変遷した、という話を聞いたことがあるかもしれません。
いい製品が世の中に溢れかえった現代において、ユーザーは製品そのものに価値を見出すのではなく、その先に得られる「体験」を重要視するようになりました。
他のサービスとの差別化を図るためにも、ユーザーの体験を第一に考えた設計が必要となっているのです。
UIとUXの関係性
UIとは、「ユーザーとサービスの接点」。
UXとは、「ユーザーがサービスを通じて得る体験」。
一緒に使われることの多い2つの言葉ですが、比べてみるとまったく違う概念であることがわかっていただけると思います。
色づかいやレイアウトなどに気を配ることで、ユーザーは「使いやすい」という印象を受けます。
このようににUIを改善することによりUXは向上しますが、UXを向上させる方法はUIの改善だけではありません。
例えば「サービスの評判」「セキュリティの信頼性」など、UI以外の要素もUXに影響を与えます。
いくらUIが素晴らしくても、他の要素に穴があればユーザーによい体験を与えることはできないのです。
サービスの質を向上させコンバージョンを獲得するためには、様々な手段を講じてUXを改善させる必要があるでしょう。
UXとは、「ユーザーがサービスを通じて得る体験」。
一緒に使われることの多い2つの言葉ですが、比べてみるとまったく違う概念であることがわかっていただけると思います。
色づかいやレイアウトなどに気を配ることで、ユーザーは「使いやすい」という印象を受けます。
このようににUIを改善することによりUXは向上しますが、UXを向上させる方法はUIの改善だけではありません。
例えば「サービスの評判」「セキュリティの信頼性」など、UI以外の要素もUXに影響を与えます。
いくらUIが素晴らしくても、他の要素に穴があればユーザーによい体験を与えることはできないのです。
サービスの質を向上させコンバージョンを獲得するためには、様々な手段を講じてUXを改善させる必要があるでしょう。
UIの改善策
ここからは、UIとUXを改善するためのアイディアについて解説します。
まずはUIを向上させるデザイン手法をいくつか紹介しましょう。
サイトを閲覧するデバイスによってレイアウトを変更する「レスポンシブデザイン」という技術があります。
PC用のサイトをそのままスマートフォンで閲覧すると、幅が画面とあっていなかったりボタンが押しにくかったりと、かなり使い勝手が悪いです。
PCならPC、スマートフォンならスマートフォンに特化したサイトを表示することが、UIを改善するのに必要不可欠です。
ではスマートフォン用のサイトを制作する際、どんなことに気を配ればよいのでしょうか？
①タッチ領域の大きさと間隔に気をつける
タッチで画面を操作する場合、マウスを使うときに比べて繊細な動作をすることができません。
もしもタッチできる領域が小さかったり要素どうしの間隔が狭かったりすると、想定していない場所をタップしてしまいやすくなります。
Appleのガイドラインによれば、タッチ領域の大きさは44px × 44px以上あるのが望ましいとされています。
画面が指で隠れても操作できるよう、余裕をもったレイアウトを心がけましょう。
②アクションに気をつける
PC用のサイトだと、マウスカーソルを合わせる（マウスオーバーする）ことで要素を変化させることができます。
対してスマートフォン用のサイトでは、画面をタッチして一瞬で離すためマウスオーバーアクションを使うことができません。
タッチ・スワイプ操作に対応したアクションを実装しましょう。
③押したくなるボタンにする
ボタンの見た目にも工夫が必要です。
ただ画像を貼っただけでは、それがクリック可能な要素であるとユーザーに伝えることはできません。
ボタンに影をつけたり角を丸めたりして、ユーザーがついつい押したくなるデザインのボタンを作成しましょう。
ユーザビリティが向上するだけでなく、コンバージョン数の上昇にもつながります。
PC用サイトとスマートフォン用サイトには、ここで紹介した以外にも文字の大きさやレイアウトなど多くの相違点があります。ぜひそれぞれを見比べて、どの工夫がUIの改善に貢献しているか考察してみてください。
ユーザインターフェイスのデザインのヒント - Apple Developer
https://developer.apple.com/jp/design/tips/
ユニバーサルデザインとは、年齢・性別や障害にかかわらず誰でも利用できるサービスを目指す考え方です。
世界中誰でも閲覧できるWebサイトの制作においても、ユニバーサルデザインを重視することが必要です。
①文字サイズ・間隔に注意する
高齢の方でもWebサイトを閲覧する現代において、見やすい文字の大きさを心がけなければなりません。
行間を空けず小さい文字を羅列しているサイトは、決してユーザーフレンドリーといえないでしょう。
拡大することなく、そのままの状態でも可読性の高いレイアウトを実装する必要があります。
②色の見え方に注意する
色を正しく認識できない「色覚障害」（P型色覚・D型色覚）をもつ方々は、日本国内だけでも320万人以上いるとされています。
（出典：色覚型と特徴 – 多様な色覚に対応したデザインと社会の改善 特定非営利活動法人カラーユニバーサルデザイン機構CUDO（http://www2.cudo.jp/wp/?page_id=540））
色覚障害をもつ方々は、赤と緑の色の識別が困難です。
色のみを頼りにしたガイド機能は避けるべきでしょう。
Photoshopの検証機能などを用いて、誰でも使いやすいサイトになっているか確認してみてください。
Photoshopでの色の校正
まずはUIを向上させるデザイン手法をいくつか紹介しましょう。
レスポンシブデザイン
サイトを閲覧するデバイスによってレイアウトを変更する「レスポンシブデザイン」という技術があります。
PC用のサイトをそのままスマートフォンで閲覧すると、幅が画面とあっていなかったりボタンが押しにくかったりと、かなり使い勝手が悪いです。
PCならPC、スマートフォンならスマートフォンに特化したサイトを表示することが、UIを改善するのに必要不可欠です。
ではスマートフォン用のサイトを制作する際、どんなことに気を配ればよいのでしょうか？
①タッチ領域の大きさと間隔に気をつける
タッチで画面を操作する場合、マウスを使うときに比べて繊細な動作をすることができません。
もしもタッチできる領域が小さかったり要素どうしの間隔が狭かったりすると、想定していない場所をタップしてしまいやすくなります。
Appleのガイドラインによれば、タッチ領域の大きさは44px × 44px以上あるのが望ましいとされています。
画面が指で隠れても操作できるよう、余裕をもったレイアウトを心がけましょう。
②アクションに気をつける
PC用のサイトだと、マウスカーソルを合わせる（マウスオーバーする）ことで要素を変化させることができます。
対してスマートフォン用のサイトでは、画面をタッチして一瞬で離すためマウスオーバーアクションを使うことができません。
タッチ・スワイプ操作に対応したアクションを実装しましょう。
③押したくなるボタンにする
ボタンの見た目にも工夫が必要です。
ただ画像を貼っただけでは、それがクリック可能な要素であるとユーザーに伝えることはできません。
ボタンに影をつけたり角を丸めたりして、ユーザーがついつい押したくなるデザインのボタンを作成しましょう。
ユーザビリティが向上するだけでなく、コンバージョン数の上昇にもつながります。
PC用サイトとスマートフォン用サイトには、ここで紹介した以外にも文字の大きさやレイアウトなど多くの相違点があります。ぜひそれぞれを見比べて、どの工夫がUIの改善に貢献しているか考察してみてください。
ユーザインターフェイスのデザインのヒント - Apple Developer
https://developer.apple.com/jp/design/tips/
ユニバーサルデザイン
ユニバーサルデザインとは、年齢・性別や障害にかかわらず誰でも利用できるサービスを目指す考え方です。
世界中誰でも閲覧できるWebサイトの制作においても、ユニバーサルデザインを重視することが必要です。
①文字サイズ・間隔に注意する
高齢の方でもWebサイトを閲覧する現代において、見やすい文字の大きさを心がけなければなりません。
行間を空けず小さい文字を羅列しているサイトは、決してユーザーフレンドリーといえないでしょう。
拡大することなく、そのままの状態でも可読性の高いレイアウトを実装する必要があります。
②色の見え方に注意する
色を正しく認識できない「色覚障害」（P型色覚・D型色覚）をもつ方々は、日本国内だけでも320万人以上いるとされています。
（出典：色覚型と特徴 – 多様な色覚に対応したデザインと社会の改善 特定非営利活動法人カラーユニバーサルデザイン機構CUDO（http://www2.cudo.jp/wp/?page_id=540））
色覚障害をもつ方々は、赤と緑の色の識別が困難です。
色のみを頼りにしたガイド機能は避けるべきでしょう。
Photoshopの検証機能などを用いて、誰でも使いやすいサイトになっているか確認してみてください。
Photoshopでの色の校正
UXの改善策
先ほども述べたように、UIを改善するだけではUXを向上させたことにはなりません。
UIに囚われず、ユーザーに適切な体験を提供するにはどうしたら良いか考えるようにしましょう。
それでは、UXを改善するうえで大事な要素について紹介していきます。
UXを向上させたサイト設計の大前提として、ユーザーが使用することを第一に考える「人間中心設計」（HCD）を意識する必要があります。
人間中心設計推進機構によると、
引用：HCDとは | HCDコラム | HCD-Net
とのこと。
機能やコストなど、サイトを制作する立場からの工夫だけではユーザーを満足させることはできません。
ユーザーの年代や用途に合わせたサイトを設計することでUXが向上し、ひいては売り上げの向上にも繋がっていきます。
ユーザーにとって価値のあるサービスを実現するために必要な要素をまとめた「UXハニカム」という概念があります。
6つのすべての要素を満たすことで、UXを改善することができるでしょう。
①Useful（役に立つ）
掲載されている情報がユーザーに有益なものでなければ、ユーザーはそのサイトに価値を見出さないでしょう。
訪れるユーザーがどんな情報を求めているのか考えたうえで、サイトの設計やコンテンツを考える必要があります。
②Usable（使いやすい）
「この操作をすればどういう動きをするのか」を明確にすることで、ユーザーはサイトを使いやすいと感じます。
サイト構造とデザインの両方の視点から、ユーザーフレンドリーなサイトを目指しましょう。
③Findable（見つけやすい）
ただ情報を詰め込んだだけのサイトでは、ユーザーは求めている情報にたどり着くことができません。
探している情報のありかへと適切にナビゲーションする必要があります。
④Credible（信頼できる）
ユーザーの信頼は、掲載されている情報が正しく、システムやセキュリティに問題がなくて初めて獲得することができます。
内容の信憑性とシステムの安定性、さらに信用できるデザインを意識した制作を心がけましょう。
⑤Accessible（アクセスしやすい）
小さい文字が読みにくかったり、色の識別が困難だったりするユーザーでも問題なく利用できるデザインが好ましいです。
先述したユニバーサルデザインを心がけましょう。
⑥Desirable（好ましい）
高い製品を紹介するページでは高級感を演出する、若者がターゲットであればフレッシュさを盛り込むなど、それぞれのサイトにはふさわしい雰囲気があります。
客層を考慮したうえで、ユーザーが好ましいと感じるサイトを作ることが大切です。
UIに囚われず、ユーザーに適切な体験を提供するにはどうしたら良いか考えるようにしましょう。
それでは、UXを改善するうえで大事な要素について紹介していきます。
人間中心設計
UXを向上させたサイト設計の大前提として、ユーザーが使用することを第一に考える「人間中心設計」（HCD）を意識する必要があります。
人間中心設計推進機構によると、
”これからはモノだけでなく、それを使う人間の要求に応えるために技術を生かさなければなりません。HCD では「人間」を中心にすえて、人間の要求に合わせることを優先して設計します。”
引用：HCDとは | HCDコラム | HCD-Net
とのこと。
機能やコストなど、サイトを制作する立場からの工夫だけではユーザーを満足させることはできません。
ユーザーの年代や用途に合わせたサイトを設計することでUXが向上し、ひいては売り上げの向上にも繋がっていきます。
UXハニカム
ユーザーにとって価値のあるサービスを実現するために必要な要素をまとめた「UXハニカム」という概念があります。
6つのすべての要素を満たすことで、UXを改善することができるでしょう。
①Useful（役に立つ）
掲載されている情報がユーザーに有益なものでなければ、ユーザーはそのサイトに価値を見出さないでしょう。
訪れるユーザーがどんな情報を求めているのか考えたうえで、サイトの設計やコンテンツを考える必要があります。
②Usable（使いやすい）
「この操作をすればどういう動きをするのか」を明確にすることで、ユーザーはサイトを使いやすいと感じます。
サイト構造とデザインの両方の視点から、ユーザーフレンドリーなサイトを目指しましょう。
③Findable（見つけやすい）
ただ情報を詰め込んだだけのサイトでは、ユーザーは求めている情報にたどり着くことができません。
探している情報のありかへと適切にナビゲーションする必要があります。
④Credible（信頼できる）
ユーザーの信頼は、掲載されている情報が正しく、システムやセキュリティに問題がなくて初めて獲得することができます。
内容の信憑性とシステムの安定性、さらに信用できるデザインを意識した制作を心がけましょう。
⑤Accessible（アクセスしやすい）
小さい文字が読みにくかったり、色の識別が困難だったりするユーザーでも問題なく利用できるデザインが好ましいです。
先述したユニバーサルデザインを心がけましょう。
⑥Desirable（好ましい）
高い製品を紹介するページでは高級感を演出する、若者がターゲットであればフレッシュさを盛り込むなど、それぞれのサイトにはふさわしい雰囲気があります。
客層を考慮したうえで、ユーザーが好ましいと感じるサイトを作ることが大切です。
まとめ
サービスとユーザーをつなげるUIと、サービスを通じて得られる体験をさすUX。ここまで、それぞれの意味や違い、重要性について説明してきました。
多くの製品やサイトがありふれている現代において、KGIの達成にはUXの改善が必要不可欠。その手段の一つとして、ユーザーフレンドリーなUIの実装が求められるのです。
サイトに求められる役割や必要な機能についてしっかりと考察したうえで、ユーザーにとって価値のあるサイトを作り上げることが大切です。
多くの製品やサイトがありふれている現代において、KGIの達成にはUXの改善が必要不可欠。その手段の一つとして、ユーザーフレンドリーなUIの実装が求められるのです。
サイトに求められる役割や必要な機能についてしっかりと考察したうえで、ユーザーにとって価値のあるサイトを作り上げることが大切です。
