Webサイトの構成はどのように設計する？考え方とポイントを紹介

見やすく使いやすいWebサイトを制作するうえで意識したいのが、全体の設計です。これからWebサイトを制作しようと考えていて、ユーザーフレンドリーな設計にするにはどのようにすればよいか知りたい人もいるのではないでしょうか？

そこでこの記事では、Webサイトの構成を考えるときに意識したいポイントや制作の流れ、注意点を紹介します。

この機会に一通りチェックすることで、ユーザーにとって使いやすいWebサイトをスピーディに制作できるようになるでしょう。

Webサイトの制作で考えたい2つの構成

一言でWebサイトの構成といっても、指すものは大きく以下の2種類に分けられます。

• サイトマップ：Webサイト全体の構成図

• ワイヤーフレーム：ページ一つひとつの構成図

ここでは、それぞれ何を指しているのか、設計段階で意識することがなぜ大切なのかを見ていきましょう。

サイトマップ：Webサイト全体の構成図

サイトマップとは、Webサイト全体の構成をツリー形式で図示したものです。ページの位置を示したもので、どのページがどこにあるのかを明確にします。

Webサイトの設計段階で作成するサイトマップと混同しやすいものに、「HTMLサイトマップ」と「XMLサイトマップ」があります。

HTMLサイトマップはサイト内に存在するWebページへのリンクをまとめたもので、ユーザーが必要なページをすぐに探せるようにすることを目的としたものです。XMLサイトマップは検索エンジンに対してWebサイトの構造を教えるもので、いずれも設計で作るサイトマップとは異なります。

ワイヤーフレーム：ページ一つひとつの構成図

制作時に設計図として使用し、ページ内のどこにどのコンテンツを配置するのかを図示したものがワイヤーフレームです。ページ内に盛り込まなければならない情報を取捨選択し、どこに配置するのかを考えて構成図に落とし込みます。

必要な情報を取捨選択したら、ページ内にどのような形で盛り込むのかを考えて枠を描きます。その後、Webページに盛り込みたい具体的な情報が決まったら、ワイヤーフレーム内に記載しましょう。

ワイヤーフレームを作成する段階では、デザインを作り込む必要はありません。必要な情報をどのような形で提供するかにフォーカスしましょう。

関連コンテンツ：Webサイト制作におけるワイヤーフレームの基礎知識｜作成手順やおすすめツールを紹介

サイトマップを作成するときの流れ

新しくサイトマップを作成するときは、以下の流れで設計を進めます。

1. Webサイトの目的を定める

2. 提供する情報をリストアップする

3. 一つひとつの情報をカテゴリ分けする

4. ユーザーの動きを意識してサイトマップを作成する

それぞれの段階でどのように作成を進めればよいか見ていきましょう。

1. Webサイトの目的を定める

まずはWebサイトを作成する目的を明確にしましょう。一言でWebサイトといっても、制作の目的はさまざまです。代表的なWebサイトの種類と目的を簡単に見ていきましょう。

目的によってWebサイト内に盛り込む情報も異なります。

たとえば、コーポレートサイトであれば企業情報や歴史を、プロモーションサイトであれば商品・サービスの詳細や魅力、強みなどを紹介するのが基本です。

2. 提供する情報をリストアップする

目的が明確になったら、その目的を達成するためにどのような情報が必要か考えてリストアップしましょう。たとえば、コーポレートサイトを作成する場合は以下のように情報をリストアップできます。

情報をリストアップする段階では、細かく分類する必要はありません。Webサイトに盛り込みたい要素を書き出してみましょう。

3. 一つひとつの情報をカテゴリ分けする

情報のリストアップが完了したら、それぞれの情報をカテゴリごとに分けましょう。カテゴリ分けの例を挙げると、以下のとおりです。

• 企業情報

  企業概要

  企業理念

  経営陣紹介

  沿革・歴史

• 事業紹介

  事業A

  事業B

  事業C

• 投資家情報

  決算短信

  決算説明会資料

• プレスリリース

  ニュース

• 採用情報

  求人情報A

  求人情報B

上記のように、関連する情報をグルーピングして階層構造を組みましょう。この段階になると、サイトマップのおおよその形ができあがります。

