ワイヤーフレームとは、Webサイト制作におけるユーザー体験を決定づける重要な設計図のことです。

このワイヤーフレームをもとに、ウェブサイトのデザインや機能を確定していくため、制作方針を決める重要な要素となります。

しかし、ワイヤーフレームを作る際には、目的を明確にし、注意すべき点を理解しておく必要があります。また、効率的に作業を進めるためのツール選びも、その品質を左右する大きな要素です。

そこで本記事では、これからワイヤーフレームを制作する方に向けて、ワイヤーフレームの概要や作り方、メリットやおすすめツールを紹介します。

ワイヤーフレームを作る際のの注意点も解説しますので、ぜひ最後までお読みください。

ワイヤーフレームとは？サイトマップやデザインカンプなどとの違いも解説

ワイヤーフレームとは、ホームページやWebサイトを制作する際のベースとなる設計図のことです。略して「ワイヤー」と言うこともあります。

ワイヤーフレームにデザイン性は必要なく、「Webサイト内の、どこに、何を、どう表示するのか」というレイアウトを決めるのが目的です。

ワイヤーフレームは、ユーザーの行動フローや情報の優先順位を明確にし、プロジェクトの進行状況や理想のページ構造について共有するために使用されます。

ワイヤーフレームとサイトマップの違い

ワイヤーフレームと混同されやすいものの1つに「サイトマップ」が挙げられます。

サイトマップとは、ワイヤーフレームを作成する前段階の「サイトに何を入れるか」を簡易的な図で示したもので、ウェブサイトが完成してから使用され、訪問者に向けてサイト構造をわかりやすく伝えるのが目的です。

サイトマップはウェブサイト全体のページ構造を示すツールで、各ページの関係性や階層を視覚的に表現します。

わかりやすく言えば、ワイヤーフレームはWEBサイトの各ページの「設計図」であり、サイトマップはWEBサイトの「地図」のような役割を果たします。

ワイヤーフレームとデザインカンプ（モックアップ）、プロトタイプとの違い

Webサイト制作においては、上記のワイヤーフレームやサイトマップの他にも「デザインカンプ（モックアップ）」や「プロトタイプ」などがあるため、それぞれの役割を理解しておく必要があります。

デザインカンプはWebサイトの完成見本のことで、ワイヤーフレームで決めた構成を基に、色や画像などのビジュアル要素を具体的にデザインしたものです。デザインカンプは静的なもので、ユーザーのインタラクション（相互性）が含まれないのが特徴です。

一方、プロトタイプは「試作品」のことを指します。プロトタイプにはWebサイトの操作性や機能、外観などが備わっているため、実際に試用することも可能です。

プロトタイプは基本的に操作性を確認するために用いられ、Webサイトの制作では、モックアップでデザインを決めたあとに作成するのが一般的です。

このように、デザインカンプやプロトタイプは、制作がある程度進行した完成前の段階で用いられます。一方、ワイヤーフレームは、制作の初期段階で作成するのが特徴です。

Webサイト制作でワイヤーフレームを作る目的3つ

ワイヤーフレームを作る目的は、次の3つです。

1.Webサイトのレイアウトを決めるため
2.Webサイトのレイアウトや機能をチーム内で共有するため
3.「たたき台」としてアイデアを出し合うことができるため

1.Webサイトのレイアウトを決めるため

Webサイトの内容・目的によって、そのレイアウトはさまざまです。

たとえば広告から訪問することが多いLP（ランディングページ）の場合は、ユーザーの離脱を防ぐために、ページの上部に商品やサービスのメリットを配置するのが一般的です。

もしレイアウトを決めずにデザインや機能に着手してしまうと、後から修正が入り、結果的にスケジュールやコストに大きな影響を与える恐れがあります。

ワイヤーフレームでレイアウトを決めることで、その後の制作をスムーズにすることが1つ目の目的です。

2.Webサイトのレイアウトや機能をチーム内で共有するため

Webサイトを制作する際には、ディレクターやデザイナー、コーダーなどの複数人が関わりながら、チームで制作するのが一般的です。

