fbpx

Webサイトのユーザビリティとは?必要な要素と改善のコツ

Webサイトの立ち上げ、あるいは改善を検討している場合、「ユーザビリティとは何か」を知ることは重要です。その大まかな定義だけでなく、必要な要素についても詳しく知っておきましょう。Webサイトのユーザビリティを改善するための具体的なヒントもいくつか紹介します。

ユーザビリティとは何か

ユーザビリティ(Usability)とは、「使いやすさ」「便利さ」などを意味する英単語です。Webサイトやアプリなどの品質を考える上で重要な要素として、頻繁に登場します。国際規格「ISO9241-11」に基づくJIS規格「JISZ8521」(2020改訂版)によると、ユーザビリティの定義は以下のとおりです。

特定のユーザが特定の利用状況において,システム,製品又はサービスを利用する際に,効果,効率及び満足を伴って特定の目標を達成する度合い。

JIS検索|日本産業情人調査会

つまり「効果」「効率」「満足」の3つの要素が必要です。それぞれの定義については、規格の中で以下のように述べられています。

  • 効果:ユーザが特定の目標を達成する際の正確性及び完全性
  • 効率:達成される成果に関して利用される資源
  • 満足:システム、製品又はサービスの利用に起因するユーザのニーズ及び期待が満たされている程度に関するユーザの身体的、認知的及び感情的な受け止め方

「効果」とは、つまりユーザーの思ったとおりの結果やベネフィットのことです。ユーザーの期待と異なるものではなく、期待どおりの結果を「正確」に、「完全」に実現する度合いを指しています。

「効率」とは、サービスや製品を利用するために必要な資源(時間や労力、お金など)が無駄にならず、できるだけ少なくて済むということを意味します。使うのに余計な手間がかかってイライラしたり、維持管理に余計なお金がかかったりしないことなどが関係します。

「満足」は、ほぼ言葉のとおりの意味ですが「特定の」という言葉に注目してください。全ての人にではなく特定のユーザーにとっての満足を考えるということです。

この3つの要素を適切に満たすことで、ユーザビリティを実現できます。

ユーザーエクスペリエンス(UX)との違い

似た意味の言葉として、ユーザーエクスペリエンス(User Experience=UX)も知られています。UXとは「ユーザーの体験」という意味です。ユーザーが商品やサービスを利用することで得られる、良い体験を指しています。

ユーザビリティは「UXの一部」です。UXハニカムと呼ばれるフレームワークでは、UXに必要な「要素の一つ」として、Usable(=ユーザビリティ)が挙げられています。UXについて詳しくは以下の記事を参照してください。

関連記事:ユーザーエクスペリエンス(UX)とは?WebサイトのUX向上の方法

アクセシビリティとの違い

ユーザビリティと混同されやすい言葉である、アクセシビリティ(Accessibility)との違いも確認しておきましょう。

アクセシビリティは、利用できるユーザーの範囲を広げるという意味があります。高齢者や、身体に障がいのある人、小さな子どもなど、さまざまな状況の人でもサービスが利用しやすいようにすることです。一方のユーザビリティは、特定のユーザーの使いやすさに特化して、そのユーザーにとっての「使いやすさを高める」ことに重点を置いた言葉です。つまりアクセシビリティはユーザーの範囲を「広げること」で、ユーザビリティは特定のユーザーの使いやすさを「深めること」という違いがあります。

Webサイトのユーザビリティの重要性

Webサイトでユーザビリティが重要なのは、なぜでしょうか。

一つは離脱率やコンバージョン率に影響するという点です。ユーザーに「使いにくい」「分かりにくい」と思われることは、離脱につながる大きな要因です。もっと使いやすいWebサイトを探そうと、ユーザーはすぐに別のページへ移動してしまいます。あと少しで申込につながるはずだったユーザーが、申込フォームのユーザビリティが低いというだけで、申込をやめてしまうこともあるでしょう。

