「ホームページをうまく作って、効果を出したい」

「ホームページ制作に時間がかかり過ぎてしまう」

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ボタン、広告など優先的に表示したい内容を常時表示できる

●        ページのどの位置にいてもトップに戻れるなどページ遷移がしやすい

デメリット

●        スマートフォンでは表示できる横幅を逼迫してしまったり表示されなかったりするため向いていない

 

まとめ

ワイヤーフレームについてご紹介してきましたが、いかがだったでしょか。

ワイヤーフレームの作成においては、初心者やBtoC企業の場合、ついついデザインばかりを重視しがちです。しかしBtoB企業は、自社の目的に沿ったサイトになるよう、正しくワイヤフレームを活用してスムーズに制作を進める必要があります。

ぜひ本記事で紹介した流れに沿って効果の出るホームページ作成へおつなげください。

また、イノーバでは、BtoB企業専門のWEB サイト制作サービスを提供しております。「サイトからお問い合わせやコンバージョンを創出したい」とお考えの場合は、イノーバがお力添えできる可能性が高いです。ぜひ、ご相談ください。