1. Web ディレクション実践

2. W ディレクション実践
eb
リエイティブ・ディレクション概論とは？
W ディレクターとは、現場の制作指揮はもちろん
eb
スケジュールや予算の管理などを行なう、
W 制作プロジェクトのリーダー的立場に立つ人を指します。
eb
クリエイティブ・ディレクション概論では、
これらの W ディレクション業務の中でも、
eb
特にクリエイティブ、つまり制作面に特化した知識や
ノウハウを習得いただける授業です。
こちらでは、実際に授業で使用されている
資料を一部公開させていただきます。
授業の雰囲気を感じ取っていただければ幸いです。
2

3. ディレクションとは
W ディレクターとは
eb
・制作現場における進行管理責任者
・制作進行において発生する各種成果物の細かな監修
・スタッフへの制作および修正指示
・要件を正確に満たしつつ、
スケジュールどおり制作工程を進行させる
制作の内容自体を考える
制作部門
※ プロデューサーとディレクターとの境界は
明確ではない。
3

4. ディレクションとは
W プロデューサーとは
eb
W プロジェクトの総責任者
eb
プロジェクトの起案・計画を立てる
プロジェクトの目標を明確化
戦略の策定
「ビジネスの現場」と「制作の現場」を結ぶ橋渡し役
作全体の収益を考える
業部門
4

5. ディレクションとは
W 制作の体制
eb
企画・提案
担当部門者
プロデュー
サー
経営者 W 担当者
eb
担当部門者
フィードバックディレクター
クライアント側 制作側
5

6. ワークフロー
戦略フェーズ
テスト・移
戦略フェー 設計・開発 運用・保守
行
ズ フェーズ フェーズ
フェーズ
プロジェクトの方向性を決めるフェーズ
・オリエンテーションとヒアリング
・自社サイトの分析と競合の分析
・サイトログ分析
・ビジネス面での戦略を検討
6

7. リエンテーションとヒアリング
オリエンテーション
■ オリエンテーションとは、クライアントからの要望を聞きだ
す最初の機会
作業・提案範囲 ターゲット
プロジェクトの目的 プロジェクトのゴール
プロジェクトの背景・競合 スケジュール
予算
7

8. プレゼンテーション
プレゼンテーションとは
クライアントからの依頼に対し提案の報告を行う
指名で発注があった場合
→ 実制作に入る前の企画・設計の確認
競合がある場合
→ コンサルティングしてきた内容を踏まえて
どうのように表現していくのか
「特徴」をアピール
8

9. スケジューリング
作業の定義
リソース
スケ
作業順序の と
作業の定義 ジュール 進捗管理
設定 所要時間
作成
の精査
■ 作業の洗い出しを行う
• 要件定義 • システム開発
• 基本設計 • テスト・デバッグ
• コンテンツ開発
• デザイン開発
• HTM コーディング
L
9

10. ーザーゴールとビジネスゴール
ユーザーゴールとビジネスゴールとは
■W サイトには 2 つの目的がある
eb
ユーザーゴール
（ブラウズの目
的）
W サイ
eb 短期的なゴールと長
達成
トの成功 期的なゴールに分け
ることがコツ
ビジネスゴール
（利益）
10

11. ターゲットユーザー
ターゲットとは
インフォメーションアーキテクトでは、「オーディエンス」とも
呼ばれる
・属性 （ dem gr aphi c s , geo- gr aphi c s ）
o-
性別、年齢、地域、職業、 et c
・心理的 （ ps yc ho- gr aphi c s ）
短気、新しいもの好き、 et c
・社会的地位
セレブ、裕福層、 et c
設計段階では、サイトの対象となるターゲットを決定する
11

12. 情報アーキテクチャとは
情報アーキテクチャの目的
A （インフォメーション・アーキテクチャ）
• サービス提供側が発信する情報（コンテン
ツ）は
増え続け、多様化している
• ユーザーが目的の情報を見つけやすい様に
サイト設計をしなければいけない
• サイト内の情報の組織化と構造化が
求められている
12

13. ユーザーゴールとビジネスゴール
ユーザーゴールとビジネスゴールとは
■Web サイトには 2 つの目的がある
ユーザーゴール
（ブラウズの目的）
Web サイ 短期的なゴールと
達成
トの成功 長期的なゴールに
分けることがコツ
ビジネスゴール
（利益）
13

14. ユーザーゴールとビジネスゴール
コンバージョンレート
サイトを訪れたユーザの中で、登録、購入などのアクションを起こした割合
アクションを起こしたユーザ数
サイト全体のアクセス数
総アクセス数の伸びより、コンバージョン・レートの伸びを評価する
14

15. ペルソナとユーザーシナリオ
ユーザーシナリオ
ペルソナが商品ページでとった行動、感じたことをシナリオ化
する
例）
•商品の詳細情報をくまなく調べた。
•価格についての疑問を感じた。
•他の競合サイトへジャンプして、価格の比較を
行った。
•金額に納得がいくまで、粘り強く探した。
Web サイト設計の検証判断を客観的に行うことがで
きる
15

16. ユーザーエクスペリエンス
ユーザーエクスペリエンスとは
ユーザーが Web サイトを訪問したときに
体験（経験）する感情や見解
GOOD
•情報がわかりやすい・・・
•見た目がきれい・・・
•動きが面白い・・・・
B AD
•情報が探しにくい・・・
•探していたものが見つからない・・・
•速度が遅い・・・
16

