設計プロセス

MVPを捨て、最小実行可能プロトタイプ（MVPr）を採用

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

しかし、一歩下がってデジタル製品デザインの学際的な性質を観察すると、デザイナーがどのように完璧な罠に陥っているのかが簡単にわかります。

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

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

何らかの形で、これらのそれぞれが交差します。たとえば、製品のユーザーインターフェースその場合はおそらく成功することはできませんユーザー体験考慮されません。相互接続性には、設計上の決定が互いにどのように影響するかを理解するというプレッシャーが伴います。 「Xを実行すると、YとZにどのように影響しますか？」

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

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

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

最小限の実行可能なプロトタイプ設計プロセスの図

このイラストには、衛星画像のリアルな詳細は含まれていませんが、故郷の惑星として簡単に識別できる十分な視覚情報が含まれています。同様に、最小限の実行可能なプロトタイプは、製品コンセプトが価値があるかどうかを判断するための「十分な」機能をユーザーに提供します。

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

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

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

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

これは、最小実行可能プロトタイプ（MVPr）の値です。製品設計アプローチこれは、より馴染みのある「最小限の実行可能な製品」よりも大幅に少ない時間とお金で済みます。

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

発見
研究
情報アーキテクチャ
ビジュアルデザイン
打ち上げ
テスト

待つ！それは誰もが使用するプロセスではありませんか？

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

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

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

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

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

ascorpとaccorpの違いは何ですか

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

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

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

競合他社の研究新製品開発プロセス

旅行業界からのこの競合他社の要約例は、発見フェーズの主な目的を強調しています。ライバル企業の長所と短所によって作成された機会と課題を明らかにします。

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

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

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

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

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

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

ユーザーインサイトMVPプロセス

ユーザープロファイルは、一般的なものでも、非常に細かいものでもかまいません。 MVPrプロセスの早い段階で、できるだけ早くできるだけ多くのことを明らかにすることが重要です。

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

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

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

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

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

*プロタイプ：サイトを勉強するとき情報アーキテクチャ、便利なテクニックは、スクリーンショットを撮り、それらをグレースケールにして、色の影響に気を取られないようにすることです（これは非常に説得力があります）。

MVP情報アーキテクチャを構築する方法

ノイズをカットして重要なことに集中するための優れた方法は、製品のスクリーンショットをグレースケールに変換することです。

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

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

無料のUIキットでMVPを構築する

必要なUIキットは、設計するプロトタイプのタイプによって異なります。この場合、ビジュアルコンテンツに焦点を合わせたテンプレートを使用すると、すばやく簡単に再編成できます。

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

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

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

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

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

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

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

MVPデザインのワイヤーフレームから忠実度の高いモックアップ

複数の画面にわたって一貫したユーザーインターフェイスを設計することに時間を費やす代わりに、UIキットを利用して、コンテンツの作成に集中してください。この例では、ワイヤーフレームから忠実度の高いモックアップに急速に移行しました。

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

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

ノーコードMVPr

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

基本的なプロトタイプ

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

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

洗練されたインタラクション、トランジション、アニメーションの場合、原理とても便利です。

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

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

フルサイズの画像を表示するにはクリックしてください。

これは、速度と精度でインタラクティブなプロトタイプを作成するために使用できるいくつかの設計プログラムの長所と短所を分類した便利なチャートです。（ソース：クーパー）

コード化されたMVPr

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

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

HTMLを使用した無駄のない製品開発の無料UIキット

今UIキット。

Readymagリーン製品開発ツール

Readymag は、クリエイティブプロフェッショナルがマイクロサイト、ポートフォリオなどを簡単に作成するのに役立つオンラインデザインツールです。

Webflowレスポンシブ最小実行可能プロトタイプ開発

Webflow デザイナーがブラウザ内でレスポンシブウェブサイトを構築できるようにします。

テーマフォレスト最小限の実行可能な製品を構築する方法

ThemeForest 何千ものカスタマイズ可能なテーマとテンプレートを提供します。

6.テスト：広告インサイトを活用する

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

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

*プロタイプ： AdEspresso 便利な比較分析を収集しながら、ソーシャル広告の何百ものバージョンを同時に実行するのに便利な場所です。

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