「UIとUXの基本」UIとUXをこれから学ぼうとしているデザイナーへ vol.1

みやっち


「UIとUXの基本」UIとUXをこれから学ぼうとしているデザイナーへ vol.1

おつかれさまです。デザイナーのみやっちです。
今回は、いまからUIとUXを学びたいと考えているデザイナーさん向けの記事です。

僕自身まだ初心者ですが、一緒に学んでいきましょう!

UIとUXとは

よくUI/UXと併記されることが多いため、同じようなものとして扱われています。しかし、かなり意味的には違うものです。もちろん違う言葉が使われているので、意味も違うのは当たり前なのですが、一回整理しましょう。

最初、ゲーム脳な僕はExperienceといえば経験値なので、直訳を曲解して一回触ってみれば使い方が分かるUIのことをUXと呼ぶとか、まじでよくわからない認識をしていました。

とりあえずそれぞれの意味から見ていきましょう。

UI(User Interface)

01

UIはユーザーインターフェースの略で、コンピューターやシステムとユーザーの橋渡しをするためのものです。

パソコンで言うと、本来コマンドで動作を書くべきところを、クリックやドラッグなどの直感的な操作で実現してくれるOSやソフトウェアがインターフェースにあたります。また、クリックやテキスト入力をするマウスとキーボードもインタフェースです。

UX(User Experience)

02

UXはユーザーエクスペリエンスの略で、和訳するとユーザー体験です。UIを通してシステムに触れた際にユーザーが感じたこと、その結果生じた感情(使いやすい、使いにくい、楽しい、不快といったもの)や体験を指します。

例えば、Amazonには事前に情報を登録しておけばワンクリックで注文ができるシステムが用意されています。いままで支払方法、配送先などを選択していた手間を極力省いたUIにです。これを端的で快適だと思う人もいますし、セキュリティ的な問題を心配する人もいるかもしれません。こういったユーザーが抱く感情をUXと呼び、この感情をより良い方向へ導くために改善していくのが使い勝手の良さ、良質な体験に繋がっていきます。

余談ですが、Amazonにいたっては快適さを突き詰めた結果、Amazon Dash Buttonなるものを開発し、サイトにアクセスすらせずに買い物ができるようになっていました。Amazonベンリィ。

WebにおけるUIとUX

今書いたことは広義としてのUIとUXです。では、WebでUIとUXといえば何を指すのでしょうか。

WebにおけるUIとは、ナビゲーションやボタン、フォームなど、サイトを使う上で必要なパーツのことを指します。UXは、そのパーツの使い勝手や欲しい情報へのアクセス性などによって抱く感情のことを指します。

いろいろ考えたり、調べた結果、UXという大きな括りの中のひとつの手法としてUIがある認識をしています。サイトを構成する要素としては、UIの他にもアニメーション、写真、動画、配置、配色などなど、様々なものがあります。これらを総合してユーザーの体験になっているため、UIはUXの一部と考えることができると思います。

ではUXを考えていく上で、必要なこととは何でしょうか。

WebのUXを考える上で大切なこと

WebのUXで大切なことは、ゴールを明確にすることと、ユーザーになりきることです。

ゴールを明確にする

ユーザーにサイトでどんな行動をしてほしいのか、サイトを見た結果どうしてほしいのかを明確にしておかないと、アウトプットもぼやけたロジックにしかなりません。恣意的な行動を誘発して思うような結果が得られなくなってしまいますので、しっかりとしたゴールを設定しておきましょう。

サイトにおけるゴールは様々です。お問い合わせの送信なのか、サイト内回遊なのか、申し込みの完了なのか、クライアントも含めプロジェクトメンバーで認識しておきましょう。

ユーザーになりきる

ユーザーがどんな趣味嗜好なのか、家族構成リテラシーなどを加味した上で、「どういう使い方をするのか」「何をしたいのか」実際に自分がその立場だったらどうするかを考えながら設計をしていきます。

ここで気をつけたいのは、人間なので「こういう風に動いてくれたらいいな」といった希望的観測が含まれてしまう場合があることです。これを回避するにはペルソナを複数設定し、多方面からの利用シーンを想定する必要があります。子どもがいるいないでもかなり行動に差が出ます。

この2つだけ考えると、いくつかの指標をパターンとして設定できそうですが、そう単純にいかないところが難しいところです。ざっくりと使いやすさという言葉について考えてみましょう。

ユーザーにとっての使いやすさとは何かを考える

