BLOG

ブログ

  • Top
  • Blog
  • 今すぐできるWebサイトのユーザビリティ改善テクニック5選

今すぐできるWebサイトのユーザビリティ改善テクニック5選

ブログサムネイル

「どうすればユーザーの満足度を上げて、使いやすいサイトを作れるだろう…」

「どうWebサイトを改善すれば、サイトからの商品の購入やお問合せ数を上げられるだろう…」

Webサイトの改善方法について悩んでいる方も多いのではないでしょうか?

サイトや商品がどんなにいい機能や性能を持っていたとしても、ユーザビリティが低いままでは他の競合にユーザーを奪われてしまいます。

「ユーザビリティって何?」

「ユーザビリティを向上させたい!」

今回はユーザビリティについて説明しつつ、売上も左右する大切な概念なため、改善テクニックについても紹介していきます。

この記事を読むことで、ユーザビリティやユーザビリティを向上させることのメリットについての理解を深めることができ、具体的な改善テクニックを実践できるようになります。

ユーザビリティとは

ユーザビリティという言葉からすぐ思い浮かぶのは、「使いやすさ」ではないでしょうか?

そのままの意味でも間違いではありませんが、ユーザビリティの第一人者であるヤコブ・ニールセン博士は、自身の著書「Usability Engineering」のなかで5つの構成要素を持っているとしています。

  • 学習しやすさ
    ユーザーが簡単に使えること
  • 効率性
    ユーザーが高い生産性を得られること
  • 記憶しやすさ
    ユーザーが使い方を簡単に覚えやすいこと
  • エラー発生率
    エラーが起きにくく、エラーが起こったとしても簡単に回復できること
  • 主観的満足度
    ユーザーが満足できて使っていて楽しいこと

つまり、以上の5つの要素が満たされている「使いやすさ」こそ、ユーザビリティと言えます。

ユーザビリティを向上させるメリット

・離脱率の低下、滞在時間の増加

ユーザビリティが改善されることで、ユーザの利用ストレスが排除され、離脱率を低下させることができます。

ひいては、サイト利用に対する満足度が向上すれば、滞在時間やPVを増やすことに繋がり、集客やファン獲得に結び付いていくはずです。

・検索順位の向上

検索順位を決める3つの要素

Googleは2021年6月中旬より、検索順位を決める要素にCore Web Vitals(コアウェブバイタル)を導入しました。

「Core Web Vitals」における3つの要素は、それぞれユーザビリティについての指標です。

そのためユーザビリティが高いサイトは、Googleから高い評価を受け、検索順位を上げることができます。

指標それぞれについて簡単に説明すると、

  • LCP(Largest Contentful Paint)
    「ページの表示・読み込み速度」を表す指標
  • FID(First Input Delay)
    ユーザーがページ内にてクリックやタップをした際に、ブラウザでその入力が反映されるまでの時間(応答性)を表す指標
  • CLS(Cumulative Layout Shift)
    表示されたコンテンツ内における予期しないレイアウトのずれ、すなわち視覚の安定性を表す指標

以上の3つの要素を重要ポイントとしており、これらを満たすWebページはユーザビリティが高いとGoogleから評価を受け、検索結果を上げることができます。

・コンバージョン率の向上

コンバージョンとは、訪問客のうち、何人が目的としている行動をとってくれたかを示す数値です。

売上を答えとする式でいえば、

売上=訪問客数×コンバージョン率×客単価  でコンバージョン率を計算することができます。

高いコンバージョン率を持ったサイトを作成するには、ユーザビリティへの意識は欠かすことができません。

例えば、「入力フォームが複雑で面倒」といった問題があると、せっかく購買意欲を高められたとしても、サイトを離脱してしまう原因となってしまい、コンバージョン率の低下に繋がります。

・他社サイトとの差別化

他社と類似のサービスを提供している場合、同じ性能や機能を持っているだけでは、多くの支持を得ることは難しいかもしれません。

しかし、サイトのユーザビリティを向上させることで、他社との差別化を図ることができます。

ユーザビリティを向上させるための5つの改善テクニック

おさらいすると、ユーザビリティは5つの構成要素をもち、それぞれの構成要素にアプローチする改善ステップを用意する必要があります。

ここからは実際に何を改善すれば、ユーザビリティを向上させることができるのか、具体例を出しながら解説していきます。

①機能、メニューなどを収納する
(学習しやすさ・効率性・記憶しやすさ)

ユーザーがよく使う機能を、サイトの様々な場所に散りばめてしまうと、それぞれの操作ごとに視線や指を動かさないといけなくなるため、ストレスに感じてしまいます。

できる限り、クリック箇所や視線を向かせる場所は、一箇所に集中させるようにしましょう。

(例1.)ユーザーを迷わせないナビゲーション設計

