本文へ移動

ホーム / デザイナー / 第5部 データと AI

第5部 データと AI・第11章

データと計測

★☆☆ 発展4トピック・面接 2問

実データをもとにデザインし、デザインの効果をデータで確かめるための考え方を押さえます。AI の機能の体験設計は次の章で扱います。

ひとことで

ダミーではなく実際の長さ・件数・偏りでデザインすると、実装後の崩れが減る。

デザインのダミーの文言(「山田太郎」「商品名」)は、実際のデータよりも短く、きれいにそろっています。実装後の崩れを減らすには、実際のデータの分布を見てデザインします。名前の長さのいちばん長いもの、一覧の件数(0件・1件・数千件)、画像がない割合などを、エンジニアやデータの担当に聞くか、集計してもらいます。平均だけでなく、長いほう・多いほうの端を見るのがこつです。

名前の文字数の分布(例):平均だけでなく、長いほうの端を見る長いほうの端ここで崩れやすい人数15102030名前の文字数ダミーの「山田太郎」(4文字)
実データは右に長い分布になりやすい(数値は説明用の例)
見るもの確かめる値デザインでの使い道
文言の長さいちばん長いもの・長いほうの1%折り返し・省略のルール
件数0件・1件の割合、最大の件数空の状態・ページ送り
欠けているデータ画像やプロフィールがない割合代わりの表示
使われ方端末・画面幅・文字サイズの設定優先してデザインする幅

面接ではこう答える

デザインのダミーの文言は、実際のデータより短く、きれいにそろっています。実装後の崩れを減らすために、名前の長さのいちばん長いもの、一覧の件数の0件・1件・最大、画像がない割合などを、エンジニアやデータの担当に聞いて、その値でデザインします。実データは平均より長いほう・多いほうに裾が伸びた分布になりやすいので、平均ではなく端を見るのがこつです。

11.2指標とファネル

用語★☆☆ 発展
ひとことで

デザインの成功を測る数値が指標。目的の操作までの段階ごとに、何人残るかを並べたものがファネル。

ファネル:段階ごとに何人残るか(数値は説明用の例)商品を見た100%カートに入れた40%購入の画面へ25%購入した15%いちばん大きく減る段階が、デザインで改善する候補になる
ファネルの例
種類例役割
成功の指標登録の完了率・購入率デザインの変更で良くしたい数値
悪くしてはいけない指標問い合わせの数・解約率・表示の速さ副作用を見張る
途中の指標各段階に進んだ割合(ファネル)どこでつまずいているかを見つける

指標は PdM やデータの担当と一緒に決めます。デザイナーは、どの画面のどの操作がその指標につながるかを示す役割です。ファネルで大きく減っている段階が見つかったら、その画面の操作の録画やユーザーテストで「なぜ」を確かめてから案を作ると、数字だけを見た思いつきの変更を避けられます。

面接ではこう答える

デザインを変えるときは、何が良くなれば成功かを指標で決めておきます。例えば購入までの流れなら、商品を見た、カートに入れた、購入の画面へ進んだ、購入した、の段階ごとに何人残るかを並べたファネルを見て、いちばん大きく減っている段階を改善の候補にします。あわせて、悪くなってはいけない指標、例えば問い合わせの数や返品の率も決めておくと、1つの数字だけを追って体験を悪くすることを防げます。

ひとことで

ユーザーの操作(表示・タップ・送信など)を記録する仕組みがイベント。何を測るかをデザインの受け渡しと一緒に決めないと、後から分からない。

ユーザーの操作は、イベントとして記録しないと後から分かりません。計測は実装と同時に入れるもので、リリースの後に足すと、その日からのデータしか取れません。

決めること例
何を記録するか画面の表示・ボタンのタップ・送信・エラーの表示
名前checkout_button_tap のように、画面と操作が分かる名前(チームの規則に合わせる)
付け加える情報どの商品か・どの位置のボタンか・どのバリアントか
目的どの指標を見るためか(不要な計測を増やさない)
個人の情報名前やメールアドレスなどは記録しない

デザインの受け渡しのときに「この画面で測りたいこと」を一緒に渡すのが確実です。計測の名前の規則や、何を記録してよいかはチームや会社で決まっていることが多いので、データの担当に確かめます。

面接ではこう答える

