サイトマップ(サイトストラクチャ)を考える

31
サササササササ ササササササササササ ササササ KIA base 001 KOUSUKE (seven) INAMOTO Generalasahi

Upload: kousuke-inamoto

Post on 02-Dec-2014

4.599 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: サイトマップ(サイトストラクチャ)を考える

サイトマップ(サイトストラクチャ)について

~ KIA base 001 ~

KOUSUKE (seven) INAMOTOGeneralasahi

Page 2: サイトマップ(サイトストラクチャ)を考える

Hello!• 稲本浩介(稲本せぶん)• 31age  子持ちになりました。• 株式会社ゼネラルアサヒ

www.generalasahi.co.jp• Web ディレクター、マークアップエンジニア• IA• @sevenina• sevenstyleweb.com/blog

Page 3: サイトマップ(サイトストラクチャ)を考える

Agenda

• ハイレベルサイトマップ• 詳細サイトマップ• ナビ付き詳細サイトマップ• まとめ

Page 4: サイトマップ(サイトストラクチャ)を考える
Page 5: サイトマップ(サイトストラクチャ)を考える

Agenda

• ハイレベルサイトマップ• 詳細サイトマップ• ナビ付き詳細サイトマップ• まとめ

Page 6: サイトマップ(サイトストラクチャ)を考える

ハイレベル=

抽象

Page 7: サイトマップ(サイトストラクチャ)を考える
Page 8: サイトマップ(サイトストラクチャ)を考える

マイクロサイト化の検討メインカテゴリの検討

Page 9: サイトマップ(サイトストラクチャ)を考える

マイクロサイト化の検討メインカテゴリの検討

Page 10: サイトマップ(サイトストラクチャ)を考える

•ユーザー属性•コンテンツのカテゴリ•ユーザーへ与えるタスク•企業・組織側の意図•一般的に用いられる考え方

Page 11: サイトマップ(サイトストラクチャ)を考える
Page 12: サイトマップ(サイトストラクチャ)を考える

トップページNews 会社情報 プライバシー

ポリシー 問い合わせ サイトマップ

コンセプト 情報 AAA 情報 BBB 情報 CCC 情報 DDD

Page 13: サイトマップ(サイトストラクチャ)を考える

トップページNews 会社情報 プライバシー

ポリシー 問い合わせ サイトマップ

コンセプト 情報 AAA 情報 BBB 情報 CCC 情報 DDD目的・概要・全体像

Page 14: サイトマップ(サイトストラクチャ)を考える

Agenda

• ハイレベルサイトマップ• 詳細サイトマップ• ナビ付き詳細サイトマップ• まとめ

Page 15: サイトマップ(サイトストラクチャ)を考える

“ ページ単位で記述を行うため、ユーザーエクスペリエンスフローを元にしながら、・1ページに切り出すページ内容・何と何を並列にするか・ページの順序・必要なナビゲーション・各カテゴリ内のコンテンツ量のバランスといった観点で検討を進める“

Page 16: サイトマップ(サイトストラクチャ)を考える
Page 17: サイトマップ(サイトストラクチャ)を考える

= 1

Page 18: サイトマップ(サイトストラクチャ)を考える

トップページ

News 会社情報 プライバシーポリシー 問い合わせ サイトマップ

コンセプト 情報 AAA 情報 BBB 情報 CCC 情報 DDD

概要・沿革

事業の 3 本柱

メッセージ

hogehoge

AAA

0001

002

003

004

005

006

007

BBB CCCインデックス

DDDインデックス

00000000

00000000

00000000

Page 19: サイトマップ(サイトストラクチャ)を考える

トップページ

News 会社情報 プライバシーポリシー 問い合わせ サイトマップ

コンセプト 情報 AAA 情報 BBB 情報 CCC 情報 DDD

概要・沿革

事業の 3 本柱

メッセージ

hogehoge

AAA

0001

002

003

004

005

006

007

BBB CCCインデックス

DDDインデックス

00000000

00000000

00000000

具体的

Page 20: サイトマップ(サイトストラクチャ)を考える

Agenda

• ハイレベルサイトマップ• 詳細サイトマップ• ナビ付き詳細サイトマップ• まとめ

Page 21: サイトマップ(サイトストラクチャ)を考える

トップページ

News 会社情報 プライバシーポリシー 問い合わせ サイトマップ

コンセプト 情報 AAA 情報 BBB 情報 CCC 情報 DDD

概要・沿革

事業の 3 本柱

メッセージ

hogehoge

AAA

0001

002

003

004

005

006

007

BBB CCCインデックス

DDDインデックス

00000000

00000000

00000000

Page 22: サイトマップ(サイトストラクチャ)を考える

トップページ

News 会社情報 プライバシーポリシー 問い合わせ サイトマップ

コンセプト 情報 AAA 情報 BBB 情報 CCC 情報 DDD

概要・沿革

事業の 3 本柱

メッセージ

hogehoge

AAA

0001

002

003

004

005

006

007

BBB CCCインデックス

DDDインデックス

00000000

00000000

00000000

ページの関係性ナビゲーション

Page 23: サイトマップ(サイトストラクチャ)を考える
Page 24: サイトマップ(サイトストラクチャ)を考える

But

Page 25: サイトマップ(サイトストラクチャ)を考える

書きにくい・・・なんかいいアイデアないっすか?

Page 26: サイトマップ(サイトストラクチャ)を考える

Agenda

• ハイレベルサイトマップ• 詳細サイトマップ• ナビ付き詳細サイトマップ• まとめ

Page 27: サイトマップ(サイトストラクチャ)を考える

• ハイレベルサイトマップ– 目的・概要・全体像の把握で土台をつくる

• 詳細サイトマップ– 具体的にページの中身を考える

• ナビ付き詳細サイトマップ– 個別に創られるページをつなげサイトに仕上

げる

Page 28: サイトマップ(サイトストラクチャ)を考える

整理するためのロジック

Page 29: サイトマップ(サイトストラクチャ)を考える

説明のナビゲーション

Page 30: サイトマップ(サイトストラクチャ)を考える

IA = Information Architecture

Page 31: サイトマップ(サイトストラクチャ)を考える