MVPを捨て、Minimum Viable Prototypes（MVPr）を採用

完璧を追求することは、設計者を反復とレビューの無限ループに導く微妙な罠です。 これは、すべてのインタラクションとグラフィック要素がデザインの執着の対象になる可能性があるデジタル製品の世界で特に当てはまります。

しかし、一歩下がってデジタル製品デザインの学際的な性質を観察すると、デザイナーが完璧な罠に陥る様子を簡単に確認できます。

単一のデジタル製品の設計に関与するすべての人と役割について考えてみてください。

• デザイン研究者
• UIデザイナー
• 情報アーキテクト
• UXデザイナー
• プロダクトデザイナー
• プロダクトマネージャー
• コンテンツストラテジスト
• ブランドエキスパート
• UXコピーライター
• 等

何らかの形で、これらのそれぞれが交差します。 たとえば、製品のユーザーエクスペリエンスを考慮しないと、製品のユーザーインターフェイスは成功しない可能性があります。 相互接続性により、設計上の決定が互いにどのように影響するかを理解する必要があります。「Xを実行すると、YとZにどのように影響しますか？」

このタイプの戦略的予測は価値がありますが、設計プロセスが停滞し、 「YとZを実行する前にXを取得する必要があります」という恐ろしい完璧なループに陥る可能性もあります。

それで、代替手段は何ですか？ 実際の人々から得られた実際の指標と洞察に基づいて、デジタル製品を迅速に作成、起動、テスト、および改善する方法はありますか？

このガイドでは、最小限の実行可能なプロトタイプのレンズを通してこれらの質問に対処し、デジタル製品を構築、テスト、および改良するための驚くほど簡単なプロセスを設計者に提供します。

最小限の実行可能なプロトタイプで起動をシミュレートする

誰も何も知らない……映画の分野全体で、何がうまくいくかを確実に知っている人は一人もいない。 毎回それは推測であり、運が良ければ、教育を受けたものです。 –ウィリアム・ゴールドマン、アカデミー賞を受賞した脚本家

デジタル製品設計プロセスの初期の決定は、せいぜい推測に基づいています。 製品が実際のユーザーの手に渡るまで、すべてが理論的です。 一方、準備が整う前に製品を発売すると、評判が損なわれる可能性があります（コストのかかる間違い）。

主要な設計作業が始まるかなり前に、発売をシミュレートして製品の実行可能性を判断する方法があったとしたらどうでしょうか。

これは、最小実行可能プロトタイプ（MVPr）の価値であり、より身近な「最小実行可能製品」よりも大幅に少ない時間と費用で済む製品設計アプローチです。

最小実行可能プロトタイプ（MVPr）設計プロセスの概要は次のとおりです。

1. 発見
2. リサーチ
3. 情報アーキテクチャ
4. ビジュアルデザイン
5. 発売
6. テスト

待って！ それは誰もが使うプロセスではありませんか？

はい。上記の手順の基本事項に依存することで、成功することがわかります…

• 実際の製品の機能をシミュレートします。
• 実際の製品の発売を模倣します。 と
• 実際の製品を構築する価値があるかどうかを確認してください。

ステップバイステップ：MVPrを構築する方法

1.発見：意思決定を開始します

発見プロセスを開始するための優れた方法は、あなたのアイデアに類似したWebサイト、ブログ、およびアプリを検索することです。 彼らの歴史、ターゲット市場、彼らがどのように運営されているかなどについて学びましょう。関連する競合他社のどれもあなたのプロトタイプがすることをしていないことがわかったら、前進し続けてください。

このステップには専門知識は必要ありません。 その秘訣は、意図から行動へと前進することです。

競合他社の長所と短所に特に注意してください。 彼らがすでに達成した（または達成できなかった）ことをどのように使用して、プロトタイプをより強力にすることができますか？

1〜2時間の調査の後、最も重要な競合他社を特定し、それぞれの重要な側面を学ぶことができるはずです。

2.調査：ユーザーを定義する

あなたのターゲットユーザーは誰ですか、そしてなぜ彼らはあなたの製品を気にする必要がありますか？ これを理解することは非常に重要ですが、計算された仮定から始めなければなりません。 強く意見のあるビジョンから始めるのが最善です。 「すべての人のために何か」を推測したり、作成しようとしたりしないでください。 骨抜きにされたデザインは必要ありません。

