【第5回】webサイトの骨組みをつくろう

スマホ時代でも通用する!ホームページのしくみを知る

この記事で学べること

  • 載せたい情報の整理方法
  • 情報のグループ分けの方法

いままでの連載でどういう人にどういうことをして欲しいのか、ということを考えていきました。

大変お待たせしました!ようやくここから実際にwebサイトを作る準備をしていきますよー。

前回の【第4回】webサイトになにを載せる?では、どんな内容を載せるかを考えていきました。

載せたいものをそれぞれwebページにしていって、そこからwebサイトにしていくには、先ほど考えた載せたい内容を整理することが重要です。その整理した情報をwebページに載せていきます。

では、ここから骨組みを作る方法について紹介します。

まずは道具を準備

載せたい内容を整理するには、まず実際にwebページに具体的に「これを載せたい!」ものを一気に書き出していきます。

書き出す場所は、紙でもパソコンでもスマートフォンでもなく「付箋」です。そう、あの「付箋」です。なぜ付箋でかって?それはこのあと分かります(ふふふ)。

用意するのも

  • 付箋
  • ペン
  • 模造紙/ホワイトボード/スケッチブックなど広い面

掲載したいことを書き出していこう!

付箋とペンが準備できたら、webページに掲載する(したい)ことを書き出します。とにかく書いて書いて思いつくまま書き出しまくります。ポイントは付箋1枚に1ワードです。

「これを言ったらマイナスイメージになるんじゃないかしら?」「こんなのはいらないかな?」とかそんな遠慮はいりません。とにかく思いつくまま付箋にガンガンに出していきましょう。

大事なことなのでもう一度言います。「ポイントは付箋1枚に1ワードです。」

グループ分けをしよう!

思いつくまま書き出したら、これらをグループ分けしていきます。グループ分けには2ステップあります。

  • 1つ目は、固定の情報か動く情報かのグループ分け
  • 2つ目は、固定情報の中での情報のグループ分け

です。ではひとつひとつ見ていきましょう。

STEP1:固定の情報か動く情報かのグループ分け

書き出した情報をみてみると、固定の情報(住所や定休日など)と、日々変化する情報(日替わりランチの紹介やキャンペーン情報など)の違いがでてくることがあります。

基本webサイトはwebページ(固定の情報)でまとめていきますが、日々変化する情報はブログやSNSを利用したほうが良いときもあります。

まずは、webページで掲載する情報か、ブログやSNSで掲載する情報なのかのグループに分けます。付箋だから移動が簡単!

皆さんのビジネスや商売、また伝えない内容によって、固定の情報だけでブログやSNSが必要ない場合ももちろんあります。

STEP2:固定情報のグループ分け

次に、固定情報のグループ分けです。同じような内容の付箋をひとまとめにしていきます。たとえば住所や電話番号、営業時間などは同じグループになりそうです。

うれしいのでもう一度言わせてください。付箋だから移動が簡単ですね!

グループ例

  • お店や会社などに関する情報
  • 商品に関する情報
  • 取り扱いに関する情報
  • どれにも当てはまらない情報

このときに、どこのグループにも入らないものや優先度の低いものがでてきたら、強引にどこかのグループに入れるのではなく「いらないものグループ」として端に寄せておきます。

ここでもう一度、ホームページを見に来た人が求めているものがあるのか、ヌケがないかを確認します。そして情報が重複していないかももちろん確認します。

グループは5つぐらいにまとめる

さて、グループはいくつできましたか?ここから最終調整です。グループの数が5つ以上になってしまった場合は、伝えたいことを詰め込みすぎているかもしれません。

5つ以上になってしまった場合は、グループに優先順位をつけてみてください。6つ目以降のグループは

  • ほんとうに今回のwebサイトに必要なのか
  • 他のグループと同じような内容じゃないか

などをもう一度検討してみてください。

あってもなくてもいいグループは思い切って「いらないものグループ」にしてください。ここでの「捨てる勇気」が、いいwebサイトをつくる近道です。

重要なのは「今回のwebサイトの目的」です(【第3回】webサイトを使って誰がなにをする?を参照)。

これでwebサイトの骨組みが完成しました!

そしてこの骨組みを元にwebページの設計図(サイトマップ)を作って、実際にwebページ・webサイトを作っていきます。


いかがでしたか?

やりたいことや伝えたいことを具体化することで、webサイトの全貌が見えてきたのではないでしょうか。

さぁ!ステキなwebサイトのスタートです!

本日のまとめ

  • 載せたい情報を付箋で出しまくる
  • 情報のグループ分けがwebページの土台
  • グループ分けは5つぐらいまで

みんなにシェアしよう!

もくじ

  1. 【第1回】webページ? webサイト? ホームページ?なにが違うの?
  2. 【第2回】どんなホームページをつくる?
  3. 【第3回】webサイトを使って誰がなにをする?
  4. 【第4回】webサイトになにを載せる?
  5. 【第5回】webサイトの骨組みをつくろう

著者:山本和泉

会社員・OAインストラクターを経て、2000年よりWeb制作を中心とする活動を開始。クライアントのニーズに合わせたコンサルティングから企画・制作、運用アドバイスの業務を行う。また執筆やWeb制作に関する講座も10年以上担当し、特に初心者に向けた解説を得意とする。
その他、アクセシビリティの情報サイトの運営やイベントの企画なども行う。
URL:http://izuizu.jp

あわせて読みたい連載

あなたにオススメの記事

close

みんなにシェアしよう!

menu