もしワイヤーフレームがなければ認識のズレが発生し、想定していたWebサイトとは違う制作物になる可能性が高まります。

そこで、ワイヤーフレームを活用してWebサイトの全体像を共有することで、認識のズレを抑えることができます。

3.「たたき台」としてアイデアを出し合うことができるため

ワイヤーフレームをチーム内で共有すれば、これらを「たたき台」としてアイデアを出し合うことも可能です。

Webサイトをテンプレートで作成する場合でも、サイト内の項目やレイアウトが自動的に決まるとは限りません。

そのため、チーム内で意見を出し合いながら、精度の高いサイトを制作することが重要です。

ワイヤーフレームの作り方｜3ステップ

ワイヤーフレームの作り方は、次の3つのステップとなります。

・サイトマップを作り、ワイヤーフレームにするページを決める
・レイアウトを決める
・ツールを使ってワイヤーフレームに落とし込む

1. サイトマップを作り、ワイヤーフレームにするページを決める

サイトマップの例（出典：Web幹事）

「サイトマップ」とは、Webサイトにどんなページが必要か示した図のことです。いきなりワイヤーフレームを作っても、あとから追加で情報が必要なことに気づき、結果的に制作スケジュールが押してしまうリスクがあります。

そのためWebサイトのトップから下層のページにどうつながっていくのかが一目でわかるサイトマップを、ワイヤーフレーム作成の前に作りましょう。

サイトマップ作成の手順は、次のとおりです。

・Webサイトの目的とターゲットを明確にする
・サイトに必要な情報を集める
・情報をカテゴリ分けする

サイトマップを作成したら、ワイヤーフレームを作成するページを決めます。理想は全てのページでワイヤーフレームを作るべきですが、予算やスケジュールもあるため、重要なページだけワイヤーフレームに落とし込みましょう。

たとえばコーポレートサイトの場合は、トップページから流入が想定されるため、トップページの重要度は高いです。また商品やサービス紹介ページも閲覧率が高いため、重要度が高いでしょう。

Webサイトの目的に応じて、ページの重要度は異なります。競合サイトのリサーチも活用しながら、ワイヤーフレームにすべきページを決めましょう。

2. レイアウトを決める

サイトマップが決まれば、サイトの内容をどこに、どのように、どういう順番で配置するのか、レイアウトを決めます。

レイアウトには次の４つの代表的なものがあります。

・シングルカラムレイアウト
・マルチカラムレイアウト
・フルスクリーンカラムレイアウト
・グリッド型レイアウト

カラムとは、まとまった表示を表す単位のことです。

表示のしかたを1列にするのか、横に2列以上に並べるのか、あるいはスクリーン全体を使って表示するのか、グリッド（格子）のように並べて表示するのか、という方法があります。

シングルカラムレイアウトは、1列の段組みで構成されたサイトのことで、PCとスマホが同時に適応可能なものです。最近はスマホでサイトを見るユーザーが増えているので、このタイプのサイトが増えています。

マルチカラムレイアウトは、コンテンツの横にサイドバーを配置したもので、サイト内を回遊しやすい特性を持っています。

フルスクリーンカラムレイアウトは、スクリーン全体にコンテンツを配置しているものです。サイト全体に配置するため、インパクトが強くなり、アピールしたい商品やサービスを全面に際立たせることができます。誘導したいリンクがある場合、スクロールしなくてもいいという利点もあります。

グリッド型レイアウトは、グリッド式にコンテンツを配置したサイトです。Pintarest（ピンタレスト）が代表的で、いくつもの異なるコンテンツを同時に見せることができます。

3. ツールを使ってワイヤーフレームに落とし込む

レイアウトが決まれば、ワイヤーフレームに落とし込みます。ワイヤーフレームの作成は、ひとまず手書きで問題ありません。

ある程度レイアウトが固まったところで、パソコンやスマホなどを使ってツールで清書しましょう。

なお、ツールはクラウド上で保存できるものがおすすめです。なぜなら、チーム内で共有したり、コメントをもらったり、別の人が修正作業をしたりできるからです。