Webサイトのユーザビリティが低いことで、「技術レベルが低い」「ITに疎い」などの印象を持たれ、会社のイメージダウンにつながる可能性もあります。Webサイトのユーザビリティは、企業の利益やイメージに大きな影響を与える要素なのです。

ユーザビリティに必要な要素

ユーザビリティに必要な要素が何かを考える上で、Webユーザビリティの第一人者であるヤコブ・ニールセンによる「10原則」が参考になります。

ユーザビリティに必要な10の要素をまとめたもので、その内容は以下のとおりです。

  1. システム状態の可視化(Visibility of system status)
  2. 実世界とシステムの一致(Match between system and the real world)
  3. ユーザが自由に制御できる(User control and freedom)
  4. 一貫性と標準性(Consistency and standards)
  5. エラー防止(Error prevention)
  6. 覚えていなくても理解できる(Recognition rather than recall)
  7. 柔軟性と効率性(Flexibility and efficiency of use)
  8. 最小限で無駄のないデザイン(Aesthetic and minimalist design)
  9. ユーザがエラーを認識、診断、回復できる(Help users recognize, diagnose, and recover from errors)
  10. ヘルプとマニュアルを用意する(Help and documentation)

「システム状態の可視化」とは、読み込み中に表示される回転マークや、ダウンロード中に表示されるプログレスバーなどによって、システムの状態が分かるようにするという点です。

「実世界とシステムの一致」とは、現実世界にあるものに似せることです。電子カタログでページをめくるアニメーションを加えたり、ボタンのデザインを現実のスイッチに似せたりなど、現実世界と一致させることで、ユーザーは使い方をすぐに理解できます。

「ユーザが自由に制御できる」というのは、ユーザーがいつでもキャンセルしたり、機能をオフにできたりなど、主導権が常にユーザー側にあるようにすることです。

「一貫性と標準性」とは、メニューのアイコンや、戻るアイコンなど、一般的によく知られた標準的なアイコンを、よく知られた意味のとおりに一貫性をもって使うことを意味します。

「エラー防止」とは、操作ミスが起こりにくいように工夫し、操作ミスをしても大きなエラーにならないように冗長性を持たせることです。

「覚えていなくても理解できる」とは、あらかじめ説明されなくても、デザインや見た目で使い方が分かるようにすることを指します。

「柔軟性と効率性」は、同じ操作のために複数の操作方法を用意する柔軟性を持たせることです。初心者向けの分かりやすさ重視の操作方法とは別に、ショートカットキーなど慣れた人向けの「効率性重視」の操作方法の両方を用意することで実現できます。

「最小限で無駄のないデザイン」とは、できるだけ余計な装飾をしないことです。

「ユーザがエラーの認識、診断、回復できる」とは、エラーの原因を理解し、判別し、自分で対処できるようにすることです。エラーメッセージを工夫することで対応できます。

「ヘルプとマニュアルを用意する」は言葉のとおり、分かりやすくて必要な情報を網羅したヘルプとマニュアルを、ユーザーがいつでも参照できるようにすることです。

Webサイトのユーザビリティ改善の手順

ユーザビリティを改善するには、どうすればよいのでしょうか。Webサイトの場合に絞って具体的な手順を解説します。

1. ユーザビリティを高める対象ユーザーを絞る

まずは「誰にとっての」使いやすさを追求するかを決めることが重要です。つまり、ユーザビリティを高める対象ユーザーを具体化します。「誰にでも使いやすい」ということは、Webサイト運営の方針としては重要ですが、ユーザビリティの改善をするには、「誰にとってのユーザビリティを高めるか」を決めるところが始まりです。

「スマホを使い慣れた若年層にとってのユーザビリティ」「左利きの人にとってのユーザビリティ」など、Webサイトの改善プロジェクトごとに異なるユーザー層を決めてから、具体的なプランを立てましょう。

2. 「ユーザビリティテスト」を実施する

