Webサイト設計の手順・やり方とは？SEOに強いサイトを作る7つのポイントを徹底解説！

一貫性のあるWebサイトを運営してユーザビリティを向上させるには、サイト設計が重要です。

優れたサイト設計ができればSEO効果を発揮し、アクセス数の増加にも繋がります。

しかし、サイト設計時に着目すべきポイントは多く、複雑さを感じる方も多いでしょう。

この記事の内容を踏まえてサイト設計を行えば、ユーザビリティやSEOに優れたオウンドメディアやブログを作成できるので、ぜひ参考にしてください。

サイト設計とは？

サイト設計とは、Webサイトについて以下のような内容を定めることを指します。

• サイトのデザイン
• サイトの構造
• 掲載するコンテンツ　など

Webサイトの管理・運営の指針や土台となるので、実際に稼働させる前に必ず行うべき大切な作業です。

サイト設計が曖昧だと、オウンドメディアやブログの一貫性が失われ、使い勝手や効果などのユーザビリティも低下します。

結果としてSEO（サイトを検索結果に上位表示させるための施策）でも評価されにくくなり、閲覧数や収益が低下してしまうため要注意です。

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

優れたサイト設計を行うことで、以下のような効果を得られます。

ここからは、各要素を詳しく解説します。

目的に沿ったWebサイトを作成できる

サイト設計によって、目的に合ったWebサイトを作成できます。

一言でWebサイトと言っても種類は様々です。

• ブログ・アフィリエイトサイト
• 企業サイト
• ECサイト　など

Webサイトの種類により、求められるデザインや構造が異なります。

例えばブログ・アフィリエイトサイトなら、テーマに沿った複数のカテゴリを設定し、各カテゴリの中に記事を作成・投稿します。

一方、ECサイトであれば、商品ページや会員ページ、利用者ガイドなどの準備が必要です。

目的とサイト構造が一致していないと、ユーザーが求めるページになかなか辿り着けないので注意が必要です。

一貫性を持ってWebサイトを運営・管理できる

サイト設計を行うと、一貫性を持ってWebサイトの運営・管理ができるようになります。

Webサイト全体でデザインや構造が一貫していれば、ユーザーは探したいページをすぐに見つけられて、操作もしやすいです。

また、専門性の高いサイトと判断される要因にもなります。

結果として滞在時間が延び、リピート率も増えるでしょう。

一方で、Webサイトに一貫性がないと、使いにくい・信頼性が低いサイトと判断されて、途中離脱に繋がってしまうので注意が必要です。

ユーザビリティが向上する

サイト設計によってユーザビリティが向上します。

目的に合わせて設計されたWebサイトは、ユーザーに以下の効果を与えます。

結果としてCV（ユーザー登録・サービスの利用・資料請求・商品の購入など）率が向上するでしょう。

ユーザビリティが低いと、CV率が下がるだけでなく、SEOにも悪影響を及ぼすので要注意です。

SEO対策に繋がる

サイト設計は、SEOにも影響を与えます。

Googleの「クロール」では、Webサイトのサイトマップを基にクローラーが巡回します。

クロールとは、検索エンジンのロボット（クローラー）がWebサイトを巡回して、文章や画像などを収集し、検索結果に表示させるためのデータベースに登録するシステムです。

サイト設計がわかりやすければ効率的にクロールが行われ、検索エンジンにスムーズに読み込まれます。

優良なサイト設計はGoogleから信頼性が高いサイトと評価されるメリットもあります。

さらに、ユーザーの滞在時間や回遊率が上がれば、Googleに有益なサイトと判断され、検索順位が上がりやすくなります。

Webサイト開設のコスト・時間を削減できる

サイト設計によって、Webサイト開設のコストや制作時間を削減できます。

あらかじめ全体像や制作の流れを把握しておくと、スケジュールを立案しやすくサイト制作もスムーズに進むためです。

サイト設計せずにコンテンツ作成後に構造を変更すると、余計に時間や人的コストがかかります。

サイト設計には一定の時間や労力を要しますが、トータルのコストや時間を考えると必ず行うべき工程と言えるでしょう。

Webサイトの目的・種類別 設計書の例

サイト設計では、Webサイトの目的に応じて構造を決めることが重要です。

ここでは、以下の3つの設計書の例をご紹介します。

• ブログ・アフィリエイトサイト
• 企業サイト（コーポレートサイト）
• ECサイト・ネット通販サイト

ブログ・アフィリエイトサイト

ブログ・アフィリエイトサイトは、テーマに関わるカテゴリを複数設定し、カテゴリ内に記事を投稿する構造が一般的です。

ここでは、アフィリエイトで稼ぐノウハウを発信しているブログを例に挙げます。

