ワイヤー フレーム

ワイヤーフレームとはアプリ開発や Web サイトの設計においてのデザインや レイアウトなどをマッピングするための 設計図のことを指します。 見やすいアウトラインを作成することで、 サイトやアプリを簡単に見える化する ことができ、画面に必要な要素や視線誘導などを事前に確認することができるようになります。

S1_2–3_columns_filled_templates_app_wireframe_001S1_2–3_columns_filled_templates_app_wireframe_001
S1_2–3_columns_filled_templates_app_wireframe_001S1_2–3_columns_filled_templates_app_wireframe_001

5,000 万人のユーザーが信頼する Miro

ワイヤーフレームは、Web ページやアプリのレイアウトを見える化するための設計図であり、よりユーザーのニーズに寄り添ったレイアウトを作成することに役立ちます。 インターネット上にはワイヤーフレーム作成を支援するワイヤーフレームツールが 存在します、アプリや Web デザインの作業の生産性を向上するためにワイヤフレーム ツールを活用しましょう。

ワイヤーフレームとは?

ワイヤーフレームとは Web デザインやアプリ開発においてレイアウト作成に役立つ フレームワークのことを指します。サイトやアプリ上の要素をビジュアルを通して 見える化することで、追加で必要な要素や実は必要の内容、よりターゲットユーザーの 行動原理に合った視線誘導などをより簡単に特定できるようになります。 ワイヤーフレームは UX デザイナーによってよく使用され、デザインやレイアウトを 詳細にマッピングすることに活躍します。クリックボタンやドロップダウンメニューなどの実際の機能をデザインに追加する前の設計プロセスの第一段階として、よく使用されるフレームワークです。 デザインやレイアウトの他にも、以下の要素をワイヤーフレームで 見える化することが可能です:

ページ構成

ワイヤーフレームは UX デザイナーやアプリ開発者が特定のページ要素をどこに設置し、全体的なデザインをどのように見せるのかを視覚的に分析することに役立ちます。

情報アーキテクチャ(IA)

「情報アーキテクチャ(IA)」は「システム構成」、「階層的構造」、「連続的構造」 などページをよりユーザーフレンドリーにするためのサイト構造を設計することに役立つ情報のことを指します。情報アーキテクチャを分析することでユーザーに見つけて欲しい情報や一目で理解できるアイコンやリンクのデザインができるようになります。

ユーザーフロー

UX デザイナーはユーザーがページのどこを見るのかやどのようにページ上で 行動するのかを理解する必要があります。そんなユーザーフローの分析に役立つのが ワイヤーフレームです。この図を作成することで、デザイナーはユーザー視点でページをデザインすることができます。その結果、ユーザーフレンドリーなホームページや アプリを開発することができるのです。

機能概要

ワイヤーフレームは技術設計の段階に進む前に、アプリの機能を視覚化することに 役立ちます。どのように動作させたいか、それを実現するためにどのようなリソースが 必要かを確認することができます。ディベロッパーなどアプリ開発に携わる技術者が 機能概要を把握する際によくワイヤーフレームを使用します。

ワイヤーフレームの使用例

ワイヤーフレームはテクノロジーやソフトウェア開発によく使用されますが、 プロジェクト管理やプロダクト開発にも応用することができます。

UX デザインにおいてのワイヤーフレーム

UX デザインにおいてワイヤーフレームは、アプリや Web ページ内でのユーザー体験 (ユーザーフロー)に焦点を当てます。ユーザーが取る行動を見える化することで、 ユーザーが体験する可能性のある問題を事前に特定することができ、ユーザー体験の 向上を達成することができます。

プロトタイピングにおいてのワイヤーフレーム

アプリ開発ではローファイワイヤーフレームがよく使用されます。アプリ開発者や Web デザイナーはワイヤフレームを通してアプリのプロトタイプを分析することで、 簡単に潜在的な問題や改善点を特定することができるようになります。 ローファイワイヤーフレームはシンプルな設計図として機能するため、完成形のイメージが含まれることはありません。より詳細な図を作成したい場合は、ハイファイワイヤー フレームを使用しましょう。 ハイファイワイヤーフレームは、追加される予定の機能がすべて視覚的に表示されてい ます。より機能的な詳細が含まれているため、ワイヤフレーム上でもクリックすることができ、ユーザーが入力する操作にも反応します。そのため、UX デザイナーは最終的な デザインが実際のユーザー体験にどのように影響するのかを分析することができ、 ユーザーテストに役立てることができます。 一般的に、ローファイワイヤーフレームはデザインプロセスの最初のステップで 使用されます。そして、承認が降りた後にデザイナーはハイファイワイヤーフレームを 設計し、詳細な機能をデザインに追加していきます。

アプリ開発においてのワイヤーフレーム

