ホームページのユーザビリティを向上させる23のポイント 

「ユーザビリティを改善した方がいい」

「サイト制作には、ユーザビリティが重要」

などと、よく耳にしますが、デザイナーでもない限り、ユーザビリティについて明確に答えられる人は、少ないでしょう。

そこで、この記事では、そもそもユーザビリティとは何なのかという基本的な解説から、サイトのユーザビリティを向上させる効果的な方法までを、具体的に解説していきます!

この記事を読んだらわかること

・ユーザビリティとは?
・ユーザビリティの評価方法
・ユーザビリティを向上させる23のポイント
目 次表示
WEBコンサルタントのご紹介
弊社は、上場企業も含め120社以上のホームページ制作に携わってきました。
ホームページは、制作して終わりではなく、公開後の集客が必要になります。
我々はSEOに強いサイト設計とコンテンツ作りを強みに、公開後も検索エンジンから集客し続けるホームページをご提案できますので、集客にお困りの方はお気軽にご相談ください!

ユーザビリティとは?

ホームページにおけるユーザビリティとは、主にユーザーが閲覧しやすかったり操作しやすかったりすることを指します。

一口にユーザビリティと言っても、見やすさからボタンの押しやすさや、情報の得やすさ、問い合わせのしやすさなど、ユーザーがサイトの中で出くわす様々な場面で使い勝手が問われます。

そのため、運営者はデザイン・機能などあらゆる面でユーザー視点に立ったサイト作りを行うことが重要です。

ユーザビリティの重要性

ユーザビリティが悪いWebサイトというのは、ユーザーにストレスを与えるのでサイト離脱の原因になります。

一方で、ユーザビリティが良いサイトであれば「また使いたい」と思ってもらえるでしょう。

ユーザビリティはユーザーの満足度に直結するものであり、引いては集客や売上など、ホームページを運営する上での目標や成果を左右する重要な要素なのです。

ユーザビリティの評価方法

ユーザビリティを改善したいけれど、何が良くて何が悪いのかわからないという方も多いでしょう。

そこで、ユーザビリティを改善するための指標として4つの評価方法を紹介します。

・ヒューリスティック評価
・認知的ウォークスルー
・アンケート調査
・ユーザビリティテスト

それでは、それぞれの方法を具体的に解説します!

ヒューリスティック評価

ヒューリスティック評価とは、チェックシートを使って決められた項目に応じてチェックを行う評価方法です。

Webサイトのユーザビリティに対して見識のある専門家が監修したものを使用するのが一般的です。

該当する項目にチェックを入れていくだけという簡単さや、明確にスコアが算出できる点などがメリットと言えるでしょう。

ただ、評価基準を最初に決めておくため、自社サイトの改善にどれくらい効果的であるかが未知数である点や、細かな課題が豊富に洗い出される割りに改善の指針がないデメリットがあります。

認知的ウォークスルー

認知的ウォークスルーとは、Web制作などに詳しい専門家が、ターゲットユーザー目線で実際にサイトを閲覧したり操作してテストする方法です。

具体的な問題点とともに「こうしたらより良くなる」という改善案も見つかりやすいのがこの方法のメリットです。 反対に、効果の程がテストを行う専門家の力量や好みに左右される点はデメリットと言わざるを得ないでしょう。

アンケート調査

アンケート調査とは、専門家ではなく、一般のユーザーに向け自サイトの使いやすさに関するアンケートを取る方法です。

あらかじめ用意された設問に対してユーザーが自由に回答できるため、一定以上の人数に回答してもらえれば、説得力のある評価になります。

ただし、ユーザーは設問に簡単に答えるだけなので、ユーザビリティで悪かったことの細かな理由などを聞き取ることができない点はデメリットと言えるでしょう。

ユーザビリティテスト

ユーザビリティテストとは、ユーザーに想定された一般の方が行う閲覧や操作を実際に検証する方法です。

操作過程の記録を検証して行う調査なので、ユーザーが迷ったり使いづらかったりしたポイントが明確になる点がメリットと言えます。

一方で、検証するのに時間がかかる点や、アンケートと異なり多くの意見が得られないため、偏った評価となるリスクがある点はデメリットです。