ヘッダー・サイドバー・フッターそれぞれに、ナビゲーション(リンクメニュー)をつけ、あちこちに散りばめると、ユーザーも疲れてしまいます。

使いたい機能はできる限り、1つの箇所にまとめるようにするだけで、ユーザーの負担を軽減させることができます。

また、グローバルナビ(全ページに共通して表示するメニュー)の配置は、全てのページで統一した並びにするなど、配置の統一性をサイトに持たせると利便性が上がります。

更に、目的の情報が異なるユーザー(個人or法人、在学生or卒業生など)には、別のメニューを用意し、誘導することも効果的です。

東京大学のホームページではヘッダーにナビゲーションをまとめ、グローバルナビは統一した並びになっており、新入生や卒業生など目的が異なるユーザー毎にナビゲーションを分けています。
※引用元 東京大学
https://www.u-tokyo.ac.jp/ja/alumni/index.html

(例2.)必要な機能や情報をまとめて設置する

入力欄とボタンが離れているなど、極力ユーザーが疲れるような機能の配置は避け、必要な機能ごとにまとめてあげましょう。

また、情報の整理もユーザビリティにおいては大切です。

例えば、お客様相談室のナビをクリックした後に表示されるページでは、よくあるご質問や、お問い合わせ内容に応じたお問い合わせ先の一覧を用意しておくと、ユーザーも次のアクションに迷うことがありません。

②ユーザーが行ったアクションに対して、適切に反応をする
(主観満足度・エラー発生率)

人間は、常に五感を使って反応を伺っています。

Webサイトでは、五感の中でも特に「視覚」に対して分かりやすくある必要があります。

ユーザーが行なったアクションに対して、適切な反応ができているかが重要です。

(例1.)クリックできる要素は、リンクがあることが分かりやすいデザインにする

クリックできる要素に関しては、マウスを合わせたときに指カーソルに変化したり、ボタンの色が変わるようにしたりと、リンクがあることが分かりやすいデザインを心掛けましょう。

反応がない要素にしてしまうと、ユーザーが「押しても何も起こらないボタンなんだな」と無視してしまう可能性があり、コンバージョン率が低くなってしまいます。

また反対に、クリックができない要素に関しては、リンクテキストだと間違わせないよう、下線をつけない、リンクボタンだと勘違いさせないようボタンデザインを使わないなど、ユーザーにストレスを与えない注意が必要です。

(例2.)表示待ちの時間は処理中であることを表示する

メールを開く際や、動画を再生して止まっている間、ロード中の表示が出なければどうでしょう?

ユーザーは、サイトが反応していないと考えて何度も処理を実行したり、サイト自体が機能していないのではないかと勘違いして、サイトを離れてしまうケースもあるかもしれません。

今何をしている状態なのか、常に分かりやすくする必要があります。

表示待ちやロード時間は、ロード中であることが分かりやすくなるよう心掛けましょう。

(例3.)商品購入や問い合わせ後に、確認メールを届ける

商品を購入したり問い合わせしたにも関わらず、確認メールが来なければ、処理が実行されたのかが分からず、ユーザーは不安になってしまいます。

内容に応じた確認メールを送り、ユーザーに安心感を与えるサイトにしましょう。

③入力内容の確認やサポートが充実している
(エラー発生率)

「間違ってデータを削除してしまった。」

「戻るボタンを押したら、入力したフォームがクリアされてしまった。」

そのような経験がある方も、多いのではないでしょうか?

ユーザーは制作者ほどWebページに詳しくありませんし、間違いは起こすものです。

間違いを起こさないように配慮されているかどうか、間違いやエラーが起きた後もサポートができるかどうかで使いやすさが変わってきます。

(例1.)確認メッセージを表示する

商品のカートリストから商品を削除する時や、入力フォームページから離れる際には、「こちらのデータを削除してもよろしいですか?」「入力内容が破棄される可能性がありますが、このページを離れますか?」など、確認メッセージを表示しましょう。

間違って、データを削除してしまうことを防ぐことができます。

(例2.)フォームの入力を保持する

1つの項目に入力の誤りがあっただけで、他の入力項目もリセットされてしまうなど、フォームの入力を何度も行うことはユーザーとしてはとてもストレスです。

入力したフォームの内容は、保持できるようにしてユーザビリティを向上させましょう。

また、フォームの入力に関して、現状の入力項目が本当に必要かどうかを検討しましょう。

できる限りユーザーが入力する項目を少なくしたり、間違えた場合に解決しやすいエラーメッセージが表示できているかも、改善ポイントなので確認しておきましょう。

日立のお問合せフォームでは、何項目か入力した状態で他ページに遷移しようとすると確認画面が表示されます。
※引用元 株式会社日立ソリューションズ
https://www.hitachi-solutions.co.jp/inquiry/

(例3.)404ページにホームへのリンクを記載する

元々存在していたページが削除されてしまっていたり、URLを間違えて打ってしまった時はエラーページが表示されてしまいますよね。

