ユーザビリティの高いWebデザインとは？改善方法とサイト事例を紹介

Webサイトのユーザビリティ改善に取り組む企業も少なくありません。しかし、確かなノウハウをもとに改善しないと、失敗してしまう恐れがあります。

そこで、この記事ではWebサイトにおけるユーザビリティを改善させる方法について紹介します。ユーザビリティが高いデザインのWebサイトも紹介しているので、ぜひデザインを刷新する際の参考にしてください。

Webサイトにおけるユーザビリティといえば「使いやすさ」と思い浮かべる人も少なくないでしょう。使いやすさという要素も大切ですが、他にもさまざまな要素が合わさって「ユーザビリティ」と呼ばれています。

そこで、あらためてユーザビリティの概念を確認するとともに、なぜ重要なのかを紹介します。

この見出しのポイント

ユーザビリティは国際規格のISO9241-11で以下のように定義されています。

以上の定義を加味すると、ただ「使いやすさ」を満たすだけがユーザビリティではありません。特にWebサイトにおいては、ユーザーのニーズを満たすコンテンツをユーザビリティが高いと評価します。

ユーザビリティはWebサイトに訪れるユーザーによって異なるので、ターゲット選定が大切です。

ユーザビリティを向上させようと躍起になったところで、改善する要素を捉えて取り組まないと骨折り損です。そこで、まずはユーザビリティの定義から「何」を向上させる必要があるのかを考えましょう。

ISO9241-11で定義されているユーザビリティを各要素に分けると、以下3つに分解できます。

以上の3つの要素を満たすと、ユーザビリティの向上につながる可能性が高いです。それぞれの要素を向上させるような施策を考え、効果的にユーザビリティの改善に取り組みましょう。

近年ではSEOの観点からもユーザビリティを重要視している企業も少なくありません。なぜなら、ユーザビリティはWebサイトの離脱率に関わるからです。離脱率とはGoogleアナリティクスにおいて以下の通りに定義されています。

「個々のページのすべてのページビューにおいて、そのページがセッションの最後のページになった割合」

※参照：Googleアナリティクス ヘルプページ「離脱率と直帰率の違い」

つまり、ある特定のページで離脱してしまったユーザーの割合のことを意味します。ユーザビリティが低いWebサイトは「使いにくい」とユーザーに思わせてしまうため、離脱につながりやすいです。

離脱するとコンバージョンにもつながらないので、ユーザビリティの向上に取り組む企業も数多く存在します。

ユーザビリティの改善に取り組むメリットは複数存在します。ユーザーと企業の視点ではそれぞれメリットが異なるので、それぞれのメリットについて紹介します。

ユーザビリティを改善すると、ユーザー側にいくつかメリットが発生します。ユーザー側に発生する主なメリットは以下の3つです。

ユーザビリティが改善されているWebサイトは、ユーザーが利用しやすいデザインが多いです。そのため、ユーザーが利用していても使いにくいと感じることが少ないため、ストレスの低減につながります。

ネットサーフィンをしている際に、接続時間が長くて離脱してしまった経験がある人も少なくないでしょう。接続時間が長いと利用している端末が悪いのかと思ってしまう人もいるかもしれませんが、多くの場合はWebサイト側に原因があるかもしれません。

ユーザビリティを意識したWebサイトでは、通信速度の改善に取り組んでいる場合も多いです。そのため、たとえ端末の性能が悪くても、問題なくWebサイトが表示されます。

Webサイトの通信速度が改善されれば、ユーザーの検索がより短時間で済むようになります。

ユーザビリティを満たしたコンテンツは、網羅的に情報が掲載されている場合が多いです。そのため、わざわざ他のWebサイトを検索しなくても、欲しい情報が掲載されている可能性があります。

また、コーポレートサイトの場合は他社との製品比較も掲載されている場合もあるので、Webサイトで比較検討する手間を省けます。

ユーザビリティの高いWebサイトを提供すると、以下のメリットが掲載側に発生します。

それぞれのメリットを簡単に紹介します。

ユーザビリティを改善すると、Webサイトが持っている数値改善につながります。例えば、株式会社イード リサーチが運営している「U-Site」の情報によると、ユーザビリティの改善がKPI（主要業績評価指標）を平均で135％も向上させることが判明しています。（※1）

設定しているKPIにもよりますが、いずれの場合もユーザビリティを改善すれば、アクセス数やコンバージョン数、コンバージョン率の向上を見込めるでしょう。