image image
表示スピードもユーザビリティに大きく影響してきます。 表示スピードを確認するためにはPageSpeed Insightsと呼ばれるツールがオススメです。設計上、どうしても表示スピードを早くできない場合、ローディング中にアニメーションを入れることでユーザーの待機時間を少しでも緩和させましょう。
池田直樹
ZERO式ホームページ制作はこちら

ユーザビリティを向上させる23のポイント

前章ではホームページにおけるユーザビリティの重要性やチェック方法を解説しましたが、ここでは具体的にサイトのユーザビリティーを向上させるために実践すべきポイントを紹介します。

ユーザビリティを向上させるための着目点を4つの項目に大きく分けた上で、それぞれに対しどう施策すべきかを解説します。

・ユーザビリティを向上させる「テキスト・ボタン」
・ユーザビリティを向上させる「レイアウト・設計」
・ユーザビリティを向上させる「仕様・機能」
・ユーザビリティを向上させる「フォーム」

それでは、各項目について詳しく見ていきましょう!

ユーザビリティを向上させる「テキスト・ボタン」

Webサイトではテキストリンクやボタンの見た目が識別しづらかったりすると、そのままそこで離脱されてしまう恐れもあります。

5つポイントがあるので、早速確認しましょう。

1:ボタンではない要素はボタンと似たデザインにしない

ボタンだと思ってクリックやタップした箇所が、ボタンではなかった時の苛立ちは多くの人が経験したことがあるのではないでしょうか?

ただの文字表記なのかボタンなのかが一目瞭然のデザインにしておかないと、迷った時点で離脱されてしまうリスクもあります。

2:テキストリンクとテキストの違いをハッキリさせる

コンテンツの中のテキストが単なる文字列なのかテキストリンクなのか、判別しづらいと、ユーザビリティはグンと下がってしまいます。

リンクだと思ってクリックしても変化が起きず期待していた情報が得られないとなれば、瞬間的に「わかりにくいサイトだな」と判断されかねません。

3:コピー・アイコンは意図が伝わるものを使用する

内容の理解や次の操作を促すための文章やアイコンも、パッと見て意味がわからなければ役に立ちません。

アイコンはそこに込められた意味がしっかりと反映されているかどうか、文章や見出し・コピーなどは誰にでもわかりやすくなっているかどうかも必ず社内でチェックしながら決定しましょう。

特に難しい言葉や専門用語には要注意です。ふさわしくない場面で専門用語を使うと、ユーザーは何のことかわからず、自分には読みこなせないサイトだと判断しかねません!

4:トグルボタンは誤解されないコピーとデザインを使用する

トグルボタンとはクリック・タップをするごとにON/OFFを切り替えられるボタンのことです。 トグルボタンは、単にON、OFFと表記されていたり色のコントラストをはっきりさせればいいというものではありません。

例えばONボタンとOFFボタンに、それぞれ明暗で分ける「反転色」を配したとしても、明るい方の色をONと判断するかOFFと判断するかはユーザーの感性によって判断が異なるためです。

5:ユーザーに気づかれない大きさにはしない

ユーザビリティを向上させるためのボタンデザインでは、サイズもかなり重要です。

特に画面の小さいスマホでは、PCでは許容範囲の大きさであっても、小さ過ぎて存在にすら気づいてもらえない場合があります。

気づいてもらえないボタンは無意味でしかありませんし、サイトの操作性を損なう恐れがあります。

ユーザビリティを向上させる「レイアウト・設計」

ホームページの見やすさは、各ページに掲載するコンテンツの配置や構造そのものによっても大きく変化します。

ユーザーが迷わず快適に閲覧・操作ができるようにするには、ここで紹介する7つのポイントを必ず押さえておきましょう。

6:重要な要素は格納しない

ホームページをシンプルでわかりやすいデザインにしようとする場合、さまざまな機能を格納することがあります。

しかし、何もかも格納してしまうと、ユーザーが見つけられない場合があります。何でもかんでもみやすさを意識して格納しない様に注意しましょう。

7:不必要な情報は表示しない

ユーザーは一度にあれこれ情報を与えられると混乱します。そのため、不要な情報はなるべく表示させないのがポイントです。

