この記事で解決できるお悩み
このお悩みを解決できる記事を書きました。
Webデザインとマーケティングを勉強中のキノボルタです。
Webサイトを制作していると、クライアントの要望ありきで考えることが多く、
本当にユーザーにとって使いやすいサイトになっているかなー？とふと考えることがあると思います。
僕は結構思っちゃいます。
そこで、使いやすさといえば、UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）なので、それぞれ調べてみました。
UIとUXの役割
Webサイトを例にしてUIとUXを見ていくと、以下のような感じになります。
サイトを通してユーザーに良い体験をしてもらうために設計するのがUXで、ボタンやメニューなどを使いやすく考えていくことが、UI。
UXで設計したことを実現するためにUIがある、なので、UXとUIは単独では実現できないし、両方が必要ということですね。
今は、UXとUIがフワッとでも何となく理解してもらえればOKです。
まず、UIから見ていきます。
UIとは？
ユーザーインターフェースの略。使い勝手を決める大事な要素です。
UIは、「人とモノをつなげること」
Webサイトやアプリにおける画面のボタン、アイコン、視覚要素など表示に関わるすべての要素です。
UIは、Webサイトやアプリだけではなく、普段の生活の身近なところにめっちゃ溢れています。
例えば、身近なUI（ガスコンロ）
左の赤丸のところを押すと、コンロに火がつくというのが、見てわかりますよね？
そして、火力の調整もレバーを炎ふたつのところに持ってくれば
火が強くなるというのも説明をされなくてもわかると思います🔥🔥
「やりたい目的に対して、すぐに辿り着けるかどうか」を実現できているのがいいUI。
ちなみに、ちょっと残念なUIデザインの例もご紹介
話題になったセブンイレブンのコーヒーマシン。
分かりやすさとデザインの両立がいかに大事かがよくわかる例ですね。
UIのまとめ
見て簡単に使えるかどうかなどがUIデザインの良し悪しにつながります。
UIデザインは、いかに楽に利用してもらえるかという視点で制作します。Webサイトやアプリの「ボタン」「リスト」「テキストの入力欄」など画面上に表示されるすべてのアイテムが対象となります。
んんっ？それってWebデザイナーも同じだよね？って思った方。
僕も最初、そう思いました。。
ものすごくざっくり言うと、Webデザイナーは、Webサイトに訪れたユーザーにどういうことを感じて欲しいかを考える。
UIデザイナーは、どうやったらWebサイトが使いやすくなるかを考えるという感じです。
続いて、混合しやすいUXについてもみていきましょう。
UXとは？
ユーザーエクスペリエンスの略。
第3者としての目線で「はじめて使ってみた時にどう感じるか？」が大事です。
UXは、「人がモノを通じた体験や経験のこと」です。
UIとUXは、混同しがちですが、UIは機能であり、UXはユーザーが使用して感じる体験を指します。
UXについて何となくわかった気がするけど、
どのように考えて設計していけば良いかよくわからないよ〜
確かに、具体的にどうしたらいいの？ってなるよね
その話をする前に、そもそもどういうUXデザインが良いとされているかを見てから、もう少し具体的な話をしていくよ
UXハニカム
良いUXデザインの評価を行うフレームワークです。
2004年にピーター・モービルという専門家の方が作ったもので、優れたUXに必要な7つの要素を蜂の巣の形で表しています。
6つを満たしていると、価値がある「ユーザーにとって価値がある」UXデザインだよと言われています。
役に立つ
ユーザーの目的や課題を解決できるか
例: Google検索 → 情報を見つけたいニーズを満たす
好ましい
そのサービスを欲しいと思うか？
例: Apple製品 → 洗練されたデザインへの憧れ
アクセスしやすい
すべての人が利用できるか？障害の有無に関わらず、利用可能
例：音声読み上げ対応のWebサイト
信頼できる
そのサービスを信頼できるか？信憑性、安全性、品質への信頼
例：医療サイト→専門医による監修
探しやすい
必要な情報、機能を見つけれられるか？
例：Netflix→ジャンル別、おすすめ機能で見つけやすい
使いやすい
簡単に使えるか？
例：iPhone→タップ・スワイプが直感的
デザインや開発、評価をする際のあらゆる段階で、「何が足りないか？」「何を優先すべきか？」を判断する指針として活用できます。
全てを完璧にするのは難しいので、それぞれをバランスよく満たすプロダクトを意識することが大事。
Webサイトを制作しようと思うと、いきなり「満足」を目指して作り出してしまうことがありますが、順番があります。
ユーザーの体験を満足に持っていくための順番を示している図が、「UXピラミッド」です。
Webサイト制作をした際を例にすると、いきなり一番上の「満足」を目指してしまうことが多い。
一番最初にやるべきなのは、「アクセスしやすさ」から作り込んでいく必要があります。
アクセスのしやすさは、UIの部分であり、ここがスタートです。
そして、UIの改善を繰り返していき、「満足しやすい」まで行き着くことでリピーターがどんどんできてくるという考え方。
ユーザーの満足を目指すために、UIの改善を繰り返していくことはわかったけど、UXの設計は具体的にどうやるの？
いいUXデザインの定義と、ユーザー満足を目指すために、何が必要かの理解が進んだところで、Webサイト制作を例に具体的な段階を説明していくね
UX設計を図で表しているのが、「UXの５段階モデル」
アウトプット例がUXの５段階モデルにあてはめたWebサイト制作時における工程です。
戦略
誰のどんな問題を解決するプロダクトなのか。
なぜこのプロダクトが必要なのかを設計していく。
例：クライアントから要望をヒアリングして、さぁサイトの設計を考えるぞというのが、まさに「戦略」であり、コンセプトになる
要件
プロダクトで何を持ってユーザーに価値を提供するのかを考える。
戦略を達成するために、ユーザーが体験するストーリーやプロダクトを設計していく。
例えば、要件定義署や仕様書、カスタマージャーニーマップなどがある。
例：どういうユーザーにサイトを使ってもらいたいか、そのユーザーが各種チャネル（WebサイトやSNS）を普段使っているかを考えてマップにしていく
構造
要件で設計したコンテンツだったり、機能をユーザーに分かりやすく届けるためのインターフェースの設計をする。
どこにどんな機能を配置して、それがどこに関連づけられるかのUIの全体構造の設定をする。
骨格
ユーザーと接点となるインターフェースの設計。ナビゲーションのデザインであったり、画面のレイアウトを詰めて行く。
UIの骨組み。サイトマップでどういうアクセスの動線を作っていくかといったワイヤーフレームで骨格を作っていく。
例えば、ECサイトの場合
- 商品をカートに追加 → カート数量が増加
- ログアウト状態で購入ボタン → ログイン画面に遷移
- 在庫切れ商品 → 購入ボタンを無効化
- 検索結果0件 → 「見つかりませんでした」状態を表示
- 決済エラー → エラーメッセージ表示 + 前の画面に戻る
表層
UIのグラフィックや、インターフェースとして気持ちよさを与えるものであったりユーザーに与える印象を設計していく。
デザインするには、表層部分だけでなく5つのそれぞれの段階を経ることで、
より精度の高いデザインが出来上がっていくというのがUXの５段階モデル
UIデザインとUXデザインの関係は、住宅に例えると、
パッと見てどのスイッチがどこの照明なのかを分かりやすくするのがUI。
最近流行りの料理や洗濯の家事効率をUPさせる生活回遊導線は
ユーザーの体験を向上させるので、UXていう見方もできますね。
まずは、アクセスしやすいかというのを考えて設計ができるかというのが最初に大事なこと。
定量的なものではなく、定性的なものになるので、難しいですが、この考え方が大切ですね。
まとめ
WebサイトでいうUIは、ボタンやメニューなどディスプレイ上、目に映る全て。
UXはWebサイトを通して得られるユーザー体験ということでした。
ユーザー体験は、サイト自体の使いやすさ、楽しい、安心などの感情的な体験、ブランドへの印象など広範囲に及ぶ設計。
掘り下げると、ボタンなどのインターフェースの使いやすさが影響してくる。そのため、UIとUXは密接に関係しているよということでした。
作り手に分かれていくと、「ユーザーの使いやすさ」にフォーカスして部品をデザインしていくのが、UIデザイナー。
「ユーザーの体験」に特化して全体を設計していくのがUXデザイナー。
クライアントの達成したい目的に沿って、ユーザーに与えたい印象を考えてWebサイトを制作していくのがWebデザイナー。
ただ、Web制作会社さんの求人を見ていると、Webデザイナーがなく、UIデザイナーと記載されているものもあるので、
制作現場や規模によって定義は変わってくると思います。
では、この辺りで、別の記事でお会いしましょう〜。