UI/UXとは？2つの違いとUI改善のコツ3つを事例をもとに解説 市川 莉緒 2021.05.13 2023/1/19 UI/UXWEBデザイン実例 UIUXサイト改善 UIとはユーザーとサービスを繋ぐ接点 UXとはモノではなくコトの概念 UIとUXの違い：UIはUXの一部 UX向上につながったUIの改善事例とそのコツ 編集者 市川 莉緒UI/UX Frontの編集を担当。数百ページを検証した経験からユーザー行動の分析が得意。 監修者 玉飼 真一UX専門家。主な著書は『Web制作者のためのUXデザインをはじめる本』。 UIとはユーザーとサービスを繋ぐ接点 UIとはUser Interface（接点）の略で、Webサイトやアプリにおいては、ユーザーがそのサイトやアプリを利用するときに接する画面や画面遷移、クリックに対する反応など含む一切を意味します。（※以下、基本的にWebやアプリを前提としてお話しします） もちろん画像やイラスト、フォントやテキストサイズ、色といったグラフィックデザインの要素も含まれます。Webやアプリの作り手とユーザーがコミュニケーションする接点となる部分です。 UXとはモノではなくコトの概念 UXとはUser Experienceの略で、ユーザー体験と訳され、製品やサービスなどの「モノ」ではなく、それを取り巻く「コト」のデザインと解釈されます。 世界的に有名なUX白書（注1）によると、該当の製品・サービスを使っているときだけでなく、その前後の時間の中にもユーザー体験が広がっている、とされています。 以下の図はユーザーがサービスに触れる時間軸でのユーザー体験例です。 （注１：UX白書とは2010年にUXの共通認識を整理すべく世界の専門家30名が集まり、その成果をまとめたもの） UIとUXの違い：UIはUXの一部 UIはユーザーが主に画面を通じてサービスとコミュニケーションする部分、UXはその製品やサービスを取り巻く一貫した過程での体験と説明しました。 このことからも分かるように、あくまでもUIはUXの一部です。 以下の図はUIとUXの関係性を表しています。 そのためUXを向上させるにはUIの改善だけでなく、例えばアフターケアの品質など、そのWebサイトを使う前後の時間軸で発生する事象にも目を向ける必要があるということです。 とはいえWebサービスにおいてUIはUXの中でも重要かつかなりの部分を占めます。今回は、WebサイトにおけるUIに目を向けて改善方法をご紹介します。実際の改善例から改善のコツを学び、成果に活かしていきましょう！ UIを改善するには？ WebサイトのUIを改善するとき、どのような方法が取れるのでしょうか？ そもそもUIはユーザーとのコミュニケーションをする場なのですから、伝えたいことが負荷なく伝わるということがとても大切になります（認知負荷を下げるといういい方もあります）。そのためユーザーがそのWebサイトを利用する中でどんな部分につまずいているのかなどを調べ、ユーザーの行動を読み解き、改善していくのが基本的なアプローチです。 Google Analyticsなどのアクセス解析ツールでは、例えば離脱率からサイト内の問題のありそうなページの特定まではできますが、その離脱が起こっている原因がページ内のどこにあるかまでは分からず、原因の特定には限界があります。 ユーザーの行動を理解するための代表的な方法は以下のものです。 ① UI/UX 改善ツールの利用 ② ユーザビリティテスト ③ インタビュー ④ ABテスト それぞれの方法ごとにメリット／デメリットは存在しますが、今回は手軽に始められて即効性のある効果を実感しやすい「UI/UX 改善ツールの利用」をご紹介します。ユーザーがそのページを離脱するに至った原因など、内部の原因や問題を突き止めるために使えるUI/UX改善ツールが「ヒートマップ」です。 次章で詳しく解説します。 UI改善ツール「ヒートマップ」 ヒートマップを使うことで主に以下の3つのことが可視化されます。 ① ユーザーがどこに興味を示して読んでいるのか ② ユーザーがどこで興味を失って離脱/直帰しているのか ③ ユーザーがどこをどのくらいクリックしているのか これによって、主にユーザーが「どこに興味があるか」「どこに興味がないか」「どこで興味を失ったか」が分かるようになるため、具体的な仮説が立てやすくなり、UIの改善に大きく役立てることができます。 では、具体的にはどのようにヒートマップをUIの改善に活かしていくのでしょうか？事例をもとにUI改善のコツをご紹介します。 無料のヒートマップを使う UX向上につながったUIの改善事例とそのコツ ヒートマップを用いてユーザ―の行動を分析し、UIの改善をしたことでUX向上に繋がった事例を3つと、そこから学べるコツをご紹介します。 詳しく見ていきましょう。 事例①：大事なポイントは画像を添えて表現する！ まずは、ユーザーが興味を失っているところをヒートマップを使って見つけ出し、その原因部分のUIを改善したことによって結果、注文数が143%上がった事例です。 【注目したポイント】 スクロールヒートマップからユーザーが興味を失っている（離脱している）ポイントを発見 【立てた仮説】 その直前部分のメリットが直感的に認知できず、興味を失っているのでは？ 【行ったこと】 ①文字だけだった情報に写真を添え、直感的に理解できるようにした②1ブロックで訴えるポイントを絞った このUIの改善により、ユーザーはページのアピールポイントが瞬間で伝わるようになり、購買に至った（Webサイト訪問中のUXが向上した）と言えます。 大事なポイントは画像などの視覚情報を添えて表現しましょう。また、重要なメッセージはできるだけ絞り、1ブロックに複数のメッセージが入らない様にすることもユーザーにスルーされないという観点から大切です。 無料のヒートマップを使う 事例②：障害を取り除く ユーザーにとって興味のない情報＝障害と言っても過言ではありません。実際にユーザーがページの中で興味を示していない部分（障害・ノイズ）を取り除いたことにより約35％離脱率を抑えることができた事例をご紹介します。 【注目したポイント】 アテンションヒートマップでページ上部にユーザーが興味のないところ（薄色部分）が長く続いていた 【立てた仮説】 ページ下部にあるユーザーが本来欲しい情報にたどり着けていないのでは？ 【行ったこと】 ページ上部の薄色部分のコンテンツを取り除いた 作り手のエゴによりユーザーにとっては興味のない内容がページ上部を占め、ユーザーが欲する内容が埋もれてしまっているために離脱が起こる、ということはよくあることです。 ユーザーが必要としていない内容は障害と判断し、取り除いたり、ページの後半に置くようにするなど、内容の優先順位をつけるようにしましょう。 このようにヒートマップを使うと、Webサイトの作り手と利用者側の意図やニーズのズレも発掘できます。 無料のヒートマップを使う 事例③：次のアクションを明確にする 次に取るアクションや導線が明確でないとユーザーがそのサイト内で迷ってしまい、そのまま離脱に繋がりかねません。したがって、ユーザーが次に取るべき行動を取りやすいように導線を明確にさせることが重要です。この導線を明確にさせたことによってCVが1.83倍になった事例をご紹介します。 【注目したポイント】 多くのユーザーが興味を持っている部分をアテンションヒートマップから発見 【立てた仮説】 多くのユーザーが立ち止まって注目している箇所＝サービスへの関心が高い人が集まっている箇所なのでは？ 【行ったこと】 よく立ち止まられていた部分の真下にCTA（Call To Action：お問合せ、購入ボタンなど、事業成果へ導くもの）を置いた サービスへの関心が高まっている状態のユーザーにとっては、迷うことなくそれに沿ったアクションが間髪入れず取れるようになり、結果としてお申込みの数が1.83倍になりました。 ただし、「前後の文脈や構成を崩さない範囲で」、というのは前提に置きましょう。UXの向上には、ページを読んでいるときのユーザーの思考に丁寧に寄り添うべきで、まだその気になっていないタイミングで、例えば、文中やサービスに何も関係のない文脈でCTAを置くことはむしろ逆効果になるので注意してください。 ユーザーが欲しいと感じるまさにその瞬間に、欲しいものがそこにあるというのは好ましいUXです。その瞬間はどこで起きているのかをヒートマップを見ながら探ってみてください。そこが見つかれば簡単かつ大きな事業成果に繋がることが多々あるので、検討の価値は大いにあります。 無料のヒートマップを使う UIの改善、UXの向上にはユーザーの思考理解が必須！ UIを改善すると、UXの向上につながり、サービス提供側としてもCVが増えるなどの事業成果を生むことが分かりました。そのためにも、Webサイトに来てくれたユーザーの行動を読み解き、ユーザーにとってストレスのないサイトを構築することが大切です。 今回事例をもとにご紹介したヒートマップを用いたUI改善のコツはどれも単純であるにもかかわらず、しっかりと根拠に基づいているので、効果を生んでいると言えます。ヒートマップは無料から使うことができるので是非UIの改善に役立ててみませんか？ 無料のヒートマップを使う 編集者情報 市川 莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
