Webサイトのワイヤーフレームとは？作り方やおすすめツールを解説

Webサイトの制作過程において、よく「ワイヤーフレーム」という言葉を耳にします。ディレクトリマップやデザインカンプとどう違うのか、疑問に感じていた方もいるのではないでしょうか。

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。

• オーディエンスとそのニーズについて理解する
• オーディエンスに合ったコンテンツを作成する
• ウェブサイトを最適化し最大限の成果を上げる
• パフォーマンスレポートの作成、分析、継続的な改善

今すぐ無料ダウンロードする 詳しく見る 今すぐ無料ダウンロードする

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

この記事では、ワイヤーフレームに関する基本事項や作り方のステップ、作成におすすめのツールを紹介しています。ワイヤーフレーム作成時に注意しておきたいポイントもまとめていますので、ぜひ参考にしてください。

はじめに、ワイヤーフレームとは何かを整理しておきましょう。同じくWebサイトの制作過程で作成する「ディレクトリマップ」や「デザインカンプ」との違いを理解しておくことが重要です。
 

線や枠で示されるWebサイトの「設計図」

ワイヤーフレームとは、線と枠で構成されるWebサイトの設計図のことです。各ページの構成を制作会社などとすり合わせる際に用いられます。

【ワイヤーフレームのイメージ】

上図のように、ワイヤーフレームでは「どの要素をどの位置に配置するか」を大枠で決定します。住宅の建築でたとえると、間取りを図面上で決めていく段階のイメージです。

この工程を経ることで、デザイン案をまとめる段階になってイメージの相違が生じるのを防ぎます。住宅でいえば、各部屋の内装を決める段階で「やはり間取りを変えたい」といった大幅な変更を防ぐために、あらかじめ間取りを固めておくというイメージで捉えてください。
 

ディレクトリマップとの違い

ディレクトリマップとは、Webサイトを構成するすべてのページの一覧を示した表のことです。ページのURLやタイトル、内容を記載した一覧表を作成することで、Webサイトの全体像を把握します。

これに対して、ワイヤーフレームは1ページごとのレイアウトを示す設計図です。一般的にディレクトリマップは制作工程の進捗管理などに活用されるのに対して、ワイヤーフレームは具体的なページデザインをすり合わせていく際に用いられます。
 

デザインカンプとの違い

デザインカンプとは、最終的なレイアウトの完成イメージのことを指します。Webサイトの外観から細部の要素まで、実際に制作するWebサイトと見た目上は同じです。モックアップと呼ばれることもあります。

一方、ワイヤーフレームはあくまでも「どの要素をどの位置に配置するか」を大まかに示したラフのようなものです。はじめからデザインカンプを作成してしまうと、細部を作り込んだ後に大幅なレイアウトの変更が発生しかねません。こうした手戻りを防ぐためにも、ワイヤーフレームが固まったのちにデザインカンプの作成に取りかかることが大切です。

ワイヤーフレームの作成は、次の4ステップで進めます。

• ステップ1：サイトマップを作成する
• ステップ2：ワイヤーフレームを作成する範囲を決める
• ステップ3：ページレイアウトを決める
• ステップ4：ラフを作成してからツールで仕上げる

各ステップでやるべきことを具体的に見ていきましょう。
 

ステップ1：サイトマップを作成する

はじめに、サイトマップを作成します。サイトマップとは、サイト全体の構造をツリー構造で示した図のことです。

【サイトマップのイメージ】

サイトマップを作成することで、ページ間の親子関係（階層構造）や階層の深さが可視化されます。サイトマップをすっきりと簡潔にまとめられるようなら、ユーザー・検索エンジンの双方にとって階層構造がわかりやすいWebサイトといえるでしょう。
 

ステップ2：ワイヤーフレームを作成する範囲を決める

次に各ページのワイヤーフレームを作成する範囲を決めていきます。すべてのページのワイヤーフレームを作成するのが理想ですが、ページ数が多いWebサイトの場合は主なページをピックアップして作成するのが現実的でしょう。

たとえば、トップページなど重要な役割を担うページのワイヤーフレームを優先的に作成したり、数パターンのレイアウトを用意してパターンごとにワイヤーフレームを作成したりする方法が考えられます。
 

ステップ3：ページレイアウトを決める

