ワイヤーフレームとは？webサイト制作での役割や作成手順、おすすめのツールも紹介！

ワイヤーフレームとは？

ワイヤーフレームとは、Webページのレイアウトを書いた設計図のことです。特にクライアントへの提案の段階で活用されることが多いです。

ビジュアル的な要素を取り払い、四角や直線などで Web ページの骨組みを表示させます。ナビゲーションの位置や画像など、ある程度のレイアウトがこの時点で確定する場合もあります。

通常のウェブサイトであれば、トップページとカテゴリーページ、個別の記事ページの3パターンのワイヤーフレームを準備しておけば十分です。

ワイヤーフレームの有無によって、最終的なウェブサイトの完成度も大きく変わってきます。明確な意図と目的をもってワイヤーフレームを作成する必要があると言えるでしょう。

ワイヤーフレームの役割

ワイヤーフレームの役割は上記のとおりです。それぞれみていきましょう。

プロジェクト全体でイメージが共有できる

ワイヤーフレームを活用することで、プロジェクト全体でサイトのイメージ共有をすることが可能です。

外注する場合、こちらの意図を明確に伝えなければ、出来上がるウェブサイトも焦点のぼやけた微妙なものに仕上がります。個人や自社でWebサイトを作る場合でも、ディレクター・デザイナー・コーダー間でサイトの意図がズレる可能性があるため、それを防ぐためにもワイヤーフレームの制作が必要となるのです。

プロジェクト全体でサイトの完成イメージが共有できていると、ホームページを統一させやすく、サイト本来の目的が果たせやすくなるでしょう。

トラブルを未然に防げる

クライアントの希望内容が明確でない場合、立案する企画の方向にずれが生じる可能性もあります。クライアントのニーズは、ワイヤーフレーム制作の段階で詳細に共有しておく必要があります。

依頼したものの「思っていたホームページと違う」といったトラブルは多々起こります。

完成イメージを随時、クライアントと制作会社同士で共有をすることで、認識ズレのトラブルを未然に防ぎましょう。

新しいアイデアが生まれやすい

オンラインでワイヤーフレームを作成できるツールで、複数人数による編集や共用も可能なのでグループ内の意見も取りまとめやすく、新しいアイデアが生まれやすくなります。

さらにチャットツールやコメント機能をうまく活用すれば、思いつきや忘れていたことなどその場で共有することができます。

お互いの視点を理解することでより良いコラボレーションの実現が可能です。作業プロセスやワークフローをチームに共有して、新しいアイデアを実現しましょう。

ワイヤーフレームの作り方は2パターン

ワイヤーフレームの作り方は「デジタル」「アナログ」で制作する場合の2パターンです。

それぞれの特徴を解説します。

デジタルで制作する特徴

アナログで制作する場合と比べて、文字や線を綺麗に作ることができるので、ワイヤーフレームの仕上がりは綺麗です。ワイヤーフレーム作成ツールがあるので、誰でもかんたんに同じクオリティで作成することができます。クライアントやプロジェクトなどで共有する際は、デジタルの方がわかりやすいでしょう。

また、よく使う要素をコピーアンドペーストをすることで、一から作成する必要がなく作業効率が上がります。複雑なレイアウトは素早く考えを形にすることができないので、手書きを検討してみましょう。

アナログで制作する特徴

デジタルでは、フォルダを作成やタイピングなど、アナログに比べて考えを形にするには多少の時間がかかります。さらにPCやタブレットなどのデバイスがなければ作業ができません。

アナログでは、ペンと紙があればどこでも作業が可能です。またデバイスに縛られることがないので、自由に発想して考えを形にすることができます。

ただし、アナログは共有には不向きです。ワイヤーフレームを共有するにはある程度の綺麗さが求められます。プロジェクトで修正する場合もスムーズに行うことはできません。

ワイヤーフレームは一度、アナログで作成したものをデジタルで清書をすることをおすすめします。

ワイヤーフレームを制作する手順

ワイヤーフレームを制作する手順は上記のとおりです。それぞれみていきましょう。

参考サイトを探す

ウェブサイトの作成に慣れていない個人や企業の場合、ワイヤーフレームをゼロから作るのはハードルが高いので、既存のサイトのワイヤーフレームを参考にすることがとても有効です。