画面でユーザーが何をしたかは、イベントとして記録しないと後から分かりません。画面の表示、ボタンのタップ、フォームの送信、エラーの表示などを、名前と付け加える情報を決めて記録します。計測は実装の一部なので、リリースの後に「どこが押されたか知りたい」と思っても、その時点からしか測れません。そのため、デザインの受け渡しのときに、測りたい操作と目的を一緒に渡しています。

11.4A/B テスト

用語★☆☆ 発展
ひとことで

ユーザーをランダムに2つに分けて、今のデザイン(A)と新しいデザイン(B)を出し、決めておいた指標で比べる方法。

ランダムに分けて、決めた指標で比べる指標と期間を決める始める前にランダムに分けるA:今・B:新期間まで待つ途中で止めない比べて判断差が偶然でないか
A/B テストの流れ

デザインの良し悪しをデータで確かめる方法が A/B テストです。ユーザーをランダムに2つに分け、今のデザイン(A)と新しいデザイン(B)を出して、登録率などの指標を比べます。始める前に見る指標と期間を決めておくこと、悪くなってはいけない指標(解約率など)も一緒に見ることが大事です。デザインで「どこが押されたか」を計測したいときは、計測する操作を受け渡しのときに伝えておきます。

よくある失敗防ぎ方
途中で結果を見て、良さそうなときに止める期間(または人数)を先に決めて守る
指標を後から選ぶ見る指標を先に決める
人数が少なすぎて差が分からない必要な人数をデータの担当と見積もる
一度にたくさん変える何が効いたか分からない。変える点を絞る

面接ではこう答える

A/B テストは、ユーザーをランダムに2つのグループに分けて、今のデザインと新しいデザインを同じ期間に出し、決めておいた指標を比べる方法です。ランダムに分けるので、時期や季節の影響を受けずに、デザインの違いの効果だけを比べられます。大事なのは、始める前に見る指標と期間を決めておくことと、途中で良さそうに見えても止めないことです。差が小さいと偶然の可能性があるので、判断はデータの担当と一緒に行います。

この章のまとめ

🖨 まとめシート(印刷・PDF)
  • ダミーではなく実データの長さ・件数・偏りでデザインする
  • 成功の指標と計測する操作を、デザインと一緒に決めて渡す
  • A/B テストは、始める前に見る指標と期間を決めてから行う
  • 実データでデザインする:ダミーではなく実際の長さ・件数・偏りでデザインすると、実装後の崩れが減る。
  • 指標とファネル:デザインの成功を測る数値が指標。目的の操作までの段階ごとに、何人残るかを並べたものがファネル。
  • 計測の設計(イベントの受け渡し):ユーザーの操作(表示・タップ・送信など)を記録する仕組みがイベント。何を測るかをデザインの受け渡しと一緒に決めないと、後から分からない。
  • A/B テスト:ユーザーをランダムに2つに分けて、今のデザイン(A)と新しいデザイン(B)を出し、決めておいた指標で比べる方法。

この章のクイズ

面接ではこう聞かれる

まず答えを見ずに声に出して答え、そのあと開いて比べる。

Q1デザインの変更が良かったかどうか、どう確かめますか?

模範回答

変える前に、何が良くなれば成功かを指標で決めておきます。例えば登録画面なら登録の完了率です。可能なら A/B テストで、今のデザインと新しいデザインをランダムに分けて出し、決めておいた期間で比べます。

同時に、悪くなってはいけない指標(問い合わせの数や解約率など)も見ます。数字だけで分からない「なぜ」は、ユーザーへのインタビューや操作の録画で補います。計測したい操作は、受け渡しのときにエンジニアに伝えておきます。

深掘りされたら

  • A/B テストの結果に差が出なかったら、どうしますか?

見られているポイント事前の指標決め・ガードレール・定性との組み合わせ

Q2デザインの受け渡しのとき、計測について何を伝えていますか?

模範回答

この画面で何を確かめたいかと、そのために記録してほしい操作です。例えば登録画面の改善なら、成功の指標は登録の完了率なので、各ステップの表示と、送信、エラーの表示を記録してもらい、どこで離脱しているかを見られるようにします。

計測はリリースの後に足すと、その日からのデータしか取れないので、受け渡しのチェックリストに入れて、実装と同時に入れてもらいます。名前の付け方や、個人の情報を記録しないなどのルールは、データの担当と確かめます。

深掘りされたら

  • 計測を入れすぎると何が困りますか?

見られているポイント計測を実装の一部として、先に決めて渡しているか