実務で活かせる！プロトタイピングの具体的な進め方とは？

前回、ユーザーに愛されるプロダクトを作るためにプロトタイピングが必要不可欠であることをご紹介しました。

プロトタイピングには、コミュニケーションとコラボレーションが生まれること、デザインプロセスを最適化でき、ユーザーへのフォーカスを常に保てるなど、たくさんのメリットがあります。また、開発フェーズや目的、オーディエンスによってプロトタイプのカタチは異なるという点についてもお話しました･･･

と、色々理想を語りましたが、実際どうやるのかまだモヤモヤしている方もいるかと思います。

そこでこの記事では、実務でもすぐに使えるように、プロトタイピングの具体的な進め方をご紹介します！

プロトタイピングのプロセス

さっそく、プロトタイピングのプロセスについて考えましょう。

言うまでもなく、プロトタイピングは全体の開発のプロセスに沿って行われるため、それ固有の、あるいは単体で考えるべきプロセスではありません。

突然、動きを確認できるようなプロトタイプを作り始めるのではなく、前のフェーズで議論を行い、明確になった情報（例えば以下のようなもの）を揃えてから着手するはずです。もちろんすべてのケースを一緒にはできませんが、フェーズや目的によって効率よく必要なものだけを作るのがオススメです。

さあ、プロトタイピングを始める前に自分の胸に問いかけてみましょう。

1. ユーザーのニーズや悩みを十分に理解していますか？（例えば、ペルソナを作って丁寧に調査したり議論を尽くしましたか？）
2. すべてのステークホルダーの役割とプロセスとの関わり方、影響力について十分把握していますか？（例えば、最終決定権を持っているのは誰ですか？その方の意見をきちんと理解していますか？）

2つの質問に自信をもって「はい」と答えられない方は、残念ですがプロトタイピングは一旦忘れ、情報を集めることから始めるべきです。これらの情報をしっかり把握している方のみ、プロトタイピングのプロセスに進みましょう。

1. ユーザーストーリー

プロトタイピングの目的は細かいデザインを磨くことよりも、新たなアイディア出しや機能の相関関係や漏れがないかを確認することにあります。そこで、まずは前提条件を明らかにするためにユーザーストーリーを活かしましょう！

別の機会で詳しく取り上げる予定ですが、プロトタイプを作る前に必ず登場するものなのでここで簡単にご紹介します。

ユーザーストーリーはもともとアジャイル開発のツールの一つです。機能と要件の説明をエンドユーザーの視点で行うものであり、説明の軸足は「ユーザーにとってのベネフィットが何か」におかれます。

「“あるユーザー”が“ある目的”を果たすために“あること”を行いたい」

という、シンプルなストーリーの型を考えるとわかりやすいのではないでしょうか。

「プロのライターがクライアントと効率よく編集を行うために、編集可能な原稿を共有したい」

というのが一例です。

その意味で、ユーザーストーリーとは、ユーザーの求める価値やベネフィットに焦点をあてつつ機能要件についての議論を可能とする「ツール」だと言えます。

では、ユーザーストーリーはどのようなもので作るのでしょうか？

一般的には、言葉とスケッチ（漫画のようなポンチ絵）を用います。憂い顔のユーザーの似顔絵に課題やニーズを書き込んだ吹き出しが付いていているような絵･･･一度くらい、何かの記事や提案書などで目にしたことがあるのではないでしょうか。

2. ユーザーフロー（ダイヤグラム）

ユーザーストーリーができたら、すぐに実際の画面作りに入りたいと思うでしょう。しかし、それはまだ早い！

ユーザーストーリーを実現するためには、実際にユーザーがそのプロダクトをどのように使うかを徹底的に考え、その動きに沿った設計をする必要があります。特に複雑なアプリでは、一つの動作を完了するために、いくつもの画面を遷移しなくてはいけない場合があります。それがいかにスムーズでユーザーにとってわかりやすいものであるかが、素晴らしいユーザー体験と言えるかどうかの分かれ目です。

