ワイヤーフレームとモックアップの違いは何ですか？

ワイヤーフレームとモックアップの違いを知りたいです。違いを簡単に理解するか、両方が同じであることを明確に知ることを望んでいます。

私はそれをグーグルで検索しましたが、違いが何であるかを正確に理解できませんでした。

ワイヤーフレームは、機能性についてです。これは、設計でどのようなことができるかを示す非常に単純なスケッチです。たとえば、Webサイトのワイヤフレームには、ナビゲーション、メインボタン、列、さまざまな要素の配置が表示されます。Webサイトの青写真と考えることができます。

モックアップは、ウェブサイト：製品は、このような場合には、どのように見えるかの現実的な表現です。最終結果は、モックアップとまったく同じように見えるか、バージョンの改訂後にそのバリエーションになる場合があります。グラフィックソフトウェアを使用してモックアップを描くことを好む人もいれば、HTML / CSSで直接行う人もいます。

ワイヤーフレームにはBalsamiqを使用し、モックアップにはPhotoshop / IllustratorまたはHTML + CSS（複雑さに応じて）を使用します。

ワイヤーフレームの例：

ワイヤフレームは、位置やサイズのみを指定するために使用される基本的な形状または線です。ワイヤーフレームの目標は、要素をレイアウトに「合わせる」ことであり、要素が実際に最終設計でどのように表示されるかを示すのではなく、配置される場所のみです。

モックアップはワイヤフレームの上に構築され、さらに、タイプの選択、色の選択などを含むデザインの全体的な外観の側面を表示します。モックアップの目標は、すべての最終的な外観がどのようにレンダリングされるかをできるだけ近くに表示することです。

@Yiselaの詳細な返信をサポートし、次のプレゼンテーションで公開されているこのビジョンを追加します

以下は、Marcin Trederによる記事の短い要約です。

ワイヤーフレーム

ワイヤフレームは、デザインの忠実度の低い表現です。以下を明確に示す必要があります。

1. •コンテンツの主なグループ（何？）

2. •情報の構造（どこ？）

3. •ユーザーの説明と基本的な視覚化–インターフェイスの相互作用（方法は？）

4. それらを設計のバックボーンと考え、ワイヤフレームには最終製品のすべての重要な部分の表現を含める必要があることを忘れないでください。

モックアップ

1. モックアップは、中〜高忠実度の静的なデザイン表現です。多くの場合、モックアップは視覚的なデザインドラフトです。
2. 情報の構造を表し、コンテンツを視覚化し、静的な方法で基本的な機能を示します
3. プロジェクトの視覚的な側面を実際に確認するように人々を励ます

ワイヤフレームは、フレームワーク、情報階層の定義、ワークフローのデモンストレーション、画面の詳細、コンポーネントの動作方法の説明（注釈）の定義に使用されます。アプリケーションまたはサイトの複雑さに応じて、ワイヤフレームは別の要件に基づいて構築する必要があります。プロセスモデル。ワイヤフレームを使用してクライアントから要件を引き出し、最終的にクライアントで要件を確認できます。ワイヤフレームは、サイトまたはアプリケーションの構造の視覚モデルです。使用されるフォント、パディング、色、スタイルなどを定義しません。それらは拡大縮小されず、トーンやグラデーションもありません。これらはすべて、クライアントと通信する必要があります。そのため、クライアントは、他の要件成果物とともに、ワイヤフレーム成果物のプロセスとコンテキストを理解します。

モックアップは通常、Photoshopで作成され、確認済みのワイヤフレーム配信の構造またはフレームワークに基づいていますが、明確なスケジュールと承認プロセスを備えた明確な配信です。モックアップまたはコンプ、視覚的なスタイル、またはインターフェイスのトーンを定義します。モックアップが承認されると、CSSコード、スタイルガイド、グラフィカルアセットなど、多くの追加要件または作業成果物に変換されます。

ワイヤーフレームがモックアップになることはありません。モックアップをワイヤーフレームとして使用することもできますが、これは必要な修正に影響を与え、予算に大きな影響を与えます。

出典：コミュニケーションデザイナー、UXリード、ウェブサイトやアプリケーションを開発する企業環境のビジネスアナリストとして15年。そして最愛のBABOK

デイヴ・ケイの回答についてコメントする評判はまだないので、直接回答しなければなりませんでした。Rachuruの素晴らしい回答と比較して、彼の回答に注目することは非常に価値があります。