17. ユーザーエクスペリエンス
ユーザーエクスペリエンスの７つの側面
•ハニカム構造
Useful
役に立つ
Usable D esirable
使いやすい 望ましい
Va ble
lua
価値を生み
出す
Accessible
Findable
アクセスし
探しやすい
やすい
Credible
信頼に
値する
17

18. ラベリング
例題：手作りのトートバッグを販売するお店（実店舗）があります。
オンラインでバッグを販売できる Web サイトを構築する依頼を受けま
した。
？ ？ ？ コミュニ サポー
ティ ト
？
？ ？ コミュニ サポート
ティ
18

19. サイトの構造化
階層型
•一般的なサイト構造
•理解しやすい
•階層が深くなれば
クリック数が多くなる
19

20. サイトの構造化
フォークソノミーによる分類 検索
女性 男性 男性 女性 男性 女性
コート・ジャケットコート・ジャケット トップス・インナートップス・インナー ボトムス ボトムス
A ブランド C ブランド B ブランド A ブランド B ブランド A ブランド

21. サイトマップ
ハイレベルサイトマップとは
High Level ( 上位階層 )
Low Level( 下位階層 ) 21

22. フローチャート
フローチャートの例
■EC サイトでの決済のプロセス
はい
ログイン アドレス 支払方法の
している？ 確認 選択
はい
パスワード入 パスワード
力 確認
いいえ
既存の アカウント
ユーザー 作成
いいえ ？ 新規ユーザー
22

23. ワイヤーフレーム
ワイヤーフレームとは
・ページ内の設計図
・ページ構成とコンテンツ項目を
確認するためのドキュメント
・レイアウトや
ビジュアルデザインの
仕様書ではない
23

24. カラースキーム
カラースキームの流れ
1. 色の３属性（「色相」、「彩度」、「明度」 )
を整理する
3. サイトで使用する「トーン」を決定する
5. メインカラーを選択する
7. メインカラーと組みわせる
配色を選ぶ
24

25. カラースキーム
ブランドカラーについて
•企業理念や基幹商品を連想させる配色
•競合他社との差別化
•以前は単色によるブランドカラーが
スタンダードだったが、印刷技術の向上
により、グラデーションを使う企業も
増えてきた。
25

26. サーバーサイドプログラミング
サーバーサイドプログラミングとは
Web サーバー側で処理を行い、その結果を
クライアント側へ返す仕組みのプログラミング
リクエスト
Web ブラウザ
プログラムの実行
クライアント レスポンス・表示 Web サーバー
26

27. クライアントサイドプログラミング
D OM Scripting
D OM を利用した J vaa Scriptの記述方法。 HT M L 内に直接記述するのでは
なく、 J va
a Script側から HT M L にアクセスするため、 Web 標準に準拠。
■HT M L ■J va
a Script
< body> document.getElementB yI d(‘prg’).style.color = ‘#ff0000’;
< div>
< h1 > 大見出し < /h1 >
< p id= “prg”> 段落 < /p>
< h2> 小見出し < /h2>
< p> 段落 < /p>
< /div>
< /body>
27

28. データベース
Web で取り扱う主なデータ
• 顧客データ
• 商品データ
DB
• 販売実績データ
• ブログのタイトルと本文
• ブログのコメントデータ
• ソーシャルブックマークの
URL
など
28

29. eb ユーザビリティと Web アクセシビリティ
Web ユーザビリティ、 Web アクセシビリティとは
・ Web ユーザビリティ ・・・ サイトのの「使いやすさ」
Web
使っていてストレスや戸惑いを感じない
・ Web アクセシビリティ ・・・
情報へのアクセスのしやすさ
判別しやすいか、わかりやすいか
29

30. eb ユーザビリティと Web アクセシビリティ
アフォーダンス
モノの属性（形状、材質、色など）がユー
ザーに対して「どう取り扱えば良いか」とい
う情報を発している、という考え方
30

31. eb ユーザビリティと Web アクセシビリティ
ヒューマンエラー
人為的過誤や失敗（ミス）のこと。 ヒューマンエラーの対処方式として
フェイルセーフ」 ・・・ 別の支援システムが働く
「フールプルーフ」 ・・・ 誤った操作をしても、とりあえず、何
もおこらない
31

32. eb ユーザビリティと Web アクセシビリティ
テキストの記述方法
•本文を画像にしない •自然言語の取り扱い方に関する
情報を明確に示す
•○×などの記号を使用しない
•文書は明瞭で簡潔なものにする
•単語間にスペースを入れない
○ ： アクセシビリティ •北海道 •M T （ムーバブルタイ
プ）
•東 北
×： ユーザビリティ •WP （ワードプレス）
•関 東
正： アクセシビリティ
•甲信越
誤： ユーザビリティ 32

33. 品質管理
品質管理のプロセス
計画
■PD CA サイクルとは
Plan
処置 Action Do 実行
Check 検証
33

34. SEO について
SEO とは
• Sea Engine Optimiza
rch tion の略
日本語では、検索エンジン最適化などと訳される
• 特定のキーワードでサイトを検索した際、
その検索結果がより上位に表示されることを
目的とするもの。
• サイトに適したキーワードを選定する際に
マーケティングなどの側面からも考慮する必要があ
る。
34