また、プロダクト上の各画面は、全体のコンテクスト（構成や意図）にしたがって配置されるため、画面内のコンテンツを設計するのにそのコンテクストをまずは明確にする必要があります。

ユーザーの希望に焦点をあてたユーザーストーリーを繋いだら、次はそれらに優先順位を付け、円滑につなぐ流れを説明します。そこで登場するのが、ユーザーフローという非常に便利な「ツール」です。ユーザーフローは、各画面（ユーザーストーリー）において必要な、または、可能な動きや選択肢を一つの流れでまとめるものです。

「ユーザーはどこからメイン画面に入ってくるのか？」
「各画面で何を選択肢、どこにつなげれば良いのか？」
「インターアクションタイプは有効か？他の画面への誘導がポップアップで出てくると便利か？」

などを考え、フロー（流れ）を示すのです。

ユーザーフローを作るツールは、フローチャートまたは、ダイヤグラムと呼ばれます。ホワイトボードにスケッチしたり、模造紙に付箋紙を貼ったりするというアナログな方法で行われることもあれば、VisioやOmnigraffleなどの専用ツールを使う場合もあります。

しかし、あくまで自分の思うデザインフローや文脈を表現し、チーム内で整理するために行うものです。それさえできればツールは何でもOKです。キレイにすることに余計なリソースをかけないようにしましょう。

3. 画面の内容（スクリーンスケッチ＆ワイヤーフレーム）

さあ、次は画面（スクリーン）の内容を確定します。

まずは、各画面に必要なパーツやコンテンツをリストアップしましょう。例えば、動画や画像、ユーザー情報の表示、アクションボタンなどです。これを考えるときのポイントは、アイディアの良し悪しや優先順位を気にしすぎずに必要と思われる情報を全部書き出すことです。アイディアやそれを表示させる時の条件など、思いつく限り並べてみます。優先順位をつけるのはその後で問題ありません。精査して、何をどこに置くべきか、優先順位やだいたいのポジションを決めます。

そこで、画面のスケッチやワイヤーフレームへの落とし込みを行います。

ちなみに「ワイヤーフレームって何？」という方のために、詳しくご紹介したいところですが、実は本格的な定義がありません（泣）。この最初のスケッチのことをワイヤーフレームと呼ばない人もいますが、個人的には、各パーツをモノクロで簡単に再現するスクリーン図はワイヤーフレームと言って良いと考えています。専門用語の問題なので、あまりこだわる必要もないのですが・・・（笑）。いずれにせよ、ワイヤーフレームの特徴として、ただのスケッチよりイメージを補足するコンテンツ（言葉や説明書き）が豊富だという点は挙げられると思います。

これらのスケッチやワイヤーフレームを作るためのツール？

難しく考える必要はありません。簡単なスケッチであれば、カフェのナプキンで十分です（笑）。まずは手持ちのペンと紙で手軽にサクッと作ってみましょう。

最初のアイディア出しにはホワイトボードや紙でのスケッチが最適だとは言ったものの、コピー文言など実際のコンテンツに必要なスペースを正確に判断しづらいので、後からつじつまを合わせるムダな作業が発生しがちです。そのため、早い段階からデジタルワイヤーフレームを利用するのをおすすめします。また、イメージを共有するだけでなく、その場で簡単に手を加えられるという点でデジタルのワイヤーフレームがスケッチより柔軟です。見る人の発想を促し議論やテストの場でも活躍しますし、付箋やナプキンより管理・共有しやすいでしょう。

そこで登場するのが、「ワイヤーフレームツール」です。

専門のツールではありませんが、KeynoteやPowerPointで簡単なワイヤーフレームを作成する方も多いです。普段から利用するツールなので改めて学習する必要は殆どなく、初めてワイヤーフレームを作る方におすすめです。

その他に、ワイヤーフレームの専門ツールと呼ばれるものがあります。BalsamiqやHotGlooなどが代表的なツールとしてあげられます。

なお、エンジニアの場合はこうした専門ツールを使わず、コードで簡単なワイヤーフレームを作るという方が多いでしょう。

4. 仕上げ（モックアップ）

 

