こんにちは。

webディレクターの青木です。

先日、webサイトが出来るまで#02でヒアリングをもとに

コンセプト・方向性についてご紹介しましたが、

3回目の今日は、コンセプトをもとにwebサイトの構成づくりについてお話しします。

【目次】

• サイトマップを作ろう～ページのグループ分けと導線～
• ワイヤーフレームを作ろう～ページ内の設計図を組み立てる～

サイトマップを作ろう～ページのグループ分けと導線～

コンセプトが決まったら、いよいよデザイン！
・・・といきたいところですが、webサイトはチラシやポスターと違って複数のページから成り立っています。

そのため、何のページを何ページ作るのか、どのページがどこへリンクするのか など、Webサイトの導線を図にまとめておく必要があります！

これが、いわゆる「サイトマップ」です。

始めにサイトマップを決めておくことで、情報整理しやすく、ページの全体像が把握できます。

関連するページのグループ分け

いきなりwebサイトの導線図を書き出そうとしても、どんどん浮かんできて上手くまとまらないものです。

まずはそのWebサイトにどんなページが必要なのか全て書き出してみましょう。

この時は階層、カテゴリーなど関係なくリスト形式でも可能です！

とにかく思いつくままに書いてしまうことが大切 です。

全て書き出したら、その中でグループ分けをしていきます。

ユーザーが使いやすい・見やすいページ導線

Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。

要点をしぼってなるべく浅い階層（２〜３階層） を目指しましょう。

ページの情報を整理したものが、こちら。

ワイヤーフレームを作ろう～ページ内の設計図を組み立てる～

サイトマップが完成したら、次は「ワイヤーフレーム」を作成します。

ワイヤーフレームとは？

ワイヤーフレームとは、文字通り「骨組み」のことです。

突然ですが、新居に引っ越される際にインテリアコーディネートを考えませんか？

リビングには、テレビとソファーとテーブルと・・・・

テレビを角に持ってきて、その前にテーブルとソファーを置いて・・・

など。

ワイヤーフレームも同じです。

ページ内で、「何を」「どこに」「どういう風に」入れるか まとめたものになります。

いわゆる、お部屋の間取り図のようなものですね！

この作成をしておくことで、ちゃんとユーザーが求めている情報は入れることができるか、

見やすい配置が出来ているか確認が出来、その後のデザインもスムーズに行えます。

ワイヤーフレームの作り方

ワイヤーフレームの作り方は手書きやツールなど様々です。

先ほどの「何を」「どこに」「どういう風に」入れるか設計図さえ分かれば問題ありません。

便利ツールもたくさんありますが、初めて作る方は、まずは紙とペンを用意して手書きで書いてみるのもいいかもしれません。

今回は、ここまで。

次回、ワイヤーフレーム作りのポイントなど詳しく紹介していきたいと思います！