Adobe Maxで学んだUI/UXのプロトタイプ検証について

こんにちは、日本リック エンジニア採用チームです。

先日開催されたAdobe Max Japan 2023について、前回のAさんのレポートに続いて、当社開発エンジニアのIさんにもレポートしてもらいました。

はじめに

2023/11/16にAdobe Maxに参加し、Premire ProやAfter Effectsといった映像系ソフトや、UI/UXの施策事例紹介に関するセッションに参加しました。今回はUI/UXの施策について以下の観点でまとめてみます。

• プロトタイピングの概要
• AdobeMaxで紹介されたプロトタイピングの実施例
• Bizでプロトタイピングを活用するには

プロトタイピングとは

プロトタイピングとは、新規サービスを開発する際に事前に問題点を洗い出すための試作品である「プロトタイプ」を作成してから開発に着手するという方法です。代表的なプロトタイピングの方法は3つあります。

1. カードソーティング

カードソーティングとは、必要な機能を付箋などにカンバン方式で書き出し、妥当性の検証を実施する方法です。

2. ワイヤーフレーム

UIの設計に多く用いられ、製品全体の骨格を示します。チームメンバー間で開発イメージを簡単に共有できます。

3. ストーリーボード

完成したシステムのユーザーの具体的な利用状況をストーリー形式によって見える化し、ユーザーが操作や判断に戸惑う点を明確にします。

特に、ストーリーボードはユーザー目線でプロダクトを開発するためのヒントになりやすいというメリットがあります。そのため、UI設計では多く用いられています。

プロトタイピングの目的

プロトタイピングの目的を端的に述べると「プロダクトのユーザー視点での問題を洗い出すこと」です。たとえば、受託開発の場合は以下の3つの視点が考えられます。

1. クライアント視点
2. 開発者視点
3. ユーザー視点

クライアント視点、開発者視点だけではあくまでも仮説的な問題提起しかできません。しかし、ユーザー視点という客観的な事実を取り入れることで、サービス開始後にユーザー満足度の高いプロダクトを開発できます。

具体的なプロトタイピングの実施例

ここでは、AdobeMaxの会場でプレゼンされた具体的なプロトタイピングの実施例を紹介します。今回は中部国際空港のWebページを改修した事例です。

デジタルマーケティング戦略

中部国際空港では開港当初よりデジタルマーケティングを活用した集客戦略を実施していました。実際に実施していた手法は以下の３種類です。

1. ソーシャルメディア戦略
   • SNSを活用した情報発信
   • Facebook、X（旧Twitter）などの活用
2. 顧客データの活用
   • Webサイトのログ
   • SNS分析
   • 問い合わせ、お客様の声など
3. オウンドメディア活用
   • 定期的な情報発信

上記の戦略でデジタルマーケティングを実施した結果、X（旧Twitter）のフォロワー数は約8,000人前後から約28万人まで増加したそうです。

UI/UXそれぞれの対応

中部国際空港のデザインコンセプトとして、「気づき」というキーワードがあります。ここでは実際にセッションで話題になっていたUI/UXそれぞれの対応ポイントを紹介します。

UI

1. スマートフォンを中心としたデザインへの刷新
   時代の流れに合わせてスマートフォンで閲覧することを前提としたUI設計を実施しています。

2. 実際の空港のようにわかりやすいサイト
   サイト内で欲しい情報が一目で確認できないサイトは良いサイトとは言いづらいです。空港のように案内誘導が正しく整理されていることはUI設計の大前提です。

UX

1. 旅行前の高揚感を後押しするサービス提供
   空港のWebサイトであるため、サイトにアクセスするだけで旅行前の高揚感を味わえるようなUXを目的としたUI設計がされています。

2. SKYTRAXの評価に恥じないセントレア（中部国際空港）らしい満足度の高いサイト
   SKYTRAX（航空サービスリサーチ）の評価にふさわしい満足度を誇るサイトであるような設計がされています。

中部国際空港Webサイト開発におけるプロトタイピング

ここでは、実際に中部国際空港Webサイト開発時に実施されていたプロトタイピングを紹介します。プロトタイピングはUXリサーチの実施後に行われます。

1. ゴールと属性を決める
2. テスト画面とシナリオの用意
3. プロトタイピングの実施

セッションでは、これらの工程をできる限り工程の前半で実施するというポイントがありました。これは、制作工程でプロトタイピングを実施すると、多くの課題が洗い出された場合に対応しきれない可能性があるからです。

プロトタイピングやサイト評価の検証実施のポイント

ここでは、プロトタイピングやサイト評価時の検証ポイントについて解説します。サイト評価は3回に分けて実施するケースが多いです。

サイト評価の検証実施ポイント

サイト評価の検証実施ポイントは1~3回目までにそれぞれポイントがあります。

1. ニーズの高い情報・タッチポイントの確認
   • Webサイトでの成功体験シナリオの精度を高める
2. プロトタイプを用いたUI評価（プロトタイピング）
   • プロトタイプからの課題発見
   • デザインへの反映
3. 課題解消と仮説シナリオの評価
   • 2回目の検証で洗い出した課題が解消されているか
   • サイト全体を通して成功体験シナリオが正しく機能するか
     • 定量的に評価する

定量的なサイト評価の方法

ここでは、定量的なサイト評価の方法を紹介します。

NEM(Novice Export ratio Method)

• 設計者とユーザー間の操作モデルのギャップを客観的データとして抽出する定量的評価手法
• 開発者は操作に困らない箇所であっても、ユーザー目線では操作しづらいという機能がある可能性がある
• 上記のギャップの解消ができる

出典：定量的ユーザビリティ指標｜NEM（Novice Expert ratio Method）NE比って何？

UEQ(User Experience Questionnaire)

• 既定のアンケート項目から、サイト全体の印象を7段階評価で回答できる
• 同じ質問に対する回答を比較できるので、客観的な評価がしやすい

NEMは開発者だけでは気付けない操作性の観点を洗い出す手法として、サイト作成にとどまらずプロダクト開発においても便利です。

そのため、新規既存を問わずプロダクトの開発時には、プロトタイプを作成してからNEMを実施し、ユーザーのハマりポイントを減らすようにする必要があります。

まとめ

Adobe MaxのUI/UXセッションを元に、プロトタイプ検証や定量的なサイト評価の手法について紹介しました。プロトタイピングはユーザーの観点というプロダクト開発をするうえで必須の観点を洗い出すことができます。そのため、規模を問わず実施する必要があると感じました。