実際に、存在しないページへのアクセス時に表示される404エラーを目にしたことがある方も多いのではないでしょうか?

404ページに、他のページへのリンクがあるだけで、ユーザーはサイトを離脱しにくくなります。

例えば、アメリカのamazonの404ページは、デザインも可愛いと話題になっています。

※引用元 amazon
https://www.amazon.com/404<
更新するといろんな種類の犬たちが出迎えてくれます。ぜひ参考にしてみてください。

④ルールを統一する
(学習しやすさ・効率性・記憶しやすさ)

リンクカラーやボタンデザインなど、Webサイトには共通してよく使われるルールがあります。

よく使われているルールを使ってもいいですし、サイト独自のルールを使っても構いません。

大事なことは、サイト内でルールが統一されているかどうかです。

もちろんサイト独自のルールを使う場合は、「ルール自体が覚えやすいものかどうか」という点も考慮しましょう。

(例1.)リンクのカラーを統一する

青色のリンクカラーの箇所と、赤色のリンクカラーの箇所があるなど、サイト内でルールが違っていればユーザーも困惑してしまいます。

しかし、先述したようにリンクカラーの色は、サイト内でルールが統一されていれば問題ありません。

※弊社のホームページのリンクデザインではカーソルを合わせた際に青い下線が表示されるよう統一しています。

(例2.)言い回しや表記を統一する

コーヒーの販売をしているWebサイトがあるとしましょう。

コーヒーWebサイト例

自社のコーヒーのポイントを説明します。

  • 自家焙煎珈琲
  • コーヒー豆本来の苦味とコクが自慢です
  • 使っている豆の産地の種類が20種類ある

などの言い回しになっていたらどうでしょう?

言い回しや品詞に統一感がなく、見ていて綺麗ではありません。

以上の例を書き直してみると、

自社のコーヒーのポイントを説明します。

  • 自家焙煎のコーヒー
  • 苦味とコクのある味わい
  • 豊富な種類のコーヒー豆

最後に名詞で終わるように書き換え、コーヒーの表記もカタカナに統一するだけでだいぶ見やすくなりました。

見出しや箇条書きの各項目ごとに、言い回しが統一されているかどうかでサイトの見やすさが変わります。

⑤マルチデバイスで閲覧可能にする
(効率性・主観満足度)

現代では、スマホからサイトを訪れるユーザーも多くなっています。

パソコンからサイトを閲覧すると綺麗に閲覧できていても、スマホからサイトを閲覧した際にデザインが崩れてしまっていては、スマホから閲覧したユーザーはサイトを離れてしまいます。

スマホだけでなく、iPhoneやアンドロイド、iPadなど、それぞれの端末のサイズに合わせて表示できるようにすると、さらにユーザビリティを改善できます。

※スマホからホームページにアクセスし、デザイン崩れがないか確認しましょう

(例1.)画面サイズに応じて、画像サイズを最適化する

スマホからサイトを閲覧した際に、画像サイズが大きすぎたり小さすぎたりすると、それだけでユーザーには見にくいサイトになってしまいます。

ただ、画像サイズの変更にはHTML/CSSへの専門知識が必要になります。

スマホサイトの修正でお悩みの方は、お気軽にクランチタイマーへご相談ください。

(例2.)表のデザイン崩れに注意する

スマホから見た際にデザイン崩れが起きやすい箇所として、表データが挙げられます。

小さい枠の中に文字が納めされているため、スマホ対応のデザインにしようとすると、細かくデザインを設定しなければなりません。

Webサイトで表を扱っている場合は、スマホで見た際に読みやすいものになっているか再確認してみましょう。

最後に

いかがでしたでしょうか?

今回はユーザビリティを向上するための今すぐできる改善テクニック5選について紹介しました。

5つのテクニックを確認して、是非実践できそうなものから試してみてください。

ユーザビリティについて、少しでも興味を持っていただけたら嬉しいです。

クランタイマーでは、ユーザビリティを意識したWebサイト制作はもちろん、Webサービスなどのプロダクト開発、既存プロダクトの改修、技術サポートなども行っています。

サイト制作やWebサービスなどでお困りなことがあれば、是非クランチタイマーに気軽にご相談ください。

筆者

滝村 泰成

クランチタイマーで働いて1年目です。 業務ではNextなどフロントエンドの技術を使っています。

SHARE:

SNSをフォローする

  • Facebookフォロー
  • Twitterフォロー
  • Qiitaフォロー

ストーリー

Wantedlyストーリー

CONTACT

お気軽にお問い合わせください。

TEL082-236-1186

NEWSLETTER

代表の佐々⽊が⽉に1回お届けするメールマガジン。
国内外スタートアップの最新情報や最新技術のサマリー、クランチタイマーの開発事例紹介など、ITに関する役⽴つ情報を中⼼にお送りします!

ページスクロール