アプリ開発用のワイヤーフレームはモバイルアプリのすべてのインターフェイス要素を 表示する際に使用されます。アプリ開発の初期段階において、ソフトウェアのフロー、 機能、デザインを計画することに役立ちます。 アプリ開発用のワイヤーフレームはよりインタラクティブであり、アプリ上での ユーザー体験を視覚化するのに最適な方法です。UXワイヤーフレームと同様に、 デザイナーやアプリ開発者はユーザーの視点からアプリを分析するためにこのワイヤー フレームを使用します。 この図を通して足りない機能や改善点がを特定した場合、アプリのリリース前にすぐに 修正することができます。

Web デザインにおいてのワイヤーフレーム

Web デザイン用のワイヤーフレームは Web サイト上の各ページを視覚的に配置したものです。ローファイワイヤーフレームよりも詳細で、最終デザインのプロトタイプのような役割を果たします。Web デザイナーはユーザーインターフェイスがどのように見えるか、ユーザーがどのように操作するかを正確に確認することができます。 また、改善点を事前に発見することにも役立つツールです。Web デザイナーは、 ユーザー視点で Web サイトの分析をすることができ、ユーザー体験に影響を与える 可能性のある技術的なエラーや不具合を視覚的に特定することができます。 このワイヤーフレームを使用することにより CTA や必要な画像など、Web サイトの情報の質を向上する要素を見つけることができ、Web サイト上でのユーザー体験を向上することができるようになります。ギャップ分析にも活躍する図であると言えるでしょう。

製品開発においてのワイヤーフレーム

通常、ワイヤーフレームはソフトウェアや Web サイトページのマッピングに使用され ますが、製品の改善点を発見することにも使用することが可能です。 プロダクトマネージャーは、ワイヤーフレームを使って開発したい製品に関して 説明することができます。目的や技術的用件、リソース、新機能などがこのような ワイヤーフレームには含まれます。製品ツリーなどが例として挙げることができます。 ルーク・ホーマンによって作成されたこの手法は、プロダクトマネージャーと開発者が 機能要求を整理し、開発においての優先順位をつけるのに役立ちます。これは製品ロードマップのもう一つの形式であり、製品チームが新製品や既存製品をどのように成長させ、改良していくかを検討する際に役立ちます。

プロジェクト管理においての ワイヤーフレーム

プロジェクト管理においてワイヤーフレームは、プロジェクトのマッピングツールとして役立ちます。この図を通してプロジェクトをマッピングすることで、関係者間の認識の 共有ができるようになります。 どのようにしてワイヤーフレームがプロジェクト管理に使用されるのか以下で 見ていきましょう。

プロジェクトの目的の明確化

プロジェクトマネージャー(およびプロジェクトチーム)は、まずプロジェクトの 目的について理解する必要があります。製品の認知度の向上や新製品の発売、 社内のプロセスの改善など、目的が何であれ、ワイヤーフレームにプロジェクトの 目的について明記するようにしましょう。

プロジェクト目標の設定

プロジェクトマネージャーは、このプロジェクト計画段階で、プロジェクトの目的に 加えて、目標を設定する必要があります。そうすることで、プロジェクトマネージャーはすべてのタスクとアクティビティがプロジェクトの目標に沿っていることを確認することができます。

成果物の具体化

プロジェクトマネージャーはワイヤーフレームにプロジェクトによって得られる 成果物を明確化する必要があります。そうすることでプロジェクトチームとプロジェクトが完了した後にどのような結果が期待できるのかを共有することができます。

ワイヤーフレームを関係者と共有した後は、プロジェクトマネージャーはプロジェクトの詳細を製品ロードマップ製品キャンバスのようなフレームワークに落とし込む必要が あります。

ワイヤーフレームとモックアップの違いとは?

「ワイヤーフレーム」と「モックアップ」は同じような意味で使用されることがありますが、実はそうではありません。

L1_1–2_columns_filled_templates_app_wireframe_001L1_1–2_columns_filled_templates_app_wireframe_001
L1_1–2_columns_filled_templates_app_wireframe_001L1_1–2_columns_filled_templates_app_wireframe_001

ワイヤーフレームは、ウェブサイトやアプリのレイアウトの設計、プロジェクトの マッピングに使用される設計図ですが、この図には実際のデザインや詳細な情報は 含まれません。アウトラインなどをシンプルな図で表現するためのツールです。 一方でモックアップは、忠実度の高いワイヤーフレームであり、一般的なワイヤー フレームよりも詳細なビジュアルを持っています。モックアップにはすべてのデザイン 要素やインタラクティブな機能が含まれます。 以下では簡単にその違いをまとめてみました。 • ワイヤーフレーム:製品やサービスの構造を概説した簡単な設計図。 • モックアップ:製品やサービスの完成形を示す、詳細かつインタラクティブな図。 新しいソフトウェアのマッピングや新製品の立ち上げの際には、ローファイワイヤー フレームをはじめに作成します。この図は、開発においての出発点として機能し、 どのような機能が必要なのかチームメンバーと議論や分析する際に役立ちます。 しかし、いきなりモックアップを作っても、変更すべき要素から後から出続けた場合、 時間を無駄にすることになりかねません。まずはシンプルな図からスタートし、 そこから詳細を必要に応じて追加していくことが大切です。 ローファイワイヤーフレームを作成した後は、さらに細部やビジュアルデザイン要素を 追加してモックアップを作成することを計画します。 しかし、ソフトウェアや Web サイトがすでに存在する場合、モックアップを作成して その機能やユーザー体験を改善することができます。既存のデザインを基準にして、 改善すべき点をピンポイントで指摘することができるようになります。

