ワイヤーフレームとは？概要やホームページ制作に欠かせない理由、作成に必要なツールを解説！

「制作会社からワイヤーフレームの有無を聞かれたがなんのことだかわからない…」
「ワイヤフレームはホームページ制作に必ず必要なの？」

そんな悩みや疑問を持っていませんか？実はワイヤーフレームはホームページ制作において重要なもので、ワイヤーフレームの出来次第で完成したサイトのクオリティが大きく変わると言っても過言ではありません。

そこで、今回は日本最大級のWeb制作会社を紹介している弊社がワイヤーフレームの概要や必要性、作り方を紹介していきます。

ワイヤーフレームの意味を知り、事前に自社で作成できるようになると制作会社との打ち合わせもスムーズに進むようになり、質の高い打ち合わせを行いながらホームページ制作に取り組むことができるようになります。

この記事では、

の5つについて解説していきます。

この記事を読むことで、誰でも簡単にワイヤーフレームについて理解できるようになり、効率的で質の高いホームページ制作が出来るようになります。ワイヤーフレームを作成するためのツールの紹介も行っているので、ぜひ参考にしてください。

ワイヤーフレームとは

ワイヤーフレームは、Webページのレイアウトを決める設計図です。下記画像のようにシンプルな線と枠のみで構成され、色・画像・フォント・各要素の形などのデザインは含めません。

ワイヤーフレームを作成すると

• なにを（画像やテキストなど、掲載するコンテンツ）
• どのように（それぞれのコンテンツの機能）
• どこに（各コンテンツの配置）

を「見える化」できるため、必要な要素や不要な要素、ユーザーの導線などを事前に確認しながら打ち合わせを進められるようになります。そのため、制作担当者と完成品に対する共通認識を持ちながら制作を進めていくことができます。

ホームページの完成イメージを持ちやすくしたり、制作作業を開始してからの打ち合わせ不足による仕様変更などのトラブルを防いだりと、Web制作において重要な役割を担っており、制作会社とスムーズな作業を行う上での必須項目と言えるでしょう。

Webデザインとの違い

ワイヤーフレームとWebデザインの違いは下記の通りです。

ワイヤーフレームはあくまで「ホームページの簡単な設計図」なので、レイアウト構成以外のデザインはほとんど行われません。つまり、Webデザインは“ワイヤーフレームで作り込んだレイアウトを装飾し、より魅力的なホームページに仕上げていくための仕上げ”ということになります。

通常は、ワイヤーフレームで作り込んだレイアウト構成に基づいてデザインを考える、といった流れで制作が進んでいくのでそれぞれの違いをよく理解しておきましょう。

基本的には制作会社が作ってくれるもの

ホームページ制作を外注する場合、ワイヤーフレームは一般的に制作会社が作ってくれます。Webページのレイアウトは、ホームページの見やすさ（ユーザーの回遊性）に直結するためしっかり考えて構成しないと、

• ユーザーがページに滞在してくれる時間が低下する
• 購入率が低下する
• 伝えたい情報が正しく伝わらない

など、サイト公開後にさまざまな弊害が起こります。そのため、ワイヤーフレームの作成は基本的にWebのプロである制作会社のディレクターやプロジェクトマネージャー、デザイナーが行ってくれ、発注側は作ってもらったワイヤーフレームを確認しながら、要望や提案を伝えて理想の完成イメージに近づけていくという作業を行うことになります。

ワイヤーフレームが必要な理由

中には、「ワイヤーフレームなんて飛ばしていきなりデザインの制作に取り掛かってほしい」と考えている方もいらっしゃるかもしれませんが、ワイヤーフレームの作成はホームページ制作に欠かせない非常に重要な要素です。

ホームページ制作にワイヤーフレームが必要な下記3つの理由について詳しく解説していきます。

デザインイメージのズレが起こりにくくなる

ワイヤーフレームを用いて打ち合わせを行うことで、デザインに入る前に具体的なレイアウトの共通イメージを持つことができるため、制作側は発注側の意図や要望を正確に汲み取った上でデザインの制作が可能です。そのため、「イメージしていたものと全く違うデザイン」になってしまうことも少なく、大幅な修正を行うリスクが減らせます。

また、制作側も視覚的な要素だけではなく、レイアウトや導線設計を考慮しながらデザインができるようになる点もメリットです。結果として業務の短縮や完成品のクオリティ向上に繋がるため、ワイヤーフレームは必ず作成しましょう。

必要な情報の整理ができる

ワイヤーフレームを作成すると、ページを構成する要素を俯瞰して確認できるため、

• 必要なのに足りていない情報
• 必要だと思っていたが邪魔になっている情報
• 位置を調整することでより映える情報

