ミクシィグループ QAエンジニア Advent Calendar 2021 4日目の記事になります。

概要

WebサイトQAを実施するうえで、以下のような状況になっていないでしょうか？

テストケースを消化するだけになっている
実装について改善案を提出した際、却下されることが多い
仕様通りのWebサイトをQAし公開できたが、ユーザーからの評判が良くない

＋αの品質を提供するためには、プロダクトやユーザーのことを理解し、UI・UXに関する知識を付けることが大事です。

ユーザーペルソナを理解する

まずはそのWebサイトを何のために使用するのか、ゴールはどこなのかを理解しましょう。

目的を考える

Webサイトを製作するにあたって、必ず目的が存在します。
例を挙げながら実際に考えてみましょう。

【例】
スポーツアパレルブランド×ロボットアニメのコラボ商品（スニーカー）を紹介するランディングページ

【目的】
ランディングページを見て興味を持ってもらう
　↓
通販サイトへ訪問してもらう
　↓
通販サイトで該当商品を購入してもらう

ターゲットユーザーを考える

目的（ゴール）が分かったら、ターゲットユーザーを考えます。
ここでは購入に近づきやすいユーザーを「メインユーザー」、
商品に興味を持ちやすいユーザーを「サブユーザー」とカテゴライズします。

【例】
スポーツアパレルブランド×ロボットアニメのコラボ商品（スニーカー）を紹介するランディングページ
※ここで挙げているスポーツアパレルブランドはZ世代を中心に人気が高いもの、
　ロボットアニメは2000年代にヒットし、
　2020年に男性ユーザーを中心にリバイバルヒットしたものと仮定します

【ターゲットユーザー】
・メインユーザー層
    - 10代後半～20代前半でスポーツアパレルブランド・ロボットアニメのどちらも好きなユーザー
・サブユーザー層
    - スポーツアパレルブランドが好きな10代後半～20代前半のユーザー
    - 2000年代ヒット時にロボットアニメが好きだった30代のユーザー
    - リバイバルヒット時にロボットアニメを好きになったユーザー

ペルソナを考える

ターゲットユーザーが定まったら、ペルソナについて考えます。
ターゲットユーザーを元に具体的な設定を付け加えます。

具体的な設定を付けてしまうと、コアな人にしか刺さらないWebサイトになるのでは？と思うかもしれませんが、万人向けなサービスを作ることは稀かと思います。
（仮に作ろうとしても誰に向けたサービスなのか定まらず、かなり難しいです…）

先ほどの例を元に考えてみたペルソナがこちらです。

【例】
・24歳の男性、社会人2年目
・週3でスポーツジムに通っており、スポーツアパレルブランドのグッズを愛用している
・ロボットアニメは2000年代にヒットしたものを幼少期に見ていた
・2020年版についても友人の間で流行っており視聴していた
・貯金は少ないが、ここぞというときには投資したい
・パソコンを持っているがほとんど使っておらず、ネットサーフィンはスマートフォンで行うことが多い

ここまで設定したところでQAの話に戻ります。

QA視点で考える

例で挙げられていたランディングページについて、
「このペルソナがどういう感情を持って、Webサイトを閲覧するのか」
「Webサイトを閲覧した結果、どんな行動を取るのか」
「ペルソナにとって何か得るものがあるか」を考えます。
そうすると新しいQA観点を思いついたり、改善案を提案しやすくなりませんか？

「友人に共有しやすいようにSNSシェアの導線を追従アイコンにした方が良い」
「PCからも閲覧できるが、レスポンシブ対応でスマホファーストの表示にしておくのが良い」
など、色々思いつくようであればベストです！

冒頭で「実装について改善案を提出した際、却下されることが多い」と書きました。
工数の都合で実装できないなどの理由もありますが、QAがWebサイト製作の目的やターゲットユーザーなどを十分に理解していない状態で提案していることも多いように感じます。
QAはクリティカルなバグが無い状態でリリースするだけでなく、魅力的なものを届けることにも意識を向ける必要があります。

余談