※1参照：U-Site「ユーザビリティのROI、落ちてはいるがまだ十分に高い」

ユーザビリティを改善するとコンバージョン数の向上も見込めるので、結果的に売上の向上にもつながります。Webサイトを運営している企業のなかには売上の向上を狙っている場合もあるので、ユーザビリティの向上は欠かせません。

ユーザビリティを改善してユーザーが使いやすいと判断すれば、定期的にWebサイトを訪れてくれる可能性があります。自社サイトの情報を目的として訪れるようになれば、ファンになったといっても過言ではありません。

ファンになってくれれば販促もしやすくなるので、さらなる売上の向上を狙えます。

ユーザビリティの改善に取り組むためには以下5つの方法が考えられます。それぞれの方法を紹介するので、Webサイトのユーザビリティ向上を検討している人は参考にしてください。

Webサイトのユーザビリティを改善するには、デザインを刷新するのも1つの手段でしょう。特にデザインを刷新する際には、ファーストビューを大切にしてください。

ファーストビューとは最初に表示されるページ部分のことを意味します。Webサイトは第一印象が大切です。Webサイトにおいては、ユーザーが訪れてから約3秒のあいだに第一印象を決定するといわれています。

そのため、ファーストビューで以下のポイントを端的に伝えられるようなデザインにするのがおすすめです。

Webサイトにおけるユーザビリティを向上させるためには、コンテンツやサイトの色味を統一させましょう。Webサイト全体で統一されたレギュレーションが存在すると、ユーザーが利用しやすいコンテンツが出来上がります。

また、サイト全体の雰囲気に合わせた色味を設定するのも大切です。例えば、商品の安さを訴求したいのであれば、赤色のデザインが効果的といわれています。赤色は視界にいきなり飛び込んでくる色で、商品訴求したい場合に最適な色です。

ただし、Webサイト全体が赤色のデザインとなると派手な印象を受けるので、あくまでも強調色として利用するとよいでしょう。

ユーザビリティの改善に取り組む際には、サイト構造も改善しましょう。サイト構造の改善に取り組むと、ユーザーが知りたい情報に到達しやすくなります。サイト構造を改善する際には、まずWebサイトの全体像を把握することから始めてください。

例えば、サイトマップを制作するのも1つの手段でしょう。サイトマップとはサイト全体の構造を可視化した地図のようなものです。サイトマップを用意するだけでサイト全体の構造を把握できるだけでなく、SEOにも効果的とされています。

また、サイト構造をユーザーに知らせるという意味では「パンくずリスト」の作成も効果的です。ページの上部にユーザーの現在地を知らせることで、ユーザビリティの向上を図ります。

スマートフォンが普及した現代では、モバイル対応のデザインにするのも大切です。総務省が発表している「通信利用動向調査」によると、2020年のインターネット利用において、68.3％（※2）の人がスマートフォンを利用しています。パソコンでのインターネット利用率が50.4％（※2）であることを踏まえると、今やモバイル端末でも正しく表示されるデザインにするのは大切でしょう。

モバイルでも表示されるデザインを設定するためには「レスポンシブデザイン」を採用してください。レスポンシブデザインとは表示する端末やブラウザに合わせて、ユーザーが見やすいようなデザインに調整してくれるデザインのことです。

さまざまな媒体に合わせて勝手にデザイン調整してくれるので、あらゆる人のユーザビリティ向上に役立ちます。

※2参照： 総務省「通信利用動向調査」

スマホサイトの作り方とおすすめの会社を下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

Webサイトの表示速度を高めるのもユーザビリティの向上につながります。Webサイトの表示速度が遅いと離脱の原因になるので、コンバージョンにつながりません。Webサイトが表示されるまでに3秒以上かかる場合は、表示速度の改善に取り組んでください。

表示速度の改善に取り組む際は以下の項目を改善するとよいでしょう。

以上の施策に取り組むことで表示速度が改善されて、ユーザーにストレスがかかりにくい環境が整い、ユーザビリティの向上につながります。

サイト改善に取り組みたいのであれば、ユーザビリティの高いWebサイトに仕上げるべきです。そこで、ユーザビリティの高いWebサイトの特徴を5つ紹介します。それぞれデザインの特徴を把握したうえで、Webサイトの改善に取り組みましょう。

ユーザビリティの高いデザインにするためには、わかりやすいコンテンツに仕上げましょう。わかりやすいコンテンツに仕上げるとユーザーの利便性が向上し、ユーザビリティの向上にもつながります。