たとえば飛行機や特急電車等の予約サイトの検索ページなどでは、出発地を選択するためにクリックすると別窓がポップアップで現れ、出発地だけを選べるように操作性を高めているケースが多く見られます。

その時に必要な情報だけを表示してユーザーにわかりやすい設計をすることが満足度を高める近道です。

情報に覆い被さらない

ユーザーがサイトを巡回してる際に、通知やお知らせなどで、情報が覆い被らない様にしましょう。

うっかりタップして不要な画面を開いてしまうなど、誤操作の原因にもなり得るのでデザイン時に注意が必要です。

8:選択肢を与えすぎない

良かれと思い、様々な選択を与えると、ユーザーが迷ってしまう場合があります。

例えば企業ホームページで商品情報などを得たい場合などに、同じカテゴリー内の商品詳細について多くのバナーやボタンがずらりと並んでいたら、ユーザーは何から見ていいのか迷ってしまいます。

選択肢はほど良い数に抑え、ユーザーが迷わない画面デザインを採用することをお勧めします。

9:1画面で完結しているようなデザインにしない

画像やコンテンツがきれいに1画面に収まっていると、情報がその1画面のみであるとユーザーから誤解されてしまう場合があります。

誤解したユーザーがスクロールせずにページを離脱してしまえば、せっかく用意した情報を見てもらえません。

10:現在地がわかるようにする

ユーザーがサイト内での現在地を常に把握するためのパン屑リストは、必ず見やすい位置に見やすいデザインで設置するようにしましょう。

サイトを読み進めたユーザーが元に戻れず迷子になる事態を予防しないとユーザビリティが下がります。

11:情報の階層を明確にする

情報の階層がわかりにくいと、コンテンツそのものがわかりにくくなる可能性があります。

前述したパンクズやタイトル⇒導入文⇒見出し⇒本文といった階層を明確にしましょう。

ユーザビリティを向上させる「仕様・機能」

ホームページのユーザビリティを良くするには、デザイン面だけでなく機能面でも大いに配慮が必要です。

ここでは、ホームページのユーザビリティを高めるために知っておきたい仕様・機能上の注意点を紹介します!

12:クリック数は適正に

クリックやタップはサイトを閲覧する際には欠かせない操作ですが、行う回数が多いとユーザーは面倒臭くなります。

必要な情報を得るまでの距離は短く、工程はなるべく少なくすることによって、ユーザビリティの高いサイトであると認識してもらえるのです。

13:ユーザーのアクションに対し正常に反応させる

計算機機能などで、計算の工程がどこまで進んだかわからず、数字や「+-」「=」といった記号を何度も押して誤解答を出してしまう場合があります。

計算機機能のボタンを押すたびに手応えに似た感触をもたらすためには、色や光を用いたりボタンを押した感覚を表現できる仕様にしたりするなど、ユーザーの行動が正常に反映されたことをに伝える機能を持たせる必要があります。

14:処理中であることを伝える

サイト閲覧中に、サーバとの通信が必要な場面や内部処理に時間がかかる場合、中々サイトが表示されないことがあります。

アニメーションを使用してユーザーの苛立ちを抑えたりするといった工夫があれば、離脱の可能性は低くなるでしょう。

15:アニメーションを誤用しない

アニメーションはサイトの内部処理などにかかる待ち時間を快適に過ごしてもらうのに有効です。

しかし、着地したトップページなどでアニメーションが終了しないと次に読み進められない仕様になっていると、ユーザーはイライラしてサイトから遷移してしまう恐れがあります。

アニメーションは適材適所で、なおかつ適切な長さで使わないと逆効果になりかねないので要注意です。

16:元に戻る手段を提供する

ユーザーが「さっきのページに戻りたい」という状況になった時、すぐに戻れるような仕様を用意しておきましょう。

PCでの閲覧なら戻る機能が標準装備されているので問題ありませんが、スマホ用デザインやアプリなどでは設計段階で整備しておかなければなりません。

頻繁に必要とするユーザーも多い機能なので必ず採用しましょう。

ユーザビリティを向上させる「フォーム」

Webサイトでは、問い合わせや入会などで使う入力フォームの操作性がたいへん重要です。

