基本ノウハウ
Webサイト構成をどのようにすべきか分からず、困っていないでしょうか。Webサイト構成はWebサイトの種類や目的によって大きく変わるため、目的や性質を知っておくことが大切です。
本記事では、Webサイト構成とはどのようなものか、構成作成の注意点や、構成例、おすすめのツールについて紹介します。
Webサイトの構成とは、どこにどのような情報があるのか、ユーザーを自社商品やサービスにどのように促すか、動線を意識して作成するものです。構成を決めておくことで、Webサイト制作がスムーズに進めやすくなるでしょう。
大まかにサイト全体の構成とページごとの構成に分けられるため、次で解説します。
サイト全体の構成は以下のようなマインドマップで構成されるのが一般的です。
サイトマップが整理されていると、Web制作会社に要望を分かりやすく伝えられるため、より正確な見積もりを作ってもらいやすくなります。
サイトマップが整理されていない場合、必要なページ数や内容に抜けや漏れが出る可能性があり、作業の巻き戻しが発生する可能性があるでしょう。
ページごとの構成は以下の図のようなワイヤーフレームで構成することが一般的です。
ワイヤーフレームで、大まかな構成が形になっていることで、Webサイトの視覚的なイメージを共有できます。
Webサイト構成図を作成することで、必要な内容を客観的に整理でき、Web制作会社により具体的なイメージを共有できます。作成手順の例は以下の通りです。
どのような手順で進めれば良いか、次で解説します。
Webサイトの目的はサイト制作時に最初に決めるべき内容です。資料請求なのか、商品購入なのか目的によって、サイトの構成は変わります。
既存のWebサイトをリニューアルする場合でも必要不可欠。目的例をいくつか具体的に挙げる。目的は1つにしてブラさないことが大切。
競合サイトを調べることも大切です。業種が近いため、Webサイト構成は適用できるものも多く、必要な情報を網羅しやすくなります。
競合他社のサイトは、必要なページを考える上で参考になる上、自社と他社の強みや弱みを比較するのにも役立つでしょう。
目的に沿って、必要な情報を整理します。抜けや漏れが出ないよう、ブレインストーミングするのがおすすめです。ブレインストーミングとは、あるテーマについて複数人で、必要なものを自由に出し合う集団発想法です。
ブレインストーミングした内容はカテゴリごとに整理することで、必要な情報をある程度網羅しつつ、まとめられます。
書き出した情報をマインドマップで整理し、サイト構造をまとめましょう。マインドマップを使うことで、サイトの大まかな階層が分かりやすくなります。
分かりやすいサイトマップは、ユーザーも迷子になりにくくする上でも効果的です。
Webページは3つの構成で構成されます。
それぞれどのような役割なのか、次で解説します。
ファーストビューとは、Webページにアクセスした際に最初に表示される部分です。通常は最上部に位置しています。
ファーストビューはユーザーが最初に目にするため、サイトの目的や内容を伝える重要な要素が含まれてます。具体的には、ロゴやサイト名、ナビゲーションメニュー、キャッチコピー、ヘッダー画像などです。
ファーストビューで読者の興味が引きつけられなければ、離脱してしまいます。そのため、ファーストビュー以降のコンテンツを読んでもらうためにも非常に重要な部分です。
メインコンテンツは、Webページの中心的な部分で、そのページの目的や情報を伝えるためのコンテンツが配置されます。
掲載されるコンテンツは目的によってさまざまですが、記事、画像、動画、製品情報、問い合わせフォームなどが挙げられるでしょう。
メインコンテンツは、ユーザーがサイトを利用する目的を満たすための情報や機能を提供することが重要です。メインコンテンツの質や分かりやすさがユーザーの最終的な満足度に直結します。
クロージングビューは、Webページの最後に位置する部分で、ユーザーに最後の行動を促す役割があります。フッターやその他のサイト情報が含まれることが多く、ユーザーが最後に目にする部分です。
お問い合わせやメールマガジンへのリンク、SNSリンクなどを添付し、それらのリンクをクリックしてもらうための誘いの文言を記載します。
Webサイト構成は正しい形で作られなければ、成果につながりません。どのような点に注意すべきか、次で説明します。
Webサイトの構成は目的に沿っているか確認しながら進めましょう。目的は1つに決め、目的に合わせて必要な情報は何か検討することが大切です。
また、目的にない情報を過度に盛り込み、テーマにない情報を入れてしまうと、Webサイトの目的が果たせなくなる可能性があります。
目的が複数の場合は、1つにまとめるのではなく、別サイトの制作を検討しましょう。
ターゲット像は具体的にして、「性別・年齢・趣味・所属」まで決めることが大切です。イメージを共有することで、社員やターゲットの認識を共有しやすくなり、Webサイトの方向性がブレるのを防ぎます。
Webサイトはさまざまな情報が必要ですが、重要度の高いページとそうではないページに分けられます。そのため、優先順位を決めておき、制作を進めると、重要な部分にフォーカスして判断しやすくなるでしょう。
その後のWebサイト分析でどの情報を収集すべきかも決められるため、分析を効率化する上でも重要です。
ユーザーが欲しい情報に、無理なくたどりつける構成になっているかが重要です。構成が分かりやすくなっているかに加え、文字やリンクの位置なども「本当に見つけてもらえるか」という視点で考えることが大切です。
テキストだけで伝えるのが難しい場合には、動画やイラストなどを使う方法も検討しましょう。
Webサイトの構成は多くても3階層、できるだけ2階層に止めることが大切です。階層が多いほど、顧客が必要な情報にアクセスしにくくなり、離脱率アップにつながります。
階層が深くなる場合は、カテゴリが足りていないなどの可能性が考えられます。
見込み顧客ごとに、属性や興味のある内容が変わり、動線も変わります。例えば、興味がある内容が商品なのか、会社なのか、コンテンツの中身なのかそれぞれで、顧客が取りうる行動は同じではありません。
見込み顧客のニーズを意識し、ユーザーに合わせた動線づくりが大切です。
Webサイト制作やリニューアルで成果を出すためには、枝葉の問題を解決するだけで終わらせないことが大切です。Webサイトの運用に不慣れな人の場合、「見た目のデザインを整えたい」のように、根本的な課題ではない部分の改善をしようとすることも考えられます。
目的やターゲットから、必要なデザインを考えることが大切です。
Webサイト構成で必要な情報は幅広いため、似たようなコンテンツが発生することがあります。そのようなコンテンツは必要な情報へのアクセスが阻害される要因になり、ユーザーを惑わす要因になりかねません。
また、似たようなコンテンツがあることで、SEO上不利になる可能性もあります。
Webサイトは種類別で掲載すべき内容に違いがあります。ここでは、Webサイトの種類別に基本的な構成例を紹介します。
コーポレートサイトは企業が自社の情報を発信するためのWebサイトです。企業情報の発信やブランディング、信頼関係の構築などを目的としています。大まかな構成例としては以下の通りです。
上記はほとんどのサイトで必要になりますが、それ以外の要素としては、SNSや社員の紹介などのコンテンツを入れる場合もあります。
EC（電子商取引）サイトはオンライン上で商品やサービスを購入・販売するためのWebサイトです。Webサイト構成例は以下の通りです。
ECサイトは商品を売ることが主な目的です。しかし、そのためには、安心して購入できるよう企業についてやプライバシーポリシーなどのページも重要な役割を果たします。
人材採用サイトは、求人面での企業のブランディングや、働く魅力を伝えることが目的です。Webサイト構成例としては以下のものが挙げられます。
これらの要素はコーポレートサイトと似ていますが、対顧客に向けてのメッセージではなく、「働くためのビジョン」を伝えることが大切です。
また、社員インタビューなどのような、会社で働くリアルなコンテンツがあると、一緒に働く姿をイメージさせやすくなります。
サービス販促サイトとは、オンライン上で特定のサービスをPRするためのWebサイトです。サービスの紹介や特定のサービスについての売上向上などを目的としています。
Webサイト構成例としては以下の通りです。
このWebサイトを確認することで、購入までの不安感や疑念を払拭させることが大切です。
Webサイト構成はさまざまなツールでつくれますが、作成に必要な機能は少なく、有料のものを使う必要性はそれほどありません。ここではどのようなツールがおすすめなのか紹介します。
ExcelやPowerPointは、サイト構成を大まかに整理するだけであれば、十分な機能を持っています。「図」→「SmartArt」→「階層構造」を選ぶことで、Webサイト構成をまとめる図が作成可能です。
PowerPointでも、「図」→「SmartArt」→「階層構造」から、作成できます。
XMindは無料で構成図をつくれるツールです。ブレインストーミングなどの機能があり、一部有料ですが、Webサイトの構成を作るだけであれば、無料版でも作成できます。
本記事では、Webサイトの構成について解説しました。Webサイトの構成は事前にまとめておくことで、イメージをより的確に、Web制作会社に伝えられ、スムーズな打ち合わせが可能です。サイト構成をまとめておくと、Webサイト制作をスムーズに進められ、「イメージと違った」という事態も回避できます。
さらにWebサイト構成は、Webサイトを訪れたユーザーが探している情報にたどり着きやすくするための重要な要素であり、スムーズな動線作りはユーザーの離脱を防ぐことにもなります。Webサイト制作の前にぜひ本記事でご紹介した作り方を参考にしていただき、効果的なWebサイト作成にお役立てください。