特に独自性や専門性が高い記事ほど、専門用語を噛み砕いたコンテンツにしてください。例えば、ユーザビリティの改善について執筆している記事があったとしましょう。なかには「UI」や「UX」などの単語を解説なしに執筆している記事も存在します。

しかし、Webサイト初心者の人はUIやUXなどの単語を理解できず、途中で離脱してしまう可能性もゼロではありません。そこで、UI（ユーザーインターフェース）やUX（ユーザー体験）などと、カッコ付けで意味を補足してあげるとわかりやすいでしょう。さらに、上記のような似た概念を同時に紹介するのであれば、両者の違いまで解説してあげるとよりわかりやすくなります。

また、文章のなかにデータや数字を用いるのもよいでしょう。数値やデータなどの客観的な事実を文章に混ぜると説得力もあがり、メリットや特徴が伝わりやすくなります。

ユーザビリティの高いデザインにするためには、視覚的にわかりやすいデザインにすることも重要です。視覚的にわかりやすいデザインにするとユーザーにストレスがかかりにくく、ユーザビリティの向上に役立ちます。

具体的には以下のポイントを重視すると、視覚的にわかりやすいデザインに仕上がるでしょう。

特にオリジナリティを誇示するために派手なデザインを採用しているWebサイトもありますが、デザイナーのエゴである場合がほとんどです。多くのユーザーはデザインには新鮮さを求めておらず、情報や内容に新鮮さを求めています。

そのため、まずは以下のレイアウトを参考にしたうえで、シンプルなレイアウトに仕上げるのがおすすめです。

ユーザビリティの高いWebサイトを目指すのであれば、ユーザーの目標が達成しやすいデザインであることが必須条件です。ユーザーの求める目標を達成しやすいデザインであれば、ユーザビリティの向上が見込めます。

ユーザーの目標を達成しやすいWebページにデザインするためには、タグやカテゴリーを検索できるようにするのが効果的です。例えば、Aという情報が欲しくてWebサイトにアクセスしたとしましょう。Aという情報が直接表示されれば良いですが、多くの場合はAの情報が表示されるまでページを数回移動しなければいけません。

何度もページ移動していると検索意欲が薄れて、Webサイトから離脱してしまう原因になります。そのため、Aという情報に直接アクセスするために「タグ検索」や「カテゴリー検索」を用意しておくと便利です。

直接Aの情報にアクセスできるようになれば、何度も検索する手間が省けるうえに、ユーザーの目標も達成しやすくなります。また、関連する情報の案内も設定しておけば、よりユーザビリティの改善が見込めるでしょう。

入力フォームはできるだけシンプルにした方がユーザビリティの改善が見込めるでしょう。特にWebサイトの入力フォームにまでたどり着いたユーザーは、入力フォームの利便性が低いと、約60％（※3）の確率で離脱してしまうというデータも存在します。

そのため、近年では入力フォーム中に離脱させないための施策に取り組まなければいけません。そこで、EFOというWebマーケティングが注目され始めました。EFOとは日本語で「入力フォーム最適化」という意味で、利用しやすい入力フォームのデザインにすることを意味します。

EFOの施策として考えられるのは以下の通りです。

以上の施策を自力で取り組むにはそれなりの労力が必要であるため、EFOツールを利用するのが一般的です。EFOツールの導入でユーザーの入力エラー回数を低減し、最終的にはユーザビリティの改善が見込めます。

なかにはコンバージョン率（CVR）が2.4倍（※4）にも向上した事例もあるので、コンバージョンが伸び悩んでいるWebサイトは導入する価値があるかもしれません。

※3参照：Gyro-ｎ「EFO（エントリーフォーム最適化）とは？」
※4参照：Gyro-ｎ「最新事例：EFOを導入するだけでCVRが「2.4倍」向上」

操作性の良いWebサイトはユーザビリティの向上が見込めます。独自性として勝手に動くアニメーションを導入しているWebサイトも少なくありません。しかし、ユーザーの操作性を第一に考えるのであれば、勝手にアニメーションを始動させるのはよくないでしょう。

見た目を華やかにするのも大切ですが、まずはユーザーが操作しやすいデザインを考えてください。アニメーション以外にも、勝手に開くメニューバーは操作性を低下させます。勝手にメニューバーが開かれてしまうと、ユーザーが意図せずメニューをクリックしてしまう可能性があるため、ユーザビリティが低下してしまいます。

そのため、ユーザビリティの改善を狙うのであれば「勝手に動く」デザインを採用してはいけません。あくまでもユーザーが意図して選択した結果、デザインが反応するようにしましょう。