ワイヤーフレームの作り方

複雑なプロジェクトのマッピングでも、シンプルな Web サイトのマッピングでも、 専用のツールを使用することにより、簡単にワイヤーフレームの作成プロセスを 効率化することができます。Miro のワイヤーフレーム作成ツールは直感的な図の作成を楽しんでいただくことができ、アプリや Webサイト、プロジェクト管理フローの改善に作成した図を使用いただけます。 以下では Miro でワイヤーフレームを作成するステップについて簡単に ご紹介したいと思います。

1. ニーズに合ったワイヤーフレームを選択する

Miro にはさまざまなニーズに対応するワイヤーフレームが存在します。まずはニーズに 合ったワイヤーフレームを選択することから始めましょう。 このページではこの図の最も一般的な使用方法について解説しましたが、 あなたやあなたのチームのニーズに合わせたフォーマットを見つけることが重要です。 ここでは、フォーマットに関して考慮すべき点をいくつかご紹介します。 まずは、目的を明確化しましょう。UI のアウトラインの作成、モバイルアプリの開発、Web デザイン、新製品の開発など、何をワイヤーフレームを通して設計したいのかを 明確にすることで、そのニーズに適したテンプレートを選択することができます。 表面的な情報だけが必要なのか、それとも多くの詳細が必要なのかによって ローファイワイヤーフレームやハイファイワイヤーフレームを使い分けましょう。 どのようなワイヤーフレームを作成したいのかイメージできたら、ワイヤーフレームテンプレートにアクセスしましょう。これらのテンプレートはすべて無料でご利用いただくことができ、すぐ図の作成を開始することができます。

2. レイアウトの編集

Miro のテンプレートを使用することにより、すぐにワイヤーフレームの作成を開始することができますが、プロジェクトや製品の目的、ビジネスのビジョンによって編集作業が発生することがあります。 そんな場合でも、Miro では自由な図の編集ができるツールをご利用いただけます。 Miroでは図形色の活用フォントの変更チャートの追加など、必要な編集要素 すべてを使用して図の作成をしていただくことが可能です。

3. 関連するドキュメントやリンクの追加

関連する資料や情報につながるリンクを使用することにより、最終的なデザインの イメージを他のプロジェクトメンバーと共有することができます。Miro では資料や リンクを簡単にボードに追加していただくことができます。 例えば、参照先の Web サイトや競合他社のアプリに向いたリンクを追加することが できます。デザインチームと図や情報を共有することで、最終製品のイメージに対する 認識のすり合わせをすることができるようになります。 また、情報により多くのコンテキストを持たせるために、その情報に関する内部リンク または外部リンクを追加したり、ファイルや画像などのコンテンツをボード上にアップ ロードすることも可能です。

4. プロジェクト関係者とワイヤーフレームを共有

ワイヤーフレームが完成したら、プロジェクト関係者と共有し、フィードバックを収集しましょう。ブレーンストーミングを通したフィードバックや実際の会議での議論などや、オンライン会議でなど、さまざまなシチュエーションで Miro は活躍します。 フィードバックをもとに編集を行った後は、次の 2 つの作業からどちらかを 実行しましょう: 1. 新製品やアプリ、サイトページのリリース 2. より詳細なワイヤーフレーム(ハイファイワイヤーフレーム)の作成 実際のプロダクトのニーズを分析し、ベストなオプションを選びましょう。

記事の作成者 | Osaka Hikaru(ミロ・ジャパン合同会社 SEO 担当)

Miro のマーケティング部門に所属。IT 業界でコンテンツマーケティングやインバウンドマーケティングを経験し、その過程で培った SEO やコンテンツマーケティングの知識を活かして Miro のマーケティング活動やコミュニティへの情報発信に携わっています。

記事の監修者 | Shiono Yuka(ミロ・ジャパン合同会社 コンテンツマーケティングマネージャー)

Miro のマーケティング部門に所属。事業会社でデジタルマーケティングやプロダクトマネジメントなどを経験してきました。フルリモートで多国籍の開発チームを率いた等身大の苦しみを活かして、Miroのオンラインコラボレーションの魅力を発信していきます。

オンラインの設計図を Miro で作成しましょう!

弊社のワイヤーフレーム作成ツールテンプレートでは直感的なワイヤーフレームの作成が可能であり、アプリや Web サイトページ、 製品ページの画面やプロジェクト管理のためのフレームワークを短時間で作成することができます。