あなたはアプリのデザイナーかプロダクトマネージャーで、会社では新しいアプリに胸を躍らせています。
市場調査では、そのアプリに対する強い関心が示され、大きな市場機会が存在するように見えます。
しかし、設計を始め、スクリーンショットを作成し、ロジックフローを構築していく中で、おそらくあなたは疑念を抱き、小さな声が聞こえてきます。 「この製品は本当にお客様に気に入っていただけるのだろうか？ユーザーインターフェイスはエレガントでシンプルだから、お客さまに気に入ってもらえるだろうか？」
これらは素晴らしい質問です。ソリューションのプロトタイプを作成することで、あなたのアイデアやデザインを検証したいと思う主な理由の1つです。
この記事はインフラジスティックス本社により作成された英文記事の機械翻訳により生成されました。
原文は以下よりご確認いただけます。
Jason Beres 2021.3.12 [What is Prototyping and Why is it Important?](https://www.infragistics.com/community/blogs/b/jason_beres/posts/what-is-prototyping-and-why-is-it-important)
また、本記事の内容に深くご興味がある場合、インフラジスティックス・ジャパンのスタッフによる翻訳リクエストを受け付けておりますので、「JapanPR@infragistics.com」宛にご連絡ください。
ここにこの記事の回答をまとめます。
プロトタイプとは？
プロトタイプとは、作りたいソリューションのモックアップのことです。すべてのインタラクションやビューをモックアップにすることで、開発者に依頼することなく、完全に開発された製品と同じように体験することができます。アプリ（あるいはあらゆる種類のソリューション）に含めたい機能をすべて表示し、アイデアを検証し、全体的なUX戦略を確認することができます。プロトタイプの目的は、ニーズやプロジェクトの段階によって異なるかもしれませんが、どのように使用するかはあなた次第です。
プロトタイプは、Sketchタイプのデザインツールや画面設計ツールから、Design to Codeの統合ツールまで、さまざまなタイプのツールを使って構築されます。ステークホルダーからのフィードバックを支援するコラボレーション機能を備えたものや、最初のワイヤーフレームを具体化するためのアイデア出しツールを備えたものもあります。
プロトタイプには、大きく分けて4つの特質があります。
Representation(表現) - 紙とモバイル、HTMLとデスクトップなど、プロトタイプの実際の形態。
Precision(精密さ) - プロトタイプの忠実度、つまりディテール、洗練度、リアリズムのレベル。
Interactivity(対話式) - ユーザーに開放されている機能。
Evolution(進化) - プロトタイプのライフサイクル。素早く作り、テストし、捨て、改良版に置き換えるものもある（これは「ラピッドプロトタイピング」と呼ばれる）。また、作っては改良し、最終的に最終製品に進化させるものもある。
A low-fidelity prototypeは、多くの場合、紙ベースで、最終製品のデザイン要素を視覚的に表現したものです。
プロトタイピングに関する最も一般的な誤解の1つは、デザインプロセスの最後に1度か2度だけ行う必要があるというものです。しかし、これは間違いです。
インフラジスティックスのモットーの1つは、「早くテストし、頻繁にテストする」です。 このように、プロトタイピングはプロセスなのです。もう少し詳しく見ていきましょう。
プロトタイピングの意味とは？
プロトタイピングとは、ターゲットユーザーにとって最適な体験を設計するプロセスです。デザイナー、プロダクトオーナー、ビジネスアナリストが、ユーザーニーズ、ナビゲーション、情報アーキテクチャ、ユーザビリティ、アクセシビリティ、UI、ビジュアルデザインなどの主要な関心事を決定するためのさまざまな段階が含まれます。
最近のプロトタイピングツールはダイナミックで、提案されたアプリのスクリーンショット、トランジション、テーマスタイルなどを含み、完成したアプリがどのように見えるか、どのように感じられるかをリアルに体験することができます。
一般的に、何かをデザインするときはいつも、初期のイテレーションがあまり良くないことがあります。デザインは一夜にして成功することはほとんどなく（現実的には「良いデザイン」はありえない）、だからこそプロトタイピングが必要なのです。
プロトタイプの初期バージョンの多くは失敗作なので、人間中心設計の概念を推進し、イノベーションラボを立ち上げ、ポップアップインキュベーターを作ったことで有名なデザイン会社、IDEOの創設者、David Kelleyの考えを覚えておくとよいだろう。
‘Fail faster to succeed sooner’ —
(早く成功するために早く失敗する)
David Kelley, IDEO Founder
プロトタイピングの種類
ここでは、プロトタイピングを大きく2つに分けて考えてみます。
- ローフィデリティ・プロトタイピング：迅速かつ安価で、多くの場合紙ベースで、製品の素早いプレビューを可能にします。
- ハイフィデリティ・プロトタイピング：発売前の実際の製品に限りなく近い外観と機能を持ち、インタラクティブで有意義なフィードバックが得られる。また、潜在的な投資家や利害関係者の前でデモンストレーションするのにも適している。
プロトタイピングが重要な理由
プロトタイピングの最も強力な側面の1つは、うまくいったときに顧客に対する共感を生み出すことです。この点で、ソフトウェアの設計は、人間が使用したり居住したりする他の製品や構造物の設計と何ら変わりません。
例えば、建築家であれば、堂々としたタワー、床から天井まである宝石のように輝く窓、設計者の個性を発揮した部屋や廊下の珍しいレイアウトなど、建物の壮大さに目を奪われがちです。しかし、その建物で生活し、働く人々への共感がなければ、その壮大なデザインは、ある場所では寒さに震え、数メートル先では汗だくになっている人々がいるという、お粗末な環境デザインにつながりかねません。また、ピカピカの窓から日光が入りすぎて、コンピューターの画面が見えなくなってしまうかもしれません。
同じように、お客様のニーズを理解し、共感することなくソフトウェアを設計すると、不必要な機能、混乱したワークフロー、読みにくい画面テキストなど、さまざまな問題が発生します。外見の美しさだけでなく、機能性や楽しさまで兼ね備えた製品に仕上げるには、お客さまに共感していただくことが大切なのです。
プロトタイプを作る主な利点をまとめると、次のようになります。
- 時間と費用の節約になる
- ターゲットとなるユーザーグループにコンセプトを示し、テストすることができる
- 開発者の参考資料になる
- プロジェクトのドキュメントとして利用できる
- 具体的な成果物をチームで作り上げることで、より良いアイデアを生み出すことができます。
プロトタイピングツール
プロトタイピングツールには、ニーズに応じて様々な種類があります。
ワイヤーフレームでフロントエンドのデザインに焦点を当てるもの、ユーザーテストやユーザーフローの基本的なデモンストレーションができるもの、完全に統合され、Sketchなどのプログラムで既存のデザインやワイヤーフレームを操作し、リアルでリッチなユーザーインタラクションをシミュレートし、チームとコラボレーションし、ユーザーテストをして、開発者に渡せるようなコードを生成できるものなどがあります。
どのツールを選択するかは、プロトタイプの目標、ユーザーテストに利用できるまでの時間、作業する人、ワークフローにどのように組み込むかによって決まります。
Indigo.Designによるプロトタイピング
Indigo.Designは、プロトタイピング、デザインシステム、ユーザーテスト、コード生成を統合した完全なDesign to Codeシステムであり、完全統合ツールの1つです。
Sketch UIキットを使用したIndigo Design Systemで、Indigo.Designのコンポーネントやデザインパターンを使用して、クラス最高のUXおよびUIデザインを作成することができます。また、あらかじめ組み込まれたデザインパターンや、独自のカスタムUIライブラリを作成するオプションも用意されています。
以下は、Indigo.Designで作成した家計簿アプリの実際のプロトタイプです。画像ファイルやSketchのアートボードから取り込んだスクリーンショットが全て含まれています。ご覧の通り、ユーザーフローはクリック＆ドラッグでホットスポットを作成し、リンク先の画面へ移動することで簡単に作成でき、ユーザーフロー内の他の画面を選択することで簡単に編集することができます。また、スワイプ、長押し、ダブルタップなど、さまざまな遷移オプションを編集することができます。
Indigo.Designでは、プロトタイプをアニメーション化し、実行中のプロトタイプのインタラクションやユーザーフローを確認することができます。Indigo.Designには、コラボレーション・オプションもあり、様々な方法で共有できるURLを取得できます。モデレーターなしのリモート・ユーザビリティ・テストのために、Indigo.Designに組み込まれた機能により、プロトタイプに対する迅速なフィードバックが得られます。また、満足した場合は、開発者とURLを共有し、Sketchプラグインを使用してVisual Studio Codeでコードを生成することができます。
これらの機能のデモは、How to Prototype Video (2:51から) をご覧ください。