また、表示する情報を限定すると操作性が改善される場合もあります。メニューバーにすべてのカテゴリー情報を掲載するのではなく「ハンバーガーメニュー」を採用するのもよいでしょう。ハンバーガーメニューとは三本線で表示されるメニューのことで、クリックすると該当するメニューが表示されます。

ただし、ハンバーガーメニュー自体は見つけづらい特性があるため、「メニュー」などとわかりやすく表示させる必要があります。

ユーザービリティの向上は操作性で決まるという内容の記事がございますので、あわせてご覧ください。

ここではトライベック・ブランド戦略研究所が発表している「Webユーザビリティランキング2022企業サイト編（※5）」において、ユーザビリティに優れていると判断されたWebサイトを5つ紹介します。

大日本印刷は印刷分野からマーケティングのプロモーション、医療や健康分野までさまざまな事業を展開している会社です。上記で紹介しているランキングのなかでも堂々の1位を獲得していて、総合的にユーザビリティが高いWebサイトと評価されています。

総合力に優れたユーザビリティを提供しているなかでも、特筆すべきがWebサイトのヘルプ能力です。あらゆる国の人が見ることを想定して作られている大日本印刷のWebサイトは、日本語を含めて合計17種類 の言語に対応。さらに、ページ内の「よくある質問」ではユーザーの悩みを先回りした回答が用意されています。

また、専門性が高いコンテンツを提供していて、事業部門の責任者同士の対話など、他のWebサイトでは見られない独自のコンテンツを提供しているのが好評なようです。

清水建設は建設業を中心に不動産開発やエンジニアリングなどの4分野で事業を展開している会社です。総合的なユーザビリティの高さが評価されていて、特に「ナビゲーションの使いやすさ」に定評があります。

階層構造における最上位カテゴリーを表すメニューが上部にまとめられていることに加えて、パンくずリストも追加。また、メニューのタブにおいて最低限の情報を表示することによって、ユーザーに情報を与えすぎないようにしています。

さらに、ファーストビューに動画コンテンツを配置することで、1つのコンテンツ内にさまざまな情報を集約しているのも特徴的です。

UQコミュニケーションズはKDDIグループの電気通信会社です。「UQ mobile」や「UQ WiMAX」などのサービスを提供しています。

「Webユーザビリティランキング2022企業サイト編（※5）」においては、調査対象の150社のうち「ナビゲーションの使いやすさ」の評価で1位を獲得しているのが特徴的です。ヘッダーメニューにはそれぞれサービスの紹介カテゴリーを設定し、脇のグローバルメニューでは購入を検討している人を対象にカテゴリーを設定しています。

それぞれ見込み客から潜在顧客まで幅広い層に対してアプローチできるため、あらゆる人のユーザビリティを満たしたWebサイトといえるでしょう。

大同生命は中小企業に特化した「経営者保険のパイオニア」として、1902年に創業された会社です。大同生命のWebサイトで特に優れている部分はサイト全体のわかりやすさでしょう。

「PICK UP」カテゴリーではカーソルを合わせると、コンテンツの詳細が表示され、ページに移動しなくても大まかな内容を把握できるようにしてあります。ユーザーにとってページ移動は労力ですし、移動後における情報のミスマッチを防ぐという面では、ユーザビリティに優れていると評価できるでしょう。

明治といえば製菓業を中心に食料品などを提供している会社です。Webサイトへのアクセス性の高さや、適切なコンテンツを提供している点が評価されて、ユーザビリティが高いと評価されています。

サイト全体としてはマルチカラムで構成されていて、各メニューでさまざまなコンテンツが紹介されています。情報の重要度に合わせてメニューのサイズを変えているため、一見多く見える情報量も選択しにくいとは思わせない構造に仕上がっています。

また、各コンテンツに遅延ローディングを設定し、サイトの表示速度を高める施策に取り組んでいる点もユーザビリティに配慮しているといえるでしょう。

※5参照：トライベック・ブランド戦略研究所「Webユーザビリティランキング2022企業サイト編」

ユーザビリティにおける改善で大切なポイントは以下の通りです。

ユーザビリティの改善ではさまざまな要素を加味しなければいけません。初心者がいきなり取り組んでも失敗してしまう可能性があるため、ときには専門業者に依頼することも視野に入れましょう。

THINkBALなら、高いユーザビリティのサイトを制作することが可能です。お気軽にご相談ください。