おつかれさまです。デザイナーのみやっちです。
今回は、今からUIとUXを学びたいと考えているデザイナーさん向けの記事です。
僕自身まだまだ初心者ですが、一緒に学んでいきましょう！
目次
UIとUXとは
よく「UI/UX」と併記されることが多いため、同じようなものとして扱われています。しかし、意味的にはかなり違うものです。もちろん違う言葉なので、意味も違うのは当たり前なのですが、一度整理してみましょう。
（ゲーム脳な僕はExperienceといえば経験値なので、最初直訳を曲解して一回触ってみれば使い方が分かるUIのことをUXと呼ぶとか、まじでよくわからない認識をしていました）
まずは、それぞれの意味から見ていきましょう。
UIとは
UIはユーザーインターフェース（User Interface）の略で、コンピューターやシステムとユーザーの橋渡しをするためのものです。
パソコンで言うと、本来コマンドで動作を書くべきところを、クリックやドラッグなどの直感的な操作で実現してくれるOSやソフトウェアがインターフェースにあたります。また、クリックやテキスト入力をするマウスと、キーボードもインタフェースです。
UXとは
UXはユーザーエクスペリエンス（User Experience）の略で、和訳すると「ユーザー体験」です。UIを通してシステムに触れた際にユーザーが感じたこと、その結果生じた感情（使いやすい、使いにくい、楽しい、不快といったもの）や体験を指します。
例えば、Amazonには事前に情報を登録しておけばワンクリックで注文ができるシステムが用意されています。今まで支払方法、配送先などを選択していた手間を極力省いたUIにです。これを端的で快適だと思う人もいますし、セキュリティ的な問題を心配する人もいるかもしれません。こういったユーザーが抱く感情がUXです。この感情をより良い方向へ導くために改善していくことで、使い勝手の良さ、良質な体験に繋がっていきます。
余談ですが、Amazonにいたっては快適さを突き詰めた結果、Amazon Dash Buttonなるものを開発し、サイトにアクセスすらせずに買い物ができるようになりました。Amazonﾍﾞﾝﾘｨ。（ですが、Amazon Dash Buttonは2019年3月に終了……）
WebにおけるUIとUX
これまで書いたことは広義としてのUIとUXです。では、具体的にWebでUIとUXといえば何を指すのでしょうか？
WebにおけるUIとは、ナビゲーションやボタン、フォームなど、サイトを使う上で必要なパーツのことを指します。一方UXは、そのパーツの使い勝手や欲しい情報へのアクセス性などによって抱く感情のことです。
僕は、UXという大きな括りの中のひとつの手法としてUIがあるという認識をしています。サイトを構成する要素としては、UIの他にもアニメーション、写真、動画、配置、配色などなど、様々なものがあります。これらを総合してユーザーの体験になっているため、UIはUXの一部と考えることができると思います。
ではUXを考えていく上で、必要なこととは何でしょうか。
WebのUXを考える上で大切なこと
WebのUXで大切なことは、ゴールを明確にすることと、ユーザーになりきることの2つだと思います。
ゴールを明確にする
サイトを設計するうえで、ユーザーにサイトでどんな行動をしてほしいのか、サイトを見た結果どうしてほしいのかを明確にしておかないと、アウトプットもぼやけたロジックにしかなりません。恣意的な行動を誘発して思うような結果が得られなくなってしまいますので、しっかりとしたゴールを設定しておきましょう。
サイトにおけるゴールは様々です。お問い合わせの送信なのか、サイト内回遊なのか、申し込みの完了なのか、クライアントも含めてプロジェクトメンバーで認識しておきましょう。
ユーザーになりきる
ユーザーがどんな趣味嗜好なのか、家族構成やリテラシーなどを加味した上で、「どういう使い方をするのか」「何をしたいのか」実際に自分がその立場だったらどうするかを考えながら設計をしていきます。
そのためには、企業や商品の典型的なターゲットとなる顧客像＝ペルソナを設定しておくのが有効です。
ここで気をつけたいのは、僕たちも人間なので「こういう風に動いてくれたらいいな」といった希望的観測が含まれてしまう場合があることです。これを回避するにはペルソナを複数設定し、多方面からの利用シーンを想定する必要があります。子どもがいる・いないでも、かなり行動に差が出ることがあります。
この2つだけ考えればいいのかというと、そう単純にいかないところが難しいところです。
あらためて、使いやすさという言葉について考えてみましょう。
ユーザーにとっての「使いやすさ」とは何なのかを考えるデザイナーになる
UI、UXについて考えてきましたが、結局はユーザーにとっての使いやすさとは何かを考えること、それがサイト設計の基本だと思います。
クライアントの伝えたい思い、ターゲットの年齢層、性別、リテラシーの高さなど、同じ背景を持つサイトはほぼ無いのではないかというほど、この世界に存在しているサイトは千差万別です。
それぞれの背景を元にペルソナをたて、情報を整理して、ワイヤーフレームを作成して、デザインする。デザイナーはこれを繰り返し、ナレッジをためて「使いやすさ」をよりロジカルに、よりユーザーに寄り添ったカタチで表現できるようになっていくのではないかと思います。
使いやすさを学ぶトレーニングをする
例えば、より多くのデザインを見て、上流工程を想像してみるといったことでも十分ユーザーの使いやすさを考えるための力になると思います。ナビゲーションはファーストビューの上部にあるのか、下部にあるのか、もしくはハンバーガーメニューで格納されているのか、といったことからナビゲーション開閉アニメーション、スクロールで展開していくアニメーション、コンテンツの表示順、ボタンの大きさなどなど、一体なぜその位置にその大きさで置かれているのか……などを想像して自分なりの予測を出してみるだけでも、トレーニングになると思うので、ぜひやってみてください。
ユーザーの行動の予測精度を上げる
最初からユーザーにとって使いやすい、理想のサイトを実現させるというのは至難の業です。そのために実際の数値（ヒートマップや回遊経路、離脱ページなど）を見て、改修をして、より良い使い勝手を提供していく必要があります。
ただ、UIを頻繁に変更したり、ガラッと変えてしまうというのは多くのユーザーにとってあまり好ましいものではないので、前述したような一連の考えを統合して、最初の予測の精度を上げていくことが必要になります。
ユーザーの行動を制御することも必要
さらに制作側である程度コントロールする必要もあります。
簡単なところでいくと暖色、寒色でも、温かみ、クールな印象などといった感情のコントロールが可能ですし、Z型・F型といった視線の移動を利用した配置にしたりと、自然と誘導することが使い勝手の良さに繋がっていきます。
Z型の視線移動を利用したコンビニの陳列は有名な話ですが、こういった人間の無意識な行動についても知っておくと、サイトを設計する上で役立ちます。
ユーザーの心理に寄り添うように
ユーザーの心理を追求しながらUIを突き詰めていくことが、より良いUXに必要なことだと思います。
ちなみに、僕は大学で心理学を専攻していました。「心理学を専攻していた」というと9割ぐらいの人に心の中が読めるの？ とか聞かれます。たまにテレビでそう見える場面がありますが、実際は心理学を応用し、こちらの設定したゴールに向かって誘導しているのです。
例えば、嘘をつくときの人の視線のパターン、本当のことを言っていないときのパターン、本当のことを言っているときのパターンなどは統計によって得られている知識や先人たちの実験の結果などを総合して判断できます。
これは男女（性別だけではなく、男性的な思考か女性的な思考か）や年齢や生まれなどによっても変わりますが、さらに語りかけによって（ここがテクニックですね）心理的にニュートラルな状態に持っていっていくことで、望んだゴールに向かわせているのです。
考え方はサイト設計でもまったく一緒で、ユーザー心理を読み解く知見を利用して設計を行っていく必要があります。
まとめ
UI/UXを考えるにあたって一番重要なのは、ゴールとユーザーの2つについて明確にイメージすることです。
しかし実際のところ、ローンチしてみないとユーザーがどういう操作をするかは分かりません。ただ過去の経験や統計から、「こういう場合こういう動きをする傾向がある」という予測は立てられます。ここにペルソナを加えることで、予測した導線に感情とロジックが伴い、より精度の高い予測をすることができます。
（アゴが鋭い麻雀マンガでも“血の流れ・吐く息・吸う息まで聞こえてきそうな相手の心理と抱き合わせで進行していく生きた理そのもの”を活用してましたので間違いないと思います！）
概念的な話になってしまいましたが、僕自身頭の中を整理しながら書いているので、ご容赦ください……！こういったことを意識して考えればいいんだなぐらいの感じで読んでいただければと思います。
次は、ペルソナを使ったUXの設計についてアレコレ書く予定です。
キャリアアップ
「STUDIO by LIGでWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