代わりに、発見段階で見つかった競合他社のサイトを詳しく調べて、常識的に潜在的なユーザーの肖像画を描くことができるようにしてください。

Web上で簡単にアクセスできるいくつかの実用的な調査領域を次に示します。

• レビューサイトにアクセスして、競合他社との体験について人々が何を言っているかを確認してください。
• ソーシャルメディアで製品業界のインフルエンサーをフォローし、彼らがどのようにオーディエンスを引き付けているかを観察します。
• 競合他社がどのように運営されているかを詳細に説明している評判の良いニュース記事を検索してください。
• ソーシャルメディアで競合他社とユーザーとのやり取りを確認してください。
• 競合他社の問題や問題が議論されているフォーラムを見つけることができるかどうかを確認してください。

多大な財政的投資をすることなく、これらの各手段から貴重な洞察を得ることができます。 これは、わずかな予算で作業する小規模な設計チームにとって特に重要です。 大手ブランドは研究に多額の資金を費やしていますが、小規模なチームや個々のフリーランサーは、より機知に富む方法を見つける必要があります。

3.情報アーキテクチャ：プロトタイプを構築する

プロトタイプはどのように機能し、焦点を当てるべき最も重要な情報は何ですか？

これに答え始める最も簡単な方法は、構築しているプロトタイプに類似している一流のサイトを分析することです。 参照することを選択したサイトの全体的な外観とエクスペリエンスは、優れている必要があります。

サイトを細かく分割することから始めます。 関連するすべてのページは何ですか？また、視覚的にどのように構成されていますか？ サイトのワイヤーフレームを逆にして、独自の情報、色、画像などを使用してサイトを再作成することを恐れないでください。

なぜこのようにそれについて行くのですか？ あなたのサイトは、競合他社のサイトと同じように機能する可能性があります。つまり、異なる目標を念頭に置いているだけです。 ユーザーが確立されたエクスペリエンスにうまく反応すれば、複雑なシステムを発明する必要はありません。

*上級者向けのヒント：サイトの情報アーキテクチャを研究する場合、色の影響に気を取られないように、スクリーンショットを撮り、グレースケールにするのが便利なテクニックです（これは非常に説得力があります）。

この後、設計者がゼロからインタラクティブなプロトタイプに迅速に移行できるオンラインリソースを活用してください。 たくさんのユーザーインターフェイスキット、HTMLテンプレート、WordPressテーマなどがあります。 プロトタイプに合うようにそれらを変更することを恐れないでください。また、ピクセルの完全性や美しいコードについて心配する必要はありません。 この段階では、誰も気にしません。 彼らはあなたの製品が有用であるかどうかを気にします。

無料のUIキットを使用してこれがどのように機能するかを次に示します。

上の画像で何を達成しましたか？

• すべての色と画像を削除しました。
• ナビゲーションバーはそのままになりました。
• フィルタリングシステムの機能は同じままでしたが、文言が変更されました。
• 使用する予定の画像をよりよく紹介するために、2列から1列に変更しました。

1時間足らずで、プロトタイプをさらに開発するための視覚的な基盤ができました。

4.ビジュアルデザイン：無料のUIリソースを再利用する

プロトタイプの視覚的なルックアンドフィールは、動作方法から切り離すことはできません。 グラフィックだけではありません。 インパクトのあるビジュアルデザインは物語を語り、真の価値のある体験を提供します。

ここでは、視覚的な一貫性が重要です。これは、ユーザーが製品に精通し、より効率的にナビゲートするのに役立つためです。 プロトタイプの開発の早い段階でこの種の一貫性を実現するには、無料のUIリソースを再利用するのが賢明です。

このように作業することで、まとまりのある設計システムの開発に何時間も費やす必要がなくなります。 タイポグラフィ、ボタンスタイル、図像、およびその他すべての重要なUIコンポーネントが処理されます。

5.起動：コーディングするかコーディングしないか？

プロトタイプを世界と共有する時が来ました。 幸いなことに、モックアップを動的なプロトタイプに変換するのはこれまでになく簡単になりました。 直感的なツールのホストのおかげで、コーディング方法を知る必要さえありませんが、学ぶ必要がありますか？

ノーコードMVPr

ビジュアルデザインが完成したら、プロトタイプをランディングページに埋め込んで、訪問者がプロトタイプを操作し、アイデアに関する一般的なフィードバックを提供できるようにします。 MVPr設計プロセスのこの時点で、ノーコードプロトタイプを作成する方法はいくつかあります。 オプションは次のとおりです。