4. ユーザーの動きを意識してサイトマップを作成する

グルーピングが完了したら、階層構造を図案化してサイトマップに落とし込みましょう。ツリー構造にするときは、ユーザーが必要な情報にアクセスしやすいか考えましょう。

階層を深くしすぎたり、カテゴリに合わないページを入れたりするとわかりにくくなり、ユーザーの利便性が低下します。

制作をスタートする前にサイトマップを作成することで、制作時にどのページの配下に何を配置すればよいかわかりやすくなります。

ワイヤーフレームを作成するときの流れ

Webサイトの構成を考えたあとは、各ページでどのように情報を提供するか考えます。適切な流れで情報を提供できるようにするには、見やすく分かりやすいレイアウトを作成して ワイヤーフレームを作成することが必要です。

ワイヤーフレームの作成は、以下の手順で進めましょう。

1. ページ内に掲載する情報をリストアップする

2. 必要なパーツを用意する

3. 各情報の重要度に応じて優先順位を決める

4. ページ内のレイアウトを決める

5. ワイヤーフレームに落とし込む

ここでは、それぞれの段階でどのようなことを意識して制作すればよいか紹介します。

関連コンテンツ：Webサイト制作におけるワイヤーフレームの基礎知識｜作成手順やおすすめツールを紹介

1. ページ内に掲載する情報をリストアップする

まずは制作するページに掲載する情報をリストアップしましょう。必要な情報の抜け・漏れを防ぐため、この段階できちんと書き出しておきます。

たとえば、コーポレートサイトのトップページを作成する場合は、以下のような情報を盛り込むことになるでしょう。

具体的な配置はあとで考えるため、この段階では必要な情報を書き出せれば問題ありません。

2. 必要なパーツを用意する

ページに盛り込む情報が決まったら、必要なパーツを用意しましょう。用意するパーツは、大きく以下の3つに分けられます。

この段階でデザインまで考える必要はありません。「どのパーツをどこに掲載するか」を考えることが大切です。

3. 各情報の重要度に応じて優先順位を決める

必要なパーツがそろったら、掲載する優先順位を決めましょう。ページにアクセスしたユーザーは、基本的に上から下に見ていきます。そのため、重要な情報から順番に配置するのが基本です。

また、ページの最後も比較的目に留まりやすい傾向があります。そのため、アクションを促すリンクや関連リンクなど、次に見てほしいものを最後に設置するのも有効な方法です。

重要な情報を中間に配置すると他の情報に埋もれ、ユーザーに見てもらえなくなる可能性があります。情報の順番が効果に大きく影響を及ぼすことを意識しておきましょう。

4. ページ内のレイアウトを決める

おおよその構造が決まったら、細かいレイアウトを決めましょう。この段階では、具体的なカラムレイアウトを定め、配置する具体的な情報を決めます。

Webサイトを制作するときに意識したい基本的なカラムレイアウトの例は、以下のとおりです。

Webサイトの種類や提供したい情報によって、適したレイアウトが異なります。たとえば、コーポレートサイトであればマルチカラムレイアウトが、作品集であればフルスクリーンレイアウトやグリッドレイアウトがよいでしょう。

レイアウトが決まったら、前段階で定めた優先順位にしたがって重要なものから順番に配置します。

5. ワイヤーフレームに落とし込む

ページの設計が固まったら、具体的なワイヤーフレームを制作しましょう。ワイヤーフレームは設計図になるため、何をどこに配置するかひと目でわかるようにしておくことが大切です。

画像やテキスト、ボタンなどを配置する位置を決め、迷わず実装できるようにします。なお、ワイヤーフレームを設計する段階では、細かいデザインを考える必要はありません。

制作が進行していく中で、デザインを変更する可能性があるためです。

Webサイトの構成を考えるときの注意点

スムーズに制作を進めて想定していたとおりのWebサイトに仕上げるには、いくつか注意しておきたいポイントがあります。

ここでは、サイトマップ・ワイヤーフレームを作成するときの注意点をそれぞれチェックしていきましょう。

サイトマップを制作するときの注意点

サイトマップはWebサイト全体の構成を決める重要な役割を果たします。制作時には、以下の点に注意しましょう。

それぞれ意識するポイントを紹介します。

