プロトタイピングツールは、私たちデザイナーにとって重要なリソースとなっています。プロトタイピングツールにより、静的な文書では表現の難しい、アニメーション、トランジション、マイクロインタラクションなど多数の状態を表すことができるようになりました。
このニーズに対応するために、各企業はプロトタイピングツールを作成し始めています。そして今では、定期的に多くのツールが登場するのを目にしています。
しかし、どれを用いたら良いのでしょう？ 正しいものを選ぶために、どんな質問を自分自身と自分のチームにするべきでしょうか？
どのプロトタイピングツールを使うか
「どのツールを用いれば良いのでしょうか？」これは、オンラインフォーム、デザインミートアップやブログで、最も頻繁にきかれる質問のひとつになってきています。質問は白熱した討論になり、デザイナー達はすぐに特定のツールやアプリケーションを挙げます。
実際のところ、全てに当てはまる答えはありません。更に言うと、デザイナーはそれぞれの良い点と悪い点を理解し、与えられた内容に対して最も適切なワークフローを迅速に決めることができるように、自由自在に使えるツールの幅を持っている必要があります。
ツールを評価する５ステップ
評価プロセスにはさまざまなステップがあります。経験のある専門家とチームマネージャーは、新しいプロジェクトを指示されて、どこでプロトタイプが使われるか理解するとすぐに、その仕事に適切なツールを正しく迅速に見つけることができます。
以下では、プロジェクトの適切なプロトタイピングツールを決めるための５つのステップを紹介します。このステップには、利用できる選択肢を評価するためのゴール設定から要件と内容を理解まで含みます。この記事の目標は、初めてプロトタイピングツールを選ぶデザイナーや、特殊な要件や制約のあるプロジェクトに面しているデザイナーを手引きすることです。
1. 本当にプロトタイピングツールが必要か？
製品の設計段階で、どのようにプロダクトが動作するかを目に見える形にすることができれば、プロジェクトには大きなメリットがあります。すると、デザイナーはもっともダイナミックかつ現実的な方法で、インタラクションについて考えることができるようになります。私たちはインタラクティブなインターフェイスの世界に住んでいます。インタラクティブなインターフェイスを再現することは難しいことですが、インタラクティブなプロトタイプはその体験をエミュレートするのに非常に有効です。
プロトタイピングツールが必要ないケース
しかしプロトタイピングツールは、実際のところ必要がないこともあります。プロジェクトが初期段階で自分がやりたいことがコンセプトの検証のみであるときは、製品がどのように動くかを示すのにペーパープロトタイプが有効です。ペーパープロトタイプを使うことで、ソフトウェアに費やす時間を削減できます。また、特定のユーザビリティを検証することよりも、コンセプトを検証することに焦点を当てた方法とも言えます。
また、専用のソフトウェアでプロトタイプを作るより、最終的なプログラミング言語で製品を構築し始めることが最も良い方法の場合もあります。ウェブサイトを作る時、HTMLのプロトタイプをすぐに作り始める人もいるでしょう。Bootstrapのようなフレームワークは、レスポンシブなウェブサイトを素早く構築するのに役立ちます。さらに、フレームワークによっては高度な知識は必要とされません。
適切なソフトウェアを選ぶことに労力を費やす前に、インタラクションのあるプロトタイプが最も良いソリューションなのか、どのタイプのプロトタイプが最もプロジェクトのニーズを満たすかを、チームでよく話し合いましょう。
2. 目的を決める
プロトタイプの目的を決めることは、正確さと機能性のレベルを考えるのに役立ちます。そして、プロトタイピングツールの選択肢を与えてくれます。
下のチャートは、デザイン面でプロトタイプを作るいくつかの主な理由の概要を示しています。これらのカテゴリーは包括的なものではなく、場合によっては同じプロトタイプが複数のカテゴリーにまたがることもあります。ですが、この分類はプロトタイプの目的の優先度をつけるための最初のステップとしては有用です。
主な目的は以下のどれでしょうか？
目的１：アイディアを売る
プロトタイプはコンセプトに命を吹き込みます。また、クライアントや重要な出資者にアイディアを見せるための素晴らしい販売ツールでもあります。この場合、プロトタイプの機能性は浅くなりがちで、アイディアを売るためのコアとなる特徴かユーザーフローのみを表します。プロトタイプですべてを紹介する必要はありませんが、ビジュアルを洗練させておくことは、大きなインパクトを与えるでしょう。このようなセールス目的のプロトタイプは、実際のユーザーのためのデザインがスタートしたら捨てる必要があることを覚えておきましょう。
目的２：ユーザーと一緒に検証する
プロトタイプをユーザーの前に置くことは、最高のユーザー体験のためにデザイナーがするべき重要なことのひとつです。進むべき方向を正すためのフィードバックをすぐに集めることができればより良いでしょう。ユーザーテストのプロトタイプはより洗練されたものとなります。もちろんペーパープロトタイプも製品が初期段階であれば有効です。また、プロトタイプは、テストでユーザーに割り当てるタスクが複雑であればあるほど堅牢であることが求められます。
目的３：社内でコンセプトを検証する
プロトタイプは社内におけるコンセプトの実証のみに使用されることもあります。アイディアがある場合、それが本当に正しいのか、うまくいくのか確認したいときもあるでしょう。プロトタイプは製品や機能の設計に時間と労力を費やす前に、複数のステークホルダーを対象にアイディアを見せるのに役立ちます。
目的４：ロジックと実現可能性の検証をする
チームが開発に移るまえに、機能が実現可能かどうかテストする必要がある場合もあります。デザイナーと開発者の間での議論において、プロトタイプは動くドキュメントとして機能します。
3. 要件を理解する
プロトタイプの目的が設定されると、次はソフトウェア、ハードウェア、タイミング、リソースに関連する具体的な問題について検討する必要があります。
デザイナーがプロジェクトの初めにしがちなよくある失敗は、どのようなものをプロトタイプで構築し可視化するかの議論をチームでせずに、自分のお気に入りのプロトタイプを使ってしまうことです。
プロジェクトマネージャー、デザイナー、開発者を議論に巻きこみ、以下の質問をしてみましょう。タイムライン、予算、スキルセット、技術的な互換性などの要件を考慮して、グループ全体で質問に回答する必要があります。
どのような要素で構成されるかによって、プロトタイプはさまざまな形を取ります。 たとえば、ハンドスケッチやワイヤーフレームだけで済むかもしれません。粗いつくりのHTMLとCSSであることもあるでしょう。また、インタラクションがどのように機能するかを理解するために、よりリッチで洗練されたプロトタイプが必要となることもあります。
スコープ : プロトタイピングフロー vs インタラクション
よくある質問 :
- 一連のステップに沿ってフローを実証しようとしていますか？ それとも、インタラクションを表現しようとしていますか？
- プロトタイプに必要なフローやインタラクションの中で最も重要な部分は何ですか？ その体験はどの画面のサイズでのことですか？
プロトタイピングツールは、２つのグループに分けられます。ユーザーフローをエミュレートするツールと、インタラクションの表現を重視したツールです。
製品におけるユーザーストーリーついて話そうとしているのであれば、フローをプロトタイプで表現することが良いアプローチでしょう。この場合、InVision、Axure、 Keynoteのようなツールが効果的です。
ステークホルダーやチームメンバーに対し、ユニークで綿密なインタラクションをわかりやすく説明する方法としてプロトタイプを使いたいならば、また別のグループに焦点を当てることとなるでしょう。Framer, Principle, Pixate と Origami などが挙げられます。
たとえば、Principleで作られたカードをスワイプするプロトタイプは、特定のインタラクションに焦点を当てています。
考慮すべきこと :
- フローをエミュレートする能力
- ツールごとのインタラクションと正確さのレベル
- デバイスサポート
フィデリティ : ワークフローを設定する
よくある質問 :
- スターティングポイントとして、ワイヤーフレームを使おうとしていますか、それとも視覚に訴えるモックアップを使いますか？
- 画面をデザインする必要はありますか？
- デザインとプロトタイプを１人が兼任しますか？
- プロトタイプを他のチームに見せる必要がありますか？
- プロトタイプの最終形のルックアンドフィールはどのようなものですか？
プロトタイピングツールの中には、デザインをしながら作成ができるものもあります。また、ワイヤーフレームやビジュアルボードのような既存のアセットをインポートして使うものもあります。
チームでデザインプロセスについて話す時間を取りましょう。プロトタイプは、既存のアセットを元に構築することもあります。その場合、デザイナーがするべきことは、モックアップを一貫したフローや物語に結びつけることでしょう。ユーザーフローに沿ってインタラクションをエミュレートし、画面と画面を結びつけることを重視したツールもあります。InVisionとKeynoteは、その良い例です。
また、同じメンバーがUIのデザインとプロトタイプの構築を同時にする場合もあります。この２つの面を同時に繰り返すことができれば、プロトタイプを作る最後の段階でより洗練されたインタラクティブな成果物をつくることができるでしょう。この場合、要素を結びつけるだけでなく、UIのデザインもできるツールを探しましょう。
また、どの程度ビジュアルを改良する必要があるかも考慮しましょう。AxureやUXPinがワイヤーフレームのような成果物を作成するのに対し、他のツールはピクセルパーフェクトな洗練された見た目を作ることができます。デザインにはSketchプロトタイプにはInVisionのように、シームレスに使うことができるツールをペアで使うこともあります。
考慮すべきこと :
- 共同作業の機能 (シェア、ライブシェア、コメント、フィードバック）
- 別々のソフトウェアをワークフローに統合する（PhotoshopやSketchなど)
- 要求される正確さのレベル（ワイヤーフレーム対ピクセルパーフェクトなデザイン）
リソース : 求められるスキルセット
よくある質問 :
- 誰がプロトタイプを作りますか？
- どのようなソフトウェアのスキルを持っていて、どれだけ早く仕事ができますか？
- ある特定のツールの使い方を知らない場合、どれだけ早く習得することができますか？ また習得するつもりがありますか？
- このプロトタイプで何人のデザイナーが共同作業しますか？
チームのソフトウェアスキルを活用することは多くの時間を節約できますが、新しいツールをデザインプロセスに取り入れることの妨げにならないようにしましょう。プロトタイピングのツールは、習得や操作がしやすくなってきています。そして、デザイナーは技術を習得することへの関心は低く、適切なツールかどうかにより関心を持っています。
すでにデザイナーがどのツールの使い方を知っているかを自分のチームに伝え、どのツールを習得するのがもっとも簡単かオンラインでリサーチしましょう。プロトタイピングツールを習得し、使いこなすように促しましょう。柔軟なスキルセットがあり選択肢が多ければ、次のプロジェクトでもっとも良いツールを選ばなくてはならない時にとても重宝するでしょう。
考慮すべきこと :
- 学習曲線
- 使いやすさ
- スピード
コンテキスト : オーディエンスと使用法を決める
よくある質問 :
- 誰があなたのプロトタイプのオーディエンスですか？ 誰がフィードバックをしますか？
- どのメディアでプロトタイプをビジュアル化しますか？ どのデバイスにしますか？
- プロトタイプをひとつずつテストしてもらいますか？ それとも単にリンクをEメールで送りますか？ 前者の場合、オンライン上でスクリーンシェアをして指示しますか？ それとも、自発的にしてもらいますか？
会議でモバイルのプロトタイプを置き、ステークホルダーの横に座りアイディアを説明するつもりなら、適切なソフトウェア（モバイルプロトタイピングツール）とハードウェア（モバイル端末）を選びましょう。このように、自らコントロールできる環境の場合、アイディアを具体化するためのフロー全体は必要ありません。時間と労力を節約しましょう。
しかし、製品がどのようなものか全く知らないユーザーに対して、プロトタイプを使ったユーザビリティテストをリモートで行おうとしているなら事情は異なります。この場合、ガイドなしでもテストを実行できるような、より機能的で安定したプロトタイプが必要となるでしょう。
考慮すべきこと :
- サポートされているデバイス
- ガイドのないテスト
- シェアしやすさとフィードバックを受け取りやすさ
上の質問に答えて行くことで、使用の背景を理解し、プロトタイプで必要となる基本事項のいくつかを決めることができます。次にするべきことは、あなたが考えているツールが必要な機能性を持っているかどうかのチェックです。
4. ツールを評価する
チームで上に挙げた質問を一通り答えてみたら、次は可能性のあるツールを見つける段階です。
以下のリスト沿って評価してみましょう。
プラットフォームとチャネル
ウェブサイトとアプリ、どちらのプロトタイプですか？ デスクトップとモバイル、どちらで動作しますか？ レスポンシブなインターフェイスが必要ですか？ そして画面のサイズによりどのように変わってきますか？
フィデリティ
そのツールはどの程度まで洗練されたものを作れますか？ 荒削りなワイヤーフレームにもとづいたプロトタイプを作るものですか？ それとも、ビジュアルモックアップをインポートし、動かすことができますか？
シェアと共同作業
そのツールでは必要とする共同作業ができますか？ チームが使っている他のデザインツールやコミュニケーションツールとシームレスに連携できますか？ 今やっている仕事をオンラインで簡単にシェアすることができますか？
学習曲線
チームの誰かがそのツールを操作する方法を知っていますか？ 必要なプロトタイプを作るのにどのくらい熟知している必要がありますか？ どのくらい直感的ですか？ プログラミングの知識やコーディングは必要ですか？
価格
そのソフトウェアのライセンスを所有していますか？ いくら払う準備がありますか？ もしツールが複数のプランで売られていた場合、どれが自分のプロジェクトに適切でしょうか？
5. 最後にするべきこと
この時点で、選択肢がひとつかふたつに絞られたでしょう。次のステップは、チームで再検討し、最終的な決定をし、仕事を始めることです。通常、最終的な決定はタイムラインとコストにもとづいて決められますが、ここでリストアップしたプロセスを一通りやることで、すべての基準が考慮されていることを確実なものにします。
最良のプロトタイピングツールについての議論は、ワークフロー、プロセス、役割、責任ような成果物そのものを超えたトピックにまで至ります。
プロジェクトの後には簡単な反省会をしましょう。選んだツールで何が出来て何が出来なかったか、チームと話し合いましょう。次のプロジェクトで、適切なツールを選ぶプロセスのいくつかのステップをスキップできるでしょう。
UXの「U」に戻りましょう
最後にひとつアドバイスを。最新の素晴らしいプロトタイピングツールを習得することの罠にはまらないようにしましょう。選択肢が多すぎるので、どれを選び、使い方を習得するのにどれだけの時間を注ぐかはよく考えましょう。
プロトタイピングツール自身に時間と労力を費やしすぎることは、仕事で何が本当に重要かということから気をそらせてしまうかもしれません。結局、開発しようとしている機能がユーザーニーズを解決できないのであれば、インタラクションを磨き上げることは時間の無駄です。
プロトタイピングツールに関しては、UX Designの記事「UX Tools section」をチェックしてみましょう。
この記事の執筆にあたり協力してくれたGreg Siegal氏、Eugene Ahn氏、Caio Braga氏に感謝します。
