高忠実度と低忠実度のプロトタイピング：何、どのように、そしてなぜ？

実際には、”ハイファイ”と”ローファイ”という用語は、1980年代末のロックンロールのサウンドと演奏スキルを表すためにロック音楽で最初に使用されました。

しかし、それらの間の実際の違いは何ですか、どのようにして、より良い設計やユーザー調査のために高忠実度または低忠実度のプロトタイプを選択す

以下では、高忠実度と低忠実度にある基本と違いを説明し、より良い設計やユーザーリサーチのための優れたプロトタイプを作るためにそれらを選択する理由と方法を説明します。

目次:

• まず、プロトタイプとは何ですか
• 低忠実度のプロトタイプとは何ですか
• 高忠実度と低忠実度のプロトタイプの違い
• より良い設計のためこんにちこんにちこんにちこんにちこんにちこんにちこんにちこんにちこんにちこんにちこんにちはどうですか
• ウェブ/アプリデザイン

まず、プロトタイプとは何ですか？

“プロトタイプは、概念やプロセスをテストするために構築された製品の初期のサンプル、モデル、またはリリースです。 それは意味論、設計、電子工学およびソフトウェアプログラミングを含むいろいろな文脈で、使用される言葉である。”—-ウィキペディアから。

UI/UXデザインに関しては、プロトタイプは設計者のデザインアイデアをデジタルで具体的なモデルに変換するのに役立ちます。 彼らは、部品またはすべてのUi、相互作用、およびUXフローを直接テストして、実行可能で実行可能かどうかを確認することができます。

さらに、チームのニーズが異なるため、低忠実度のプロトタイプや高忠実度のプロトタイプを作成して、さまざまな目的のために設計アイデアをテス

低忠実度のプロトタイプとは何ですか？

low-fidelity prototype-low-tech、low-fi、lo-fi prototypeと呼ばれる低忠実度のプロトタイプは、機能、構造、プロセスに焦点を当て、web/アプリの最も単純なフレームワークと要素を提供する半 これは、初期の段階でユーザーの要求を収集して分析するために、設計アイデアをテスト可能で有形の成果物に変換するためによく使用されます。

では、高忠実度のプロトタイプとは何ですか？

の高忠実度の試作として知られるハイテク、高-fiまたはこんにちは-fi試作、包括的な話を試作して使用することが可能であり、最終製品の多機能の相互作用です。 これは、web/アプリのデザインがまだ存在する可能性のある潜在的な問題を発見するために、後のユーザビリティ評価でよく使用されます。

高忠実度と低忠実度の違いプロトタイプ

低忠実度と高忠実度の違いはまだわかりませんか？ 心配しないで！ 低忠実度のプロトタイプの詳細を学ぶのに役立つ3つの実際の低忠実度のプロトタイプの例を次に示します。

1. 低忠実度のモーションプロトタイプの例

この低忠実度のプロトタイプは、UIの詳細にあまり焦点を当てな

2. ウェブサイトビルダーのための低忠実度UXプロトタイプの例

この低忠実度のUXプロトタイプは、あまりにも多くのUIの詳細なしで明確にページレイアウト、ナビゲーションシステ これは、設計者が仮定をテストし、目に見えないUXの問題を迅速に見つけるのに役立ち

3.Lo-fi試作例入札

これは、アプリのメインレイアウトと要素の配置を表示するためのもう一つの良い例です（より簡単で高速でスマートなプロトタイピングツールで作成されたMockplusで作成されたものです）。 要素の詳細がなくても、設計者は初期の段階で潜在的な問題を検出して取り組むのに役立ちます。

見えますか？ UIの詳細がなくても、low-fiプロトタイプは設計アイデアを伝え、web/アプリの主な機能、構造、フロー、および相互作用を簡単に表示するのに役立ちます。 それはデザイナーに多くの利点をもたらします。

低忠実度プロトタイプの利点:

