ワイヤーフレーム、モックアップ、プロトタイプの違いは何ですか？
日付
2019/05/19
カテゴリー
ウェブサイトやアプリのデザインを行うとき、ワイヤーフレーム、モックアップ、およびプロトタイプは同義語として使用され、人々はしばしば混乱します。
この記事では、それらの違いを説明します。
ワイヤーフレーム
ワイヤーフレームは、デザイン／製品を提示するための低忠実度の方法であり、構造やレイアウトを効率的に概説し、デザインの本質的な視覚表現を含むことができます。ワイヤーフレームデザインは視覚的な詳細に焦点を当てる必要はありませんが、少なくともデザインのアイデアを示し、本質的な要素とコンテンツを含むべきです。ワイヤーフレームは、チームメンバーがプロジェクトをより良く理解し、物事をまとめ、全体像を見るのに役立つコミュニケーションチャネルのようなものです。
ワイヤーフレームを作成する利点の一つは、それが安価で迅速に前進する方法であるだけでなく、コミュニティのフィードバックを得るためでもあります。潜在的なユーザーやチームに見せてフィードバックを求めることができ、それによってユーザーエクスペリエンスや機能に重点を置き、見た目にとらわれないようにすることができます。
私はよく最初にノートブックで基本的なアイデアやコンセプトをスケッチし、それをAxure、OmniGraffle、Balsamiq Mockupsなどのワイヤーフレームツールに移しますが、私のワイヤーフレーム作成の武器として選ぶのはSketchです。
モックアップ
一般的に、モックアップは最終デザインを表現するための視覚的な方法であり、製品がどのように見えるかを示す高忠実度モックアップを指します。色彩の配色、視覚スタイル、タイポグラフィの最終決定を含むべきです。再度、潜在的なユーザーやチームメンバーにフィードバックを求めて、必要な変更を行うことができます。
多くのデザインツールがあり、Figma、Adobe XD、Adobe Photoshop、Sketchなどがあります。
私のデザインの武器として選ぶのはSketchですが、Figmaも使い始めました。Figmaを使い始めた主な理由は、チームのコラボレーションがより良く、より効果的だからです。
プロトタイプ
プロトタイプは通常、ユーザーインタラクションをシミュレートするモックアップで作成されます。クリック可能であり、ユーザーがユーザーインターフェース内のコンテンツやコミュニケーションを体験できるようにします。
最終製品の表現として機能し、早期にユーザーフィードバックを獲得し、デザインを迅速に繰り返すことを目的としています。プロトタイプで十分なテストと反復が終了したら、次のフェーズである開発に進むことができます。
多くのデザインツールが現在、Adobe XD、Sketch、またはFigmaのようにプロトタイピングを行うことができますが、以下は現在の業界での主要なプロトタイピングツールです。
私のプロトタイピングの武器はMarvelで、2019年にはFramerを試してみる予定です！
このグラフは、時間が忠実度に比例することを示しています。例えば、手描きのスケッチは短時間で作成できますが、忠実度は低いです。