←スマホでは横スクロールできます→

基本はカテゴリ別での分類ですが、必要に応じて「プライバシーポリシー」や「お問い合わせ」「運営者情報」なども加えていきます。

企業サイト（コーポレートサイト）

「企業サイト（コーポレートサイト）」とは、企業概要や商品、採用情報などを紹介して、どのような会社かを伝えるWebサイトです。

企業サイトの構造の一例を紹介します。

←スマホでは横スクロールできます→

「事業内容」では、4階層目を作成して「料金」や「導入方法」などを作る例もあります。

まずは発信する情報を洗い出しましょう。

ECサイト・ネット通販サイト

ECサイトでは前述のサイトとは異なり、マイページや特商法に基づく記載などが必要となります。

ECサイト・ネット通販サイトの階層構造の例を紹介します。

←スマホでは横スクロールできます→

商品の構造については、比較的小規模なECサイトで使われる、1商品1カテゴリの構造例です。

価格やランキングなどで商品を探す「ファセット構造」や、LP特化型構造（1ページに情報をまとめた縦長のページ）などの選択肢もあります。

サイト設計の手順・やり方

サイト設計は、大きく以下の手順で進みます。

各工程を詳しく解説します。

1.目的・ターゲットの明確化

サイト設計を始める際は、最初に目的とターゲットを明確化します。

企業サイトの場合は、既に商品・サービスが決まっており、ターゲットも明確であるはずです。

一方、ブログ・アフィリエイトサイトの場合は、ブログテーマや商材から逆算してニーズのあるターゲットを設定しましょう。

年齢や性別、趣味、年収、職業など、細かくペルソナを設定すると、サイト設計の方針も決まりやすくなります。

その後、以下のようにサイト開設の目的も設定します。

• 企業のブランディング
• 企業・商品の認知拡大
• 資料請求や見積件数の増加
• アフィリエイト収入の最大化　など

具体的な数字を決めると、目標達成の有無が明確となりPDCAを回しやすいです。

目的を決めるためにも、企業・ビジネスの現状や課題分析が大切です。

2.競合サイトの調査

次に、競合サイトの調査を行います。

取り扱う商品や事業規模が近い競合企業のWebサイトを、以下のような点から調査しましょう。

• コンテンツの内容
• サイト構造
• デザイン　など

競合調査によって、参考にすべきポイントや差別化要因、投稿するコンテンツなどを把握できます。

3.キーワード選定

キーワード選定とは、Webサイトのテーマや事業に関わるフレーズをピックアップする作業です。

簡単に言えば「いずれのワードで検索したユーザーの検索結果に表示されたいか」を指します。

キーワードを踏まえてサイト設計を行うと、検索結果の上位に表示される可能性が高まり、成果に繋がりやすくなります。

そしてキーワードは、自社視点ではなくターゲット視点から決めることが重要です。

4.サイトマップの作成

サイトマップとは、Webサイトの階層構造やコンテンツの関係などを伝え、全体図を把握できる地図です。

具体的には、上記「Webサイトの目的・種類別　設計書の例」で紹介した図を指します。

サイトマップの作成の流れは以下の通りです。

1. Webサイトで必要な情報・コンテンツの洗い出し
2. 上記情報をカテゴリ別に区分
3. エクセルを用いて可視化

サイトマップはWebサイトの骨組みであり、Googleにもクロールされるので、ユーザー目線でわかりやすく作成しましょう。

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

ワイヤーフレームとは、各ページのレイアウトを図にした設計図です。

以下のような要素を配置する場所を可視化していきます。

• 画像
• ボタン
• テキスト
• CTA
• グローバルナビゲーション
• ヘッダー
• フッター
• サイドバー

ワイヤーフレームの段階では、配色やデザインを細かく決める必要はありません。

使用する要素の種類・機能の共有と、大まかな配置イメージ程度に留めておきましょう。

本格的なデザインはこの後に行います。

6.デザインの作成

サイトマップとワイヤーフレームを決めたら、デザインの制作に移ります。

デザインはターゲットに合わせて、以下のような要素を決定します。

• 全体の雰囲気
• 画像のテイスト
• 配色
• フォント
• アイコン
• ロゴ など

無料で使えるロゴ作成AIツールもありますので、詳しくは【無料】AIでロゴ作成する方法とは？商用利用OKのおすすめツール・アプリも紹介をご覧ください。
【無料】AIでロゴ作成する方法とは？商用利用OKのおすすめツール・アプリも紹介

サイトのデザインは企業のイメージや信頼性に直結します。

後から大幅に変えると企業のイメージも変わる可能性があるので、入念に検討しましょう。