現代のフレーズの解釈では、素人の説明はそうであり得たはずです;

1. ワイヤーフレームは「デザイン」です
2. モックアップは「レンダリングされたデモ」です

実際の用語は80年代に由来します。当時は、リアルタイムの画像を生成する計算能力はありませんでしたが、リアルタイムで画面上に浮かぶグラフィックの「ワイヤフレーム」を見ることができました。適切な「デモ」には一晩のレンダリングなどが必要でした

これらの時代では、「ワイヤフレーム」はスケルトンの「設計」を表し、優れた反復設計プロセスにより、人々はワイヤフレームからモックアップを生成し、フィードバックを得てワイヤフレーム設計を改善するためにそれを渡します。

残念なことに、最近では、プログラマが直接使用できるものを使用しないモックアップを設計できるようにする多くのソフトウェアが顧客に利用可能です。多くの場合、彼らのデザインは他の人によって構築されるため、モックアップはプログラマーに戻されて壮大なデザインに組み込まれるのではなく、個人的に増強されます。

デイブが言及についてもう少し丁寧になっていたのは事実上だと思います:-)

キース

簡単に言うと：

ワイヤフレーム：スケルトン/構造

モックアップ：肌/視覚的側面

一部の人々が指摘しているように、最近ではモックアップがプロトタイプに融合している間、ワイヤーフレームがより重要になっています。

人々が行っていない点を1つ追加する必要があります...これらの回答はすべて、適切な技術的な説明を提供しますが、作業環境では、違いは必ずしもそれほど明確ではありません。モックアップに機能を追加する企業もあれば、ワイヤフレームに高レベルの設計要件を追加する企業もあります。あなたが最初に行く会社がこれらのどちらでもない何かをするかもしれないので、私は物事が「あるべき」であるという答えに固執しすぎることに注意するでしょう！

私の知識によると、モックアップ画面はUI、ルックアンドフィールの最終的な表現です。通常のフローと代替フローになります。これは、主にHTMLとCSSで作成された一種のWebプロトタイプになると思います。その後、主にHLDフェーズで作成し、クライアントから提示して受け入れます。

比較するワイヤフレームは、一般的な説明があるフロー図のように集中します。イベントのクリックで何が起こるか、イベントを変更するなど、詳細な説明がほとんどない場合。それらはほとんどSA / BAによって行われ、モックアップはデザイナー/開発者によって行われます。さらに、特定のUIに関連するDBなどのワイヤフレームに技術仕様を添付する人もいます。

ただし、プロジェクトごとに異なります。私たちの場合、ワイヤーフレームは真実の源です。

これは私がそれらの違いとして理解していることです

ワイヤーフレームはモックアップにすることができます。モックアップはワイヤフレームと見なされます。他の人が述べたように、それらは時々別々の物ですが、それらはしばしば同じものではありません。

かつて、Visioが作成するワイヤーフレームを検討することがあります。そして、MockupsはPhotoShopが作成するものです。

しかし、今日、私たちが持っているツールの範囲で、それらはしばしば同じ実際の文書です。最初は、ワイヤフレーム（純粋なレイアウトと機能）として開始されますが、時間がたつにつれて、モックアップと見なされるほど詳細になります。また、Axureなどのインタラクティブツールを使用している場合、ある時点でプロトタイプと見なすことができます。

したがって、多くの重複があるスペクトルです。

ワイヤーフレーム

モバイルアプリケーションまたはWebアプリケーションを設計する場合、最初に各ページの外観のスケッチが必要になります。設計者は、ビジネスコンセプトにのみ基づいて、アプリケーションフローと設計の最初のドラフトを定義できます。設計の最初のドラフトには、外観、スケッチのボタン、フィールドの配置などのスケッチがあります。のために。

モックアップ

モックアップはより生き生きとした写真です。視覚的に魅力的で、色、フォント、テーマ、ボタン、ロゴなどがあります。この段階で、フィールド、ノート、フォントタイプ、ナビゲーションメニューなどのラベルがデザインで指定されます。これは、モバイルアプリがどのように表示されるか、またはWebページがどのように表示されるかを正確に表しています。

この有益な記事で、ワイヤフレームとモックアップの詳細な比較を見つけることができます：ワイヤフレーム、モックアップ、プロトタイプの違い