ワイヤー フレーム

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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