仕上げの段階で登場するのが「モックアップ」です。モックアップは「おしゃれなワイヤーフレーム」とでも言いましょうか（笑）。先に説明したワイヤーフレームが構造やコンテンツを把握するためのイメージ図であるのに対し、モックアップは、画像や色をのせた最終的なスクリーンのデザインを表すものです。

ここまではPMやチーム全体での作業範囲だと思いますが、モックアップの作成までくるとデザイナーの出番です。モックアップを作成するにはデザインの細かい作り込みのための専門知識や経験が必要で、また、複雑な専門ツールを使うからです。その専門ツールの代表例としてスケッチやイラストレーター、フォトショップなどが挙げられます。

ここで一つ、注意していただきたい大事なことがあります。それは、プロトタイピングのプロセスにおいてモックアップの出番は最後のステップだということです。見た目の素晴らしさに心を捕らわれデザインのディテールに集中しすぎると、せっかく考えた魅力的なユーザーフローや核となるユーザーベネフィットを見失いがちです。モックアップは、ブランディングのため、ツールにふさわしい飾り付けを施す仕上げの（ケーキのトップに置かれたチェリーみたいな）役割だと考えてくださいね。

5. 動き（プロトタイプ）

お待たせしました！いよいよプロトタイプの出番です！

最初にお伝えした通り、プロトタイプはそれ単体の独立したプロセスではありません。プロトタイプとは、ユーザーストーリーをもとに作られた静的なスクリーン（スケッチからモックアップまで）を、考えたユーザーフローにのせて実際に動かせるものです。

でも、一体どうやってそれらを具現化するのでしょうか？「動くものにする」と言われても、実際にやれと言われたら戸惑いませんか？

ワイヤーフレームをプリントアウトして、１枚ずつ動かしてみるとか？･･･

もっとも、コーディングができる人ならワイヤーフレームやモックアップを作って動かすのも簡単でしょう。しかし、全員がそのスキルを持っているわけではありません。そして、できる人が限られるという問題以外にも、コーディングを行うことはそれなりの時間とコストを必要とするという観点で最良の策とは言えません。

そこで登場するのが、プロトタイピングツールです！

いろいろなツールが発表されていますが、目的により最適なものが異なりますので、以下で簡
単にご紹介します。

プロトタイピングツール

プロトタイピングツールは、スケッチ（をとった写真）からモックアップまでの工程を簡単に繋げられる、とても便利なツールです。大きく３つに分けて、使う場面や必要とされる機能について、代表的なツールとともにご紹介します。

粗いプロトタイプを素早く作成するツール（ラピッドプロトタイピング）

まずは、粗いプロトタイプを素早く作成するためのツールをご紹介しましょう。

開発のプロセスにおいて、このツールを用いる目的は、以下の通りです。

画面を動かせること（ユーザーフローを体験し、確認すること）
簡単にプレゼンできること
フィードバックをもらうために、チーム内での共有が簡単にできること

基本的にこれらの目的を達成できれば問題ないのですが、プロトタイピングツールは専門のツールだけあって、便利な機能を備えています。

1. トランジション

トランジションとは、移行、あるいは変わり目のことを指します。画面の切り替えの仕方をイメージしていただければ良いでしょう。画面の移り変わり方を考えたら、移行範囲と切り替え箇所、そして画面遷移を起こすためのジェスチャー（スワイプ、タップなど）を決めて遷移先とつなげるイメージです。

ポップアップやエラーメッセージの通知なども簡単に再現することができます。

2. コラボレーション

プレゼンテーションや、ユーザーテストの実施が簡単にできるモードです。チーム内で画面のデザインを共有をしたり、その上でコメントしあってフィードバックを行ったりすることができます。

3. 画面遷移図

すべての画面の相関関係や遷移の流れを把握できる図を作る（魔法の）機能です。これを利用すればユーザーフローが一目瞭然になります。

プロトタイピングツールの例として、アクシャーやインビジョン、UXピンなどあげられます。上記の基本的な機能以外デザイナー向けの専門的機能がついているツールが多く、プロダクトマネジャーなどデザイナーでないチームメンバーには若干使いづらいかもしれません。

