ワイヤーフレームとは、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名以上在籍しています。

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

デザイナーへの依頼が確定するまで費用は無料です。

サービス資料では、クロスデザイナーのサービス資料を無料でダウンロードできます。ぜひ貴社の採用活動にお役立てください。まずは下記資料からお問合せください。

クロスデザイナー｜法人・クライアント向けサービス資料|フリーランスデザイナー・業務委託採用｜クロスデザイナー

xdesigner.jp