なお、デザインを外注する場合は要件定義書を作成します。

Web制作の流れについての詳細は「【完全版】Web制作の流れ13ステップ！依頼するときに重視したい3つのポイントも紹介」をご覧ください。
【完全版】Web制作の流れ13ステップ！依頼するときに重視したい3つのポイントも紹介

7. 実装・テストの実施

デザインをWeb言語（コード）に変換して、Webサイトとして実装します。

そして、Webサイトが正常に表示・機能するかをチェックしていきます。

テストでは以下のような項目を確認しましょう。

• スマホやタブレットでも問題なく表示されるか
• リンクが正常に機能するか
• お問い合わせが送受信できるか
• 表示速度は正常か
• セキュリティ面の問題はないか　など

サイト設計の7つのポイント・注意点

ユーザビリティが高く、SEOにも強いサイト設計を行うためにも、以下の7つのポイントに着目しましょう。

各要素を詳しく解説します。

顧客・読者の行動を重視する

常に顧客や読者の行動を予測してサイト設計を行いましょう。

例えば、Webサイトを見てサービスに興味を持っても、お問い合わせや資料請求のページが見つからなければ機会損失に繋がります。

他にも、ユーザーが次に見たくなるページのリンクを設定しておけば、ユーザビリティが高いサイトとなるでしょう。

また、ユーザーの視線移動もサイト設計上での重要な要素です。

ユーザーの視線はZ字型、もしくはF字型で移動するケースが多いです。

共通してページの左上が最も読まれる場所です。

ページ左上に重要度の高い情報を載せる、または興味を惹くことが重要です。

サイトに一貫性を持たせる

サイトの以下のような要素には一貫性を持たせましょう。

• テーマ
• デザイン
• レイアウト
• 配色
• フォント　など

前述した通り、サイトに一貫性がないとユーザーに「使いにくい」や「信頼性・専門性が低い」と判断される要因となってしまいます。

ユーザビリティが低下して、SEOでもマイナス評価を受けるので要注意です。

サイト設計を複数人で行う場合、全体で認識を共有することが重要です。

階層は浅く設計する

Webサイトの階層は浅く設計を意識しましょう。

Webサイトの階層が深いと、ユーザーは目的のページに辿り着くまでに時間がかかったり、迷子にもなってしまいます。

また、検索エンジンのクローラーがコンテンツを見つけられず、データベースに登録されない原因にもなるので厳禁です。

階層が深くなる場合は、内部リンクを使ってリンク階層を浅くする方法も有力です。

基本的には2クリック以内で目的のページに辿り着けるように設計しましょう。

専門性を高める

サイト設計時に設定したキーワードを盛り込んで、専門性を高めましょう。

特定のキーワードが盛り込まれていれば、そのページが検索結果に上位表示される可能性が高まります。

また、Googleから専門性の高いサイトと判断されて、サイト全体の評価が上がる点もポイントです。

ブログ運営の場合は、著者情報や監修者の掲載、独自の情報を含めるなどでも専門性を高められます。

ページの表示速度を意識する

サイト設計ではページの表示速度も意識しましょう。

ページの表示速度が遅いと、ユーザーの離脱の原因となり、SEO面でも不利になります。

Webサイトの表示速度を上げる方法として、以下の手法が挙げられます。

• 画像やファイルの軽量化
• 不要なプラグインを削除
• 画像の遅延ロード設定を行う
• AMP（モバイルサイトの高速表示）の設定
• 高性能なサーバーを利用

他にもプラグイン「LiteSpeed Cache」や、配信パフォーマンスを向上させる「CDN」の導入でも表示速度の高速化が可能です。

▼参考記事
LiteSpeed CacheとCDNの組み合わせでWordPress高速化！ LiteSpeed CacheとCDNの組み合わせでWordPress高速化！

レンタルサーバー「カラフルボックス」なら、高速Webサーバー「LiteSpeed」を採用、さらに安価でCDNも利用できます。

ページの表示速度が上がれば、閲覧数や成果が増える要因となるため、ぜひチェックしてみてください。

レスポンシブデザインを採用する

「レスポンシブデザイン」とは、デバイスの画面サイズに合わせてレイアウトが最適化されるデザインです。

現在はパソコンやタブレット、スマホなど、様々な媒体からインターネットが使われます。

ユーザーファーストなWebサイトを作るには、各端末に対応させることが必須です。

レスポンシブデザインなら、1つのURLの管理だけで全てのデバイスで最適化でき、作業量の削減に繋もなります。

また、SEOの観点から言えば、URLが1つになることで評価が分散されないのもメリットです。

内部リンク・外部リンクを活用する

内部リンクと外部リンクの活用もサイト設計において重要です。