チームで簡単にワイヤーフレームとプロトタイプを作成、また、共有するのはProttみたいなコラボレーションをシンプルにする素早いプロトタイピングツールが最適でしょう。

なお、これらによるプロトタイピングは、「素早い」という特徴から「ラピッドプロトタイピング」と言われています。

見た目や機能面では非常にシンプルにできており、最終的なアニメーションのニュアンスを伝えられるほど細かく作り込まれていません。ただし、基本的なコンテンツや機能を素早く、安くカタチにして改善を進められることが強みです。

開発プロセスにおいて、小さな単位で頻繁に行われるユーザー体験のテストに重要なツールだと言えます。むしろこうしたシンプルなプロトタイプこそ、ユーザーテストに最適と言えるかもしれません。なぜならユーザーが細かいデザインに目を奪われることなく、率直な体験への感想や機能に対する意見を述べてくれるため、参考になるフィードバックを得られるからです。

そして、多くのプロトタイピングツールは学習難易度が高いものではありません。ツールを使えばワイヤーフレームの作成も簡単にできます。デザイナー頼みにならずチームの誰でも使えることから、効率よく全員でプロジェクトを進めていけるというメリットもあります。

前にお伝えしたと思いますが・・・基本的なプロトタイピングはプロダクトマネージャー(PM)が行うべき仕事です。こうしたツールの存在は、専門スキルを有するメンバーと議論を重ねてチームをまとめていくPMの力強い味方になることでしょう。

高精度なプロトタイプを作成するツール

ラピッドプロトタイピング用のツールに対し、より忠実に本物を反映できるように作り込まれたプロトタイピングツールもあります。細かなアニメーションやユーザーフローを再現してできるだけ本物に近いものを作るために使われます。

念のためお伝えしますが、細かなアニメーションの設計はモックアップの作成と同様、基本的な画面遷移をテストし、ユーザーフローが決まった後に考えるようにしてくださいね。

代表的なツールとしてはProtopieやPrincipleなどあげられます。

これらはデザイナー向きのツールだと言えるでしょう。機能も複雑ですし、学習の難易度も格段にあがるからです。基本的な機能やコンテンツが決まった後、ブランドや雰囲気にあわせてデザイン面の仕上げを行ったり、画面内の細かい動きをカタチに起こす際に活用しましょう。

デザインをコードに

さらに細かい、今までにないアニメーションを再現するために高精度なプロトタイプを作成するツールの機能では表現しきれずに、コーディングとデザインを合わせたさらに複雑なツールが必要となる場合があります。細かいアニメーションやトランジションデザインをコード形式にして渡すことで、エンジニアとのコミュニケーション（デザインの引き渡し）が円滑に進められるのはこういったツールの長所でしょう。

これらの代表的なツールとしてはFramerとMeta社が提供するOrigami Studioがあげられます。

本物とそっくりなものを作ることができますが、複雑で最も学習難易度が高く、デザイナー、むしろコーディングを恐れないデザイナー向けです。

コーディングも出来るデザイナーがいるなら有効活用できますが、使いこなすのはなかなか難しいので、ある程度の粒度でプロトタイプが作れたらそのままコーディングを進めてしまうという方法でも良いのではないかと個人的には考えます。

おわりに

今日は、プロトタイピングの具体的な進め方についてご紹介しました。

一足飛びに進められるものではなく、ユーザーストーリーを実現するための動きとデザインを設計した上で具現化していくものだとお分かりいただけたでしょうか。

開発プロセスにおいてプロトタイプを使ったユーザーテストの積み重ねは、プロダクトの成功に不可欠なものです。それを素早くわかりやすいカタチで作れるプロトタイピングツールに需要があることは当然のことです。目的に最適なツールを用いればプロトタイピングはとても簡単になるのです。

以前の記事でも書いたように、初めのフェーズから動くプロトタイプを作ってテストを行うことで、細かいデザインよりも本質的なユーザー体験にフォーカスできるものです。

さぁ勇気を持って、みなさまの最初のペーパースケッチも動かしてみてはいかがでしょう？