ワイヤーフレームとは？作り方をおすすめツールや無料テンプレートで紹介！

ワイヤーフレーム（英：Wireframe)の作成はできるだけ早い段階で始めましょう。プロジェクトによりワークフローは異なりますが、一般的には、プロジェクトのライフサイクルの開始または計画段階で最初のワイヤーフレームを作成するのがよいでしょう。

プロジェクトの開始段階でホームページなどのワイヤーフレームを作成する場合は、低忠実度のものから始めます。この段階ではウェブサイトやアプリのアイデアはあるものの内容は固まっていないため、実験的なアプローチが重要となります。低忠実度のワイヤーフレームはすばやく手軽に作成でき、ブレインストーミングのためのツールとして最適です。アイデアを手早く図式化し、他の関係者に共有してフィードバックを集め、その内容をボードに反映させていきます。

プロジェクトが計画段階に移行すると、中/高忠実度のワイヤーフレームの作成が必要になります。この段階ではデザインがより具体化し、次の実行段階に進むための準備として、堅牢なワイヤーフレームが要求されるためです。

この最初の2段階を経て、ワイヤーフレームがより複雑で高度なものに発展していきます。コーディングのためにデザインを開発チームに引き渡す時 (実行段階) までにはワイヤーフレームが完成しているはずです。

ワイヤーフレームの要素

ワイヤーフレームはシンプルなもので、装飾らしきものはほとんど含まれていませんが、効果的なツールとして活用できる理由はそこにあります。ウェブやアプリの開発においては、ユーザーエクスペリエンスを適切に企画する前に、フォントや色の選択に気をとられてしまいがちな傾向があります。ワイヤーフレームを作成することで、こうした細部にとらわれず、情報、ナビゲーションやインターフェイスのデザインという3つの基本的な側面に焦点を当てることができます。

情報のデザイン

アプリやウェブサイトを操作する際、どのようなウェブサイトを訪問しているか、どのようにやり取りしているか、サイトの「目的」は何かなど、ユーザーは常に情報を取り入れています。このプロセスは自動的で、主に潜在意識下で行われます。ページ上での情報の表示方法を選択することで、こうしたやり取りを円滑化するのがデザイナーの役割です。

では、実際のプロセスを見てみましょう。

例えば、メッセージングサービスを提供するホームページの場合、サイトにアクセスするユーザーの大半は再訪問者と新規訪問者のいずれかに分類されます。再訪問するユーザーの目的はおそらくログインすることで、新規訪問者の目的はアカウントの作成やサービスに関する詳しい情報を得ることなどでしょう。ホームページでは、訪問者のタイプ別に説明を行い、各自が訪問目的を達成するのに十分な情報を提供する必要があります。こうした情報は、ログイン、新規登録や詳細情報などのボタンを通じて伝えることもできます。これらをどこに含め、どこに配置するかを決めるのが情報のデザインです。

ナビゲーションのデザイン

ユーザーとしてアプリを操作する際に、「設定」に時間がかかりすぎると感じたことはないでしょうか。また、ウェブサイトの中で堂々巡りをしているように感じられたことはないでしょうか。例えば、あと少しで「アカウント情報」ページに辿り着けそうだと思ったのになぜかホームページに戻ってしまったり、挙げ句は404エラーページに行き着いてしまったり。質の低いナビゲーションデザインに遭遇する機会があまりに多いのが現実です。

ナビゲーションのデザインとは、その名の通り、アプリやウェブサイト内でのユーザーの移動方法を決めることを指します。特定の画面からユーザーが移動できる画面は多数ありますが、デザインでそのことを伝えなければ分かりません。ドロップダウンメニュー、クリック可能なリンク、スクロールバーなどを使って、製品内で移動する方向を視覚的に示す必要があります。

インターフェイスのデザイン