などをわかりやすく見直すことが出来るようになります。シンプルに設計されたワイヤーフレームの段階であれば、修正も容易に行えるため、改善点がないかを徹底的に探り、納得のいくページ構成になるまで内容を詰めましょう。

ワイヤーフレーム段階での確認を怠ると、デザインが完成した後に「必要な情報が記載されていなかった」「不要な要素が大きく表示されていて邪魔」といったことがよく起こります。しかし、グラフィックやCSS、JavaScriptを作り込んだデザインは作業に多大な労力と時間を要するため、完成後の修正は容易ではありません。

何事も基盤作りが最も大切です。ワイヤーフレームを作らない、またはチェックが甘いことが原因で、コストが追加で発生したり、納期の遅れに繋がったりなど、制作会社とのトラブルに発展する可能性もあるため、必ずワイヤーフレームを用いて情報の整理を行いましょう。

打ち合わせがスムーズに進む

ワイヤーフレームを用いると「発注側」と「制作側」の双方が、意図を視覚的に共有できます。言葉での説明を全て行わなくても、感覚的にイメージを共有しながら話し合いを進められるため、打ち合わせをスムーズに進行させることができるでしょう。

さらに、ワイヤーフレームの確認段階で要望を制作会社に伝えることで、その先のデザインやコーディングで行う作業を見越した提案や、実現の可否を考慮しながら話を進められます。Web制作の現場は横文字の専門用語も多く、言葉だけではイメージしづらい部分がありますが、わかりやすい設計図を用いることで、話し合いの中に生まれる誤解を無くせる点も大きなメリットです。

また、ワイヤーフレームは制作会社との打ち合わせに有効なだけではなく、社内での情報共有にも利用できます。制作チーム内での認識の擦り合わせはもちろん、Web知識がない責任者への進捗報告に活用することで作業の効率化を図ることが可能です。

本格的なワイヤーフレームの作成はプロにお願いするのがおすすめ

ワイヤーフレームは無料の作成ツールなども存在するため、自分で作ることも可能です。しかし、ページに記載する情報やレイアウトの構成はコンバージョンや回遊率に大きく影響してきます。そのため、集客、採用、ブランディングなど、何かしらの目的を本気で達成するためにWebサイトを制作する場合は、ワイヤーフレームの作成はプロに頼ることをおすすめします。

上記に当てはまる方でもワイヤーフレームを自作してはいけないわけではありません。事前に制作会社に共有したい情報がある場合は、簡単な設計図やラフを持っていくことで意図が伝えやすくなるため、打ち合わせがスムーズに進みます。

しかし、制作会社からアドバイスや提案を受けた場合は素直に聞き入れ、新たな提案を取り入れたワイヤーフレームを作成してもらうようにしましょう。

ワイヤーフレームとよく混同される言葉

ホームページ制作の現場では、ワイヤーフレームと同じようなタイミングで登場する専門用語として混同される下記4つの言葉があります。

• サイトマップ
• ディレクトリマップ
• デザインカンプ / モックアップ
• プロトタイプ

同じ意味として捉えられることがありますが、役割は異なるため、それぞれの違いについて詳しく解説していきます。

【役割の違い早見表】

サイトマップ

サイトマップは、ユーザー（サイトに訪問した人）や検索エンジン用に、そのWebサイトに存在するページを一覧化したページやファイルのことです。

ユーザー向けの「HTMLサイトマップ」と検索エンジン向けの「XMLサイトマップ」の2種類がありますが、それぞれ伝える対象が異なるだけで目的は変わりません。ワイヤーフレームがWebサイト内の1ページのレイアウト構成を伝えるために使用されるのに対して、サイトマップはサイト全体の構成を表します。

また、サイトマップはサイト公開後の運用時に用いられますが、ワイヤーフレーム制作に着手する前に、サイト全体の構成を決定する重要な制作ツールとしても利用されます。

ディレクトリマップ

ディレクトリマップはWebサイトに掲載する情報をExcelやGoogleスプレッドシートにまとめた一覧表です。

サイトマップはユーザーや検索エンジンに対して見せるために作りますが、ディレクトリマップはサイト制作に携わっている人の間で共有するために作成します。必要なページの情報がわかりやすく整理されているため、Webサイトの概要をわかりやすく確認できることはもちろん、スムーズでミスの無い作業を行うためのチェックリストのような使い方もできます。

デザインカンプ / モックアップ

デザインカンプは、Webサイトのデザインの完成見本です。モックアップと呼ばれることもありますが、Web制作においてはどちらも同じ意味で使用します。

ワイヤーフレームで作り込んだレイアウトに、デザインを施して完成した状態にし、

