Webサイトの全体構成・情報設計の重要性

CG・ゲーム学科 Webデザイン
Webサイトの全体構成・情報設計の重要性
藤本 勝己
2014年9月8日(月)
14年9月8日月曜日
情報設計のワークフロー図
14年9月8日月曜日
サイト構造を見直す５つのステップ
Step１：コンテンツを書き出す
まずはサイト内にあるコンテンツを
書き出していきます。
量を書きだしたり整理したりする作
業の場合、私は後で並べ替えたり書
き換えたりが楽なのでホワイトボー
ドと付箋紙を良く使います。
14年9月8日月曜日
サイト構造を見直す５つのステップ
Step２：グルーピング
全て書き出したら、近しいもので塊
をつくります。グルーピングの際
は、なるべく被らず漏れのない・わ
かりやすいよう納得のいくまで行い
ます。それぞれのグループの関係性
も考え、区分けしていきます。（こ
のカテゴリーを見る人はこっちもみ
るだろう、このカテゴリーを何回も
読む人はそのカテゴリーにも触れて
もらいたいなど）
14年9月8日月曜日
サイト構造を見直す５つのステップ
Step３：ラベリング
うまく分類することができたら、それぞれのグループ
名前をつけます。「誰に」「何を」を「どうやって」
伝えるのかを思い出し、ターゲットに受け入れられや
すい単語を選びます。これにはサイトの専門領域・ベ
クトルを示す役割もあります。
14年9月8日月曜日
サイト構造を見直す５つのステップ
Step４：ひな型となるサイト構造のモデルを選ぶ
Webでの情報設計には3種類の代表
的なモデルがあります。階層型分類
構造・Web型構造・直線型構造で
す。これらのモデルはいろんな呼ば
れ方をしています。またこのほかに
も新しいモデルがいくつか出てきて
いますが、ここではオーソドックス
な3タイプの特徴を見ていきたいと
思います。
14年9月8日月曜日
サイト構造のモデル
1.階層型分類構造
もっとも基本的で親しみのある型です。ディレクトリをイメー
ジすると分かりやすいです。
【メリット】
サイト内で現在地を把握しやすい事
【デメリット】
「１つの情報は１つのカテゴリーに属する必要」があるため、
複数のカテゴリーに属する情報がでてきたときに困る。
【留意点】
階層はあまり深くすると、クリック数も必然的に増えてしまう
ため注意が必要。
14年9月8日月曜日
サイト構造のモデル
2.Web型構造
階層型分類構造や直線型構造の持つ制約を取り払い、どのページ
にも行けるというリンク機能を存分に発揮できる網目状の構造。
【メリット】
ページ間の移動が自由なのでリンクを設置しやすい。
【デメリット】
どのページと度のページをリンクするべきか、明確なルールがな
い分設計の難易度が上がる。
【留意点】
ユーザーが自由に移動できる半面、ルールが見えない無秩序なサ
イトに映ってしまう
14年9月8日月曜日
サイト構造のモデル
3.直線型構造
今回は階層型分類構造というパターンをひな型に作成しました。
実際はページ内リンクがそれぞれのページに貼りめぐらされてい
たり、ツリー構造に属していない情報もあります。
サイト構造ができたら、サイトの中でも特に重要なコンテンツに
印をつけます。
14年9月8日月曜日
サイト構造のモデル
Step５：サイト構造を作成
14年9月8日月曜日
サイト構成の実習
http://www.okonomi.co.jp/
14年9月8日月曜日
サイト構成の実習
http://www.okonomi.co.jp/
みっちゃん総本店をモデルに
実際に全体のサイト構成を作ってみる
Step１：コンテンツを書き出す
Step２：グルーピング
Step３：ラベリング
Step４：ひな型となるサイト構造のモデルを選ぶ
1.階層型分類構造
Step５：サイト構造を作成
Step6：ワイヤーフレームの作成
14年9月8日月曜日
サイト構成の実習
TEE OFFICIAL WEB SITE
http://www.tee-web.jp/
14年9月8日月曜日
サイト構成の実習
http://www.okonomi.co.jp/
TEE OFFICIAL SITEをモデルに
実際に全体のサイト構成を作ってみる
Step１：コンテンツを書き出す
Step２：グルーピング
Step３：ラベリング
Step４：ひな型となるサイト構造のモデルを選ぶ
1.階層型分類構造
Step５：サイト構造を作成
Step6：ワイヤーフレームの作成
14年9月8日月曜日
サイト構成の実習
穴吹デザイン専門学校
http://www.anabukih.ac.jp/
14年9月8日月曜日