プロトタイプドリブンで業務系DX案件を進めるとスムーズだった
ここ一年くらい結構規模の大きい DX プロジェクトに UX デザイナー / UI デザイナーとして関わっています。
ある業界の社内業務 / 店頭販売 / 顧客とのコミュニケーションを効率的かつ効果的にすることを目的としたプロダクトを作っています。（クライアントワークで関わっています。）
プロジェクトが始まった時からプロトタイプをベースにしてプロジェクトメンバーとコミュニケーションをとってきたのですが、1年間やってきてみて、結構スムーズにアイデアの共有 / 仕様の検討 / 意思決定ができていると思うので、共有できることをまとめようと思います。
※この記事でのプロトタイプの定義
あるシナリオ（目的を持った一連の行動やタスク）を擬似的に達成する体験ができるアウトプットを指します。
クリック（タップ）やジェスチャーなどをトリガーとした画面遷移やインタラクションを含み、その精度や作り込み具合は状況に合わせて変わるものの、Adobe XD / Figma / Protopie などのツールを使ってデザイナーだけで完結できるレベルのアウトプットを指します。
利用シナリオパターンが明確なプロダクトとプロトタイプは相性がいい
情報管理や接客など、業務で使うシステムはパターンはあれど手順や利用シナリオを整理できることがほとんどだと思います。
プロトタイプを使うと、プロジェクトメンバーや利用者と一緒に利用シナリオにそって触りながらコミュニケーションを取ることができるため、要件を満たすのか、満たさないならどういうケースで何を満たさないのかのフィードバックを受けやすいです。
逆にインタラクションを伴わないワイヤーフレームやデザインカンプをベースにコミュニケーションを取ると、シナリオに合わせて画面上での行動と結果を補完することになります。その結果、頭の中で思い描くもののギャップができたり、フィードバックの情報量が減るため、コミュニケーション効率が悪くなります。
プロトタイプは要件定義を推し進める
コミュニケーション効率を上げる効果は、時に要件定義時にも役立ちます。
プロダクトの設計は、基本的には「誰が何を達成するためのものを作るのか」というシナリオがある前提で進行します。
今のプロジェクトも調査やヒアリングを行い、サービスブループリントを使ってシナリオを整理して、必要機能や要件を洗い出してから設計に移っています。
でも、最初から全てのシナリオのパターンや課題を網羅的に引き出せないこともあるのが実情です。
そういう場合は、既に得られた情報をベースにとりあえずプロトタイプを作ってしまっています。
動くものを触りながらコミュニケーションをすることで、利用者から作成前には得られなかったシナリオやその業務における現状課題を引き出せるようになることが結構多いです。
プロトタイプを使ったロールプレイングがプロダクトの精度を上げる
プロトタイプはただ触るだけじゃなくてロールプレイングすることで真価が発揮されるんじゃないかなと思います。
実際の業務を想定して喋ったり、業務に必要なものをそばに置きながらやると、「この情報が足りないな」とか、「このシチュエーション考慮されてなくない？」とか結構すぐに要件の漏れに気付けます。
また、利用者のリテラシーや処理の仕方、利用シチュエーションなどの違いによって起こる使用感の違いなど、より実践的な目線で UI の修正点が見つかります。
結果、情報設計やレイアウト、インタラクション設計などのエラーが見つかり、ブラッシュアップされます。
まずは自分でロールプレイング
作ったものをシナリオをなぞりながら自分で使ってみると、設計のエラーに自然に気付くことができます。
ペーパープロト作成時にもロールプレイをしているんですが、いざプロトタイプを作って触ってみると、その時には気付けなかった不具合に気付くことが結構多いです。
また、タブレットやスマホで使うアプリケーションは実機で操作すると、「この持ち方をするとこのレイアウトでは情報が見えない」などの単純な UI のエラーも見えてきます。
ある程度紙で検討した後はすぐに作ってしまって、ロールプレイングと修正を繰り返すと、早く精度をあげられるなと思います。
人と一緒にロールプレイング
いわゆるユーザーテストも容易にできます。
最近のツールは URL を共有するだけですぐに使ってもらえるので、実施のハードルがすごく下がりました。
シナリオを提示して使ってもらうと、初期のシナリオ整理では網羅できなかったパターンが出てきたりします。
また、自分では気づけなかった操作感の不具合が発見できます。
自分が当たり前に理解できると思っていた UI で人が迷っている姿を見ると、今までの経験やプロジェクトを進める中でこびりついた様々なバイアスに気づかされます。
こういうプロジェクトには向いていないかも
そしてプロダクトによっては、そもそもここで話したようなプロトタイプを使ったプロジェクトの進行が向いてない場合もあります。
経験上、個人が持っている情報資産を使って初めて価値を発揮するものや、日常使ってデータを蓄積していって価値を出すものなど、コンテンツが体験の軸になるようなプロダクトは、そのデータを蓄積/利用できる簡易的なプロダクトとして作って試行錯誤した方がいいように思います。
何年か前に、写真を見るためのスマホアプリを作っていたことがありました。
プロジェクトの初期段階で、仮の画像を使った画面遷移のみのプロトタイプを使ってユーザーテストをしたことがありました。
そのプロトタイプではアプリのコンセプトしか伝わらず、広告や App store でアプリを見た時の反応程度のフィードバックしか得られませんでした。
それを踏まえて簡易的なプロダクトを作成し、被験者のデバイスに入った写真を入れて使ってもらいました。そこで初めてそのプロダクトに対する有益なフィードバックを受けることができました。
このプロジェクトでのプロトタイプを作る理由は、「作ろうとしているものが求められるものかを知りたいから」だったので、利用要件を整理したり UI の検討 / 改善をするためのプロトタイプを使ったやり方では合わなかったということです。
必要なプロトタイプのレベルはプロダクトの性質や、プロジェクトのフェーズによっても異なるなというのが今の所の意見です。
プロトタイプ作成に使うツール
僕は基本的に Adobe XD と Protopie を使ってプロトタイプ作成をしています。
基本的には XDで作りますが、下記のような場合は Protopie を使います。
・条件分岐が必要な場合
・細かいジェスチャーをトリガーにした操作が必要なとき
・使い勝手や理解しやすさの実現に、細かいモーションのフィードバックが重要な場合
※ Figma や Sketch などのトランジション型のプロトタイピングツールなら Adobe XD と置き換えて考えてもらって問題ないです。
Adobe XD のいいところと困るケース
毎月のように機能が追加されているので、一方向の画面遷移で完結するプロトタイプであれば XD である程度の作り込みができるようになってきました。
アプリケーション的な動きも、オーバーレイやステートを使った自動アニメーションなどを駆使するとかなり再現できることが増えたなと感じています。
XD のいいところはこんなところです。
・設計 / 仕様検討（プロトタイピング）フェーズからビジュアルデザインフェーズにかけて xd で完結できるので移行がスムーズ
・プロジェクトの機能拡張フェーズに入った後は、デザインシステムを整理しておけば実際のデザインに沿ってプロトタイピングができる
でもこういうところで困ります。
・条件分岐ができない
・同時に複数の対象を動かせない
・対象を動かすタイミングを自由にできない
そんな時に助けになるのが、次に紹介する Protopie というツールです。
Protopie のいいところと注意点
https://www.protopie.io/
精度の高いプロトタイプを作るなら、個人的に今はこれが一番いいと思います。
再現性が高いからいい
下記のような特徴を持っているので、作り込めば本当にアプリケーションを使っているような体験ができ、シナリオの再現度が上がります。
・トリガーがものすごく多い
・変数の保存 / 書き換え / 利用（分岐）が使える
・一つのトリガーで複数のオブジェクトを動かせる
・オブジェクトに対して細かい単位で変化の設定ができる
・input 要素も使える
学習コストが低いからいい
初歩的な CSS とjavascript の概念程度が分かっていればすぐに思ったものが作れるようになると思います。ドキュメントも日本語で用意されているので言語的な心配もいりません。
ここだけ気をつけて使うといい
欠点は、このツールでビジュアルデザインまで行うのは難しいということです。
細かいレイアウトや意匠組み立て系の機能は Adobe XD などのツールの方が充実していると思うので、そちらを使っています。
Adobe XD / Figma / Sketch > Protopie のインポート機能が用意されているので、うまく活用して進めるのが良さそうです。
今はこのような使い方で進めています
・基本的な画面設計や遷移などは Adobe XD で行う
・作り込みが必要なシナリオ/体験部分だけ Protopie にインポートして作成する
自分なりのプロトタイプの活用の仕方や経験談をつらつらとまとめてみましたが、どこか一つでも誰かの参考になれば幸いです。
また気づきやアイデア、反省など学びがあれば追記していきたいと思います。