• 色味
• 文字サイズ
• フォント
• 画像や各要素の大きさ、形
• 全体のバランス

などを細かく確認するために使用されます。一般的には同じワイヤーフレームをベースに何種類か用意したデザインカンプを提示して、クライアントのイメージに最も近いものを採用して、制作に着手することが一般的です。

デザインカンプ提出の時点では、HTMLやCSSなどのコーディング作業には着手していないことがほとんどです。そのため、「デザインカンプは制作前のデザインの最終チェック」と捉えておくといいでしょう。

【初心者向け】デザインカンプとは？無料で作成する方法・ワイヤーフレームとの違いなどを徹底解説！

プロトタイプ

プロトタイプは、Webページの完成品を想定して、操作性や機能面の確認のために動的な要素を加えた試作品です。静的なページや簡易的なホームページの制作であれば省略されることもありますが、大規模サイトや複雑な機能を盛り込んだWebアプリなどでは用いられることが多いです。

求める機能に応じて動作を確認するポイントが異なるため、作成するプロトタイプは制作内容によって変わります。また、ワイヤーフレームやデザインカンプとは違い、制作会社によってプロトタイプの考え方や作成の範囲が異なることも多いため、明確な定義はありません。

しかし、「Webサイトの動作や操作性を確認する目的」で作成されることがほとんどで、プロトタイプを用いて評価と改善点の洗い出しを繰り返し行い、問題点を無くした上で制作に着手するのが一般的です。予約システムやカートシステムなどを盛り込んだWebサイトを制作する際には、プロトタイプの作成を想定しておくといいでしょう。

ワイヤーフレームを使用したWeb制作の流れ

ワイヤーフレームを用いたWeb制作は下記の流れで行われることが多いです。

それぞれの項目について詳しく解説していきます。

打ち合わせ

最初に制作会社と打ち合わせを行い、サイトの目的や仕様、その他細かい要望などを伝えます。制作会社によってはこの時点で企画書や大まかなサイト構成を記したラフ案などを用意してくれることもあります。

反対に、こちらから希望するサイトの構成をまとめた資料や、ページの構成案を用意していくと意図が伝わりやすくなり、スムーズに打ち合わせが進むでしょう。

サイトマップ・ディレクトリマップの確認

制作会社が打ち合わせにもとづいて用意してくれたサイトマップとディレクトリマップを使ってサイト全体の構成を確認します。

• 必要なページが全て揃っているか
• ページの構成（階層）に違和感がないか
• 各ページのタイトルやURL
• 各ページの制作内容

を念入りにチェックし、気になることがあれば遠慮なく質問しましょう。

ワイヤーフレームでレイアウトや仕様を確認

サイト全体の構成に問題がなければ、ワイヤーフレームをもとに各ページのレイアウト構成を確認していきます。サイトマップやディレクトリマップとは違い、ワイヤーフレームはページごとに存在します。各ページのレイアウトが目的に応じて最適なものになっているかをよくチェックしましょう。

基本的に大幅な修正が容易に行えるのはこの段階までなので、後でトラブルに発展することを防ぐためにも入念なチェックが大切です。また、最終的なデザインにも大きく関わるため、制作担当者としっかりコミュニケーションをとりながら進めていきましょう。

デザインカンプ（モックアップ）で最終的なデザインをチェック

ワイヤーフレームで決定したレイアウト構成をもとに作成したデザインカンプを確認します。この段階までくると見た目はほとんど完成に近い状態になっています。全体的なデザインのバランスはもちろん、色味や文字サイズ、フォント、各要素の形など、詳細部分までしっかり確認していきましょう。

プロトタイプでWebサイトの動作を確認（※無い場合もあり）

システムや動的な演出を盛り込んだサイトを制作する場合は、プロトタイプでWebサイトの動きを確認します。デザインカンプに動的な機能を加えて、実際の挙動や操作性が見られるため、より細かい確認が可能です。

このステップは小規模なサイトや静的なサイトを制作する場合には必要ない場合もあるため、気になる方は事前に制作担当者にプロトタイプの有無を確認しておくといいでしょう。

コーディング

ここまでに準備してきた構成やデザインをWebサイトにするための作業を行います。HTMLやCSS、JavaScriptなどのプログラミング言語を用いて各ページを作り込み、インターネット上で公開できる状態にしていきます。

この段階までくると、発注側で行うことはほとんどありません。コーディングが完了し、最終的なチェックが終わったら、ホームページの納品が完了となります。

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

ワイヤーフレームの作成は依頼した制作会社に任せるのも1つの手ですが、求めているWebサイトのイメージを明確に持っている場合は自作してしまうのもありです。そこで、ワイヤーフレームの作り方と注意点を解説していきます。

