「ホームページをうまく作って、効果を出したい」
「ホームページ制作に時間がかかり過ぎてしまう」
BtoB企業のマーケティング担当者やサイト制作の担当者のほとんどが、このように考えていることでしょう。
ホームページを短い時間で構築し、最大限の効果を出すためには「ホームページの設計図（ワイヤーフレーム）」が鍵になります。
本記事ではホームページの設計図（ワイヤーフレーム）とは何かといった基本から、ホームページの設計図を作成する流れなどを、ポイントを押さえながら解説します。
BtoB企業がホームページの効果を最大限活かすため、ホームページ制作の効率化のためにぜひ参考としてください。
弊社では、BtoB企業専門のWEB サイト制作サービスを提供しております。集客から見込み客の獲得や商談の創出を可能にするウェブサイトへリニューアルしたい方は、こちらもご覧ください。
ホームページの設計図（ワイヤーフレーム）とは？
画像引用元：https://www.shutterstock.com/image-vector/wireframe-outline-icon-premium-design-web-1188262570
ホームページの設計図（ワイヤーフレーム）は、Webページの設計図のことです。具体的にはWebページの「どこに」「何を」「どのように」配置するかを決めるものです。
ワイヤーフレームにより、Webページの制作作業をスムーズに進められるというメリットがあります。ワイヤーフレームを作る方法としては手書きでも良いのですが、電子データで作成・保存するほうが望ましいでしょう。
なぜならホームページ作成を1人で進めることは考えられず、できるかぎりチームメンバーでシェア（共有）しやすい形のほうがホームページ作成を効率的に進められるからです。
ワイヤーフレームについて簡単にまとめます。
● Webページの作成についてレイアウトやサイズなど大まかな情報整理ができる
● 電子データで作成・保存すればメンバーとのコミュニケーションツールにもなる
ホームページの設計図を作成する際の事前準備
ここでは、実際にホームページの設計図（ワイヤーフレーム）を作成する際の事前準備について解説します。ホームページの目的を達成するためには、以降で紹介するポイントを押さえなければ達成は難しいでしょう。
事前に準備しておくべきことは次のとおりです。
● ホームページの目的を明確にする
● 誰に、何を伝えたいのかを明確にする
それぞれ解説していきます。
ホームページの目的を明確にする
ホームページの目的がなければ、「ホームページに掲載するべき情報」も定まらないはずです。さらにホームページの目的はそのホームページを運営する企業によって変わってきます。
つまり自社が「ホームページによりどのような成果を得たいのか」といった問いに対して、明確に答える準備をするべきなのです。
一般的にホームページの目的には次のようなものが挙げられます。もし明確にできていないのであれば、自社はどのような思いを込めてホームページを作成するのか、一度考えてみましょう。
● 潜在顧客に自社商品・サービスを知って検討してもらいたい（サービスサイトなど）
● 既存顧客のリピートやアップセル（顧客単価向上）を狙いたい
● 自社の魅力・情報を発信しながら人材獲得につなげたい（採用サイト）
できるかぎり具体的に、ホームページの目的を明確にすることが重要です。
誰に、何を伝えたいのかを明確にする
ホームページには「訴求」という考え方が必要です。訴求とは「ターゲットの持つ気持ち（購買意欲）に働きかけること」です。
BtoB企業にとっての「誰に」は、もちろん「企業」です。BtoCのターゲットである「消費者」とは異なります。消費者と企業では購買プロセスに違いがあるため、そのプロセスに応じた情報をホームページに掲載する必要があるのです。
次に「何を」伝えたいのかを考えてみましょう。目的が「自社商品・サービスの商談・成約」の場合、自社商品・サービスの魅力などを伝える必要があるでしょう。
ここまでは当然のことです。しかし、「自社が伝えたい 情報を伝える」のも必要ですが、「見込み顧客が知りたい情報を伝える」という意識もワイヤーフレーム作成段階から忘れてはいけません。
ディレクトリマップやサイトマップとの違い
ホームページを設計していく段階で、ワイヤーフレームだけでなく「ディレクトリマップ」や「サイトマップ」という言葉も押さえておかなければなりません。ここでは、それぞれの違いについて簡単にまとめます。
| ディレクトリマップ | Webサイト全体の情報と場所をまとめたもの |
| サイトマップ | Webサイトの全体像を示すもの |
| ワイヤーフレーム | Webページのレイアウトを決めるもの |
実際にホームページを設計していく際は、この記事で紹介している「事前準備」でまとめた情報をサイトマップとして表し、詳細をディレクトリマップにまとめ、ディレクトリマップをもとにワイヤーフレームの作成状況を管理するといった手順で進められることも多いです。
ディレクトリマップとは、WebサイトすべてのページのURLとタイトルがまとめられている一覧表です。エクセルやスプレッドシートといった表計算ソフトで作成されることが多いです。
サイトマップはWebサイトのページ同士のつながりや全体像をわかりやすく把握するために使われ、「ハイレベルサイトマップ」と呼ばれることもあります。
ディレクトリマップをしっかりと作ることによって、ホームページのページ数（ボリューム）を把握できたり、無駄な情報や不足している情報を発見したりすることにつながります。
ホームページの設計図（ワイヤーフレーム）を作成する流れ
以降では実際にホームページの設計図（ワイヤーフレーム）を作成する流れをご紹介します。ワイヤーフレーム作成の流れは次のとおりです。
1. 必要な情報をピックアップする
2. ピックアップした情報を種類ごとにグルーピングする
3. サイト全体構成を作る
4. グルーピングした情報に優先順位を付ける（ランキング）
5. レイアウトやサイズを決めてコンテンツを配置する
必要な情報をピックアップする
ワイヤーフレームを作成する前の事前準備として、ホームページの目的と誰に何を伝えるのかを明確にすることが重要であるとお伝えしました。
その前提をもとに、ホームページに掲載するべき情報をピックアップしていきましょう。
ピックアップした情報を種類ごとにグルーピングする
次はピックアップした情報を、種類ごとにグルーピングしていきます。この作業により、次におこなうサイト全体の構成を作りやすくなります。
サイト全体構成を作る（サイトマップ）
グルーピングした情報をもとに、サイトの全体構成を作りましょう。
ユーザビリティやSEOの観点から、「すべてのコンテンツに3クリック以内でアクセスできる」と良いといわれています。これは複雑すぎるサイト構成にしてしまった場合、ユーザーが情報にアクセスすることが難しくなるからです。
そのため、ホームページの階層は3階層以内にすると良いでしょう。
グルーピングした情報やサイトマップをもとに優先順位を付ける（ランキング）
サイトマップを作ってすぐにワイヤーフレームの作成にとりかかる場合もありますが、優先順位をつけたほうが望ましいです。
なぜならホームページの作成には多くの時間と労力が掛かり、より効率的に作業を進めなければならないためです。
採用サイトであれば、「従業員の平均年収」ページのレイアウトが決まっている（ワイヤーフレームを作成した）のに、「経営方針」ページのレイアウトが決まっていないという状態は、応募者側のニーズを考慮し避けるべきでしょう。
実際、「リクルートキャリアが取りまとめた『就職白書 2020』」によると、「学生が知りたいと思った情報」のトップは「経営方針・事業戦略」で、「従業員の平均年収」よりも優先すべきページであると考えられます。
画像引用元：就職白書 2020（PDF）｜就職みらい研究所（リクルートキャリア）
レイアウトやサイズを決めてコンテンツを配置する
ここまで来て、ようやくワイヤーフレームの作成に入ります。始めに、レイアウトのコツを一部挙げてみます。
● 見てほしいものは上に大きく
● 見た目のデザインを考えすぎない
● スマホ版は別に作るかレスポンシブデザインにすること
● 企業目線ではなくホームページに訪れるユーザー目線で作成すること
レイアウトのコツは以上のとおりですが、レイアウトといってもWebページにはいくつかの代表的なレイアウトがあります。以降ではその一部を簡単にご紹介します。実際に作成する際は、オンラインで作成できるワイヤーフレームツールやオフラインで作成できるツールなど多数あるため、自社に合った方法を探しましょう。
1カラムレイアウト
そもそもカラムとは「列」のことで、1カラムレイアウトは1列にそれぞれのコンテンツを並べるレイアウトのことです。
メリット
● 無駄な情報を抑えられるため訴求に適している
● コンテンツの横幅に余裕がある
デメリット
● ボリュームの大きいページでは縦長になってしまい読みにくい
● テキストコンテンツだけだとリッチさに欠ける
マルチカラムレイアウト
1カラムレイアウトが1列に並べるスタイルであるのに対し、マルチカラムでは複数の列にコンテンツを並べます。多くの企業がこのマルチカラムレイアウトを採用しています。
メリット
● ボリュームの大きいページでも情報を整理しやすい
● 表示の大きさなどを調整し、強弱をつけられる
デメリット
● 不要な情報まで含みやすく、重要なことが伝わりにくい可能性がある
● 横幅を活かしたレイアウトのため、スマートフォンユーザーに関してはレスポンシブデザインにするなど工夫が必要
サイドバー固定レイアウト
ユーザーが縦にスクロールしても、サイドバーが常に固定されて表示されるスタイルです。
メリット
● CTAバナーやSNSボタン、広告など優先的に表示したい内容を常時表示できる
● ページのどの位置にいてもトップに戻れるなどページ遷移がしやすい
デメリット
● スマートフォンでは表示できる横幅を逼迫してしまったり表示されなかったりするため向いていない
まとめ
本記事では、効果の出るホームページを作成するためのワイヤーフレームの基本と活用方法について詳しく解説しました。BtoBホームページの制作では、自社の目的や伝えたい情報を明確にし、サイトの設計段階からそれらを意識することが重要です。ワイヤーフレーム作成の流れに沿って、情報の優先順位付けやレイアウトの最適化を進めることで、スムーズかつ効率的なホームページ制作が可能になるでしょう。
イノーバでは、BtoB企業に特化したWEBサイト制作サービスを提供しています。集客力の向上やコンバージョンの創出など、貴社のビジネス目標達成に貢献するホームページ制作をサポートいたします。ワイヤーフレームの作成から、デザイン設計、コンテンツ制作まで、WEBサイトの運用に必要なすべての項目をカバーしたワンストップサービスで、お客様のマーケティング活動を強力にバックアップします。ホームページのリニューアルをご検討中の方は、ぜひイノーバまでお問い合わせください。
ぜひこちらの記事もお読みください：ホームページ設計・レイアウト
ホームページレイアウトの重要性と選び方｜レイアウトの実例あり
Webサイト制作に欠かせない「ワイヤーフレーム」の基礎知識を徹底解説
FAQ
Q: ワイヤーフレームとはどのようなものですか？
A: ワイヤーフレームとは、ホームページの設計図のことです。各ページの構成要素やレイアウトを視覚的に表現したもので、サイトの情報設計を行う上で重要な役割を果たします。
Q: ワイヤーフレームを作成するメリットは何ですか？
A: ワイヤーフレームを作成することで、ホームページ制作をスムーズに進められます。事前にページ構成を決めておくことで、デザインやコンテンツ制作の効率化が図れます。また、チームメンバー間の情報共有やコミュニケーションツールとしても活用できます。
Q: ワイヤーフレームを作成する際に重要なポイントは何ですか？
A: ワイヤーフレームを作成する際は、まずホームページの目的を明確にすることが重要です。また、ターゲットユーザーに伝えるべき情報を整理し、優先順位を付けることも必要です。ユーザービリティを考慮したサイト構成とページレイアウトを心がけましょう。
Q: ワイヤーフレームの作成にはどのようなツールを使えばよいですか？
A: ワイヤーフレームの作成には、オンラインツールやオフラインツールなど様々な選択肢があります。Figma、Adobe XD、Sketchtなどのデザインツールや、Whimsical、Moqups、Balsalmiqなどの専用ツールが人気です。自社のニーズに合ったツールを選ぶことをおすすめします。
Q: BtoBホームページの制作で特に気をつけるべき点は何ですか？
A: BtoBホームページの制作では、自社の製品やサービスの特長を明確に訴求することが重要です。また、顧客の課題解決に寄与する情報を提供し、問い合わせやコンバージョンにつなげることを意識する必要があります。ターゲットとなる企業の購買プロセスを理解し、それに沿った情報設計を行うことが成果の出るサイト制作のカギとなります。