操作回数を少なくする

ユーザーが必要な情報にすぐアクセスできるよう、できるだけ少ない操作回数でページにたどり着けるようにしましょう。階層を深くしすぎるとアクセスに時間がかかってストレスになるため、3階層を意識しましょう。

3階層であれば、トップページからカテゴリページにアクセスし、その後コンテンツページにアクセスするなど2クリック程度で情報に到達します。

「必要な情報に迷わずアクセスできるだろうか」と考えなからサイトマップを制作しましょう。

ユーザーの導線を強化するうえで意識したいポイントは、以下でも詳しく解説しています。

関連コンテンツ：サイト内回遊率UP！CMS 導線強化に役立つ５つのサイト構成を紹介 | STUDIO Tips - YouTube

重要度の高い情報にアクセスしやすくする

Webサイトの中でとくに重要な情報には、すぐにアクセスできるようにしましょう。新商品の紹介ページやQ&Aページなど、多くのユーザーがアクセスするページが存在する場合が代表的な例です。

「よくアクセスされるページ」という項目を作成し、ナビゲーションバーなどの目立つ位置にアクセス数が多いページへのリンクをまとめるのもひとつの方法です。

重要なページにすぐアクセスできるようにしておけば、ユーザーの利便性が高まります。

ワイヤーフレームを制作するときの注意点

ワイヤーフレームを制作するときは、過不足なく情報を提供しつつ見やすくまとめるためにも、以下のポイントを意識しましょう。

それぞれなぜ大切なのか、どのようなことを考えればよいかを解説します。

必要な情報を確実に盛り込む

ワイヤーフレームを設計する段階で、必要な情報を確実に盛り込みましょう。完成したワイヤーフレームにしたがって実装するため、ここで抜けていると抜けたままになる可能性が高いといえます。

ワイヤーフレームが完成したら一度見直し、事前準備で書き出した情報がきちんと網羅できているかチェックしましょう。

あわせて、重要なものから順番に並んでいて、ユーザーにとって見やすい構成になっているかも確認します。

マルチデバイス対応を意識する

ユーザーはPCやスマホ、タブレットなどさまざまなデバイスでアクセスします。それぞれのデバイスで画面サイズや解像度に差があるため、マルチデバイス対応を意識することが大切です。

PCで見やすい構成でもスマホで見にくければ、スマホでアクセスしたユーザーを逃すことに繋がりかねません。そのため、アクセスしたデバイスによってフレキシブルにレイアウトを変える「レスポンシブデザイン」を意識するとよいでしょう。

設計段階でレスポンシブデザインを意識することで、マルチデバイス対応を容易にしつつ設計にかかる工数を削減できます。

Studioでは構成を考えるのに役立つテンプレート・イメージを提供

Webサイトの制作において、構成をきちんと考えることはユーザーにとって使いやすく、必要な情報を過不足なく伝えるうえで欠かせません。しかし、ゼロから自分で考えるとなると、多くの手間がかかります。

Webサイトの構成を考えるのが難しいと考えている人は、ぜひStudioの利用を検討してみてください。Studioでは構成を考える際の参考になる資料として、多種多様なテンプレートやWebサイトのイメージを提供しています。

テンプレートやイメージを参考にしつつWebサイトの構成を考えることで、工数や時間を削減しつつユーザビリティが高いWebサイトを制作しやすくなるでしょう。

Studioのテンプレートやイメージは、以下から確認できます。これからWebサイトを制作する人は、ぜひチェックしてみてください。

Webサイト制作では目的を達成するために最適な構成を考えよう

Webサイトを制作する目的をきちんと果たすには、必要な情報を過不足なく、かつ見やすく提供するために適切な構成を考える必要があります。

Webサイトの構成では、サイト全体の構造を示す「サイトマップ」と各ページの設計を示す「ワイヤーフレーム」の2つを考慮するのが基本です。

Studioでは、Webサイトの構成を考えるうえで参考にできるテンプレートやサイトのイメージを提供しています。それらを参考にすることでスピーディに制作を進められるため、ぜひチェックしてみてください。

また、Studioはコーディング不要で直感的にWebサイトを制作でき、専門知識がなくても工数を削減しつつ制作できます。