ワイヤーフレームは、効果的なデザインを行うための設計図であるということを理解した上で下記の流れで作成していきましょう。

構成書を作って必要な情報を整理する

いざワイヤーフレームを作ろうとしても「どこから手を付けていいか分からない」という状態になります。なので、まずは構成書を作成して必要な情報を整理していきましょう。

• そのページで伝えたいこと
• そのページで達成したい目標
• 理想とするデザイン

などを考えながら、目標や目的、伝えたい情報を整理して構成書に書き出していきます。構成書の目的は、”散らばった情報の整理”なので、ExcelやGoogleスプレッドシートなどを活用して作成するのはもちろん、手書きであっても問題ありません。サイトマップなども活用して、できるだけ細かく必要な情報をまとめていきましょう。

ワイヤーフレームを作るページを決める

構成書で整理した必要な情報に沿って、ワイヤーフレームを作成するページを決めます。もちろん、全てのページのワイヤーフレームを作ることが理想ですが、実現にはかなりの時間を要します。そのため、

• 重要なページ
• レイアウトが使い回せる親ページ
• 同じカテゴリーに属するページ

などをピックアップし、最低限作るページを決めましょう。しかし、同じカテゴリーに属するページであっても、レイアウトは別のものを使うというケースも想定できるため、サイトマップで全てのページを確認し、サイト全体の構成を俯瞰しながら決めていくことが重要です。

ページのレイアウトと配置する情報を決める

ワイヤーフレームを作成するページが決まったら、ページごとのレイアウトと配置する情報を決めていきます。情報の重要度に応じて優先度やバランスを考えながら、配置する際の大きさや場所を決めていくことが重要です。Webサイトには基本となるレイアウトが存在するため、迷った際は下記を参考にしながらアレンジしていくのがおすすめです。

必ずしも上記に当てはめる必要はありませんが、Webサイトで達成したい目的とユーザー導線や使いやすさを考えながら、レイアウトを決めていきましょう。

ワイヤーフレームの作成に便利なツール

ワイヤーフレームを作成するためのツールも存在します。無料のものから有料のものまで幅広く存在しますが、日常的にワイヤーフレームの作成を行うわけではなく、社内のWeb担当として単発で作成が必要な場合は、無料のものでも十分クオリティの高いワイヤーフレームが作成できます。

自分に必要な機能やレビューなどを参照し、自分に合ったツールを選択しましょう。

無料ツール

無料のワイヤーフレーム作成ツールは下記のツールが代表的です。

いずれも使いやすく、十分にクオリティの高いワイヤーフレームが作成できます。中でも、「Excel」や「Googleスプレッドシート」などは別の用途で普段から使用している人も多く、新たなツールのインストールや基本操作を覚える必要が無いため人気です。

また、「Figma」と「Miro」は有料プランも存在するため、継続してワイヤーフレームを作成する必要があればアップグレードすることも可能です。いずれのツールでも成果物の品質に大差は生まれないため、使いやすさや好みで選べば問題ないでしょう。

詳細については下記をご覧ください。

有料ツール

有料のワイヤーフレーム作成ツールは下記のようなものがあります。

いずれのツールでも高品質なワイヤーフレームの作成が可能です。ほとんどのツールがワイヤーフレーム以外のデザインを作成することも可能で、本職のWebディレクターやデザイナー向けです。それぞれのツールに強みがあるため、導入する際には下調べを行い、求める機能が搭載されたものを選びましょう。

無料のものでもワイヤーフレームを作成するために必要な機能は全て揃っているため、社内のWeb担当として単発でホームページ制作業務に携わる場合は無料ツールで十分ですが、継続して制作業務に関わる必要があったり、本格的にWebデザインについて学びたい人は導入を検討してもいいでしょう。

まとめ

この記事では、

について解説しました。

ワイヤーフレームはホームページのレイアウトをシンプルに表した設計図です。ワイヤーフレームの作り込み一つでデザインを行う上での大事な基盤になり、そのサイトがもたらしてくれる結果やユーザーに与える印象が大きく左右されます。

そのため、基本的にはWeb制作のプロである制作会社が作成を行ってくれますが、修正点や要望を適切に伝えるためには自分でもワイヤーフレームやレイアウト構成に関する正しい知識を持っておく必要があります。また、事前に自作ワイヤーフレームを作成して打ち合わせに望むと、スムーズな打ち合わせで要望通りのホームページに仕上がる可能性がより高くなります。

突然社内のWeb担当者に抜擢されて困っている方や、初めてのホームページ制作で悩んでいる方は今回の記事を参考に実務にお役立ていただけたらと思います。