基本的なプロトタイプ

• InVisionは、基本的なプロトタイプの構築とテストに必要なすべての機能を備えており、問題なく簡単に体験できます。

リッチメディアのプロトタイプ

• 洗練されたインタラクション、トランジション、およびアニメーションの場合、Principleは非常に便利です。

100％リアルなプロトタイプ

• フレーマを使用すると、設計者は考えられるあらゆるデジタル製品体験をシミュレートできます。 これは、プロトタイプがネイティブアニメーションとロジックベースのコーディングの観点からリアルに見える必要がある場合に最適なオプションです（例：これを行う場合）。
• Webflowは、100％何が見えるか、何が得られるかを示すキャンバス上で、レスポンシブWebサイトを設計、コードで構築、および起動する機能を提供します。

クリックするとフルサイズの画像が表示されます。

コード化されたMVPr

コードは素晴らしい味方になることができます。 間違いなく、それはあなたの製品を構築するための最良の方法です。 主な欠点は、高度なカスタマイズのメリットを体験するためのコードの記述方法を知る必要があることです。 適切な知識ベースがないと、コードを試すことを選択すると速度が低下します。

ボールを転がすのに役立つコードスターターキットはたくさんあります。 たとえば、上記で紹介したUIキットには、ダウンロード可能な独自のHTMLバージョンがあります。

6.テスト：AdInsightsを活用する

プロトタイプをテストするための秘訣は、価値を提供しながら、最小限の労力で最大限の洞察を得ることができるツールにあります。 必要なのは、数ドルと患者の問題解決だけです。

製品への関心を測定するための実用的な最初のステップは、広告を作成し、調査段階で見つかった人々をターゲットにすることです。 オーディエンスとデザインしている製品の種類に応じて、Google、LinkedIn、Instagram、またはTwitterに広告を掲載できます。 企業から消費者向けの製品には、Facebookをお勧めします。

*上級者向けのヒント： AdEspressoは、有用な比較分析を収集しながら、ソーシャル広告の何百ものバージョンを同時に実行するのに便利な場所です。

広告を掲載すると、次の2つのことを学ぶことができます。

1. 広告を見た人の数
2. 広告をクリックした人の数

ターゲットオーディエンスが広告に関心を持っていることを確認したら、初期のユーザーのために価値を創造する必要があります。 方法は次のとおりです。

• 「購読」フォームを追加し、ユーザーにメールアドレスを入力するように依頼します。
• あなたが立ち上げているときに彼らに知らせるためにフォローアップしてください。
• ソーシャルメディアチャネルを稼働させて、ソーシャルボタンを組み込み、ユーザーが製品についての情報を広めることができるようにしてください。

この戦略を使用すると、次のことが得られます。

• 初期のマーケティング活動に使用できる電子メールアドレスのリスト
• 個人的および専門的なネットワークにあなたの製品を推薦する人々
• 誰かがあなたの製品に興奮しているかどうかのより明確な理解

初めて実際のフィードバックを受け取ったとき、製品は公開されています。 価値の提供、行動の分析、ソリューションの反復というこのサイクルを通じて、何が機能していて何が機能していないかを学び、人々が実際に使用したい製品に近づくことができます。

大胆に立ち上げて学ぶ

最小限の実行可能なプロトタイプの最終的な目的は次のとおりです。知識に基づいた設計の推測から、スピードと自信を持って実際の実用的なフィードバックに移行します。

これは、改善の機会として不確実性と失敗を受け入れるプロセスです。 とりわけ、それは行動に報いる。 優れた設計には、大胆な意思決定と、不完全さに直面して前進する意欲が必要です。

ですから、完璧さの追求にとらわれず、メガブランドやその膨大なリソースと自分を比較しないようにしてください。 一歩前進し続けると、すぐに人々が使用することにワクワクする非常に洗練された製品に気付くでしょう。

•••

Toptal Designブログでさらに読む：

1. 簡単なプロトタイプ–InVisionStudioチュートリアル
2. 効果的なデザインスプリントを実施する方法
3. Adobe CCがワイヤーフレームにできることを誰が知っていましたか？
4. 大衆向けのUXテスト：シンプルで費用対効果の高いものに保つ
5. カスタマージャーニーマップ–それらが何であるかとそれを構築する方法