Webサイト設計とは?おすすめのツールもご紹介します

Webサイト設計とは?おすすめのツールもご紹介します

ホームページやブログなどWebサイトを制作する場合には、基本的にサイト設計という作業を最初に行います。

このサイト設計がうまくいってい状態で制作・運用を行ってしまうと、Webサイトがうまく活用できなくなってしまいます。

サイト制作やリニューアルを行う際にサイト設計の方法で悩んでいる場合には、ぜひこの記事を参考にしてみてください。

オンラインマーケティングなら、
私たちにお任せください!

オンラインマーケティングなら、
私たちにお任せください!

デザインから制作、Webマーケティングまで
幅広く対応することが可能です。

合同会社RAMでは、ホームページ制作マーケティングデザインに関する各種サポートを行っています。お見積りは無料で行っておりますので、お気軽にお問い合わせください。

\ 費用をかけずにホームページを作りませんか? /

沖縄県の格安・サブスクリプション型のホームページ制作サービス「GiveDesign」

サイト設計とは?

サイト設計とは?

サイト設計とは、目的を達成するために行うWebサイトの設計のことです。

必要なページの洗い出しやそれぞれのページ構成の確認、導線設計などを行います。

もうすこしわかりやすく説明すると、どのようなページを制作しどのようにリンクを貼ってつなげていくかを考える工程のことです。

\ Webや集客、デザインに関するお悩みなら /

サイト設計の型を紹介

サイト設計の型を紹介

サイト設計には、いくつかのパターンがあり、基本的にはサイトの内容によってある程度の型が決まっています。

  • 1ページ完結型のサイト
  • 複数ページで制作するサイト
  • ブログなどのメディア型のサイト
  • ポートフォリオサイト(1ページ完結)
  • ポートフォリオサイト(復数ページ)

ほとんどのサイトが、この5つのうちのどれかに分けられます。

1ページ完結型のサイトの構成

1ページ完結型のサイトの構成

1ページで完結させるサイトは、このような構成になっています。

  • トップページ
    企業概要
    企業沿革
    サービス紹介
    お問い合わせ
    採用情報

コーポレートサイト以外にも、飲食店のサイトなども1ページにまとめる場合には上記のようになります。

■構成で参考になるサイト
株式会社VIC
イノベートスコープ株式会社

複数ページで制作するサイトの構成

複数ページで制作するサイトの構成

複数のページで制作するWebサイトは、このような構成になっています。

  • トップページ
    • 企業概要
    • 企業沿革
    • サービス紹介
      • サービスA
      • サービスB
      • サービスC
    • お問い合わせ
    • 採用情報

これが、よくあるWebサイトのイメージでしょう。

■構成で参考になるサイト
合同会社RAM
株式会社エンタクト

ブログなどのメディア型のサイトの構成

ブログなどのメディア型のサイトの構成

ブログなどのメディアサイトの場合、このような構成になっています。

  • トップページ
    • カテゴリーA
      • 記事A
      • 記事B
      • 記事C
    • カテゴリーB
      • 記事1
      • 記事2
      • 記事3

トップページからカテゴリーページではなく、直接記事ページへリンクをしている場合がほとんどどですが、サイト設計的には上記のようになっている場合が多いと思います。

本サイトでも、上記のようなサイト設計を行っています。

■構成で参考になるサイト
RAMコラム
LIVE PORTAL

ポートフォリオサイト(1ページ完結)の構成

ポートフォリオサイト(1ページ完結)の構成

ポートフォリオサイトを1ページで完結させている場合には、このような構成になっています。

  • トップページ
    提供しているサービス
    制作実績などの実績情報
    お問い合わせ

多くの情報を掲載しない場合だと、このように1ページで完結させていることがほとんどです。

■構成で参考になるサイト
maima.me
Lunam Et Stellas

ポートフォリオサイト(復数ページ)の構成

ポートフォリオサイト(復数ページ)の構成

複数のページで完結させるポートフォリオサイトは、このような構成になっています。

  • トップページ
    • プロフィール
    • 提供しているサービス
      • サービスA
      • サービスB
      • サービスC
    • 制作実績などの実績情報
      • 実績A
      • 実績B
      • 実績C
    • お問い合わせ

自身のプロフィールや複数のサービス情報など、多くの情報を掲載している場合にはこのように複数ページでサイトを構成している場合があります。

■構成で参考になるサイト
Marginal Man
UNDERLINE

\ Webや集客、デザインに関するお悩みなら /

サイト設計の考え方

サイト設計の考え方

サイト設計では、この3つを順番に実施していきます。

  1. 必要な項目を洗い出し
  2. 項目をカテゴリー単位で整理
  3. カテゴリーごとにページ単位で整理

①必要な項目を洗い出し

まずは、必要な項目の洗い出しを行います。

必要な項目というのは、サイト内に掲載する情報のことを意味しています。

順番や構成などを考える必要はなく、特に仕分けたりする必要もないので、まずは掲載したい情報をひたすら洗い出します。

同じような業種のサイトを参考にしていると、必要な項目や不要な項目、入れることで差別化できる項目が見えてくると思います。

項目の例としては、次のようなものがあげられます。

