ウェブサイトのインタラクションデザイン: ワイヤーフレーム、プロトタイプ、ビジュアルドラフトの違い

【編集者注】この記事の翻訳者は@小轰同学です。この記事では、ワイヤーフレーム、プロトタイプ、モックアップの厳密な機能上の違いを紹介します。

情報技術（非デザイナー）の分野で働く友人の多くは、デザインを提供するときにこれらの用語を混同し、すべて同じもの、つまり創造性を表現するワイヤーフレームの手描きのデザイン案を表していると考えています。したがって、職場で自分の考えをよりうまく表現したいのであれば、これら 3 つをより深く理解する必要があります。

概念が混乱すると問題が生じます。UX デザイナーの作業を区別できず、混乱してしまうことがよくあります。「なぜこのボタンをクリックできないのか？」「ここをクリックできるとは知らなかった！」このような質問は、ユーザーエクスペリエンスプロジェクトではよくあることです。ワイヤーフレームをプロトタイプと間違えることは、設計図（建物の建設方法を指示する計画）とウォークスルーの違いを混同するのと少し似ています。ショールームで暮らすことはできますが（その美しさは、部屋の美しさを視覚的に伝えることができることです）、設計図の上に快適に横たわることはできません。設計図は単なる一枚の紙です。

建築において、ショールームと設計図はそれぞれ異なるコミュニケーションの目的を果たします。

建物をどのように建設すべきかを詳細に記した設計図または建設計画

デモホールでは、将来の居住者にテストと体験の機会を提供します

ショールームと設計図の共通点は、どちらも最終製品である建物（家）を表している点です。ワイヤーフレーム、プロトタイプ、モックアップについても同様です。これらのドキュメントはすべて、最終製品を表現するさまざまな方法です。

信じられないかもしれませんが、私が UX デザインチームに最初に教えることの 1 つは、これら 3 つの概念を区別することです。これはとても重要だからです。

次に、どのような状況でどの単語を使用すればよいかがわかるように、3つの違いを詳しく説明します。

ワイヤーフレーム

1. ワイヤーフレームとは何ですか?

ワイヤーフレームは、以下の内容を明確に表現する低忠実度の設計図です。

内容概要（内容）

情報構造（どこ）

ユーザーインタラクション動作（操作方法）の説明

ワイヤーフレームは、単なる意味のない線とボックスの集まりではありません。まあ、そう見えるだけですが。ワイヤーフレームは、最終製品の重要な部分すべてを運ぶ、デザインのバックボーンおよび中核と考えることができます。

ワイヤーフレームは、忠実度と速度のバランスをとるのに役立ちます。描くときは、細部に注意を払う必要はありませんが、デザインのアイデアを表現し、重要な部分を見逃さないようにする必要があります。これは、プロジェクトのデザインと、一緒に作業するチームメンバー (開発エンジニア、ビジュアルデザイナー、コピーライター、プロジェクトマネージャー) を理解するのに役立つチャネルを開くようなものです。もっとわかりやすく言うと、すべての通りを示す市街地図を設計していますが、描画は簡略化されています。地図を見ると、街の枠組みは分かりますが、街の美しさは垣間見ることができません。

ワイヤーフレームを描くときに重要なのは「速さ」です。チームメンバーとコミュニケーションを取り、もっと多くのことを考えるようにしてください。美的な視覚効果は可能な限り簡素化する必要があります。黒、白、グレーは定番の色ですが、ハイパーリンクを表すために青を使用することもできます。ワイヤーフレームの準備に多くの時間を費やす場合（アイコンの選択、画像のアップロードなど）、よりシンプルなアプローチ（プレースホルダーの使用：X と適切な説明が付いた画像など）を試してください。私たちはワイヤーフレームを低忠実度デザインと呼ぶことに慣れています。

覚えておいてください、優れたワイヤーフレームはデザインのアイデアをクリスタルのように明確かつ簡潔に表現し、メンバー間でアイデアをシームレスに伝えることができます。

