1. そのサイトが
そのデザインである理由
坂本貴史
Designer meets Designers 04
2008.10.02

2. コンセプト
Concept Design
デザイン

3. ネットイヤーグループ
指針の重要性
デザイン実例

4. http://www.netyear.net

5. 大規模プロジェクトの経験
サイトガバナンスのコンサルティング能力
ユーザー視点での情報設計能力
ブランド力を高める最高のクリエイティブ

6. 戦略 設計 制作 運用
マーケティング戦略
ブランド戦略
ウェブガバナンス戦略
情報設計
デザイン
システム設計
制作・開発
検証
ガイドライン
サイト更新
効果測定・ログ解析
システム保守

7. 戦略 1∼4カ月
設計 1∼4カ月
制作 2∼8カ月
運用 継続
全体 6カ月∼1年

8. インフォメーション
アーキテクト
アート
ディレクター
テクニカル
ディレクター
プロジェクト
マネージャー
クライアント
クリエイティブ
ディレクター
プロデューサー

9. プロデューサー 営業窓口
プロジェクトマネージャー プロジェクト責任
クリエイティブディレクター クリエイティブ責任
インフォメーションアーキテクト 情報アーキテクチャ
アートディレクター デザイン
テクニカルディレクター テクノロジー

10. プロジェクト
責任
顧客
情報アーキテクチャ デザイン テクノロジー
クリエイティブ責任
営業窓口

11. 営業窓口
クリエイティブ責任
プロジェクト責任
情報アーキテクチャ
デザイン
テクノロジー
?

12. インフォメーション
アーキテクト
アート
ディレクター
テクニカル
ディレクター
プロジェクト
マネージャー
クライアント
クリエイティブ
ディレクター
プロデューサー
パートナー会社

13. ワークフロー
体制
役割
用語の解説
成果物サンプル
コミュニケーションルール

14. 認知
興味・比較
購入
体験
雑誌 店頭 口コミ 営業
Webを中心に考えるコミュニケーション
Web-Centric Communication
CM Web

15. Web情報アーキテクチャ
The Three Circles of Information Architecture
だれに
どのように
なにを

16. 企業理念
Corporate Philosophy

17. 経営理念 サイトコンセプト
行動指針 表現指針
ブランドコミュニケーション デザイン
企業理念

18. 戦略 設計 制作 運用
4つのフェーズのうち、前半2つが考えるフェーズである

19. 手を動かすタスク考えるタスク

20. 企画 定義・ルール 主要作成 量産・更新
画面設計というタスクのうち、前半2つが考えるタスク
これがスケジュール（ガントチャート）に入っていないと、そもそも考える時間がない

21. サイトコンセプト
Site Concept

22. 定量調査 定性調査
DATA IMAGE
意識調査
インタビュー
アンケート
……
アクセス
ログ解析
コンバージョン
……

23. 企業サイト調査
Websites Ranking

24. 企業ブランド調査
Brands TOP 100 Ranking

25. 事例
サイトミッション
サイトの使命・任務
「……機会と行動を生み出す」で終わるコピー
サイトビジョン
サイトの理想像
訪れたユーザーにどうなってほしいか
サイトバリュー
サイトを構築・運営していく上で
配慮すべき取り組みや姿勢・原則など

26. サイトコンセプト
ビジネスニーズ ユーザーニーズ
Business Needs
Site Concept
User Needs

27. ビジネスニーズ
企業の資産
担当者へのヒアリング
ユーザーニーズ
ユーザーへのインタビュー
グループインタビュー

28. 表現指針
Creative Brief

29. サイトコンセプト
表現指針
デザイン
Creative Brief

30. 事例
サイトミッション 社外、社内ともにブランドの再認識
表現指針
「安定感を基本としつつ……」から始
まるキーワードが含まれたコピー

31. ブランドアイデンティティ ブランドイメージ
Brand Identity Brand Image
ユーザーの持つイメージ企業が持つブランドの源泉
企業の資産
担当者へのヒアリング
アンケート調査

32. 5つの因子
肯定的な
ブランド資産
望ましい
ブランド資産
伝わっている
イメージ
伝わりきれていない
イメージ
誠実因子
刺激
能力
洗練
素朴
ブランドアイデンティティとブランドイメージの比較
Compare

33. サイトコンセプト
表現指針
デザイン
Creative Brief
文字
カラー
フォルム
インタラクション

34. 文字
例）標準的な文章にはすべてゴシック体、魅力のあるキャッ
チコピーやメッセージには明朝体を使用します。
Typography
あア安
あア安

35. カラー
例）コーポレートカラーのほかにアクティブな配色とダーク
な配色で組み合わせます。
Color
言語スケール
カラースケール

36. フォルム
例）矢印「→」のようなアイコンにはすべて三角形「▲」を
使って表現します。
Form

37. インタラクション
例）モノクロのイメージにマウスオーバーをすると、色がつ
く、音が出る、映像が動きだす
Interaction
！♪

38. デザイン
Design

39. サイトコンセプト
表現指針
デザイン
Design
デザイン

40. 論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン

41. 論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン

42. コンテンツ（本文）
文脈（現在位置を示すナビ）
関連（関連リンク）
コンテンツページデザインにおける最善の方法
Content Page Design Best Practice

43. エリア定義
Area Definition

44. 論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン

45. ニュース イントロダクション 予告編 ダウンロード 劇場情報
映画のプロモーションサイトのメニュー標準

46. サービス サポート 企業 ニュース
企業サイトのメニュー標準

47. サービス サポート 企業 ニュース
独自

48. サービス サポート 企業ニュース
?
独自の情報分類と企業の主張

49. サービス サポート 企業
独自
ブランド
目的
ニュース
独自の情報分類をメニューとして独立した例

50. 論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン

51. 目的
Structure Goal
基本構造

52. ニュース
サービス
サポート
企業情報
目的の情報
目的
Structure Goal
基本構造

53. 論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン

54. 検索
Search
目的別 画面にキーワードとビジュアルを掲載
サイト内検索 サジェスト機能を追加
履歴 過去の履歴をナビゲーションとして活用

55. 論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン

56. ネットイヤーグループ
指針の重要性
デザイン実例

57. スキルIAInformation Architect Skill
書籍
連載
講演
ブログ

58. Thank you.
http://www.bookslope.jp/blog/