Webサイト制作

Webサイト設計とは？5つの手順や成功のコツについて解説

# Webサイト

2023.04.20

Webサイト設計とは、どのようなサイトのテーマで、どのようなコンテンツをサイト内に落とし込むかをあらかじめ明確に決めて設計しておくことです。

効果的なWebサイト設計を行うことでサイト制作全体の見通しがよくなり、出来上がったサイトには高いユーザビリティやSEOへの好影響が期待できます。

この記事ではWebサイト設計の重要性や、効果的なWebサイト設計を行うための具体的な手順を5ステップに分けてご紹介します。Webサイト設計に悩む事業者の方、これからWebサイト制作を始める方はぜひ参考にしましょう。

Webサイト設計が重要な3つの理由

Webサイト制作において、サイト設計が重要な理由は以下の3つです。

サイト制作に必要な全体像が掴める
ユーザビリティ向上が期待できる
SEOへのポジティブな影響が期待できる

1. サイト制作に必要な全体像が掴める

Webサイト制作において、制作するサイトの全体像がはっきりしていること、全体像が関係者に共有できていることは重要な要素です。Webサイト設計はサイトの目的から逆算して、どのような内容が必要で、全体としてどのようなページを制作するべきなのかを考えるいい機会になるでしょう。

またサイト設計をしっかりと行うことでサイトとしての発信テーマがブレにくくなり、結果としてサイトそのものの専門性も向上します。

2. ユーザービリティ向上

Webサイト設計により、それぞれのページの目的やページ同士の関連性が明確となり、サイト全体でユーザーごとに必要な情報の提供がスムーズとなります。その結果、ユーザビリティの向上が期待できます。

3. SEOにポジティブな影響

SEOへのポジティブな影響を受けられることも、Webサイト設計が重要と言われる理由です。Webサイト設計により専門性とユーザビリティが向上することで、より高いSEO効果を得られるでしょう。またページ同士の関連性が明確となることで、検索エンジンのクローラーにも巡回がしやすい、いわゆるクローラビリティの高いWebサイトとなります。

このような理由から、Webサイト設計はサイト制作者、サイトの訪問者、検索エンジンの三方に効果的といえるのです。

関連記事：クローラーとは？仕組みやSEOにおけるインデックス対策について

Webサイト設計の手順5ステップ

Webサイト設計の手順を、次の5ステップの順番で解説します。

Webサイトの目的を整理する
目標を決める
必要なページの洗い出し、サイトマップの作成
要件定義をまとめる
各ページのワイヤーフレームの作成

なおサイトをリニューアルする際のWebサイト制作全体の詳細な流れやかかる費用については無料配布資料の「失敗しない！コーポレートサイトリニューアル」にて解説しています。企業の印象を大きく左右するコーポレートサイトの制作を検討している方は、ぜひ下記よりダウンロードして自信を持ってページの設計をできるようになりましょう。

1. Webサイトの目的を整理する

まずはWebサイトを新規制作、もしくはリニューアルをする目的を整理しましょう。

Webサイトをただ作って終わり、というケースは少なく、例えばコーポレートサイトであればWebサイト経由の受注数（お問い合わせの数）の確保や、ブランディング、採用などが目的となります。サービスサイトの場合は商品の販売、リード（見込み顧客）の獲得が目的となるケースが多いです。

またリニューアルの際は現状の課題や問題点についても関係各所へのヒアリングのもとピックアップし、改善ポイントについてもこの段階で検討しておきましょう。

2. 目標を決める

Webサイトの目的が決まれば、目標を設定しましょう。決めるべき指標は、主に次の2つです。

KGI（Key Goal Indicator）とは最終的な目標であり、先に検討したWebサイト制作の目的を数字に落とし込んだものです。「⚪︎件／月の問い合わせを受ける」「⚪︎人採用を行う」「⚪︎件／月のリード獲得」など具体的に決めましょう。

またKPI（Key Perfoemance Indicatore）はKGIをいくつかのマイルストーンに分解した途中目標です。KPIはKGIに対する現状のパフォーマンスを評価するために使用されます。「CVR⚪︎%」や「SS数⚪︎セッション」など、こちらも具体的に定めることで、未達の際に原因を特定しやすくなります。

3. 必要なページの洗い出し、サイトマップの作成

目的が達成されるよう、サイトに掲載するべき情報の洗い出しと必要なページの把握を行いましょう。

サービスサイトであればトップページでサービスの紹介を行い、他のページで細かい機能の紹介や事例（お客様の声）や料金プランをそれぞれ詳細に説明したページを作成する必要があります。必要に応じて検索結果からの集客を目的としたブログも必要に応じて実装を検討しましょう。

コーポレートサイトであれば、会社概要やサービス一覧、実績などが最低限必要で、目的に応じた追加ページの検討が必要です。例えば採用が目的のコーポレートサイトである場合、サブディレクトリやサブドメインでの別途採用ページ制作が必要でしょう。もちろん集客口がSEOとなる場合は、ブログ機能の実装が必要です。