2. ワイヤーフレームを使うタイミング

ワイヤーフレームは、プロジェクトを説明するためによく使用されます。静的なデザインのため、インタラクションは一度に 1 つの画面でのみデモンストレーションできるため、必ず手順を含めてください。（簡単な説明や複雑な技術文書への添付でも、必要であれば問題ありません）

素早く簡単に描けるため、チーム内のコミュニケーションなど、非公式な場面でもよく使用されます。開発者が何かの作り方を尋ねてきたら、簡単なワイヤーフレームで答えましょう。ワイヤーフレームはユーザーテストには適していませんが、テスト方法よりもユーザーの意見を重視する場合は、フィードバックを収集するのに役立ちます。

近年ではやや女性蔑視的な用語ではありますが、ワイヤーフレームは全体的な設計プロセスにおいて非常に強力な役割を果たしており、複雑なプロジェクトの初期段階では不可欠です。

プロトタイプ

1. プロトタイプとは何ですか?

プロトタイプはワイヤーフレームと混同されることも多いですが、最終製品を表現し、インタラクティブなデザインをシミュレートする中程度の忠実度のデザインです。プロトタイプでは、ユーザーが次のことができる必要があります。

インターフェースからコンテンツとインタラクションを体験する

最終製品のように主要なインタラクションをテストする

プロトタイプは、最終製品とまったく同じように見えなくても、できる限り最終製品に近いものをシミュレートする必要があります (グレーのワイヤーフレームデザインは絶対に避けてください)。最終製品とのエクスペリエンスの一貫性を保つために、インタラクションは慎重にモジュール化する必要があります。

プロトタイプの背後にあるロジックは、インタラクションの形式に依存すべきではありません。プロトタイプ作成コストを削減し、開発をスピードアップします。

2. プロトタイプを使用するタイミング

プロトタイプは、潜在的なユーザーを対象としたテストによく使用されます。正式に開発段階に入る前に、最終製品に最も近い形で製品の使いやすさを検討します。

ご想像のとおり、プロトタイプは、インターフェースを理解するために「読者」側にいくらかの努力を必要とするため、優れたドキュメントになることはほとんどありません。しかし、別の観点から見ると、インターフェースとしてのプロトタイプの直感性と理解のしやすさにより、最も効率的な設計ドキュメントになります。

プロトタイピングは他のコミュニケーションメディアに比べてコストがかかり、時間がかかることに注意してください。次の開発フェーズで再利用できるようにプロトタイプを作成することをお勧めします。 (まあ、HTML とスタイルシートのコードを自分で書く必要があるかもしれませんが) シンプルなプロジェクトであれば、かなりうまく機能します。（「再利用」を考慮すると作画コストが増大し、原型本来の意図から外れてしまいます。再利用は推奨されません。-訳者注）

適切に設計され、ユーザーテストと組み合わせれば、プロトタイプは非常に価値のあるものになります。

ビジュアルモックアップ

1. ビジュアルドラフトとは何ですか?

モックアップは、忠実度の高い静的設計図です。一般的に、ビジュアルドラフトとは、ビジュアルデザインの大まかなドラフトまたは最終ドラフトのことです。優れたビジュアルドラフト:

エクスプレス情報フレームワーク、静的デモコンテンツと機能

チームメンバーが視覚的な視点からプロジェクトをレビューできるように支援する

人々は何年もの間、ビジュアルドラフトとワイヤーフレームを区別することができませんでしたが、これは特定のソフトウェア会社の名前と密接に関係しています。ふぅ〜

2. ビジュアルモックアップを使用する場合

ビジュアルモックアップは、関係者の同意を得ようとしている場合に特に役立ちます。また、ユーザーからのフィードバックを収集するのにも最適です。

これをデザインドキュメントに追加してください。間違いなく最後の仕上げになります。

要約する

オリジナルリンク: http://cuikai-wh.com/blog/2460