今回はUI/UXとは何なのか？どの様な場面で使う用語なのか？そして両者の違いについてとWEBデザインでの活用方法を事例と共に紹介していきます。
このWEBサイトって使い易いな。使い辛いな…。辿り着きたい情報に簡単に辿り着ける。反対に迷子になってしまった。などの感覚を言葉で表現する場合に「このWEBサイトのUI/UXは素晴らしい。」「このWEBサイトのUI/UXは酷い。」と「UI/UX」という言葉が使われます。
この「UI/UX」は“良質なWEBサイト”には必須な概念なのでしっかりと理解してサイト制作に挑みましょう。
ではその意味や実際の使い方などを紹介していきます。
- UI/UXって何なの？って人。
- UI/UXは知っているが曖昧。
- UI/UXの事例を見たい。
UI/UXとは？
「UI/UX」との言葉の意味は、先述でも少し触れた様に「このサイトは見易いな」「このサイトは迷子になり辛いな」「このアプリは凄い使い易いな」「このゲームの操作性って凄い良いな」といった実際のアクションや視覚的な情報の見易さや感覚などユーザー体験全体の事を指しています。
例えば、使い易いサイトやアプリは「UI/UXが素晴らしいな!!」といった表現をします。
反対に「操作性が悪かったり」「何がどの事を指しているのか分かり辛い」「迷子になってしまう」などのユーザーの体験を損ねてしまう様なサイトやアプリは「UI/UXが悪いな…」といった表現をします。
下記のサイトは、WEBでオーダーメイドのキッチンを注文できるサイトなのですが、メインビジュアル下の「カラー」~「食器洗い洗濯機」のボタンを押すと実際のオーダー内容が選択出来て、そのオーダーメイドの完成形と価格がメインビジュアルに表示され、そのまま注文する事が可能です。そんな超優秀なUI/UXです。
下記のサイトは、老人ホームなので文字やボタンのサイズをなるべく大きくしてあり、お年寄りに見易い配慮がされています。しかし左側にあるメニューバーがクリック出来そうで出来ない部分があったり、アコーディオンの操作性が微妙など惜しい部分もある印象です。
また業界では、UI/UXとまとめて言う事が多いが厳密には「UI」と「UX」は別の意味を持っています。しかし両者は必ず一方を掻き立てる相乗効果を持っているので同じ扱いになる事が多いです。
では次にUI/UX両者の意味を説明していきます。
UIとは？
UIとは、ユーザーインターフェイスの略称で「境界面、接点」と訳せます。
ユーザーとの関わりを示す意味であり、WEBサイトやアプリでは、主に分かり易さに直結する「見た目」に関する部分を指します。
例えば、下記の「A」と「B」のデザインではどちらをクリックしますか？
恐らく大抵の方が「A」をクリックしたくなるかと思います。それはなぜかと言うと「A」の方が視覚的に“押せる感”を表現しているからです。「B」のボタンは押せる様には全く見えません。
良くリンクの色は”青色”だというのもUIに深く関わってきています。また今回の場合だとボタンはクリック出来るものと固定概念があるからこそ、実際にクリックしてしまうのです。
これが「見た目」に関するUIの本質です。
UXとは？
UXとは、ユーザーエクスペリエンスの略称で「体験、経験」と訳せます。
言葉通りユーザーの体験を指す意味であり、WEBサイトやアプリでは、扱いやすさや操作のし易さに直結する様な「実体験」に関する部分を指します。
UXで成功したアプリと言ったら皆さんも使っている「LINE」が有名です。「LINE」のスタンプ機能はそのデザインを見るだけでタップ＝スタンプが送信出来るとの事が伝わり、そのスタンプを通して意思や感情を表現する事が出来ます。
「LINE」が登場する前のコミュニケーションアプリではスタンプを選択→送信ボタンとの行為が存在していました。しかし「LINE」では送信ボタンを押す行為を省いて上記のUIからスタンプをタップするだけになっています。この小さな変化がユーザー体験を心地良いものに変えています。（スタンプを連打したくなるのはそんな素晴らしいUXのおかげという訳です。）
このようなUXの改善は、インタラクションデザインにおいてリアクションコストを最低限に抑えた最良事例かと思います。
インタラクション （interaction）とは、日本語で「相互作用」と訳されます。
IT用語としては、「ユーザーが特定の操作を行なったとき、システムやWEBブラウザがその操作に応じた反応を返すこと」という意味で使われています。
要するに、ユーザーがタップやクリックなどのアクションを行った際に、画面上に返ってくるリアクションまでの一連の流れに対してのデザインの事を言います。
またアクション→リアクションのやり取りは、インタラクションデザインではなるべく短い方が良いとされています。なのでリアクションは重荷となるため「リアクションコスト」と表現される事が良くあります。
また、この様に優れたUXを実現させるには優秀なUIが欠かせません。仮にLINEのスタンプが現在の並び方では無く、縦1列に並んでいたら現在の様に一般的に使われるようになっていたのでしょうか？…その答えは出ませんが、間違いなく言える事は今の配置は物凄く分かり易いと言う事です。
UI/UXの例
下記の二つのカードを見てあなたはどんなアクションを起こしますか？
大抵の人は、下記のいずれかに当てはまるのでは無いでしょうか？
| カード | どこを？ | なんで？ |
|---|---|---|
| 左のカード | +マークをクリック | 画像が拡大しそうだから |
| 左のカード | SNSアイコンをクリック | シェア出来そうだから |
| 左のカード | ハートボタンをクリック | 「いいね」を付けれそうだから |
| 右のカード | ——- | 何も出来なそう |
実際に左側のカードをクリックすると、下記の様なライトボックスが展開して画像の詳細が見れる想定をしたデザインになっています。
右側の装飾が無いデザインだと、上記の様なライトボックスが開く事が予想出来ずクリックとのアクションが起こり辛いかと思います。
この例のパターンだと、UI的なデザインは「＋」マークやSNSアイコンでシンプルにどんなリアクションが起きるかをユーザーに伝えています。
UX部分は、画像をクリックした際に画像ページに移動（読み込み）を起こさずに、あえてライトボックスで表示する設計にしています。理由はサムネイルで大体の写真が見えているのならばライトボックスで詳細を表示した方がリアクションコストが下がりユーザーは快適に操作する事が出来るからです。これにより複数の写真を見たいというユーザーの行動を最小限に抑えられます。
このように情報を正確に伝えながらユーザーの体験を快適にするデザインを心掛けるのがUI/UXの仕事です。
以上が「UI/UXとは？事例と共に二つの違いを分かり易く解説」でした。
WEBデザインやアプリ、ゲームの設計にはUI/UXの考え方は欠かせません。ただ正解も無い分野なので、どんなUI/UXが実際のユーザーが求めているのかは常に研究が必要な分野だと思います。そんな発展途上な分野だからこそ、これから様々なアイデアが評価されるかと思われます。
これからUI/UXを意識し始める方は、今は自分なりの使い易さを意識すれば結果ユーザー評価の良いUI/UXになるかもしれません。
