自社サイトのUI/UX対策はどのくらいできてる？チェック・診断方法や必要なツールをご紹介！

制作
2021-4-8
更新日: 2024-3-29
morikubo

自社サイトのコンバージョンが増えない。LPやサイトを制作したのに商品の購入や資料請求などが増えない。このような場合、正しいUI/UX対策ができていないのかもしれません。
今回はUI/UXとはなにか、UI/UXのチェック・診断方法はどうすればいいのか、また、チェックに役立つツールをご紹介します。

UI/UX対策にお困りの企業様は、ぜひ下記リンクよりUI/UX診断にお申込みください。

またサイト全体のPDCAフローに関しては以下の記事で詳しくご紹介しております。
【Webサイト集客で結果を出す！】ポイントは現状把握と分析！結果を出すPDCAサイクルとは？

Webサイト制作のRFPサンプル無料配布中

「サイト制作を外注したいけど、依頼方法がわからない…」「RFP（提案依頼書）を作ったことがない…」
そんな方に向けて「RFPサンプル」を無料で公開しています。ぜひ、こちらを参考にしてください！

【無料】RFPサンプルを見る

1 UI/UXとは？
2 なぜ、UI/UX対策が必要なの？
3 自社サイトのUI/UX対策をチェック
4 UI/UX診断や現状分析に役立つツール
- 4.1 モバイルフレンドリーテスト
- 4.2 Pagespeed Insights
5 弊社のUI/UX診断について
6 まとめ
7 Web制作に必要なRFPサンプルを無料配布中

UI/UXとは？

そもそもUI/UXとは何か簡単におさらいしましょう。
UIとはUser Interfaceの頭文字をとったもので、「人ともの(主にデバイス)を繋ぐ窓口のようなもの」とイメージすると良いかもしれません。
例えば、Webサイトを閲覧する際に画面上で見られる情報(フォントやデザイン等)全てがUIにあたります。
一方、UXとは「User Experience」の頭文字をとったもので人が「製品やサービスを通じて得られる体験や経験の総称」を指します。

場所や施設などに訪れてみたい
商品や製品を手にしてみたい
サービスを利用してみたい
目的の商品にすぐにたどり着いた

といった感想を持ったことはありませんか？
このように商品やサービスに触れて、ユーザーが感じることすべてがUXとなるのです。
UI/UXについて詳しく知りたい方はこちらの記事を参照ください。
【UI/UXとは？】UIとUXの違いとデザインの改善案

なぜ、UI/UX対策が必要なの？

WebサイトにおけるUI/UX対策は、自然検索や広告からの流入を経てサイトに訪問した、貴重なユーザーの離脱を回避するために必要な施策です。
例えば、ある製品の広告を見てサイトに訪問しようとした際、なかなかサイトが読み込まれないとイライラしてしまったことはありませんか。
このようにUI/UX対策をしないとユーザーにストレスを感じさせ、製品についてもマイナスな印象を与えてしまいます。
そうならないためにも、UI/UXを診断していく必要があります。

コアウェブバイタルとは

「コアウェブバイタル（Core Web Vitals）」は、2021年からSEOの検索ランキングの要因に組み込まれているUXの指標です。

コアウェブバイタルは「LCP」「INP」「CLS」の３つの指標が示されています。

いずれもページを表示するのにかかる時間に関する内容です。
それぞれ詳しく見ていきましょう。

なお、コアウェブバイタル発表当時、指標だった「FID」については、「INP」の指標と差し替えられました。
FIDについて詳しく知りたい方は以下の記事を参照してください。

FIDとは？改善方法や測定ツールの使用方法について解説

LCP(Largest Contentful Paint)とは

ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。
（Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標より）

LCPは、ページ内での動画や画像、テキストなどのレンダリング時間を指します。
ページの読み込みから2.5秒未満がGOOD(良好)と評価されます。

LCP(Lrgest Contentful Paint)とは？改善方法・低下原因・測定方法を解説

INP（Interaction to Next Paint）とは

Event Timing API のデータを使用してページの応答性を評価する安定版の Core Web Vitals 指標です。INP は、ページに対するすべてのクリック、タップ、キーボード操作のレイテンシをモニタリングし、外れ値を無視して最長の継続時間を報告します。
（Interaction to Next Paint（INP）より）

これまで、インタラクティブ性を計る指標として「FID（First Input Delay）」が用いられてきましたが、2024年3月12日から「INP（Interaction to Next Paint）」へと指標が変更されました。

INPは、リンクをクリックするなどユーザーが何かアクションをしてから応答するまでの時間を指します。
200ミリ秒未満がGOOD（良好）と評価されます。

Core Web Vitalsの新指標「INP」とは？計測方法、改善方法を解説

CLS(Cumulative Layout Shift)とは

ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページコンテンツにおける予期しないレイアウトのずれの量を定量化します。
（Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標より）

CLSは、ページを読み込んだ際に画像がずれて表示されるなど予期しないレイアウトの崩れを指します。
スコアの計算方法は「ずれが生じた表示領域の比率 × 距離の比率」で、スコア0.1未満がGOOD（良好）と評価されます。
コンテンツの質をあげることはサイト作りに欠かせません。
（Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標より）

CLS（Cumulative Layout Shift）とは？低下の原因や測定方法、改善方法について解説

自社サイトのUI/UX対策をチェック

あなたの会社のコーポレートサイトやサービスサイトが、どのくらいユーザー視点を考慮し、ターゲットユーザにとって使いやすく作られているのかをチェックする際に見るポイントとして、下記の6つの項目が挙げられます。

