もともと「ワイヤーフレーム」という用語は、製品のデザインや開発で使用されるような、3次元オブジェクトの視覚的な表現を指していました。現在では、コンピューターアニメーションにおける3Dモデリングや、2Dのウェブページやモバイルアプリのデザイン・開発を表すためにも使用されています。
ウェブサイトのワイヤーフレームの価値、ウェブやアプリの初期デザインにおけるUXとUIの役割、そしてワイヤーフレームソフトウェアがこれらすべてをいかに簡単、迅速、かつ効率的にするかについて、さらに詳しく読み進めていきましょう。
ワイヤーフレームとは？
ウェブデザインにおけるワイヤーフレーム（またはワイヤーフレーム図）とは、単一のウェブページやモバイルアプリの画面の構造と機能を、グレースケールで視覚的に表現したものです。ワイヤーフレームは、ビジュアルデザインやコンテンツを追加する前に、ページの基本構造を確立するために開発プロセスの初期段階で使用されます。紙やソフトウェアアプリを使用して作成することも、HTML/CSSに直接追加することもできます。ワイヤーフレームは意図的に視覚的な詳細を省いているため、洗練されたビジュアルやコードに投資する前に、レイアウト、階層、動作を明確にする計画のための成果物として最適です。
UXワイヤーフレームを使用して、以下の質問に対応しましょう：
ワイヤーフレーム、モックアップ、プロトタイプの比較
これらの用語は混同して使用されることがよくありますが、それぞれ異なる忠実度（フィデリティ）で異なる目的を果たします。ワイヤーフレーム図がモックアップやプロトタイプと異なるのは、レイアウトと機能に焦点を当てた低忠実度（ローファイ）の表現を意図しているためです。ワイヤーフレームは、提案された機能と製品がどのように動作するかを示す設計図と考えてください。シンプルに保つことで、進めながら計画をレビューし、洗練させることが容易になります。
ほとんどのワイヤーフレーム図の例には、色がほとんどなく、最も基本的な詳細のみが含まれるシンプルな線とボックスが含まれています。これらのシンプルな図形は、メニュー、ボタン、コンテンツ、ナビゲーション機能などのUX要素を表します。たとえば、「ロゴ/ホームページ」というテキストが入ったシンプルな長方形は、会社のロゴが配置される場所と、そのロゴがウェブサイトのホームページにリンクすることを表現できます。
対照的に、モックアップは機能しないモデルに近いものです。グラフィックス、色、ブランディング、フォントなど、最終的な製品がどのように見えるかについて、より完全なイメージを提供しますが、UI機能は有効になっていません。
プロトタイプは、最終製品の完全に機能するバージョンに近いものです。機能や実用性を実証するだけでなく、UXのテストや品質管理にも使用できます。
ウェブサイトおよびアプリ開発におけるワイヤーフレームの価値
実際の業務において、チームはいくつかの共通する方法でワイヤーフレームの価値を実感する傾向があります。
チームの集中力を維持し、軌道に乗せる
ワイヤーフレームは、ウェブサイト開発に関わるすべての参加者の認識を一致させます。これにより、デザインがより慎重に調整され、コンテンツ作成がよりスムーズになるだけでなく、開発チームが構築内容をより深く理解できるようになります。また、プロセスの後半でその場しのぎの修正、訂正、または完全な再構築を余営業なくされる事態（いわゆる「スコープクリープ」）を防ぐこともできます。
すべての関係者がワイヤーフレームに示されたコンテンツと機能を承認すれば、チームは自信を持って進めることができます。プロジェクトの進行に伴い、ワイヤーフレームをリファレンスとして使用することで、さまざまなチームが割り当てられたタスクに集中し続けることができます。
ポジティブなブランド体験の提供
また、ワイヤーフレームは、ユーザーに届く前に混乱を招く体験やストレスの溜まる体験をチームが捉えるのに役立つため、ブランドや評判のリスクを軽減します。ウェブやアプリケーションのUXとUIが適切にデザインされている場合、誰も特に気に留めることはありません。製品は機能し、全員が満足します。しかし、不適切なデザインを提供してしまうと、その悪影響によりブランドや評判に永続的な損害を与える可能性があります。アプリやウェブサイトのワイヤーフレームを作成することは、優れたUXデザインを達成するための重要なステップです。
目標に沿ったサイトやアプリの構築の確実化
クリエイティブな要素による影響を最小限に抑え、機能を明確に確認できるため、関係者はプロジェクトの他の側面に集中できます。ワイヤーフレーム作成は、機能がどのように動作し、どこに配置され、どれだけのメリットをもたらすかを示すことで、機能がどのように実装されるかについての期待値を設定します。サイトの目標に合致しない場合、機能が削除されることもあります。
使いやすさ（ユーザビリティ）への集中
ワイヤーフレーム作成により、リンク名、コンバージョンへの経路、使いやすさ、ナビゲーション、機能の配置を客観的に見直すことができます。ワイヤーフレームは、サイトのアーキテクチャや機能の欠陥を特定し、ユーザーの視点からフローを可視化するのに役立ちます。初期段階でユーザビリティに焦点を当てることが特に重要なのは、コードを書き始めた後よりも、デザイン段階で問題を修正する方がはるかにコストが安く、簡単だからです。
コンテンツ成長のキャパシティの把握
近い将来にサイトが成長することが分かっている場合、ウェブサイトは、サイトのアーキテクチャ、ユーザビリティ、デザインへの影響を最小限に抑えながら、その成長に対応できる必要があります。ワイヤーフレーム作成は、こうしたコンテンツ成長の重要な機会と、それをどのように組み込むかを明らかにすることができます。
初期段階でのフィードバックの取り込みとコラボレーションの促進
新しいプロジェクトや製品のリデザインを開始する際には、間違った方向に開発を進めて多くの時間と費用を無駄にしないよう、初期段階でインプットやフィードバックを得る必要があります。ワイヤーフレームは、アイデアを迅速に伝え、より優れた製品をデザインするための初期フィードバックを得るための優れた方法です。
クライアントや他の製品関係者と連携することで、インターフェースの見た目、機能、含めるべき要素について共同で検討し、合意を形成できます。
ワイヤーフレーム図をクライアント、デザイナー、開発チーム、および製品開発に関わるその他の人々と共有することで、フィードバックやコラボレーションのための開かれた対話が促され、プロジェクトの初期段階で全員の認識を確実に一致させることができます。
アジャイル開発の強化
ワイヤーフレームはアジャイル環境でうまく機能します。プロダクトマネージャーや開発者と協力して、各イテレーションでデザインのどのセクションを開発すべきかを特定できます。製品を反復的な塊で開発することで、フィードバックを得やすくなり、必要に応じてデザインや開発プロセスを洗練させることができます。開発に多くの時間を費やす前に、早い段階でフィードバックを得る方が常に得策です。
時間と費用の節約
適切にデザインされたワイヤーフレームは、時間と費用を節約できます。開発チームが構築する製品全体をより明確に理解でき、後から問題を修正する必要を回避できるためです。チームは、機能を適切に動作させるために、開発の最終段階でその場しのぎの解決策を講じる必要がなくなります。
ワイヤーフレーム図を使用するその他のチーム
ワイヤーフレームは役割を超えた認識の一致をサポートするため、デザイナーだけでなく、より広範な製品チームの共有リファレンスとして特に有用です。
クライアントと関係者
ワイヤーフレームは、クライアント（あるいはマーケティングチームなどの社内関係者）に、開発内容に関する分かりやすい全体像を提供します。レビュー担当者は、デザインが期待通りであるかを迅速に評価し、不足しているものがないかを確認し、利用可能なアクションを調査し、インターフェース要素がどのように組み合わされているかを確認できます。
クライアントにワイヤーフレームを見せることで、これまで見落とされていたり検討されていなかった潜在的な問題や不足している項目を浮き彫りにすることができます。コードが書かれた後に問題を修正しようとするよりも、ワイヤーフレームの構築中に問題を修正する方が、はるかに簡単でコストもかかりません。
プロジェクトマネージャー
プロジェクトマネージャーは、すべての関係者の認識を一致させるためにワイヤーフレームを使用します。ワイヤーフレームを全員と共有することで、プロジェクトがどこに向かっているかを全員が把握しやすくなり、発生する可能性のある問題を特定し、改善を提案し、構築内容について合意することが容易になります。
プロジェクトマネージャーは、ワイヤーフレームを進捗を確認し、すべてが合意通りに実装されているかを確認するためのチェックリストとして使用できます。
開発者
開発者は、技術的な要件を理解し、特定の機能を実装する必要がある場所を特定するためにワイヤーフレームを使用します。ストーリーボードの構築に使用される複数のワイヤーフレームは、ユーザーのインタラクションがどのように連動すべきか、または連動できるかを開発者が判断するのに役立ちます。ワイヤーフレームを使用したストーリーボーディングにより、開発者はデータがどのように流れるべきかを把握し、潜在的なボトルネックを特定することができます。
UX、UI、およびワイヤーフレームデザイン
ユーザーエクスペリエンス（UX）デザインは、顧客とサイト、アプリ、製品とのインタラクションにおけるユーザビリティと楽しさを向上させることで、顧客のロイヤルティと満足度を高める手法です。ユーザーインターフェース（UI）デザインはグラフィックデザインに近いものですが、その責任はやや複雑です。一般的に、ユーザーエクスペリエンスデザインはユーザーインターフェースデザインよりも先に行われます。UXとUIは、ワイヤーフレームのデザインプロセスにおいて重複する傾向があり、また重複すべきです。焦点を当てる領域には以下が含まれます：
情報アーキテクチャとワイヤーフレーム
ウェブサイト開発とワイヤーフレーム作成の全体的なプロセスの一部である情報アーキテクチャは、サイトやモバイルアプリの将来のユーザーが理解できる方法で情報を配置し、優先順位を付けることです。『Information Architecture for the World Wide Web』によると、4つの基本的な要素があります：
-
組織化のスキームと構造：情報を分類し、構造化する
-
ラベル付けシステム：情報を表現する
-
ナビゲーションシステム：情報内を移動する
-
検索システム：情報を探し、見つける
優れた情報アーキテクチャは、会社の目標に基づいた構造、コンテンツ、デザインの全体像に関するコンテンツ戦略を策定するための包括的なビジネス分析から始まります。分析と戦略が正しいことを確認するために、ワイヤーフレームとペーパープロトタイプは重要な第一歩です。プロトタイプやワイヤーフレームのテストは、デザインプロセスの初期段階でユーザーからフィードバックを得るための最良の方法であり、サイトの公開後にコストのかかるリデザインが発生するのを防ぐのに役立ちます。プロトタイプやワイヤーフレームのテストは、パフォーマンスやユーザーの好みの観点からさまざまなデザインを評価し、最高の全体的な製品を作成するのにも役立ちます。
ワイヤーフレームの段階における情報デザインは、さまざまなタイプのユーザーが最初に何を見る必要があるか、そしてどのようなアクションをとる可能性が高いかを予測することでもあります。たとえば、ウェブサイトでメッセージングサービスを提供している場合、サイトを訪れるほとんどのユーザーは、リピーターと新規訪問者の2つのカテゴリーのいずれかに分類されます。リピーターはサインインを希望する可能性が高く、新規訪問者はアカウントを作成するか、単にサービスについて詳しく知りたいと考えるかもしれません。ホームページでは、それぞれのタイプの訪問者を考慮し、それぞれの目標を達成するのに十分な情報を提供する必要があります。おそらく、この情報はボタン（ログイン、新規登録、詳細情報など）を介して伝えられます。情報デザインとは、何を含めるか、それともどこに配置するかを決定することです。
ナビゲーションデザインとワイヤーフレーム
ナビゲーションシステムには、ユーザーがページからページへ移動できるようにする画面上のさまざまな要素が含まれます。ナビゲーションデザインは、ユーザーがナビゲーションの選択肢を自然に理解できるように、リンク間の関係を明確にする必要があります。通常、ウェブサイトは、グローバル、ローカル、補助、コンテキスト、コーテシーナビゲーションなど、複数のナビゲーションシステムを提供します。
その名の通り、ナビゲーションデザインはユーザーがアプリやウェブサイト内を移動する方法を決定します。特定の画面から、ユーザーは他の多数の画面に移動できます。しかし、それを伝えない限りユーザーは気づきません。ドロップダウンメニュー、クリック可能なリンク、スクロールバーはすべて、ユーザーが製品内をナビゲートするのに役立つ視覚的要素の例です。
ユーザーインターフェースデザインとワイヤーフレーム
UIデザインでは、ユーザーが効率性と使いやすさを最大限に高める方法でシステムの機能とインタラクションできるようにするインターフェース要素を選択し、配置します。一般的なUI要素には、ボタン、テキスト入力フィールド、チェックボックス、メニュー、ラジオボタンなどがあります。
インターフェースデザインは、情報、ナビゲーション、その他ワイヤーフレーム内にあるものすべてを1つにまとめます。ナビゲーションデザインと情報デザインの双方に、ボタンやメニューなどの画面上のコンポーネントがあります。インターフェースデザインとは、テキストボックス、ヘッダー画像、サイドバーなど、要素がユーザーインターフェース全体にどのように組み込まれるかを指します。
ワイヤーフレームの種類
ワイヤーフレームには4つの異なる種類があります：
-
基本的なワイヤーフレーム：低忠実度（ローファイ）レンダリングとも呼ばれ、通常は白黒の非常にシンプルなページの概略図です。
-
注釈付きワイヤーフレーム：基本的なワイヤーフレームに幅広い詳細を追加したものです。注釈とは、通常、ワイヤーフレームの側面または下部にある短いメモのことで、ワイヤーフレーム上の各項目について説明し、通常はコンテンツと機能の領域ごとに分かれており、各項目の理由と目的を（簡潔に）示します。
-
ユーザーフローワイヤーフレーム：注釈だけではサイトやアプリのユーザーがページからページへどのように論理的にコンテンツを移動するかを示すのに不十分な場合、さらに情報が必要になることがあります。これらのユーザーフローワイヤーフレームは、完全にインタラクティブなワイヤーフレームの静的なビューにすることもできますが、主要なユーザーフローまたは一連のユーザーフローを示すためのスライドショーや連続したワイヤーフレームのコレクションを含めることもできます。
-
インタラクティブな高解像度ワイヤーフレーム：個々のワイヤーフレーム内またはワイヤーフレーム間で、インタラクション（タップ、クリック、スワイプなど）を体験できます。完全なモックアップや実稼働プロトタイプに進む前にインタラクションを追加することで、デザイナーや開発者の時間を節約できます。このバリエーションのワイヤーフレームは、プレゼンテーションやグラフィックデザインのソフトウェア、またはワイヤーフレーム作成やプロトタイプ作成のソフトウェアでのみ作成できます。
シンプルなワイヤーフレームをデザイン・作成する方法
ワイヤーフレームの基本的なコンポーネントを確認したところで、これらをすべて組み合わせてシンプルなワイヤーフレームをデザイン・作成する方法を見ていきましょう。
また、ワイヤーフレームの作成に関しては、開始するのが早ければ早いほど良いということを覚えておいてください。
-
ウェブサイトの最終目標を考え、その目標を念頭に置いてデザインします。ユーザーがインターフェースとどのようにインタラクションするかを考えます。
-
まずは、ウェブページをヘッダー（ユーザーがページの最上部で最初に目にするもの）、ウェブページの本文、そして通常は重要度の低い情報を保持するフッターの3つの部分に分割した、シンプルな低忠実度（ローファイ）の表現から始めます。
-
次に、ナビゲーションについて考えます。ユーザーがコンテンツエリア、検索、ユーザーログインなどのサイトの主要セクションにアクセスできるように、ボタンやリンクを追加します。
-
分かりやすくするために、ワイヤーフレームに注釈を付けます。
この段階に達したら、次のステップに進む前にワイヤーフレームを関係者と共有できます。最初のワイヤーフレームは紙やホワイトボードに手書きで描くこともできますが、最終段階に達したら、通常はソフトウェアを使用してワイヤーフレームをさらに発展させます。
単一のランディングページ以外のものをデザインする場合は、個々のレイアウトを描き始める前に、必要となる一連の画面を計画することも役立ちます。アプリのワイヤーフレームを作成する場合でも、ウェブサイトの場合でも、確実に言えることが1つあります。それは、複数のワイヤーフレームを作成する必要があるということです。ワイヤーフレーム作成において重要なのはユーザーフローです。ユーザーはアプリ内をどのように移動しますか？最終的にたどり着いてほしい特定の場所はありますか？
プロジェクトによって必要なワークフローは異なりますが、一般的なルールとして、最初のワイヤーフレームはプロジェクトライフサイクルの開始フェーズまたは計画フェーズのいずれかで作成する必要があります。図の作成を始める前に、ユーザーが取る可能性のあるルートをマッピングし、遭遇する可能性のある新しい画面をすべてリストアップします。画面が追加されるたびに、追加のワイヤーフレームが必要になります。また、プロジェクトが初期の探索から具体的な計画へと移行するにつれて、ワイヤーフレームの忠実度も進化する傾向があります。
この事前作業はやりすぎに思えるかもしれませんが、それだけの価値はあります。ユーザーフローを明確に把握しないままワイヤーフレームの作成プロセスに飛び込むと、混乱を招く乱雑な図になってしまいます。
より詳細なステップバイステップのワークフロー
上記の4つのステップよりもさらに詳細なプロセスが必要な場合は、以下のワークフローが、大まかなレイアウトから共有可能な高忠実度のワイヤーフレームへと移行するのに役立ちます。
1. 基本的な図形の追加を開始する
徹底的な計画を立てたら、ワイヤーフレームのドラフトを作成する準備が整います。まず、図の「フレーム」を選択することから始めます。アプリのワイヤーフレームを作成する場合は、モバイルデバイスの画面に類似した図形を選択します。ウェブサイトのワイヤーフレームの場合は、ブラウザウィンドウに類似した図形を選択します。ほとんどのデジタルワイヤーフレームプラットフォームでは、図形ライブラリに両方の基本的なフレームが用意されています。
Next、ワイヤーフレームの最大の要素を追加します。これらは、ヘッダーバー、サイドカラム、テキストボックスなどの項目を表す基本的な図形やコンテナである必要があります。この段階でテキストや画像を含める必要はありません。一般的なレイアウトを確立するだけで十分です。作成する必要がある各ワイヤーフレームに対して、このプロセスを繰り返します。
2. ボタンとリンクの追加
ワイヤーフレームのレイアウトが確定したら、いくつかの機能を追加します。製品の任意の画面には、ユーザーを新しい画面に誘導するボタンがいくつかあるはずです。前のステップでこれらを図形として追加しているかもしれませんが、追加していない場合は、各ボタンを表す基本的な図形を選択して今すぐ追加してください。ボタンに表示されるテキスト（例：「ホーム」など）を追加することもできます。使用しているワイヤーフレームプラットフォームにリンク機能が含まれている場合は、各ボタンを誘導先のワイヤーフレームにリンクさせます。
3. フィードバックの収集と編集
ここで、フィードバック、修正、承認を得るために、ワイヤーフレームを他の関係者と共有します。
4. 詳細の追加
この時点で、作成した図は中忠実度（ミッドファイ）のワイヤーフレームになっているはずです。基本デザインが承認されたら、詳細の洗練を開始できます。画像とテキストを追加します。ページ上のさまざまな要素を区別するために色を使用しますが、グレースケールにとどめてください。すべてがピクセル単位で適切なサイズであることを確認します。
5. ワイヤーフレームの共有
これで、機能的な高忠実度（ハイファイ）のワイヤーフレームが完成しました。プロジェクトの関係者や関連チームと共有しましょう。
ワイヤーフレームのテンプレートと例
ワイヤーフレームのテンプレートを使用すると、新しいウェブページやアプリケーションをより迅速にデザインできます。サイトやアプリのデザイン用のほとんどのソフトウェアアプリケーションでは、多種多様なテンプレートが提供されています。
どのような業界に属していても、どのプラットフォーム向けにデザインしていても、ワイヤーフレームは完璧なユーザーエクスペリエンスをデザインし、実行するのに役立ちます。ユーザーフローやタスクフローと組み合わせたものなど、これらのワイヤーフレームの例をご覧ください。
