お問い合わせや資料請求をしてくれる見込み顧客を獲得するために、基盤となるWebサイトのユーザビリティ向上は非常に重要な施策です。 せっかく良質な見込み顧客を集客し、魅力的なコンテンツを用意しても、使い勝手の悪いサイトであれば、途中で離脱されてしまいます。 そこで今回は、Webサイトのコンバージョン率を向上させるために、BtoBサイトで使えるユーザビリティチェックリストをご紹介します。
※この記事は旧ブログ「INBOUND marketing blog」から移行したものです。
【目次】
ユーザビリティとは
日本語では「使いやすさ」と訳されるユーザビリティ。世界的な工業基準を定めている国際機関ISO(国際標準化機構)は、ユーザビリティの構成要素を以下の4つにまとめています。
- 有効さ (effectiveness):
ユーザが指定された目標を達成する上での正確さ、完全さ - 効率 (efficiency):
ユーザが目標を達成するために費やしたリソース（労力や時間） - 満足度 (satisfaction):
利用する際の不快感のなさ、肯定的な態度 - 利用状況 (context of use):
ユーザ、仕事、装置（ハードウェア、ソフトウェア及び資材）、並びに製品が使用される物理的及び社会的環境
デザイン・レイアウト
- サイト全体でデザインの一貫性を持たせる
- 企業名とロゴは全ページに設置する
- 企業名とロゴからトップページへリンクを貼る
- Fの法則を意識する
ページの左上のコンテンツエリアからF字を描くように視線移動する - 信頼感を与えるサイトデザインにする
より深く理解するための情報
- 伝わるデザイン｜研究発表のユニバーサルデザイン
- 見やすい・使いやすいレイアウトの為に考えるべき事。 | Basic Design Note
- ウェブページを見る目の動きは「F」パターン – GIGAZINE
ナビゲーション
- 全ページで一定の形、位置に設置する
- わかりやすい、簡潔な名称をつける
社内用語、認知度の低い製品名、英語のみのリンク名は使わない - メニューの項目はできる限り少なくする
人が一度に記憶できる要素の数は7±2 - パンくずメニューを全ページに設置する
- サイトマップページを用意する
全ページからサイトマップページへリンクを貼る - 404ページを用意する
トップページ、サイトマップ、サイト内検索などへのリンク設置を忘れない - 3クリック以内で全てのページにたどり着けるようにする
大規模サイトなど、3クリックルールが難しい場合はユーザが迷わず到達できることに注力する - スクロールに応じて付いてくるナビゲーションは用いない
基本的に嫌がられると考える - お問い合わせフォームへのリンクを目立たせる
より深く理解するための情報
・日本のWebサイトの404ページデザインいろいろ+α – かちびと.net
文章
- 対象ユーザを想定し、彼らにマッチした文体にする
ほとんどのユーザは格式張った文章よりも、親しみやすいトーンを好む - 宣伝風の文体は避ける
- 専門用語はわかりやすい言葉に置き換える
- 難解なことを説明する場合は、画像やイラストを用いる
- デフォルトのフォントサイズは12px以上にする
- テキストと背景色のコントラストを最大化する
- 結論から先に述べ、その次に根拠となる情報を書く
- 流し読みしやすい文章を心がける
見出し、段落、余白、箇条書きを効果的に使う - 説明する項目が4つ以上ある場合は箇条書きを用いる
- 箇条書きの前に具体性のあるリード文を書く
「弊社製品が選ばれる理由は以下の4つです」など - 手順の場合は番号をふる
- 箇条書き箇所はインデントする
通常の文章が左寄せになっている場合、インデントは目立つ。 - 各項目の書き出しに同じ語句を繰り返し使わない
「弊社は」など - 各項目の文法に一貫性を持たせる
体言止めや通常文で統一する、など - 一つの段落に一つのアイデアを記載する
- 似たような要素はグループ化する
- 見せたいコンテンツが沢山ある場合はページを分割する
- 1つのコンテンツ内でページを複数に分割しない
ユーザにとって大きなストレスになる
より深く理解するための情報
- Web制作における文章の可読性について考える – YATのBLOG
- 文章をデザインする – 段落や箇条書きをより読みやすくするために – YATのBLOG
- ユーザはウェブをどう読んでいるか – U-Site
タイトル・見出し
- コンテンツに合ったタイトルをつける
titleの中にサイト名を含むことが望ましい - タイトルは全角32文字以内に抑える
検索結果画面での表示を意識する - コンテンツに合った見出しをつける
全ページで異なる内容のh1を設定する - 気の利いた見出しよりも、意味のわかる見出しにする
- できる限り、画像ではなくテキストにする
検索エンジンは画像内の文字を認識できない
より深く理解するための情報
SEOで最も重要なタグを見直そう！1分で誰でもできる！自社サイト簡単SEOチェック方法 | DX.univ（現在リンク切れ）
リンク・ボタン
- リンクテキストに青色をつけて下線を引く
色がついていれば、必ずしも下線は必要ない - 未クリックとクリック済みのリンクの色をわける
- 新規ウィンドウや新規タブを開かせない
ただし、PDFなどのファイルは例外 - テキストを使わない場合、デザインを施したボタンにする
リンクボタンだとはっきりわかるようにする - ボタンにリンク先ページの概要を記載する
「資料請求はこちら」よりも、「社内SNS活用方法をまとめた資料をお送りします」が望ましい - ボタンに有益な情報を加える
・期間や数量限定…「年内限定」「10社限定」など
・金銭的なメリット…「無料」「10%引き」など
・簡便さ…「3分でわかる！」「など” - PDFなどは、ファイルへのリンクであることを明示する
- 原則として新規ウインドウ、新規タブで開かせる
- ファイルのページ数とサイズを明記する
- 同一のコンテンツをHTMLページでも作成する
より深く理解するための情報
・クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
トップページ
- サイトの内容を一言で表すような文章を入れる
何の会社なのか、何のサービスなのかが直ちに理解できる - ユーザにとってのバリューを提示する
- サイトの最重要タスクへのリンクを目立たせる
お問い合わせや資料ダウンロードへのリンクなど - 下層ページへの単なるリンクではなく、コンテンツのサマリーを記載する
- 最新記事、情報にアクセスしやすくする
更新された情報、箇所を明らかにする - 人気のあるコンテンツは目立たせる
より深く理解するための情報
・第6回 サイト価値を最大化するためのトップページ設計術～4パターンの訪問者を想定して作る | Web担当者Forum
導入事例ページ
- 会社名だけでなく、クライアントの顔写真やロゴを掲載する
- クライアントに関する詳しい情報を記載する
業種・事業内容・従業員数などの - 複数の切り口で探せる導線を用意する
業種や規模、利用サービスなど - 導入によるBefore→Afterを明らかにする
より深く理解するための情報
価格ページ
- 高いプランから順に並べる
左から右へだんだん高くなるより、だんだん安くなる方が好まれる - おすすめのプランを目立たせる
- おすすめのプランよりも高いプランを用意する
より深く理解するための情報
・購買意欲をコントロールするサービス・商品の価格一覧表を作成する7つのテクニック | コリス
・これで見込み客を逃さない！魅力的な価格表デザインのコツ｜designaholic -Creative Column-（現在リンク切れ）
セミナーページ
- 一覧ページでタイトル以外の情報を記載する
開催時期、開催場所、対象者など - 対象者を明確にする
- 過去の参加者の声を掲載する
- 会場の写真を掲載する
- 講師のプロフィールを掲載する
- 住所だけでなく、地図を掲載する
より深く理解するための情報
お問い合わせフォーム
- 現在位置がわかるようにステップチャートをつける
- 入力項目は、可能な限り少なくする
縦長のフォームは離脱の原因になる - 必須の項目は「必須」と明記する
「※」や「＊」では伝わらない - 記述例を用意する
- 入力項目に対する説明はフォームの前に書く
- 入力している項目の色を変える
- 郵便番号は住所自動入力機能を付ける
住所と郵便番号の入力は特に大きなストレスを与えやすい - 半角・全角などの指定はしない
- エラー内容はその場で教えてあげる
- エラーはどこが間違っているのかを教える
「入力内容に誤りがあります」などの指摘だけでなく、どの項目でなにが間違っているのかを明記する - チェックボックスやラジオボタンは選択肢のテキストもクリックできるようにする
- 「押したらどうなるか」がわかるボタンにする
「確認」よりも「入力内容を確認する」 - リセットや削除ボタンを通常必要ない
- 送信ボタンは確認ボタンの右側に置く
- 入力完了後のページにも気を配る
「ありがとうございました。」だけでなく、関連コンテンツへのリンクを貼る - プライバシーポリシーを明示する
プライバシーポリシー自体、またはプライバシーポリシーへのリンクを設置する
より深く理解するための情報
・これで完璧！EFO(エントリーフォーム最適化)でチェックしたい30個のポイント
サイト内検索
- 100ページを超える場合はサイト内検索を設置する
1,000ページ以上の場合は、より高度なサイト内検索を導入する - 検索ボックスは画面右上に設置する
- 検索結果ではページタイトルと2、3行の説明文を表示する
- 検索結果では検索語句を強調表示する
より深く理解するための情報
・サイト内検索のキーワードを分析する方法とユーザー行動理解のための6つの指標 ［第53回］ | Web担当者Forum
その他
- ページの読み込みスピードを極力早くする
- 様々なデバイス・ブラウザで閲覧できるようにする
- 公開前にユーザーテストを行う
少人数でも構わない - 覚えやすく、簡潔なドメイン名にする
- サイト構造やコンテンツ内容を反映したURLにする
より深く理解するための情報
・Response Time Limits: Article by Jakob Nielsen
・ページ表示2秒でユーザーはイライラし始め、3分の1が「もういいや」となる | Web担当者Forum