話が逸れるので今回サブユーザー層に焦点を当てていませんが、
サブユーザー層はバイラルマーケティングが狙えるユーザーです。
Webサイトの広告効果を作り出すキーになりえるので、サブユーザー層へのアプローチも大事かと思います。

ユーザーシナリオを作る

次にユーザーシナリオを作成します。
ユーザーがWebサイトに訪れてから、どのような行動・リンク遷移で目的を達成するかを考えてみましょう。
マインドマップを使うと整理しやすくなります。

マインドマップを元に考慮漏れを防止するテストケースを作成できますし、探索的テストに活用することもできます。
マインドマップを活用したQAについては、書籍が発売されていますので参考にしてみてください。

その他気を付けたいUI・UX観点

上記を行うことでペルソナに対するQA観点を出しつつ、テストが実行できるかと思います。
最後にユーザー全体に向けての「使いやすさ」「体験」について考えてみましょう。

テスト実施時

ファーストビュー

Webサイトで一番初めに表示されるエリアです。
何の情報をどのように見せるべきかQAも理解しておく必要があります。

ファーストビューに必要な情報が入っているか
- ユーザーが真っ先に欲しい情報・惹きつけられる情報はファーストビューに設置する
- キービジュアル・タイトル・日時・キャッチコピーなど
読み込み速度が遅くないか
- アニメーションを多用していると発生しやすい
- 読み込み時間が3秒を超えると直帰率が増加するというデータもある

ボタンデザイン

こういったデザインの場合は修正の提案をするのが良いです。

デザインだけでボタンなのか判断できない
- ボタンかと思ってタップ・クリックしたらただの装飾文字だった、などが発生しないように
トグルスイッチの使い方が不適切
- オンオフの基準を明確にしないとユーザーを混乱させてしまう
ラジオボタンとチェックボックスの使い分けができていない
- 1つだけ選択させたい場合はラジオボタン、複数選択可能な場合はチェックボックスを使用する
内部リンクか外部リンクか分からない
- 外部リンクのボタンにはアイコンを付ける

配色

配色ひとつでユーザーから見たWebサービスのイメージが大きく変わります。
Webサイトはブランディング効果を兼ねています。

トンマナに沿った配色がなされているか
- 寝具を紹介するランディングページでビビッドな赤色など、シーンにそぐわない色を使用しない
複数の原色を使用しすぎない
- 統一感がなく、見づらい印象を与えてしまう

ユニバーサルデザイン・アクセシビリティ

体が不自由な人や障害を持っている人、老人や子供などに優しい設計になっているか気を配れると良いです。

色
- P型・D型の色覚障害の場合、赤と緑の判別がしづらい
- 色と一緒に文字・記号を付けておくことで判別できるようになる
文字
- 文字の大きさ・コントラスト・フォントなどで視認性が変化する
操作
- 頻繁にピンチイン・ピンチアウトが必要といった、複雑な操作を避ける

テスト実施後

SNSやGoogleアナリティクスを使用し、ユーザーの意見やアクセス情報などを収集しましょう。
ここで収集したデータが、次回以降類似しているWebサイトを製作する際に役立ちます。

SNS
- 特定のワードやハッシュタグなどでユーザーの意見を収集する
- SNSで不満を発信してくれる人の多くはターゲットユーザー
Googleアナリティクス
- 想定していたユーザーシナリオ通りのアクセスとなっているか
- ほとんど使われていない要素（ボタン・リンクなど）があった場合、何が原因かを考える必要がある
  - 必要のない導線と判断できる場合は思い切って削除してしまう提案もあり

まとめ

ざっくりまとめます！

Webサイトを何のために使用するのか、ゴールはどこなのかを理解する
- ペルソナからQA観点を考える
ユーザーシナリオを作成する
- より深くQA観点の洗い出しを行い、テストケースに考慮漏れを発生させない
- 探索的テストを行いやすくする
ユーザー全体に向けてのUI・UXについて理解する
- 様々な視点から「使いやすさ」「体験」を考え、次に繋げる

すべてを実践するのは難しいですが、知識をつけてより良いQAができるよう努めていきましょう！

ユーザーペルソナやUI・UXから考えるWebサイトQA

概要