UI・UXとその改善方法を現役UXディレクターが5年の知見を解説します
こんにちは、今回はUI・UXをテーマに5年間ほど現役でUXディレクターとして働いている筆者が知見を発信したいと思います。UIやUXをほとんど知らないけど、これから仕事で使う人も、そこそこ知っているけどもっと知りたいディレクターやエンジニア、デザイナーなどに知ってもらえると良いかと思います。
目次
筆者のUI・UXプロフィール
筆者はweb系の会社でUI・UXを中心にディレクターとして仕事をしてきています。主にABテストだったり新規サービスリリースのディレクションをやっており、そこそこの実績と知見があるかなと思ってます。
一方で世の中的に、あまりUI・UXの深い部分の知見というのは世の中に広まっていないように感じており、筆者の感じるところを発信しつつ社会貢献できればと思いました。今回は基本的なUI・UXの概念的な話から、設計方法や改善方法（ABテストとか）、UI・UXを知らないweb担当者が読んでも明日から使える内容をお届けしたいと思います。
UI・UXとは
まず、UI・UXとは何なのか？ですが、UIとは、ユーザインターフェースの略称で、UXとはユーザエクスペリエンスの略称です。数年前にバズったワードとして記憶にある方も多いと思います。まず、それぞれを簡単に解説します。
UI
まずユーザインターフェースこと、UIです。UIは、広い意味で使われており、ハードウェアでもUIと言う概念はありますし、webでもUIと言う概念があります。ハードウェウアの場合は、例えばPCなどでキーボードのボタンの配置などもUIに含まれます。
ソフトウェアであれば、主に2次元でのデザイン的な話になります。よくあるweb系の企業でUIと言う言葉が出てくるのは、例えば検索ボタンのデザインとかTOPページの洗練されたデザイン性とかあくまで2次元での話が多いですね。
UX
一方で、UXというのはもっと広い意味を持ち合わせます。先ほどのあくまで2次元での話ではないです。例えばUXという言葉は、よくサービスやビジネスモデルの良し悪しを語り際に、このサービスのUXは素晴らしいなどと語られますが、操作性などは最も簡単なUXの要素ですし、もっと広く意味を取るとアマゾンプライムのようなユーザーあるいはカスタマーが感じるサービスメリットの体験そのものをUXと語ることも多いです。
そのため、単純な操作性だけでなくビジネスでの話で考えると、ほぼビジネスの良し悪しを語るレベルでの概念がUXとして扱われていることが多いです。
UI・UXの違いと関係性
ここで一旦、UI・UXの違いと関係性を整理しましょう。UIはUXの一要素にすぎないというのが整理になります。なので例をあげると、UXはアニメであり、UIはちびまる子ちゃんみたいな感じです。もっとわかりやすい例でいうと、UIは顔であり、UXはデートの体験です。
イケメンでもデートがつまらないと、UIはいいけどUXがいまいちみたいな感じです。この例はかなりわかりやすいと思っており、顔はイケメンだけどお店のチョイスがいまいち(彼女の好みや気分などのリサーチが足りていない)、デートの段取りがいまいち（ゴールまでのプランニングができてない）、などいくらでも例が出ますね。
一方で、UIがいまいちでもつまりイケメンでなくても、デートが素晴らしければUXが素晴らしいと言うことになります。では、そんな関係性のUIとUXを理解する上で大事な概念を紹介します。ここからはweb担当者やアフィリエイトやブロガーにも役立つと思います。
UI・UXを理解する大事な概念
UI・UXを理解する上では、情報設計とインタラクションコスト、この2点を理解しましょう。情報設計とは、英語で言えばインフォメーションアーキテクチャーであり、どちらかというとUIの話です。インタラクションコストとは、操作コスト、使いやすさの話であり、UXの話ですね。
情報設計(IA)
情報設計とは、どの情報をどの優先順位でどのようなデザインで配置するかと言う概念です。要は、2次元の画面上にどう画面設計するかと言う話ですね。例えば、アマゾンの商品詳細画面であれば、商品名や商品写真、金額、レビューなどの情報をどの優先順位でどのようにデザインして配置するかと言う話です。
アマゾンのようなサイトだと、この情報設計だけでもCVRと言う成約率が大きく変化するでしょうからとても重要だと言えます。筆者の知見でいうと、購入ボタンはほぼファーストビューというユーザが最初に開いた画面の中に表示されるべきですし、実際そうなっていますね。他にもいろいろあるんですが、需要があればもっと深堀たいと思うのでコメントください。
インタラクションコスト
次はインタラクションコストです。ここはUXの話になりますが、操作性とか使いやすさの部分です。もっと定量的な話でいうと、ユーザが求めるゴールに最短でたどり着くための画面設計だったり機能提供だったりが該当します。
わかりやすい例でいうと、アマゾンのTOPページに行くと、最近チェックした商品という履歴が出てきます。これはつまり、あなた最近これチェックしたよね？購入しない？と言うレコメンドなんですが、たいていのユーザーは何日かかけて商品購入を検討するのでそういった履歴を出すと、再訪問してTOPページにきた時にわざわざ検索ボックスに同じワードを入れて検索するより、ワンタッチで求めている商品画面に行けるので購入が楽チンになります。
実はこういった機能はいろいろなECサイトで当たり前のように装着されているので、そういった視点でウェブサイトを見てみると新たな発見があるかもしれませんね。
良いUI・UX設計の改善方法
では次に良いUI・UX設計の改善方法を解説します。大きくは、ビジネスゴールを設定する、課題を見つける、仮説を考えるの3つです。抽象的にはなりますが、出来るだけ具体的にそれぞれ解説していきます。
ゴールを設定する
まず良いUI・UXを決めるのは基本的にサービス提供者であるあなたとユーザです。あなたの場合は、ビジネスゴールを決めることから始まります。つまり、内部回遊が増えてPVが増えることをゴールと設定するのか、あるいは単純にCVRを上げたいのか？です。それによってそのゴール達成のためのUI・UXは若干変わります。
そのゴールに沿って設計されたUI・UXによって、ユーザが実際にCVRが高まったり、内部回遊が増えればそれはあなたの設定したゴールに対するUI・UX設計が良かったということになります。
一部誤解が起きそうなので補足すると、あなたがどうしてもアプリのDLさせたいとか広告バナーを押させたいとして関係のない画面にどかどかと広告バナーなどを露出して、ユーザが押し間違いをするなどの場合は仮に数値が上がっても良いUI・UXにはなりません。この場合は、短期的には数値が上がってもユーザのリピートが減るので徐々に減少していくことが多いです。
課題を見つける
次に良いUI・UX設計を考える場合は、課題を定義します。課題とは、理想と現状のギャップと捉えてください。この課題を定義するための方法はいくつかありますが、基本的には競合と自社の差分分析を行いベンチマークを行うのが有効です。
というのも、ウェブサイトやアプリのUI・UXはユーザーに展開されているので簡単に調査することが出来ます。模倣困難な場合は、内部データとかアルゴリズムの話になりますがその場合は簡単には分からないですね。
例えば、内部回遊を上げたいという場合に、自社サイトと他者サイトを見てみると、商品ページや検索一覧ページ上部にぱんくずリンクが自社にはないけど、他社にはあるような傾向が見えたとします。
これは当たり前すぎますが、パンくずリストはページ間の関係性を定義するとともに、SEO効果もありますし、内部回遊もしやすくなります。ぱんくずリンクがないことが課題として仮説づけられます。
仮説と優先順位を考える
先ほどでもう仮説が出たわけですが、たいていは1つの課題に対して仮説はいくつか出てきます。本来は網羅的に課題に対する仮説を洗い出して、優先順位をつけることになります。
優先順位は出来るだけ定量的に評価軸を設けて、つけましょう。評価軸でいえば、効果とコストと実現可能性が大定番です。効果は、PV数や現状のCTRやCVRに対する改善率がどの程度になるかで最終的に金額に落とし込めれば最高です。
まとめ
まとめですが、概ねUI・UXを改善しようとしたときに、経験がないディレクターは、何から始めればいいかわかってないです。ですが、ゴールを決める、課題を決める、仮説を決める、がプロセスとして出来ればある程度納得感のある設計が可能です。
一番大事なのは、ユーザ目線で自社サイトと他者サイトを見比べて使いづらいポイントを洗い出していくと経験が溜まっていくかと思います。