このようにサイトに必要な要素と、その要素をカバーするページが洗い出せたら、サイトマップを制作します。サイトマップ（サイトツリー）とはサイトの構成をツリー構造型に表現した図を指します。サイトマップにより、作成が必要なページやページ同士の関連性が関係者の間で共有しやすくなります。

関連記事：サイトツリーとは？メリットと作り方やおすすめツールについても

また記事コンテンツからの集客を見越している場合は、どのキーワードを対策するのかについての検討もしておきましょう。そのキーワードを中心としたキーワード選定もしておくといいでしょう。ターゲット特定ジャンルで感じるであろう疑問（検索ニーズ）がサイト全体を通してを解決できるように設計することで、サイトの専門性が担保されやすくなります。

関連記事：SEOキーワード選定の方法6ステップ｜おすすめツールや注意点も

制作する記事コンテンツは表もしくはコンテンツマップに起こしておくと、後々の管理が楽になるので、キーワード選定をする場合は合わせて作成しておきましょう。

4. 要件定義をまとめる

要件定義はサイトの使用を決定するステップです。

課題整理や解決の方法、サイトに必要な要素やサイトの構成ページ、Webサイト制作の目標について文書化して残しておきましょう。

要件定義書があることで、Web制作の担当部署や社内外の関連部署と認識を一致させる目的があります。要件定義が不十分のままだと、制作の途中で関係者から意見が出て手戻りが発生する可能性も。

後々工数を取られないように、ここで要件をしっかり固めておきましょう。

関連記事：Webサイト制作に必要な「要件定義」とは？必要項目や進め方についても

5. 各ページのワイヤーフレームの作成

サイトマップが完成し、要件定義が定まれば次はワイヤーフレームの作成を行いましょう。ワイヤーフレームとは、それぞれのページごとのレイアウトや要素の配置を決める設計図です。

ちなみにワイヤーフレームのタイミングでは、デザインはまだ行いません。ワイヤーフレームが確定したのち、色やフォント、画像などの視覚的要素を決め、ブランドイメージに合ったデザインに仕上げます。

デザインが完了次第、実装フェーズに進むことが可能です。

Webサイト設計を成功させる3つのコツ

Webサイト設計を公開的に行い、サイト制作・リニューアルを成功させるコツは次の3つです。

ペルソナをはっきりさせる
ディレクトリ構造だけでなく、リンク階層も意識する
集客方法→売上を立てる道筋についても検討する

1. ペルソナをはっきりさせる

ペルソナとは制作予定のWebサイトに訪れるであろう具体的な人物像のことです。Webサイトの訪問者といっても、最終的に販売したいサービス・商品の利用者に近い属性の訪問者であることが望ましく、現状のサービス・商品の利用者や顧客に実際にヒアリングするなどして、同じような属性の訪問者をイメージしてペルソナを固めていきましょう。

無料配布資料「ペルソナ設計入門ガイド」ではLeadGridチームが実際にワークショップを開催する際の内容をまとめております。ぜひ下記資料をダウンロードし、貴社のWebマーケティング戦略で狙うべきペルソナを設計しましょう。

2. ディレクトリ構造だけでなく、ページ同士のつながりも意識する

必要なページを洗い出しサイトの構造を考えるときは、ディレクトリの構造だけではなくページ同士のつながりも意識しましょう。

ディレクトリの構造は多くの場合ツリー状になりやすく、必要な情報を親子関係を崩さないように縦割りで配置していくような配置になります。「サービス概要」のディレクトリの配下には「サービスA」「サービスB」「サービスC」がならぶ、といったような形です。

関連記事：ディレクトリ構造はSEOで重要？最適化の際の7つの注意点も

ただこのような縦割りの構造だけでは様々な訪問者のユーザーのサイトに訪れた理由を全て解決できません。例えば「サービスA」のページ内に訪問者の知らない単語が出てきた際に、その単語を説明するような記事へのリンクがないと、その単語を検索するために他のサイトへ離脱してしまうおそれがあるのです。

そこで「サービスA」ページ内には「サービス概要」ページや他のサービスへのリンクだけではなく、関係するブログ記事へのリンクも貼っておきましょう。ページ同士のつながりを意識して、様々な訪問者のニーズを満たすことが重要です。

3. 集客方法→売上を立てる道筋についても検討する

Webサイトの目的を達成するためには、制作段階で集客方法や、集客したユーザーをどのようにして売り上げに繋げていくのかをあらかじめ検討しておきましょう。

例えば集客方法であれば検索結果（SEO）の他にもSNSや広告など、様々な経路があります。また集客したユーザーに対する導線設計も重要です。