インターフェイスのデザインには、情報、ナビゲーションとワイヤーフレーム内のその他のすべての要素が含まれます。ナビゲーションのデザインと情報のデザインにはいずれも、ボタンやメニューなどの画面上のコンポーネントが含まれます。インターフェイスのデザインとは、これらの要素をテキストボックス、ヘッダー画像やサイドバーなどの他の要素を合わせた全体として、ユーザーインターフェイスに組み込む方法を指します。

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

このガイドでワイヤーフレーム理論を理解したところで、実際に図を作成してみましょう。ワイヤーフレームの作成は以下の手順で行います。

1. プランのマッピング

webサイトやアプリ、ホームページなど、ワイヤーフレームの用途はさまざまですが、どんな用途であっても必ず複数のワイヤーフレームの作成が必要となります。ワイヤーフレームの作成においては、ユーザーフローを重視します。ユーザーがアプリ内をどう移動するか、最終的に到達してほしい箇所などを検討しましょう。

図の作成を開始する前に、ユーザーに表示される可能性のある新しい画面をリストアップし、考えられるルートをマッピングします。画面が増えるごとに、ワイヤーフレームの追加が必要になります。

一見、準備作業に手間をかけすぎているようにも思えますが、ユーザーフローを明確に把握せずにワイヤーフレーム作成に入ると、分かりづらく見にくい図になりがちなため、重要なプロセスです。

2. 基本的な図形の追加

徹底的にプランニングを行った後、図の作成に取り掛かります。まず、図の「フレーム」を選択します。アプリのワイヤーフレームを作成する場合はモバイルデバイスの画面に似た図形を、Webサイトのワイヤーフレームの場合はブラウザウィンドウのような図形を選択します。デジタルワイヤーフレームプラットフォームの大半の図形ライブラリにはこれらの基本的なフレームが揃っています。

次に、ワイヤーフレームの最大の要素となるヘッダーバー、サイドカラム、テキストボックスなどのアイテムを示す基本的な図形やコンテナーなどを追加します。この時点ではテキストや画像は含めず、大まかなレイアウトのみを決定します。

この手順を繰り返して各ワイヤーフレームを作成します。

3. ボタンの追加とワイヤーフレームのリンク

ワイヤーフレームのレイアウトが固まったら、機能を追加していきます。製品の画面にユーザーを新しい画面に遷移させるボタンが複数あり、このボタンを最後のステップで図形として追加していない場合は、各ボタンを表す基本図形を選択してここで追加します。「ホーム」など、ボタンにテキストを追加することもできます。

ワイヤーフレームの作成対象のプラットフォームにリンク機能が含まれる場合は、ユーザーの遷移先となるワイヤーフレームに各ボタンをリンクします。

ヒント : ワイヤーフレームに使用するフォントは1つに絞りましょう。必要に応じて太字や斜体を適用できますが、他の種類の書式設定はモックアップやプロトタイプ作成の時点までとっておきます。

4. フィードバックの収集と編集

時間をかけて作成したワイヤーフレームが完成し、レイアウトも適切で、ユーザーフローのシミュレーションのためのリンクも完了したら、他の関係者と共有し、細部を追加する前にワイヤーフレームを改善できるよう、違った視点からのフィードバックを集めます。

ボタンの位置が少しずれている、メニューバーが大きすぎてページを占有しすぎなど、同僚からのさまざまなフィードバックに耳を傾け、共同で検討します。

提案された変更を適用し、ワイヤーフレームを改善します。関係者全員によりデザインが承認されるまで、このプロセスを繰り返します。

5. 詳細の追加

この時点で、ワイヤーフレームの忠実度は中程度になっているでしょう。基本的なデザインが承認されたら、詳細を作り込んでいきます。画像やテキストを追加し、ページ上のさまざまな要素を色分けで区別しますが、全体のトーンはグレースケールのままとします。どの要素もピクセル単位で適切なサイズに設定します。

6. ワイヤーフレームを共有

機能的で、忠実度の高いワイヤーフレームが完成したら、プロジェクトの関係者や関連するチームと共有します。