ワイヤーフレームづくりにおすすめのツール5つ

ワイヤーフレームづくりに使えるおすすめのツールを5つ紹介します。

・AdobeXD（アドビエックスディー）
・Figma（フィグマ）
・CACCO（カクー）
・Excel（エクセル）
・Powerpoint（パワーポイント）

1. AdobeXD

▲出典：AdobeXD

AdobeXDは、IllustratorやPhotoshopで有名なアドビ株式会社のWebデザインアプリです。WebデザインやUI／UXデザインにおいて、非常に代表的なソフトとなっています。制作初期のワイヤーフレーム作成からプロトタイプまで、このソフト1本で完結できるため、多くのWebデザイナーに支持されています。

【メリット】

・Webサイト、アプリ、デザインのツールとして使えるうえ、動作確認にも有効
・チーム内で共有でき、コメントも可能
・ツールを使いこなすための技能、知識などが必要なく、操作しやすい
・IllustratorやPhotoshopなど、Adobeツールとの互換性が高い
・指示書の代用としても使える

【デメリット】

・テキストの細かい調整ができない
・運用に負荷がかかること

AdobeXDにより、デザイナー以外の人にとってもワイヤーフレーム作成が容易になりました。コーディングの知識も必要がなく、直感的な操作が可能だからです。

さらにAdobe XDで作ったワイヤーフレームを作り、デザイナーがIllustratorを使って引き継ぐことが可能です。

実際に使っている方がチーム内にいるなら、一度使用してみてから運用を考えてみたほうが良いでしょう。

2. Figma

▲出典：Figma

Figmaは、UXデザインやワイヤーフレーム作成に便利なツールとして代表的なものの一つです。メールで登録すれば、誰でも簡単に利用を始めることができます。

【メリット】

・無料で使える
・複数人で同時に編集することができる
・動作が軽い
・自動保存なのでデータが消える心配が少ない
・画像の配置がしやすい

【デメリット】

・Adobe製品との連携が難しい
・日本語の対応が不十分である

Figmaは、複数人で作業をしたいときに役立つ優秀なソフトです。ただ、Adobe製品との連携が難しく、チーム内のデザイナーが使用するIllustratorやPhotoshopへ引き継ぐ際にやや難が残ります。

ただ、操作性はAdobeソフトに近いです。普段からAdobeソフトを使ってきた人にも操作しやすいでしょう。

3. CACOO

▲出典：CACOO

CACOOは、Webサイトやアプリのワイヤーやモックアップ作成などに便利なツールが用意されています。クラウド上で保存することができ、チーム内で共有したり、共同作成したりすることが可能です。

【メリット】

・リアルタイムの共同編集ができる
・コメントの書き込みができる
・ビデオ通話でチャットや画面共有することができる

【デメリット】

・無料で使用できるのは14日間と限定されている
・プロジェクト進行後に使用を開始しないほうが無難

永続的に無料で利用できるツールではないため、まずは無料期間で使用感が問題ないか確認することをおすすめします。またチームで利用することになるため、自分だけではなく、チームメンバーにも使用感を確認してもらいましょう。

4. Excel

▲出典：Excel

Excelでもワイヤーフレームを作成することはできます。

【メリット】

・使い慣れている人が多い
・Googleスプレッドシートへの互換性があるため、クラウド上での利用もできる
・図形作成がシンプルで難しくない

【デメリット】

・直感的な操作がしにくい
・図形作成を本来の目的としているソフトではない
・デザインソフトへの互換性に難がある

上記に紹介したアプリソフトのほうが、ワイヤーフレーム作成を想定して開発されているため便利ですが、Excelが使い慣れている場合は代用もできます。

ただし、Excelは本来、表集計をもとにしたグラフ作成などを目的としています。ワイヤーフレームを目的としたソフトではないため、デザインアプリへの互換性はありません。

5. PowerPoint

▲出典：PowerPoint