ネット上にはレイアウトがしっかりしていて見やすいウェブサイトがたくさん存在します。自社のイメージに合うサイトを参考にするほうが作業がスムーズに行えるでしょう。

Webサイトに必要なコンテンツを書き出す

参考にしたいと思えるサイトをピックアップし、そのウェブサイトがどのようなレイアウトになっているのかを紙に書き出してみます。

トップページだけでなく、作成予定のすべてのページの分だけ必要になります。

その際にプロジェクトの開発においてどのような機能が必要なのか、ユーザーに対してどのような体験をさせたいかを決めた上で、そのユーザー体験を達成させるために必要最低限なコンテンツを想像することが効果的です。

コンテンツを掲載する情報は、すべて同列に扱うのでなく、ユーザーに最も届けたいコンテンツの優先順位をつけておくほうが良いでしょう。

ラフ構成でレイアウトの配置を決める

掲載する情報を決めたら、ヘッダーやフッター、グローバルナビゲーション、サイドバー、メインカラムなどにどういったレイアウトで配置するかを決めていきます。

ページによってレイアウトが異なるページというのは見づらいです。標準的なウェブサイトであれば、どのページもレイアウトはだいたい共通しています。

すでに出来上がっているレイアウトを参考に、情報だけ差し替えるような形でワイヤーフレームを作れば、非常に短時間で質の高い物が出来上がるでしょう。

レイアウト図で、自社が掲載したい情報をどこに載せるのか決めれば、しっかりとしたワイヤフレームが完成することになります。

清書する

ラフ構成でレイアウトの配置を決めたら、デジタル・アナログのどちらかを使って、他者に伝えられるように清書していけば完成です。

デザインイメージを制作する際に、いきなりアプリケーションを開いて作業するデザイナーがいますが、慣れないうちはどうしてもアプリケーションに縛られ、自分が得意な表現に偏りがちになります。まずは手書きでイメージを固めた上でデジタルに落とし込むことが望ましいです。

ワイヤーフレームの作り方は人によって様々です。プロジェクトや自分に合ったワイヤーフレームの制作方法を見つけましょう。

ワイヤーフレーム制作時の注意点

ワイヤーフレームを制作する際の注意するべき点は上記の4つです。それぞれみていきましょう。

サイトマップを作成する

サイト制作の企画段階にWebサイト全体の構造を俯瞰（ふかん）にしたサイトマップです。プロジェクト関係者全員とサイトの全体像をイメージ共有することで、サイトの目的や必要なコンテンツを明確にすることができます。

サイトマップでは、しっかり各ページのディレクトリ構造を把握することが重要です。

ワイヤーフレームは、サイトマップを参考に作成します。サイトマップは制作後のサイト運用時に用いられるので、必ずサイトマップを作るようにしましょう。

レスポンシブを意識する

多くのユーザーがPCではなく、スマートフォンやタブレットなどのデバイスで Web ブラウジングを行っています。 Web デザイナーとしては、これらデバイスをターゲットとして無視することはできません。

レスポンシブ向けのウェブサイトをデザインする場合は、専用サイトとするか、もしくはレスポンシブデザインでワンソースマルチデバイスに対応するかに分かれますが、デザインの提案時点で方向性は決めておく必要があります。

ワイヤーフレームを作り込みすぎない

ワイヤーフレームは気合いを入れて作りすぎないことがコツです。

ワイヤーフレームの時点で複雑にしすぎたり、要素を増やしたりすると、製作するデザイナーさんが大変になります。また、クライアントはwebの知識がある人ばかりではないので、「完成されたラフ」を出されると、意見を貰いにくい傾向が多いです。

ワイヤーフレームでは、フィードバックをもらう前提で作成した方が、業務がスムーズに進みます。

5W2Hを明確にする

ワイヤーフレームでは、「いつ」「どこで」「誰が」「何を」「なぜ」「どのように」「いくら」の5W2Hを分かりやすくまとめることが重要です。

外注した場合、デザイナーがそれがどんなサービス・キャンペーンなのか事前の知識が全くありません。また、自分がデザインを担当するサービスやキャンペーンの課題を、短期間で 100%理解することは不可能です。