内部リンクを使うことで、少ないクリック数で目的のページに辿り着け、サイト内の回遊率も高まります。

また、外部リンクを貼ると自社サイトとリンク先のサイトの関連性をGoogleに伝えられ、SEOでプラス評価を受けられる可能性があります。

外部リンクを貼ってリンク先から被リンクを得られれば、さらにWebサイトの評価は高まるので、有益と判断したリンクは積極的に活用しましょう。

ただし、外部リンクは離脱率を高めるため要注意です。

サイト設計で役立つツール5選

ここでは、サイト設計で役立つツールを5つ紹介します。

Cacoo（カクー）

Cacooは、シンプルで使いやすいオンライン作図ツールです。

サイトマップのテンプレートや図形が用意されています。

また、チームメンバーとリアルタイムで共同編集でき、コミュニケーションツールも豊富に揃っています。

チームでサイト設計を行う場合におすすめのツールです。

Figma（フィグマ）

Figmaはワイヤーフレームの作成におすすめのツールです。

既存のコンポーネントのドラッグ&ドロップだけで、簡単にワイヤーフレームを作成できます。

複数人でのリアルタイム編集やオンライン共有のホワイトボードでアイデアの視覚化が可能なため、スムーズ、かつ効率的に作業を進められるはずです。

Jira（ジラ）

Jiraは、サイト設計を含む様々な場面で活用できるプロジェクト管理ツールです。

タスクの計画や整理、作業管理、プロジェクト進捗状況の可視化などができます。

また、チームに合わせてカスタマイズOK、機能の制限こそあるものの10名までのプロジェクトなら無料で利用できるのが魅力です。

SimilarWeb（シミラーウェブ）

SimilarWebとは、競合サイトの分析に役立つアクセス解析ツールです。

男女比や年齢分布、訪問者の興味、競合サイトなどを把握できるので、自社サイトの戦略策定に役立ちます。

一部の機能は無料、かつ会員登録不要で利用できるため、手軽に試して自分に合っているかも確認しやすいでしょう。

ラッコキーワード

ラッコキーワードはキーワード選定や競合調査に利用できるWebツールです。

関連語やサジェストキーワード、検索ボリュームなどを把握でき、効果的なキーワード選定が実現します。

また、指定のドメインの獲得キーワードを確認できるので、競合調査にも役立ちます。

ラッコキーワードについては「ラッコキーワードの使い方・登録方法を徹底解説：無料・有料の違いやよくある質問も紹介」で詳しく解説していますので、ぜひご覧ください。
ラッコキーワードの使い方・登録方法を徹底解説：無料・有料の違いやよくある質問も紹介

サイト設計でよくある質問

ここでは、サイト設計でよくある質問に回答します。

• サイト設計を見直したい。何からすべき？
• 制作会社への外注時に意識すべきポイントは？

サイト設計を見直したい。何からすべき？

既存のサイトの設計を見直す場合は、現状分析から始めましょう。

現在のサイトの問題点や改善したい項目を洗い出してください。

• サイトの階層が深い
• デザインに統一感がない
• スマホで閲覧した際に表示が崩れる
• CV率をもっと上げたい など

そして、上記を解決するための施策を検討し、必要に応じてサイトマップやワイヤーフレームを作成しましょう。

制作会社への外注時に意識すべきポイントは？

サイト設計を外注する際は、齟齬が生まれない要件定義書を作成しましょう。

要件定義書とは、目的や実装する機能、サイトマップなど、Webサイトの仕様を記載したものです。

要件定義書の内容が曖昧だと、お互いの認識が食い違ったり、スムーズにサイト設計が進まなくなります。

外注先も様々ですが、価格だけで業者を決めずに実績やサポートを加味して検討することも大切です。

まとめ：SEOに強いWebサイトを設計しよう

今回はサイト設計が重要な理由や行う際の手順、ポイントなどを解説しました。

サイト設計は一貫性のあるサイト運営やユーザビリティ、SEO対策に直結する最も重要な基礎部分です。

サイト設計1つで閲覧数や収益性が変動します。

この記事を参考にして、成果の出るサイト設計をしてみてはいかがでしょうか。

また、SEOに強いWebサイトを制作したい方は、レンタルサーバー「カラフルボックス」がおすすめです。

カラフルボックスは、サイトを高速表示できる・安定したWebサーバー「LiteSpeed」を採用しています。

さらに安価、かつ簡単に導入可能なColorfulbox CDNも提供しているので、表示速度が速く、ユーザーファーストなサイト作りが可能です。

ぜひチェックしてみてください！

【超初心者向け】WordPressブログの始め方を簡単にわかりやすく解説