webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。
「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」
などは、必ずデザイン部分に入る前に決めてしまいましょう。もちろん作る過程で多少変更はありますが、基本的には入れるべきコンテンツの種類・内容・順番が決まった段階で、ワイヤー・カンプに入ります。
この構成表はサイトマップとは違い、自分自身のサイト制作作業をスムーズに進める為に用意する物です。

サイトマップとは?

サイトマップとは、サイト全体のページ構成や、「どの様なコンテンツが入るか?」などを示すためのもので、サイト制作を進める上で無くてはならない物です。
サイトマップは大きく分けると、ユーザー用と検索エンジン用の2種類があります。


構成表作成の手順

掲載させるコンテンツのグループ分け
いきなり、構成表を作るのでは無く、まずはそのWebサイトに必要なページを全て書き出してみましょう。この時は階層、カテゴリーなど関係なくとにかく思いつくままに。それが終わったらその中でグループ分けをします。


コンテンツの重要度をランク付け
コンテンツのグルーピングが終わったら、次はどの様な順番でページに載せていくかです。気をつけなければいけないのは、作る側やクライアントが「これは重要だ!」と思っているページでも、ユーザーにとって価値のあるコンテンツ・情報か、どうかをしっかりと見極めて、順番を決めましょう。また、コンテンツの順番はSEOとも関わってくるので、上位検索を考えている人はここで、必ず、「検索キーワード」を選定し、キーワードの内容も加味したランク付けを行いましょう。


ユーザーの利便性を考える
Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。要点をしぼってなるべく浅い階層(2〜3階層)を目指しましょう。また、ユーザーがどういう順番で情報を取得すると、ユーザーにとって便利なサイトになるか、などユーザー目線での導線作りを心がけましょう。





課題

自身で1つサイトを探して、自分なりに「サイトの構成表」を作ってみましょう。そしてクライアントワークのサイトの構成表も必ず作成しましょう。


f:id:yachin29:20171007194726p:plain

the-ringo.jp

上記のサイトの場合の例

コンテンツ構成表

ページ構成:5ページ

  1. Home:トップページ
  2. About
  3. Menu
  4. Party
  5. Contact
  6. Reservations(外部サイトへのリンク)
Homeページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. aboutの概要(aboutページへのリンクボタン)
  5. menuの概要(menuページのイメージ画像、Menuページへのリンクボタン)
  6. お店情報(お店情報のイメージ画像、Contactへのリンクボタン)
  7. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  8. 次ページ(aboutページ)へのリンク
  9. フッター(コピーライト、SNSリンク)
aboutページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. お店のコンセプト(店内などのイメージ画像)
  6. シェフの紹介(シェフの画像)
  7. SNSへのリンク
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Menuページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Menuページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. シェフのご挨拶
  6. 料理5品の紹介・料理の画像付き
  7. シェフが料理しているイメージ画像
  8. 予約への誘導
  9. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  10. 次ページ(Partyページ)へのリンク
  11. フッター(コピーライト、SNSリンク)
Partyページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. 貸切パーティーについて
  6. プランの内容例を4例(人数、予算、要望に応じて変更可、という事を明記)
  7. 貸切パーティーの場合の細かい情報
  8. パーティーのイメージ画像
  9. 予約への誘導
  10. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  11. 次ページ(Contactページ)へのリンク
  12. フッター(コピーライト、SNSリンク)
Contactページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. アクセス(住所、最寄駅からの情報、マップ)
  6. 営業時間
  7. 予約への誘導
  8. 外部サイトへのリンク(食べログぐるなび・外部web予約システムサイト)
  9. 次ページ(Homeページ)へのリンク
  10. フッター(コピーライト、SNSリンク)