いきなりサービス・商品のLPを訴求するのか、もしくは一旦リード情報（メールアドレスや電話番号）の獲得にとどめておいて、インサイドセールスやメールマーケティングに繋げるのかによって、目標に対する結果が大きく変わってしまうことも珍しくありません。

関連記事：Webサイトの導線設計とは？動線との違いや作り方、改善施策を解説

関連記事：インサイドセールスとは？意味やメリット、やり方を解説

関連記事：メールマーケティングとは？BtoBにおける重要性や具体的な方法を解説

Webサイト設計におすすめのツール

ここではWebサイト設計におすすめのツールを、5つ紹介します。

Jira
Figma
Xmind
Ahrefs
semrush

プロジェクト管理ツール：Jira

▲出典：Jira

Jira（ジラ）はTrelloなどを運営するATLASSIAN社の提供するプロジェクト管理ツールです。10ユーザーまでであれば無料で利用可能で、Trello同様にボードを利用したプロジェクト管理が特徴です。

サイト制作やサイト設計はWeb担当者一人ではなかなか進行が難しく複数人で取り組む必要があるのですが、Jiraのようなプロジェクト管理ツールを使用することでスムーズな進行が可能となります。

Jiraの詳細はこちらから

汎用ワイヤーフレームツール：Figma

▲出典：Figma

Figma（フィグマ）はコラボレーションに強みのあるデザインツールです。複数人で同時に同じファイルを見ながらの編集が可能なので、ワイヤーフレームの作成・検討などをスムーズに行えます。

またオンライン上のホワイトボードとしても使い方が可能で、Webサイトの目的整理やペルソナの検討においても効果を発揮します。

Figmaの詳細はこちらから

マインドマップツール：xmind

▲出典：xmind

サイトマップやコンテンツマップ制作の際はマインドマップツールが便利です。代表的なマインドマップツールとして、xmind（エクスマインド）を紹介します。xmindは、アイデアの整理や情報の整理、タスク管理、チームでのコラボレーションに役立つツールです。サイトマップでの利用はもちろん、サイトに関するアイデアや周辺情報を整理し、他の人と共有する際にも利用できます。

PCやスマートフォンでのアプリ、ブラウザなど様々なプラットフォームからアクセスできる点もxmindの魅力です。

xmindの詳細はこちらから

SEOツール：Ahrefs

▲出典：Ahrefs

Ahrefs（エイチレフス）は、SEOやコンテンツマーケティングに利用可能なブラウザ上で動作するツールです。競合他社のウェブサイトや検索エンジンでのパフォーマンスを調査・分析し、自社のWebサイトを最適化するための情報を取得できます。主な機能としてキーワードリサーチ、バックリンク解析、競合分析、ランキング追跡などがあり、SEOを行うのであれば必須のツールといえます。

Ahrefsの詳細はこちらから

オールインワン分析ツール：semrush

▲出典：semrush

semrush（セムラッシュ）は、SEO、PPC、SNSなどコンテンツマーケティングの広い分野において利用可能なオールインワン分析ツールです。

キーワードリサーチ機能により検索ボリュームや競合度を調査し、集客に貢献できるキーワードを見つけることができます。また競合分析機能を使って、競合他社のSEO戦略や広告戦略を分析し、自社の戦略に応用も可能です。

Ahrefsとの使い分けとしては、集客施策がSEOのみであればAhrefs、他の流入経路も見込む場合はsemrushがおすすめです。

semrushの詳細はこちらから

サイト設計は制作会社に依頼しよう

この記事ではWebサイト設計について重要性や設計手順について解説しました。ここで紹介したWebサイト設計を成功させるコツも意識して、サイト制作を進めていきましょう。

またサイト設計から全て自社でサイト制作に取り組むのはなかなか大変です。時間的なリソースもかかりますし、そもそもWeb制作やSEOに関する知見も必要です。

そこで新規のサイト制作やWebサイトリニューアルは、制作会社に依頼しましょう。制作会社に依頼することで、プロの知見を踏まえたサイト設計ができますし、制作自体も任せられるので、Web担当者はWebサイトでの目的や必要な情報の洗い出し、社内の調整に力を注ぐことができます。

もちろん株式会社GIGでも、SEOコンテンツ設計を含めたサイト設計からご依頼可能です。

デザイン性の高さに定評のあるCMSであるLeadGridを利用し、会社やサービスの価値観・ブランディングを活かしたデザインのサイトをご提案します。

LeadGridの詳細はこちらから

お問い合わせはこちらから

LeadGridの制作事例はこちらから

ちなみに制作会社に依頼の際はRFPがあるとスムーズです。RFPとは “Request For Proposal” の略で、システム開発やサイト制作を導入・発注する際に依頼内容をまとめた提案依頼書のこと。無料配布資料「RFPの書き方」をぜひダウンロードし、実際にRFPを作成してスムーズに依頼できるようになりましょう。