1. 情報アーキテクチャって
何だろう？
使いやすいWebサイトを作ろう！
上江洲 梓@M2
新入生歓迎LT大会 2014.4.26(土)

2. 名 前 ：上江洲 梓(うえず あずさ)
学 年 ：修士2年
Twitter：azzzu_3
来年度から東京にあるWeb制作会社で
フロントエンドエンジニアとして働く予定です。
アルバイトで化粧品の通信販売会社のHPを
作っていました。(2012年5月∼2014年4月)
自己紹介

3. 自分のサイトを作ったこと
ありますか？
◎ ブログ
◎ プロフィールサイト
◎ 写真・イラストサイト
◎ テキストサイト
◎ 携帯サイト
◎ サークルのサイト
◎ イベント告知用のサイト
◎ ショッピングサイト(ECサイト)

4. どんなときに自分のサイトを
作りますか？
◎ 自分の作った作品を見て欲しい！
（絵、写真、自作ゲーム、音楽）
◎ 同じ趣味を持つ仲間が欲しい！
（サークル、イベント、勉強会）

5. 自分のサイトが
「人に見られる、使われる」
ことを意識したことありますか？

6. そのサイトの情報、
利用者に伝わっていますか？
◎想定と違った見方されていない？？？
◎せっかく作ったのに誰も見てくれない(́･ω･`)ｼｮﾎﾞーﾝ
写真サイト
作るぜ！！
とりあえず
作ってみるぜ
ようこそ
(^_^)
俺のブログ！！
飯テロ
ギャラリー
g
f
t
何のサイトかわからない・・・。
サイト作成者

7. どうせ作るなら、
見る人のことを考えた
WEBサイトを作りたいと
思いませんか？

8. 情報アーキテクチャって？？
英語で言うと
Information Architecture ( IA )
一言でいうと
「複雑な情報をわかりやすく伝えるための技術」

9. 専門領域なのです。
情報アーキテクチャを扱う職業の方は、
インフォメーションアーキテクト
(Information Architect)といいます。
主にWebサイトの分析、設計を担当します。
◎ ユーザ分析
◎ ログ分析
◎ サイト構造設計
◎ 画面設計

10. この順番で写真サイトを
作り直しましょう
情報を整理する
↓
サイト全体の構造を考える
↓
画面設計
↓
デザイン
↓
コーディング
ようこそ
(^_^)
俺のブログ！！
飯テロ
ギャラリー
g
f
t

11. 1. サイトのコンセプトを考える
◎ どんなサイトを作りたい？
◎ 誰が見てくれるのかな？
◎ どんな情報があったら嬉しいかな？
食べ物
風景
アルバム
ペット
ターゲット：
カメラ愛好家
お友達になってほしい
サイトのコンテンツ：
プロフィール
ブログ
フォトアルバム
TOP画像は毎日更新
付箋でアイディア出し
文書にまとめる

12. ２.サイトの構造を考える
◎ページの繋がり、親子関係を整理する。(サイトストラクチャ)
TOP
ギャラリー
飯テロ
ブログ
お問い合わせ
はじめに
活動履歴
きょうの
にゃんこ
和
洋
おやつ
タマ
ミケ
クロ
風景
人
動物

13. ◎ サイトストラクチャを基に4つのエリアに分けました。
3. エリアを定義しよう
グローバルエリア(ヘッダー)
コンテンツエリア
ローカル
エリア
グローバルエリア(フッター)
ヘッダー：
(全ページ共通)
◎サイトロゴ
◎メインナビ
◎重要度が高い情報
フッター：
(全ページ共通)
◎サイトマップ
◎重要度が低い情報
ローカルエリア：
◎第二階層以下の
メニュー
◎ページ内容に
関するナビ
コンテンツエリア：
各ページ内容
◎記事
◎画像
など

14. 4.ワイヤーフレームを書こう
◎ どこにコンテンツを置くのか書いた設計書。
◎ これがあるとデザイン、コーディングが楽！！！
f
インテリ男子の写真サイト
〇〇○
〇〇○
〇〇〇
〇〇〇
【毎日更新】きょうのにゃんこ
プロフィール
□□□□□□□□□□□
□□□□□□□□□□□
○○○○○
〇〇○
ギャラリー
ブログ
飯テロ
t g
○○○○○
ヘッダー
フッター
コンテンツエリア
ローカルエリア

15. 使いやすさを意識して
写真サイトを作り直しました
◎ 余白の幅をそろえたり、色そろえたりするとまとまりが
出ます。
g
f
t
インテリ男⼦子の写真サイト
blog
ギャラリー
飯テロ
きょうの
にゃんこ
キュート
ですね。
【毎⽇日更更新】きょうのにゃんこ
プロフィール
HN：インテリ男⼦子
趣味：写真
活動履履歴
はじめに
お問い合わせ

16. 今日はここまで！
時間が足りません・・・。
【まとめ】
用語だけでも覚えて自分でググってください。
◎ 情報アーキテクチャ(Information Architecture)
◎ サイトストラクチャ
◎ ナビゲーション
◎ ワイヤーフレーム

17. おすすめの書籍
IA100
ユーザーエクスペリエンスデザインのた
めの情報アーキテクチャ設計
長谷川 敦士 (著)
※とってもわかりやすいのに
調べてみたら絶版になっているみたいorz
このスライドの参考書籍です。
Web
Designing
※就活のとき購入しました。Web制作専門の雑誌です。
デザインからコーディングまでの最新の技術の紹介、
業界での働き方等、Web系の会社に就職したいなら
一読しておくといいかもしれません。

18. 最後に・・・
まだまだ未熟なため、自分のWebサイトを
制作しながら勉強を行っていますm(_ _)m
◎ 一緒に勉強したい！
◎ 完成したサイトが見てみたい！
◎ 今日の発表 or スライドにツッコミ入れたい！
該当する方はTwitterフォローしてください
Twitter → @azzzu_3