STLOGスタログ

2021.10.07

私の会社のUI・UXは大丈夫?Webデザインのヒューリスティック分析

WEBサイトを改修する際に、スタイルメントでは3C分析やSWOT分析、アクセス解析など様々な項目の調査をします。その中でも欠かせないUI・UXデザインに関する調査が「ヒューリスティック分析」です。ユーザビリティ評価の手法の一つで、「経験則」的な視点からサイトの課題を抽出します。

私の会社のUI・UXは大丈夫?Webデザインのヒューリスティック分析
目次

    ヒューリスティック分析とは

    ヒューリスティック分析の「ヒューリスティック」とは日本語にすると、「経験則」を指します。サイトのユーザビリティを経験豊富な分析者が閲覧・操作することで課題を抽出します。Webサイトの分析というと、始めに思い浮かべるのはアクセス解析だと思います。アクセス解析は閲覧者の環境・特性などを把握するのに便利ですが、UI・UXを改善したいと思った時データの分析だけではなぜそのような結果になっているのかを把握しきれません。実際に操作することで、データからは見えない問題点を抽出したり、課題を把握することができます。

    ヒューリスティック分析は、事前準備等の作業が不要でいつでも行える手軽さも特徴の一つです。サイトリニューアル前後・制作段階の途中など、どのフェーズにいても実施可能です。

    データによる定量的な分析とは違い、分析者の視点が主軸の分析方法なので、評価内容の質や内容が知識や経験によって左右される点には注意が必要です。とはいえ、Webサイトのヒューリスティック分析で押さえるべきポイントはある程度決まっています。社内でも分析を行えるようになればPDCAサイクルを早めるのに役立ちますので、是非ポイントを確認して置きましょう。

    問題になりやすい3つのポイント

    ヒューリスティック分析の結果、ユーザビリティの問題として良く上げられる項目を3点ピックアップしました。ぜひ自社のWebサイトをお手元に開きつつ今一度確認してみましょう。

    サイトの表示に崩れている箇所はないか

    img

    まずはサイトの表示に崩れている箇所が無いかをチェックしましょう。

    • テキストや画像が本来の場所にない
    • コンテンツとコンテンツの余白の大きさが不揃い…等

    自分が普段使っているPCのみ・スマホのみでチェックしていると思わぬ崩れを見逃してしまうかもしれません。表示するブラウザや、タブレット表示の際にサイトが崩れてしまうことも可能性があるので、分析の際はできる限り色んなブラウザやデバイスで見てみると良いでしょう。

    Webサイトのレイアウトが崩れていると、操作しづらいだけでなく信用度に影響してきます。サービス内容や業務実績と関係はないところで、サイトが崩れている=いい加減な会社というイメージを持たれてしまいかねませんので、基本ですがとても重要なポイントです。

    スマートフォン表示に対応しているか

    img

    次にサイトの課題になりやすいのがスマートフォンでの表示です。過去にPC中心で制作してスマホ表示に対応していない、対応したが不十分な場合は次のような問題が起こります。

    • 文字が小さく表示されてしまって見づらい
    • バナーやボタンが指のサイズよりも小さく操作しづらい
    • 画像や動画などの読み込みが重く、ページ表示に時間がかかってしまう

    2021年1月の調査によると、日本国内でスマートフォン・ケータイの所有者のうちスマートフォン比率が92.8%となりました。スマホからサイトに訪れる割合がかなり増えてきていて、一般的なBtoCのサイトでは7割以上のユーザーがスマートフォンから訪問します。

    パソコンでの閲覧を想定されて作られたWebサイトはスマートフォンでは非常に閲覧しづらく、ユーザーの離脱に繋がってしまいます。また、Googleはスマホ対応していないWebサイトには順位を下げるバイアスをかけることを公表していて、訪問数にも影響が出てきます。

    サイト内の導線にわかりづらい箇所はないか

    img

    表示の崩れやスマホ対応と比べて、慣れているほど気づけず問題に上がりづらいですが、サイト導線は重要なポイントです。

    • メニューがサイト内容と一致していない

    長い期間運用しているサイトではコンテンツが追加されていく過程で、メニューとサイトコンテンツが一致しないような状態になることがあります。

    • パンくずリストの表示がわかりづらい

    「パンくずリスト」とはユーザーが今Webサイトのどこにいるか、迷子にならないよう視覚的にわかりやすくする誘導表示です。基本的にWebページの階層順にリンクがリストアップされ、サイト上部に設置されています。あまり意識されない箇所かもしれませんが、複雑な構造のサイトでは意外と重要なポイントです。

    • ボタンやリンク、サイト内の導線がわかりづらい

    また、見落としがちなのが、ボタンやリンクがデザインに溶け込み過ぎてどこを操作すれば良いのか分かりづらくなってしまっているパターンです。

    こういったサイトの導線が分かりづらくなっていると、ユーザーは「なんとなく使いづらい、不便だ」と感じてしまい、気づかないうちにサイトの成果件数や回遊率に影響が出てきます。

    「ヒューリスティック分析」チェックリスト

    分析項目をチェックリストとしてまとめたので是非ご活用ください。

    【サイトの表示に崩れている箇所はないか】

    • 文字化けが起きている
    • テキストや画像が任意の場所とは別の場所に配置されている
    • 画像のリンクが切れていて表示されない
    • 通常のパソコン表示では問題ないが、画面を縮小したときに崩れが起きる

    【スマートフォン表示に対応しているか】

    • スマートフォンで開いたときに、パソコンと同じデザインが表示される
    • 画面を横にスクロールしないと見えない部分がある(レスポンシブ未対応で起きる不具合)
    • ボタンやリンクテキストが小さく押しにくい
    • 画像が小さくて見にくい

    【サイト内の導線にわかりづらい箇所はないか】

    • 自分が今いるページがサイト内のどこかわからない
    • 一つ前のページへ戻る導線がない
    • パンくずリストの文言が適切でない
    • 閲覧したいページへの導線がなかなか見つからなかった

    まとめ

    自社で行うWebサイト分析、いかがでしたでしょうか。今回ピックアップした項目は、社内でも発見しやすく改善したときの効果が大きい項目となっています。問題点が見つかりましたらぜひ改善に取り組んでみてください。

    逆に、今回上がっている項目は全て満たしているけどなぜか使いづらい、狙った成果が上がっていないというWebサイトもあると思います。パッと見ただけでは分からないところにユーザビリティ低下の課題が潜んでいる可能性があります。弊社ではアクセス解析等とあわせてより詳細な分析を行いますので、是非お気軽にご相談ください。

    スタイルメントでは企業ブランディングのご提案やコーポレートサイト制作・リニューアルを承っております。
    まずはご相談から、お気軽にお問い合わせください。
    サービスページはこちら

    <コーポレートサイトの制作実績はこちらから>
    コーポレートサイト実績紹介
    実績紹介|東海カーボン株式会社
    実績紹介|株式会社玉澤総本店

    <お問い合わせはこちらから>
    お問い合わせフォーム

    同じカテゴリーの記事

    Stylement Official Instagram

    ディレクター、デザイナー募集中! 採用情報へ