• 低コスト。 低忠実度のプロトタイプのコストは非常に低いです。
• すべてのインターフェイスの詳細に焦点を当てることなく、設計者は自分の設計アイデアに従うだけで、数分以内にシンプルでテスト可能なプロト
• 実証、共同作業、反復が容易です。 あまりにも多くのUIの詳細がなければ、低fiプロトタイプは、多くの専門的なスキルを必要としません。 そして、より多くの人々が同じプロジェクトに参加して共同作業することができます。 また、設計者はコラボレーション中にプロトタイプを変更して反復することも簡単です。
• 簡単にフィードバックを得ることができます。 忠実度の低いプロトタイプは持ち運びや実証が容易であるため、設計者は他の人（チームメンバーや利害関係者を含む）と直接共有して設計フィードバックを収集することもできます。
• 潜在的な問題を検出し、取り組むこと容易。 低忠実度のプロトタイプにより、設計者はweb/アプリのユーザーフロー、対話、ナビゲーションメニューを簡単にテストできます。 設計者が潜在的なUI/UXの問題を迅速に検出して対処するのは良いことです。

低忠実度プロトタイプの欠点:

• 限られたUIの詳細/アニメーション/相互作用。 アイデアを迅速に伝えるために、UIの詳細、機能、アニメーション、インタラクションなどが制限された忠実度の低いプロトタイプが作成されるこ そのため、他のデザイナーやチームメンバーがweb/アプリのデザインを完全に理解することは良くありません。
• テスト結果は限られており、不正確です。 十分な設計の詳細がなければ、忠実度の低いプロトタイプは、ある程度、実際のユーザーシナリオを正確にシミュレートすることはできません。 試験結果はまた必然的に影響を受け、不正確です。 不必要に、プロトタイプが後の段階で劇的に変更されたとき、テスト結果は完全に異なる場合があります。

だから、あなただけのいくつかのデザインのアイデアを取得し、簡単なプロトタイプでそれらを提示し、議論し、掘り下げる前に他のデザイナーやチー

そして、ここでは、高忠実度のプロトタイプの詳細を学ぶのに役立つ3つの実際の高忠実度のプロトタイプの例を示します。

1。 ジョブリスト高忠実度プロトタイプの例

この高忠実度プロトタイプは、UIの詳細を示すだけでなく、ユー 設計者は、UI/UXの問題がまだあるかどうかを確認するために、非常に小さな詳細を簡単にチェックしてテストすることができます。

2. 忠実度の高いプロトタイプの例

3. 製品設計忠実度の高いプロトタイプの例

忠実度の高いプロトタイプを使用すると、豊かな色、ボタン、写真、アイコン、アニメーション、相互作用など、デザイ

高忠実度プロトタイプの利点:

• 豊富なデザインの詳細。 高忠実度のプロトタイプは、より多くのHQの写真、色、アニメーション、アイコン、ボタンやその他の要素で構築されています。 すべての要素は、実際のウェブサイト/アプリにあるかのように正確に設計されています。
• より良い視覚効果。 優れた配色、鮮やかなアニメーション、レイアウトなどにより、忠実度の高いプロトタイプは、忠実度の低いプロトタイプよりも優れた視覚効果をも
• より正確なテスト結果。 豊富な詳細で、忠実度の高いプロトタイプは、実際のweb/アプリのように見えます。 設計者は、実際のユーザーシナリオをシミュレートし、相互作用、ユーザーフロー、要素効果、カラースキーム、UXなど、すべての可能な側面から製品をテストすることは容易 試験結果はまたはるかに正確です。
• より効果的なフィードバック。 もちろん、他のデザイナーやチームメンバーと共有された後、受信したフィードバックは、既存の問題に取り組むためにも、より効果的です。
• クライアントやステークホルダーにとってより魅力的です。 また、最終的なweb/アプリがどのように機能するかを明確に提示し、より多くのクライアント、利害関係者、投資家を引き付けるのに役立つことも良

高忠実度プロトタイプの欠点:

• より高いコスト。 高忠実度のプロトタイプは、多くの場合、プロのプロトタイピングツールで作成する必要があります。 低忠実度のプロトタイプと比較して、そのコストは確かにはるかに高いです。
• 変更して反復するのは難しいです。 いくつかの変更が行われた場合、忠実度の高いプロトタイプ内の一連のページまたは要素も同時に変更する必要があります。 これは面倒で時間がかかることがあります。

だから、忠実度の高いプロトタイプは、あなたとあなたのチームがいくつかの小さなUI/UXの問題を見つけて取り組むだけでなく、最終設計段階でより多くの株主や顧客を得るために、非常に機能的でインタラクティブです。