PowerPointでもExcelと同様にワイヤーフレームの作成ができます。チーム内の共有の際も同様に、Googleドライブのアプリ「Googleスライド」にコピー＆ペーストすれば可能です。

メリット・デメリットは、Excelとほぼ同じことが挙げられます。ワイヤーフレーム作成自体には問題はないと思いますが、後のモックアップやプロトタイプの段階においては、作成した図を別のソフトに移行する必要が出てきます。

ワイヤーフレームを作る際の注意点5つ

ワイヤーフレームを作るときは、下記の5点に注意しましょう。

1. Webサイト制作の目的を明確にする
2. 競合のサイトを分析してから作る
3. 作りこみすぎない
4. フィードバックを受ける
5. PC版とスマホ版は別々に作る

順番に解説します。

1. Webサイト制作の目的を明確にする

ワイヤーフレーム作りにおいては、どんな内容や機能が必要で、また何が必要ではないのかの判断基準がなければ、内容が増えすぎてしまったり、何を優先していいかがわからなくなったりします。

そのためにも、Webサイトの目的を明確にしましょう。

Webサイト制作の目的は、さまざまです。商品・サービスの販売を目的としていることもあれば、優秀な人材の採用ということもあります。

目的を明確にすれば、必要な内容や優先順位がおのずと決まってきて、チーム内での整合性も取りやすくなります。

2. 競合のサイトを分析してから作る

競合のサイトを見れば、サイト上に必要な情報や機能、どのような順位で表示しているのかが一目でわかります。競合のサイトを分析することで、自社のアピールポイントや特長をどのようにPRし、伝えていくか、方向性もみえてきます。

3. 作り込み過ぎない

ワイヤーフレームはあくまで設計図であり、「たたき台」にすぎません。モックアップやプロトタイプと違って、完成形ではありませんので、作りこみ過ぎないことが重要です。

むしろ、「たたき台」として生かせるよう、チーム内からアイデアをもらったり、フィードバックを受けたりできるように、シンプルに作りましょう。

4. フィードバックを受ける

作ったワイヤーフレームは、自己完結せず、第三者の意見を取り入れることが必要です。

ワイヤーフレームを作成後は、チーム内で共有し、意見を募ったり、アイデアを出し合ったりして、Webサイトの精度を高めましょう。

5. PC版とスマホ版は別々に作る

Webサイトの表示形式は、横長のPC版と縦長のスマホ版で表示のしかたが大きく変わります。

ワイヤーフレームを作成する初期の段階で、別々に作っておけば、制作がある程度進行してから作るよりも修正が少なくスムーズになります。

Webサイト制作をデザイナーに依頼するならクロスデザイナーがおすすめ

本記事では、ワイヤーフレームの基本的な作り方と作成に便利なツール、作成するうえでの注意点などを解説してきました。

ワイヤーフレームはWebサイトの設計図にあたり、その後の制作方針を決める重要な工程のため、できる限り経験者に依頼しましょう。

優秀なWebデザイナーにワイヤーフレーム設計を依頼したいならクロスデザイナーがおすすめです。

クロスデザイナーは、フリーランスデザイナーに特化したエージェントサービスです。審査通過率5%を突破した優秀なデザイナーが7,000名以上在籍しています。

「どんなデザイナーに依頼すべきかわからない」という方でも安心です。会社の課題や予算をヒアリングしたうえでデザイナーをエージェントが最短即日提案し、依頼後の契約などもサポートします。

デザイナーへの依頼が確定するまで費用は無料で、登録しているデザイナーとの合意があれば、正社員としての採用も可能です。また、スカウトや人材紹介機能もあるため、採用難易度の高い即戦力デザイナーを採用できるでしょう。

クロスデザイナーに相談いただければ、最短即日提案から3営業日でのアサインも可能です。また、週2〜3日の勤務といった柔軟な依頼も可能であるため、自社の作業量に応じて効率的な業務委託を実現できます。

こちらより、クロスデザイナーのサービス資料を無料でダウンロードできます。即戦力デザイナーをお探しの方は、【お問合わせ】ください。平均1営業日以内にご提案します。