ワイヤーフレームを作成するページについて、ページレイアウトを検討します。Webサイトのページレイアウトには代表的なパターンがあるため、下記のいずれかのパターンから選んで決めていくと効率的です。

【ページレイアウトの例】

一般的に、ページを分割するほど多くの要素を配置できる一方で、1つの要素に配置される要素のサイズが小さくなるためインパクトは弱くなります。画像や動画といったコンテンツを大きく掲載したい場合には、シングルカラムやフルスクリーン型を採用するのが得策です。
 

ステップ4：ラフを作成してからツールで仕上げる

ワイヤーフレームのラフを手書きで作成したのち、ツールを利用して清書していきます。ツールの扱いに慣れているようなら、はじめからツールで作成しても差し支えありません。

なお、ユーザーは基本的にページを上から順にスクロールしながら見ていきます。ページ上部に配置されているコンテンツほど、真っ先に目に留まりやすいことを意識しましょう。優先度の高い情報を上から順に配置していくのがポイントです。
 

ワイヤーフレームを作成するための専用ツールは存在しないため、基本的にはどのようなツールで作成しても問題ありません。ここでは、ワイヤーフレーム作成におすすめのツールを3つ紹介します。
 

Microsoft PowerPoint / Google スライド

スライド作成ツールは、ワイヤーフレームの作成によく用いられるツールの1つです。すでにMicrosoft PowerPointやGoogle スライドを業務で使用しているようなら、新たにツールを導入することなく作成に取りかかれます。

【主なメリット】

• ビジネスシーンでよく利用されているツールのため、扱いやすい
• 図形の描画がしやすいことから、効率よく作成できる

【注意点】

• 要素が多いサイトなど複雑なレイアウトには対応しにくい
• 情報量が多いWebサイトの場合、細部を作り込みにくい可能性がある
   

Microsoft Excel / Google スプレッドシート

表計算ソフトを活用してワイヤーフレームを作成する方法もあります。スライド作成ツールと同様、ビジネスシーンで広く利用されていることから、特別なツールの導入は不要でワイヤーフレームを作成可能です。

【主なメリット】

• 使い慣れたツールを活用できる
• セル単位でレイアウトを整理できる

【注意点】

• 描画可能な図形の種類はスライド作成ツールよりも少ない
• 要素が多いサイトや情報量が多いサイトの場合は対応しにくい
   

Cacoo

Cacooは、クラウド上で利用できるオンライン作図ツールです。フローチャートやツリー構造の図などの作成に適しており、ワイヤーフレームの作成にももちろん対応できます。

【主なメリット】

• 自由度が高く、イメージを具現化しやすい
• 複雑サイトや情報量が多いサイトにも対応できる

【注意点】

• 操作に慣れる必要がある
• 7ページ以上作成する場合には有料版の契約が必要
   

ワイヤーフレームを作成する際に押さえておきたい注意点を紹介します。
 

パターンごとに作成する

ワイヤーフレームを効率よく作成するには、Webサイトを構成するページを3パターン程度に絞っておくことをおすすめします。パターンごとに作成することで、ページ数の多いWebサイトでも事前にレイアウトを決定できるからです。

【レイアウトパターンの例】

• グリッド型：トップページ
• 下層ページ：マルチカラム
• その他：シングルカラム（季節ごとのキャンペーンページなど）

レイアウトのパターンを絞ることは、ユーザーにとって目的の情報を見つけやすくするためにも重要なポイントといえます。
 

ワイヤーフレーム自体の外観に凝りすぎない

ワイヤーフレームはあくまでもデザインの「下書き」に相当するため、作成自体に時間をかけすぎないことが大切です。慣れないツールを無理に導入したり、外観に凝って細部まで作り込んだりする必要はありません。

ページデザインを詳細に作り込むのは、次の工程に当たるデザインカンプで取り組むべき作業です。ワイヤーフレームは見にくくならない程度に、短時間で手早く仕上げましょう。
 

ワイヤーフレームは、Webサイトを構成する各ページのレイアウトに対する共通認識を形成するための設計図です。ワイヤーフレームで大枠のレイアウトを固めておくことにより、デザインカンプの段階で手戻りが発生するのを防げます。今回紹介したワイヤーフレームの作り方や活用できるツール例を参考に、Webサイト制作をスムーズに進めていきましょう。