コーポレートサイトの場合

  • 企業概要
  • サービス紹介
  • サービスA
  • 企業沿革
  • お問い合わせ
  • サービスB
  • サービスC
  • 採用情報

メディアサイトの場合

  • カテゴリーA
  • 記事3
  • 記事B
  • 記事1
  • カテゴリーB
  • 記事C
  • 記事2
  • 記事A

ポートフォリオサイトの場合

  • プロフィール
  • サービスA
  • 実績A
  • 実績B
  • サービスC
  • 制作実績などの実績情報
  • サービスB
  • 実績C
  • 提供しているサービス
  • お問い合わせ

②項目をカテゴリー単位で整理

上の内容で洗い出した項目を、項目ごとにカテゴリー単位で整理していきます。

カテゴリー単位というのは、1つ1つの共通のグループでまとめていくという意味です。

コーポレートサイトの場合

■企業情報に関する内容
企業概要
企業沿革

■サービス情報に関する内容
サービス紹介
サービスA
サービスB
サービスC

■お問い合わせなどのフォームに関する内容
お問い合わせ
採用情報

メディアサイトの場合

■カテゴリーAに関する内容
カテゴリーA
記事A
記事B
記事C

■カテゴリーBに関する内容
カテゴリーB
記事1
記事2
記事3

ポートフォリオサイトの場合

■プロフィールに関する内容
プロフィール

■サービスに関する内容
提供しているサービス
サービスA
サービスB
サービスC

■実績に関する内容
制作実績などの実績情報
実績A
実績B
実績C

■お問い合わせなどのフォームに関する内容
お問い合わせ

③カテゴリーごとにページ単位で整理

あとは、これまでにまとめた内容をツリー状に整理していきます。

ここまでが終了するとサイト設計は完了するので、それぞれの構成に沿ったサイトを制作していきます。

\ Webや集客、デザインに関するお悩みなら /

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

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

サイト設計に活用できるおすすめのツールとしては、大きく次の3つの項目にわけられます。

  • キーワード選定
  • マインドマップ作成
  • ワイヤーフレーム作成

それぞれの内容ごとに最適なツールを紹介していきます。

キーワード選定

キーワード選定では、ラッコキーワードUbersuggestなどのツールが活用できます。

よく検索されているキーワードを取得したり、それぞれのキーワードのおおまかな検索数を予測することができます。

より詳しいツールの使い方などについては、こちらのSEOやインターネット広告出稿に使えるキーワード選定ツールを紹介した記事でまとめています。

マインドマップ作成

マインドマップでは、サイトの大まかな構成を決めていきます。

各記事への導線設計や、必要なページを洗い出します。

Windowsの場合だとXmind、Macの場合だとMindNodeがおすすめです。

オンライン上で使用したい場合や、共有・共同編集をしたい場合には、MindMeisterなどがおすすめです。

どれも無料プランがありますので、ぜひ利用してみてください。

ワイヤーフレーム制作

[サイト設計 ツール]で検索をかけた際に「ワイヤーフレーム」に関する情報が多数あったので、ワイヤーフレームといってサイトのデザインを仕上げるところまでをサイト設計としています。

下層ページに関してはデザインを使い回すことも多いので、トップページのデザインと下層ページ1〜3ページ分ぐらいを決めることができれば、基本的にはサイト設計は完了します。

主にAdobe XDFigmaなどのツールを利用します。

\ Webや集客、デザインに関するお悩みなら /

サイト設計を失敗してしまうと・・・

サイト設計を失敗してしまうと・・・

サイト設計を失敗してしまうと、記事やページを作成しても誰もアクセスできなくなってしまったり読者の求めている情報とは違った内容を表示させてしまうことになります。

そうなってくると、読者にとっても検索エンジンにとってもいいことではありあません。

なので、サイトを作る段階でどのような情報を入れるのか、どのようなページが必要なのか、どのような構成にするのかをしっかり決めておきましょう。

\ Webや集客、デザインに関するお悩みなら /

デザイン・構成が決まったらサイトを制作していきましょう!

デザイン・構成が決まったらサイトを制作していきましょう!

キーワード選定やデザイン、サイトの構成が決まったらサイトを制作していきましょう。

サイト制作では、HTMLなどのファイルを制作し、サーバーにアップロード、公開を行っていきます。

具体的な手順についてはこちらのホームページの作り方についてまとめた記事でまとめているので、ぜひ参考にしてみて下さい。

\ Webや集客、デザインに関するお悩みなら /

サイト設計から制作・運用までを任せたいなら、合同会社RAMにご相談ください!

合同会社RAM(ラム)

Webサイトの設計から制作、運用までを任せたい場合には合同会社RAMにご相談ください。

ホームページの制作からWebマーケティングまでを幅広く対応することが可能です。

予算を抑えての制作や短期間での制作も可能ですので、まずはお気軽にお問い合わせください。

\ Webや集客、デザインに関するお悩みなら /

オンラインマーケティングなら、
私たちにお任せください!

デザインから制作、Webマーケティング
まで幅広く対応することが可能です。

オンラインマーケティングなら、
私たちにお任せください!

デザインから制作、Webマーケティング
まで幅広く対応することが可能です。

沖縄県の格安・サブスクリプション型のホームページ制作サービス「GiveDesign」