5W2Hを明確にして、かならず外注も含め、プロジェクト全体で共有するようにしましょう。

ワイヤーフレームにおすすめのツール

ワイヤーフレームにおすすめのツールは下記の4つです。それぞれみていきましょう。

おすすめワイヤーフレームツール10選！導入メリットや選び方も解説

参照元：Adobe XD

• コーディング不要でプロトタイプも作成可能
• 有料会員でクラウドストレージやフォント利用可能
• 7日間の無料期間ありでお試し利用可能

お問合せ

参照元：Adobe Photoshop

• ビットマップ画像とビクトルデータを扱える
• スマートオブジェクトで高画質を保ちながら作業可能
• 修正が多いワイヤーフレーム作成に最適なツール

お問合せ

参照元：Cacoo

• 初心者でも数分でフレームワークを簡単に作成可能
• コメントやチャット機能でフィードバックがスムーズ
• チームのワークフローを促進する多彩な機能が魅力

お問合せ

参照元：Googleスライド

• 無料で利用でき自動的にクラウド保存が可能
• 同時編集機能により作業効率が向上
• 下書き程度のワイヤーフレームに最適

お問合せ

ワイヤーフレームでよくある質問

ディレクトリマップとは？

ディレクトリマップとは、Webサイト内のすべてのページのURLやタイトル、内容などをまとめた一覧表のことです。 Webサイトの制作者やクライアントなどのプロジェクト関係者が情報を共有するために作成するもので、Webサイトには掲載されないためにユーザーの目に留まることはありません。

サイトの新規作成やリニューアル、サイト運営などに活用されることが多く、一つひとつのページの詳細まで記載されている点が特徴的といえます。

デザインカンプとは？

デザインカンプとは、デザイン見本の完成形のことです。

デザインカンプは、ワイヤーフレームの下書きをもとに作成します。デザインカンプを作成することによって画像や余白など、細かい部分までプロジェクト全体とデザインを共有できるので、サイトをコーディングをする前の欠かせない工程になっています。

ワイヤーフレーム　まとめ

今回はワイヤーフレームについて解説しました。

• ワイヤーフレームとは、Webページのレイアウトを書いた設計図のこと
• ワイヤーフレームの役割は、プロジェクト全体でイメージが共有でき、トラブルが未然に防げる
• ワイヤーフレームの作り方は「デジタル」「アナログ」の2種類
• ワイヤーフレームの手順は、参考サイトを探す→Webサイトに必要なコンテンツを書き出す→ラフ構成でレイアウトの配置を決める→清書する
• ワイヤーフレームにおすすめのツールは、Adobe XD、Adobe Photoshop、Cacoo、Googleスライド

ワイヤーフレームはウェブサイトを作成するときの核であり、外部にウェブサイトの作成を依頼するときは必須と言ってよいでしょう。

ウェブサイトのレイアウトにおいて重要なのは、訪問者が求めている情報にすぐにアクセスできる伝わりやすさです。ワイヤーフレームを作成する場合、訪問者の利便性を常に意識して作成するようにしましょう。

監修者のコメント

株式会社Weathercock

代表取締役　大野淳

愛媛県でホームページ制作・SEO対策を行なっている会社。コーポレートサイトやECサイトの構築はもちろん、オウンドメディアの構築を行う。クライアントに寄り添ったWEB制作を心がけており、WEBマーケティングを通して見込み客の欲求に合わせたコンテンツ作成を行うことをモットーに行う。

詳しく見る

ワイヤーフレームを作成することで、どのようなWebサイトができるのか、クライアントが想像しやすくなるだけでなく、修正がある場合も指摘をしやすいので、お互いにメリットがあります。

ワイヤーフレームを利用することで追加コンテンツがどの位置に来るのか、サイトマップ上ではどのようにコンテンツが配置されるのかも分かりやすくなります。また、XDのようなツールを使用することでページ遷移の動きなどもつけることができますのでかなりおすすめです。

クライアントにデザイン案をある程度示すこともできますので、ぜひ今までワイヤーフレームを作成されていなかった方はWebサイト制作前のコミュニケーションツールだと思い作成されてみて下さい。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。