Webサイトの改善点を発見するための手法として「ユーザビリティテスト」があります。ユーザビリティテストとは、モニターとして特定の条件を満たすユーザーを募集し、実際に使ってもらうことでユーザビリティを検証する手法です。前の段階で決定した「ユーザビリティを高める対象ユーザー」の条件に、できるだけ当てはまる人をモニターとして募集し、テストを実施します。

ユーザーがWebサイトを閲覧する様子を観察し、使いにくい部分・改善すべき部分がないかを検証するテストです。ただ観察するだけでなく、アンケートなどを実施して、ユーザーの客観的な意見や、感じたことなどの情報を集め、改善の参考にします。ただしユーザーの言葉や、表面的な行動だけに左右されないように注意しましょう。ユーザーがなぜそう感じたのか、なぜそう言うのか、なぜそのように行動したのか、本当の原因をよく考えることが成功のポイントです。

3. Webサイトのデザイン・構造を修正する

改善すべき問題点が分かったら、次は実際にどのように改善するかを決める段階です。

リンク先に誘導するためのボタンのデザインや配置など、ちょっとしたことを改善するだけでも解決するかもしれません。内部リンク構造や、メニュー構造の改善なども検討してみましょう。Webサイトの文章や画像など、コンテンツそのものを改善する必要があるかもしれません。Webサイト改善の具体的なアイデアについては、次の項目から詳しく解説します。

Webサイトのユーザビリティを改善するコツ3選

Webサイトのユーザビリティを改善するための具体的な方法を、3つ紹介します。

ボタンのデザインを工夫する

多くのWebサイトでは「会員登録」「お申込み」「詳しくはコチラ」などのリンクボタンが各所に設置されます。Webサイトのボタンの基本は、それが「クリックできる」と一目で分かることです。他の要素と異なる色にしたり、浮き出て見えるように影をつけたりなど、クリックできると説明がなくても視覚的に分かるようにします。ボタンを配置する場所や、ボタンに付属させるテキストなどを調整することで、ユーザビリティを改善できるかもしれません。

ページ内リンクを設定する

Webサイトでは「ページ内リンク」を適切に設置することが、ユーザビリティに大きく影響します。これはスマホで閲覧するユーザーにとって、特に重要です。ページ内リンクとは「アンカーリンク」とも呼ばれる機能で、クリックすると同じページ内の特定の場所に移動するリンクです。スマホはPCと比較すると画面が小さく、「ページ全体を概観しにくい」というデメリットがあります。そのため、ページ内リンクを設定した「目次」でページ全体の内容を概観できるようにすると、ユーザビリティを高められます。

本文内にも、「ランキングはコチラ」など、ユーザーが探している情報へのアンカーリンクを設置することで、ユーザーはスクロールする手間が省け、ユーザビリティが向上します。

複数チャネルで一貫性を持たせる

PC版やモバイル版、アプリ、実店舗など、複数チャネルが関係するWebサイトの場合、それぞれでの一貫性を持たせることが、ユーザビリティの向上に不可欠です。PC版とモバイル版で見られる情報が異なったり、別々のアカウント登録が必要だったりなど、チャネルごとの一貫性がないとユーザビリティを損なうことになります。これは「オムニチャネル」と呼ばれる重要な考え方です。ユーザーがどのチャネルで利用しても、同じIDとパスワードでログインできることや、登録情報を連携できることが当たり前となっています。全てのチャネルでのユーザビリティを改善することが重要です。

関連記事:オムニチャネルとは?そのメリットと方法を分かりやすく解説

まとめ

ユーザビリティはWebサイトやアプリのデザインの重要な要素です。その定義や必要なポイントを把握して、デザイン改善に役立てましょう。サイトエンジンでは、Webサイトのユーザビリティを高める方法など、基本的なことから専門的なことまで、コンサルティングサービスを提供しています。お気軽にご相談ください。

資料ダウンロード申し込み

Scroll to Top