designer meets designers 04 "ia" 20081002
Post on 27-Jan-2015
102 Views
Preview:
DESCRIPTION
TRANSCRIPT
そのサイトがそのデザインである理由
坂本貴史Designer meets Designers 04
2008.10.02
コンセプトConcept Design
デザイン
ネットイヤーグループ
指針の重要性
デザイン実例
大規模プロジェクトの経験
サイトガバナンスのコンサルティング能力
ユーザー視点での情報設計能力
ブランド力を高める最高のクリエイティブ
戦略 設計 制作 運用
マーケティング戦略
ブランド戦略
ウェブガバナンス戦略
情報設計
デザイン
システム設計
制作・開発
検証
ガイドライン
サイト更新
効果測定・ログ解析
システム保守
戦略 1～4カ月
設計 1～4カ月
制作 2～8カ月
運用 継続
全体 6カ月～1年
インフォメーションアーキテクト
アートディレクター
テクニカルディレクター
プロジェクトマネージャー
クライアント
クリエイティブディレクター
プロデューサー
プロデューサー 営業窓口
プロジェクトマネージャー プロジェクト責任
クリエイティブディレクター クリエイティブ責任
インフォメーションアーキテクト 情報アーキテクチャ
アートディレクター デザイン
テクニカルディレクター テクノロジー
プロジェクト責任
顧客
情報アーキテクチャ デザイン テクノロジー
クリエイティブ責任
営業窓口
営業窓口
クリエイティブ責任
プロジェクト責任
情報アーキテクチャ
デザイン
テクノロジー
?
インフォメーションアーキテクト
アートディレクター
テクニカルディレクター
プロジェクトマネージャー
クライアント
クリエイティブディレクター
プロデューサー
パートナー会社
ワークフロー
体制
役割
用語の解説
成果物サンプル
コミュニケーションルール
認知
興味・比較
購入
体験
雑誌 店頭 口コミ 営業
Webを中心に考えるコミュニケーションWeb-Centric Communication
CM Web
Web情報アーキテクチャThe Three Circles of Information Architecture
だれに
どのように
なにを
企業理念Corporate Philosophy
経営理念 サイトコンセプト
行動指針 表現指針
ブランドコミュニケーション デザイン
企業理念
戦略 設計 制作 運用
4つのフェーズのうち、前半2つが考えるフェーズである
手を動かすタスク考えるタスク
企画 定義・ルール 主要作成 量産・更新
画面設計というタスクのうち、前半2つが考えるタスク
これがスケジュール（ガントチャート）に入っていないと、そもそも考える時間がない
サイトコンセプトSite Concept
定量調査 定性調査DATA IMAGE
意識調査
インタビュー
アンケート
……
アクセス
ログ解析
コンバージョン
……
企業サイト調査Websites Ranking
企業ブランド調査Brands TOP 100 Ranking
事例
サイトミッションサイトの使命・任務
「……機会と行動を生み出す」で終わるコピー
サイトビジョンサイトの理想像
訪れたユーザーにどうなってほしいか
サイトバリューサイトを構築・運営していく上で
配慮すべき取り組みや姿勢・原則など
サイトコンセプト
ビジネスニーズ ユーザーニーズBusiness Needs
Site Concept
User Needs
ビジネスニーズ企業の資産
担当者へのヒアリング
ユーザーニーズユーザーへのインタビューグループインタビュー
表現指針Creative Brief
サイトコンセプト
表現指針
デザイン
Creative Brief
事例
サイトミッション 社外、社内ともにブランドの再認識
表現指針「安定感を基本としつつ……」から始まるキーワードが含まれたコピー
ブランドアイデンティティ ブランドイメージBrand Identity Brand Image
ユーザーの持つイメージ企業が持つブランドの源泉
企業の資産
担当者へのヒアリング
アンケート調査
5つの因子肯定的なブランド資産
望ましいブランド資産
伝わっているイメージ
伝わりきれていないイメージ
誠実因子
刺激
能力
洗練
素朴
ブランドアイデンティティとブランドイメージの比較Compare
サイトコンセプト
表現指針
デザイン
Creative Brief
文字
カラー
フォルム
インタラクション
文字
例）標準的な文章にはすべてゴシック体、魅力のあるキャッ
チコピーやメッセージには明朝体を使用します。
Typography
あア安あア安
カラー
例）コーポレートカラーのほかにアクティブな配色とダーク
な配色で組み合わせます。
Color
言語スケール
カラースケール
フォルム
例）矢印「→」のようなアイコンにはすべて三角形「▲」を
使って表現します。
Form
インタラクション
例）モノクロのイメージにマウスオーバーをすると、色がつ
く、音が出る、映像が動きだす
Interaction
！♪
デザインDesign
サイトコンセプト
表現指針
デザインDesign
デザイン
論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン
論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン
コンテンツ（本文）
文脈（現在位置を示すナビ）
関連（関連リンク）
コンテンツページデザインにおける最善の方法Content Page Design Best Practice
エリア定義Area Definition
論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン
ニュース イントロダクション 予告編 ダウンロード 劇場情報
映画のプロモーションサイトのメニュー標準
サービス サポート 企業 ニュース
企業サイトのメニュー標準
サービス サポート 企業 ニュース
独自
サービス サポート 企業ニュース ?独自の情報分類と企業の主張
サービス サポート 企業
独自
ブランド
目的
ニュース
独自の情報分類をメニューとして独立した例
論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン
目的Structure Goal
基本構造
ニュース
サービス
サポート
企業情報
目的の情報
目的Structure Goal
基本構造
論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン
検索Search
目的別 画面にキーワードとビジュアルを掲載
サイト内検索 サジェスト機能を追加
履歴 過去の履歴をナビゲーションとして活用
論理的なレイアウト
構造のわかりやすさ
目的とナビゲーション
検索のしやすさ
Design
デザイン
ネットイヤーグループ
指針の重要性
デザイン実例
スキルIAInformation Architect Skill
書籍
連載
講演
ブログ
Thank you.
http://www.bookslope.jp/blog/
top related