フォームのユーザビリティがコンバージョンを大きく左右すると言っても過言ではありません。

ここでは、サイトのユーザビリティを向上させるフォームに必要なポイントを7つ紹介します。

17:無駄な入力項目は入れない

フォームでの入力作業は簡単なものでも一定の手間がかかります。

不要な情報まで入力してもらう理由はないので、どの項目が必須なのかを社内でよく検討し、無駄のない項目でシンプルなフォームづくりをするのが重要です。

18:入力ミスをその場で指摘する

全ての項目を入力し、確認画面に進んだ後でエラーを指摘されると、普通の人は徒労感に襲われます。

入力内容にミスがあれば入力したその時に指摘してあげるのが親切ですし、ユーザーは一度終えたはずの作業をもう一度くり返す必要がないので合理的です。

19:書式を強制しない

文字の書式はサーバ上で処理できるものなので、わざわざユーザーに全角・半角指定やハイフンあり・なしといった強制をする必要はありません。

現在は強制せずとも自動的に処理してくれるフォームが標準的になっています。

20:ユーザーの入力作業を可能な限り助ける

フォームの入力で面倒だと感じるのは、住所です。

サービスの都合上、住所を入力しなければいけない場合、住所検索機能を使用して、簡単に入力できる様にしましょう。

他にも、氏名をはじめとした漢字入力の際に、自動的に振り仮名が入力される仕様にすれば、ユーザーの作業負担を削減できます。

21:安易にプルダウンを採用しない

フォームの中には、ユーザー自ら入力する動作もあれば、該当する選択肢を選ぶ動作も生じます。

選択肢が多い場合にはプルダウンを使って選んでもらわなければならない場合もありますが、それほど多くなければラジオボタンの方が単純で工程も少ないのでお勧めです。

プルダウンを使うということは、少なくとも1回は余分にクリック・タップをしなければならず、ユーザビリティを優先させているとは言えません。

22:チェックボックスやラジオボタンは押しやすく

チェックボタンやラジオボタンが狙った通りに気持ちよくぽちっと押すことができると快適性が高まります。

設計上クリッカブルな範囲が狭いと、二度手間となる可能性もあるほか、他のボタンでも押し損ねるかもしれないという不安を持たせてしまい、ユーザーの信頼度を下げかねません。

23:必須項目は明記する

フォームでは、必ず入力していただかなくてはならない項目と、ユーザーが気が進まなければ入力しなくていい項目の両方を設置しましょう。 操作しやすいという印象を持ってもらうためには、入力が必須の項目にわかりやすく”必須”と表示しておきましょう。

まとめ:ユーザビリティを向上させ使いやすいホームページを目指そう

ホームページのユーザビリティを向上させることは、ユーザーはもちろん、Googleからの評価も高くなります。

ユーザーが使いやすく見やすいサイト作りをするためには、定期的にユーザビリティをチェックし改善していくことが重要です。

使い勝手の良いホームページでコンバージョンを向上させ、会社の業績アップを目指しましょう!

この記事のまとめ

・ユーザビリティは常に改善する
・ユーザビリティの改善には4つの評価方法を用いる
・まずは「テキスト・ボタン」「レイアウト・設計」「仕様・機能」「フォーム」の4点を確認
WEBコンサルタントのご紹介
弊社は、上場企業も含め120社以上のホームページ制作に携わってきました。
ホームページは、制作して終わりではなく、公開後の集客が必要になります。
我々はSEOに強いサイト設計とコンテンツ作りを強みに、公開後も検索エンジンから集客し続けるホームページをご提案できますので、集客にお困りの方はお気軽にご相談ください!

WEB集客をご検討中の方へ 初回無料相談・お申込みはこちら

  • 03-3431-0399 受付時間10:00〜19:00(土日祝を除く)
  • 無料相談・お問合せはこちら無料相談・お問合せはこちら
  • 最速で成長したい人へ。世界が認める「売れるコンテンツ」をつくろう
  • 売れるシナリオを作れる人へ 求む! 幅広い事業を手掛けるWebマーケター!
  • ZERO式ランディングページ年間120ページの制作実績
  • ZERO式コンテンツマーケティング月間1200記事の制作実績