03

いろいろ言ってきましたが、結局ユーザーにとっての使いやすさとは何なのか?

一言では表せられないですが、クライアントの伝えたい思い、ターゲットの年齢層、性別、リテラシーの高さなど、同じ背景を持つウェブサイトはほぼ無いのではないかというほど千差万別です。

そういった背景を元にペルソナをたて、情報を整理して、ワイヤーフレームを作成して、デザインする。これを繰り返し、ナレッジをためて「使いやすさ」をよりロジカルに、よりユーザーに寄り添ったカタチで表現できるようになっていくのではないかと思います。

使いやすさを学ぶために

より多くのデザインを見て、上流工程を想像してみるといったことでも十分力になると思っています。ナビゲーションはファーストビューの上部にあるのか、下部にあるのか、もしくはハンバーガーメニューで格納されているのか、といったことからナビゲーション開閉アニメーション、スクロールで展開していくアニメーション、コンテンツの表示順、ボタンの大きさなどなど、いったいなぜその位置にその大きさで置かれているのかを想像して自分なりの予測を出してみることだけでも、トレーニングになると思います。

予測の精度を上げるために

もちろん最初からユーザーにとって使いやすい、理想のサイトを実現させるというのは至難の業です。そのために実際の数値(ヒートマップや回遊経路、離脱ページなど)を見て、改修をして、より良い使い勝手を提供する必要があります。

ただ、UIを頻繁に変更したり、ガラッと変えてしまうというのは多くのユーザーにとってあまり好ましいものではない事実がありますので、前述したような一連の考えを統合して、最初の予測の精度を上げていく必要があります。

ユーザーの行動を制御することも必要

さらに制作側である程度コントロールする必要もあります。

簡単なところでいくと暖色、寒色でも、温かみ、クールな印象などといった感情のコントロールが可能ですし、Z型・F型といった視線の移動を利用した配置にしたりと、自然と誘導することが使い勝手の良さに繋がっていきます。

Z型の視線移動を利用したコンビニの陳列は有名な話ですが、こういった人間の無意識な行動についても知っておくと、サイトを設計する上で役立ちます。

ユーザーの心理に寄り添うように

ユーザーの心理を追求しながらUIを突き詰めていくことが、より良いUXに必要なことだと思います。

ちなみに、僕は大学で心理学を専攻していました。「心理学を専攻していた」というと9割ぐらいの方に心を読めるの? とか聞かれます。たまにテレビでそういった場面を見ると心を読んでいるように見えますが、実際は心理学を応用し、こちらの設定したゴールに向かって誘導しています。

たとえば、嘘をつくときの人の視線のパターン、本当のことを言っていないときのパターン、本当のことを言っているときのパターンなど統計によって得られている知識や先人たちの実験の結果などを総合して判断しています。

これは男女(性別だけではなく、男性的な思考か女性的な思考か)や年齢や生まれなどによっても変わるため、プラス語りかけによって心理的にニュートラルな状態に持っていっています。

考え方はまったく一緒で、こういった知見を利用して設計を行っていく必要があります。

まとめ

UXを考えるにあたって一番重要なのは、ゴールとユーザーの2つについて明確にイメージすることです。

しかし実際のところ、ローンチしてみないとユーザーがどういう操作をするかは分かりません。ただ過去の経験や統計から、「こういう場合こういう動きをする傾向がある」という予測は立てられます。ここにペルソナを加えることで、予測した導線に感情とロジックが伴い、より精度の高い予測をすることができます。

アゴが鋭い麻雀マンガでも“血の流れ・吐く息・吸う息まで聞こえてきそうな相手の心理と抱き合わせで進行していく生きた理そのもの”を活用してましたので間違いないと思います。

概念的な話になってしまいましたが、僕自身頭の中を整理しながら書いているので、ご容赦ください……!こういったことを意識して考えればいいんだなぐらいの感じで見ていただければと思います。

次はペルソナを使ったUXの設計についてアレコレ書く予定です。

アカギ 34 (近代麻雀コミックス)

アカギ 34 (近代麻雀コミックス)

  • 著者福本 伸行
  • 価格¥ 702(2017/06/27 20:21時点)
  • 出版日2017/04/15
  • 商品ランキング7,357位
  • コミックページ
  • ISBN-104801959083
  • ISBN-139784801959088
  • 出版社竹書房
みやっち
この記事を書いた人
みやっち

デザイナー

おすすめ記事

Recommended by