サイト戦略、設計
デザインレイアウト
ナビゲーション、リンク
コンテンツ
ユーザビリティ
フォーム

それぞれ詳しくみていきましょう。

サイト戦略、設計

サイトの設計を考える上で「どのようなターゲットにどういった行動をしてもらいたいのか」というゴールを明確にすることが大切です。ターゲットユーザーを鮮明化し、本当にそのWebサイト（サービス）を使ってもらえるのか？を重点的に言語化しましょう。
Webサイトがユーザーの利用する目的に応えられているか、競合の中で有用なサービスが提供されているかを意識してサイトを設計する必要があります。技術やユーザビリティの質が向上していく中で、ユーザーの目的に応えていない、使いにくいサービスは、すぐに代替されてしまいます。

デザイン、レイアウト

デザインやレイアウトはユーザーの離脱にも大きく関わる要素の１つです。
ただ見た目を流行のデザインにすれば良いということではなく、デザインそのものがビジネスに与える影響度が高まっています。
例えば、一貫したアイコンやボタンデザインをパターンとして使用することでユーザーに視覚的な安心感を与え、サイト内の回遊率をあげて離脱を防ぐことができます。
検索で有名な企業の検索窓の枠を1ピクセル太くするだけで、1日の売上に数億円の影響が生じたり、ボタンの色や形、大きさによりユーザーの購買行動が変わることもあります。
また、文字サイズは、閲覧する端末によっては可読性が低下するため極端に小さい文字の使用、サイトの読み込みに影響がでる多くの種類のフォントの使用は好ましくないでしょう。

ナビゲーション、リンク

Webサイトにおけるナビゲーション、リンクはユーザーがたどり着きたいページに迷わずたどり着く工夫が必要です。

例えば、グローバルナビゲーションはユーザーインターフェースにおける最も大事な要素であり、Webサイトにおけるユーザーの道しるべとなります。
画面の遷移をしても、決まった場所に、決まった並びで表示されるため一覧性に優れ、一目でナビゲーション要素と分かることが重要です。

リンク

遷移先が想像できるように、パンくずリストを設置したり、ボタンで使用するテキストの内容を変更したりすることでも、サイトのわかりやすさを高めることができます。他にもテキストリンクには、下線を引くなど動作を推測できる対策をするといいでしょう。

コンテンツ

サイト内のコンテンツを充実させることで、ユーザーの興味を引くことができます。ユーザーの知りたい情報を提供することで、検索エンジンからも高評価を受けられます。また、Webサイトには、サイトに適した文章が存在します。読みやすさだけではなく伝わりやすさに考慮し、文章に改行を用いたり図で説明できる箇所は図を使用したりする工夫をしましょう。

ユーザービリティ

ユーザビリティとはユーザーにとって製品やサービスの「使いやすさ」を示す指標です。

Webサイトのユーザビリティを高め、ユーザーの離脱を回避するためにはウェブユーザービリティへの配慮は欠かせません。ボタンの色や大きさ、フォントサイズ、導線設計などを含めて全体的に考慮することが必要です。

また、ユーザーは何らかの目的やニーズをもってウェブサイトを訪問し利用します。

例えば、「商品の購入」を目的としたとします。その商品を購入した際のメリットや類似商品との差をわかりやすく記載し、顧客を満足させる情報を記載できているか、購入ボタンがわかりやすいかなど、ユーザーがストレスを感じずに購入まで進められることが大切です。

他にも、存在しないページにアクセスした際は、404エラーページに遷移しユーザーがたどり着きたいページを探せるように、検索バーを設置するといいでしょう。

フォーム

ユーザーのアクションに繋がる重要なページです。
個人情報の取り扱いなどサイトの情報に信頼を与え、安心してサービスを利用できるように対策する必要があります。
また、入力ミスを防ぐために入力補助やガイドを入れたり、入力項目は極力減らしコンパクトに見せたりすることで離脱の減少にもつながります。

UI/UX診断や現状分析に役立つツール

自社サイトのUI/UX対策ができているかチェックする際、「スマートフォンでは文字や画像はどのように見えているのか」「サイトにアクセスして、ページが表示されるまでにどのくらい時間がかかるのか」などを確認しておくとよいでしょう。などを確認しておくとスムーズです。

それでは、それぞれツールをご紹介します。

モバイルフレンドリーテスト

「モバイルフレンドリーテスト」はGoogleが無料で提供している、モバイルページの使いやすさをテストするためのツールです。
モバイルフレンドリーテストでは、スマートフォンにおける文字サイズや画像サイズなどの可読性をテストし、スマートフォンでの表示がユーザーにとって適切かをチェックすることができます。
弊社では、モバイルフレンドリーテストを含む全48項目のUI/UX診断を実施してます。お気軽に下記からUI/UX診断をお申込みください。

Pagespeed Insights

「Pagespeed Insights」はモバイルフレンドリーテストと同様に、Googleが無料で提供しているサービスです。モバイルフレンドリーテストと一緒にテストしておくと良いでしょう。
Pagespeed Insightは、ページを読み込み、表示するまでにかかる時間を測定し、表示スピードを100点満点で評価してくれるツールです。
ページの応答が遅ければ遅いほど、ユーザーの離脱率は高まる傾向にあります。
ユーザーにストレスを感じさせないサイトへと改善する、滞在時間や売り上げを伸ばす、という観点においても、表示速度はとても重要だと言えます。