どのように、またなぜ選択こんにちは-fiまたは低-fi試作のためのより良いデザイン?

前述したように、高忠実度と低忠実度は成功したデザインを作成する上で非常に異なる役割を果たすので、異なる購入や異なる設計段階でそれらを使初期の設計段階で忠実度の低いプロトタイプの方が優れているのはなぜですか？

明らかに、低忠実度のプロトタイプは、最終製品の高レベルの概念に焦点を当て、潜在的な問題を発見し、非常に早い段階で解決するのに役立ちます。

それは、あなたとあなたのチームが掘り下げる前に正しいデザインテーマと方向性を選択し、それに従っていることを確認するのに役立ちます。

だから、設計の初期段階で、あなたとあなたのチームがアイデアを視覚化されたプロトタイプに迅速に翻訳し、反復を短縮し、ユーザーからのフィードバックを収集することを目指しているときは、忠実度の低いプロトタイプがはるかに良い選択です。

簡単に言えば、low-fi prototypeを使用するのに適した時期はいつですか？

• デザインアイデアが頭の中で点滅し、すぐに具体的なモデルに変換したいとき
• できるだけ早くパートナーとデザインアイデアを議論したいとき
• デザイ1909>最後の設計段階で高忠実度のプロトタイピングが優れているのはなぜですか？

  

  そして、高忠実度のプロトタイプは、多くの場合、web/アプリの詳細と機能に注意を払うので、設計者は、web/アプリの設計の実現可能性をテストし、非常に終わりの設計段階でより多くのユーザー/利害関係者を引き付ける方が良いことが多い。

  簡単に言えば、high-fi prototypeを使用するのに最適な時期はいつですか？

  • 製品のビジュアルデザインが完了したとき
  • UI要素、カラースキーム、ページコピーなどのweb/アプリの詳細をテストしたいとき
  • インタラクション、ワークフロー、ユーザーフロー、トランジションアニメーション、視覚効果などのデザインアイデアをテストしたいとき
  • 他のデザイナーからのフィードバックを知りたいときユーザー

  より良い設計のための適切なプロトタイピングツールを選択するには？

  

  高忠実度のプロトタイプを選ぶか、低忠実度のプロトタイプを選ぶかにかかわらず、唯一の目的は、あなたの素晴ら あなたの答えが”はい”なら、あなたのための次のステップは右のプロトタイピングツールを選ぶことです。

  しかし、まだ方法がわかりませんか？ ここにあなたの参照のための複数の先端はある:

  • 価格. 価格は、常に低fiまたは高fiプロトタイピングツールを選択するための最も重要な要素です。 しかし、それはあなたが考慮すべき唯一の要因ではありません。 安価または高価な価格は何も示していません。 あなたが必要とするのは、あなたに最も適したものだけです。
  • 学習曲線。 適切なプロトタイピングツールを選択する際には、あなたとあなたのチームが新しいツールを学ぶのにかかる時間は常に重要です。 したがって、ツールの新しい機能を探索する時間を無駄にしたくない場合は、簡単なものを選択するのが最善です。
  • 最近では、完全に異なる機能を提供するプロトタイピングツールがたくさんあります。 あなたとあなたのチームに最も適したものを選択するには、製品設計プロセスで正確に必要な機能を知ることが最善です。 そのため、さまざまな部門のチームメンバーの実際のニーズを事前に知る必要があります。
  • デザインのアイデアを議論し、他のチームメンバーからのフィードバックをタイムリーに得るために、ほとんどのデザイナー/設計チームは、チームワークをサポー あなたもそれが必要ですか？ そうすれば、あなたとあなたのチームがオンラインで自由に通信し、共同作業することを可能にするツールがより良い選択肢です。
  • まあ、プロトタイピングツールを選択する際には、忠実度を考慮する必要もあります。
  • 考慮すべきもう一つの要因は、プロトタイピングツールが設計プロセスにどれだけ適合するかを確認することです。 最近では、ユーザーが設計中に頻繁にツールを切り替える必要がある場合に備えて、多くのプロトタイピングツールがSketch、PS、Facebook、Slackなどの他のツールと統合されています。facebook、Slackなどの多くのプロトタイピングツールが統合されています。

  全体的に、私はこれらのヒントは、あなたが適切なツールを選択するのに役立つことを願っています。

  3つの最高の低忠実度プロトタイピングツール

  ここでは、あなたの参考のための3つの最高の低忠実度プロトタイピングツールがあります：

  紙とペン

  

  最速でシンプルなツールで、ペンと紙は簡単かつ迅速にあなたのアイデアを描くのに役立ち、また、チームメンバー間の内部議論を容易にします。 私は時々プロトタイピングソフトウェアを使用して描画する必要がある場合でも、私は通常、最初に私のアイデアを明確にするためにペンや紙を使

  :

  • 完全に無料
  • 高速
  • 簡単に起動

  短所:

  • スマートなインタラクションやアニメーションはありません
  • すべてのアイデアを明確に示すことはできません

  Mockplus

  

  mockplusは、近年注目を集めている強力な低忠実度のプロトタイピングツールです。 それはあなたが、インタラクティブなプロトタイプに設計アイデアを翻訳テスト、共有し、簡単にそれらを反復することができます。 そのチーム共同および管理特徴はまたあなたの仕事の効率を楽に改善するのを助ける。

  :

  • 200以上の事前構築されたコンポーネントと3000以上の事前設計されたアイコンを提供する
  • シンプルなドラッグアンドドロップでの対話を作成する
  • ページとプロトタイプをエクスポートするための多くのオプションを提供する
  • 多数のサンプルとプロジェクトを提供する
  • オンラインまたはモバイルでプロトタイプを共有およびテストするための多くの方法を提供する
  • プロトタイプをオンラインでコミュニケーション、コメント、コラボレーションする

  :

  • 完全に無料ではありません

  Balsamiqモックアップ

  

  Basamiqは、ホワイトボード上でデザインのアイデアを直接スケッチすることができ 設計の構造と全体的なコンセプトにのみ焦点を当てる場合には、本当に便利です。

  :

  • 内蔵の手描きUIライブラリを提供
  • デザインをPNG/PDF画像に直接エクスポート

  短所:

  • デザインのプロトタイピング中に基本的な相互作用が不足している

  2 最高の高忠実度プロトタイピングツール

  Marvel App

  

  Marvel appは、オンラインで協力してワイヤーフレーム、プロトタイプ、モックアップを作成することをサポートする強力な高忠実度プロトタイピングツールです。 それはあなたが直接（JPF、GIFやPSDを含む）画像をアップロードし、すぐにインタラクティブなプロトタイプを作成するためにそれらのためのアニメーシ

  Mockplus Cloud

  

  Mockplus Cloudは、プロダクトマネージャー、デザイナー、開発者が自動車の仕様、アセット、コードスニペットとオンラインで協力できるプロのオンライ

  オールインワンの高忠実度プロトタイピングツールとしても使用されています。 Sketch/PS/Adobe XDからアセットや仕様の詳細を含むデザインを簡単にアップロードしたり、豊富な対話コマンドを追加してインタラクティブで忠実度の高い

  製品チームでは、新しく作成されたプロトタイプを一つのリンクで共有し、リアルタイムでフィードバックを得ることもできます。

  要するに、最近では、はるかに多くのユーザーを引き付けるために、できるだけ多くのユーザーのニーズを満たすために多くのプロトタイピングツールが作 低fiプロトタイピングツールと高fiプロトタイピングツールの間には明確な境界はないようです。

  だから、適切なプロトタイピングツールを選択するには、あなたとあなたのチームがテストのためのより多くのツールオプションを取るのが最善です。

  ラップアップ

  低忠実度と高忠実度のプロトタイピングの違いが何であっても、より良いデザインやユーザーリサーチのために低忠実度または高忠実度のプロトタイピングを選択する方法と理由は、より簡単で高速なものであるMockplusのような優れたプロトタイピングツールは、美しいインターフェイスと優れたユーザーエクスペリエンスを持つ優れたweb/アプリを作成することを意味することが多い。 この記事はとにかくあなたを刺激することを願っています。

  あなたも好きかもしれません：

  あなたはUXデザインのために必要なプロトタイピングツールは何ですか？

  プロトタイピングの利点は何ですか？ どのようにそれを最大限に活用するには？

  プロトタイピングツールのチームコラボレーション：Axure VS Mockplus

  ワイヤフレームvsモックアップvs Prototype&プロトタイピングツールの選択