Tweet
Tweet

Slide 1

Slide 1 text

田口真行のWebディレクター育成講座

Slide 2

Slide 2 text

株式会社デスクトップワークス 田口 真行 1999年、フリーのWebディレクターとして独立後、株式会社デスクトップワー クスを設立。企業サイトの企画～設計～制作～運用を手掛ける傍ら、攻殻機動隊 トリビュートアルバムのアートディレクションやSKYPerfecTV!のクリエイター 向け番組『DesktopTV』のプロデュース、ライブ配信番組『田口真行のWebデ ィレクション講座』やセミナーイベント『エンタミナ』の主催など幅広く活動。 また、独自手法のディレクション・メソッドを題材にした実践型セミナー＆研修 講師として、全国各地での講演活動を展開。2013年、Webディレクター育成の 教育機関『Webディレクタースクール』を設立。2017年、世界初となるWebデ ィレクター向け支援ツール『Webディレクター手帳』を開発。 2018年、書籍『ディレクション思考』の執筆及び出版やWebディレクションを 学び身につけるオンラインサロン『4LDK』を立ち上げる。2019年、ライブ配 信セミナー『現場学校』やWebディレクターの能力を可視化する業界初の試み 『ディレクション検定』をスタート。

Slide 3

Slide 3 text

本資料は、2001年～2019年までに田口真行が実施した 『Webディレクション』関連の講義内容のスライド資料です。 これまで全国各地のセミナー登壇時に使用した「全2,945枚」の中から 『Webディレクションの要点』にフォーカスして「300枚＋α」にまとめました。 20年間、夢中になって取り組んできた私自身のノウハウやメソッドが あなたの現場を彩るヒントとなれば嬉しいです。 ※本資料に掲載のすべての情報は株式会社デスクトップワークスに帰属しています。

Slide 4

Slide 4 text

Webディレクターの立場

Slide 5

Slide 5 text

クライアント Webディレクター クリエイター 発注側 制作側

Slide 6

Slide 6 text

thinking time 良いディレクターと 残念なディレクターの違い

Slide 7

Slide 7 text

良いディレクター 残念なディレクター 能動的 受動的

Slide 8

Slide 8 text

Webディレクションは受け身姿勢NG

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

プロジェクトマネジメント

Slide 11

Slide 11 text

マネジメントする4つの対象

Slide 12

Slide 12 text

お金 人 時間 品質

Slide 13

Slide 13 text

ヒューマンマネジメント プロジェクトに関わるリソースの管理

Slide 14

Slide 14 text

thinking time プロジェクトに必要な リソースを洗い出す

Slide 15

Slide 15 text

ヒューマンマネジメント プロジェクトに関わる人 名刺の肩書きではなく プロジェクトにおける役割で管理

Slide 16

Slide 16 text

お金 人 時間 品質

Slide 17

Slide 17 text

コストマネジメント プロジェクトに必要な制作費の管理

Slide 18

Slide 18 text

× 作業者の単価 作業の工数

Slide 19

Slide 19 text

お金 人 時間 品質

Slide 20

Slide 20 text

タイムマネジメント プロジェクトの工程と進行の管理

Slide 21

Slide 21 text

サイト制作プロジェクトの流れ 企画 設計 制作・開発 検証 リリース ロードマップを元にスケジュールを立てて プロジェクト進行を管理

Slide 22

Slide 22 text

お金 人 時間 品質

Slide 23

Slide 23 text

クオリティマネジメント 最終成果物の品質管理

Slide 24

Slide 24 text

最終成果物の品質管理の例 ・シナリオテスト ・ユーザビリティテスト ・アクセシビリティテスト ・セキュリティテスト ・ストレステスト ・パフォーマンステスト ・ポリシーチェック ・デバイスチェック 提供者目線 利用者目線

Slide 25

Slide 25 text

プロジェクトの進行管理

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

どこに向かうか？

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

どう進むか？

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

プロジェクト進行は「放浪旅」じゃない

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

プロジェクト進行のロードマップを 事前に定める

Slide 37

Slide 37 text

マイルストーンの設定

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

開 始 終 了 マイルストーンは「決めるべきこと」の設定

Slide 40

Slide 40 text

thinking time サイト制作において 決めるべきこと

Slide 41

Slide 41 text

開 始 終 了 マイルストーンを軸に「タスク」を設定 task task task task task task task

Slide 42

Slide 42 text

WBS Work Breakdown Structure プロジェクト全体を 作業レベルまで細かく分解した構成図

Slide 43

Slide 43 text

誰が、何を、いつまでに

Slide 44

Slide 44 text

マイルストーン設定 ① 決めるべきことの洗い出し ② 決めるべきことの優先度 ③ 決めるべきことの順序 タスク設定 ④ 作業タスク洗い出し ⑤ 作業タスクの優先度 ⑥ 作業タスクの順序

Slide 45

Slide 45 text

マイルストーン設定 ① 決めるべきことの洗い出し ② 決めるべきことの優先度 ③ 決めるべきことの順序 タスク設定 ④ 作業タスク洗い出し ⑤ 作業タスクの優先度 ⑥ 作業タスクの順序

Slide 46

Slide 46 text

〇〇を決める □□を決める △△を決める マイルストーン毎に 必要な作業タスクを洗い出す

Slide 47

Slide 47 text

〇〇を決める □□を決める △△を決める ・〇〇をする ・〇〇をする ・〇〇をする ・〇〇をする それぞれのタスクは 具体的な作業レベルまで ブレイクダウン

Slide 48

Slide 48 text

〇〇を決める □□を決める △△を決める ・〇〇をする ・〇〇をする ・〇〇をする ・〇〇を確定する

Slide 49

Slide 49 text

タスク設定の注意点

Slide 50

Slide 50 text

〇〇を決める ・〇〇を作成する ・〇〇を確定する

Slide 51

Slide 51 text

〇〇を決める ・〇〇を作成する ・〇〇を提出する ・〇〇を確認する ・〇〇を確定する ・〇〇を承認する

Slide 52

Slide 52 text

〇〇を決める ・〇〇を作成する ・〇〇を提出する ・〇〇を確認する ・〇〇を確定する ・〇〇を承認する FB

Slide 53

Slide 53 text

〇〇を決める ・〇〇を作成する ・〇〇を提出する ・〇〇を確認する ・〇〇を再作成する ・〇〇を再提出する ・〇〇を再確認する FB ・〇〇を確定する ・〇〇を承認する 事前に「リテイクの回数」 を想定して盛り込む

Slide 54

Slide 54 text

開 始 終 了 task task task task task task task タスクのヌケモレに注意しつつも 「ムダなタスク」を増やさない

Slide 55

Slide 55 text

中間成果物

Slide 56

Slide 56 text

中間成果物の例 ・要件定義書 ・仮見積書 ・正式見積書 ・発注書 ・注文請書 ・WBS ・スケジュール ・現状分析シート ・競合分析シート ・課題分析シート ・KPIツリー ・ペルソナ ・ユーザーシナリオ ・コンテンツリスト ・掲載情報リスト ・素材リスト ・サイトマップ ・ワイヤーフレーム ・イメージボード ・デザインカンプ ・デザインテンプレート ・デザインガイドライン ・マークアップガイドライン ・コードサンプル ・META情報リスト ・プログラム構成図 ・プログラム処理フロー図 ・検証項目リスト ・テスト報告書 ・成果物リスト ・運用ガイドライン ・運用マニュアル ・納品書 ・検収書 ・請求書

Slide 57

Slide 57 text

作業スケジュールと作業者のアサイン

Slide 58

Slide 58 text

期限 ≠ スケジュール いつまでに いつやるか

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

作業者のアサイン 誰が 担うか

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

プロジェクト進行における リスクマネジメント

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

先読み感覚

Slide 65

Slide 65 text

開 始 終 了 × × ×

Slide 66

Slide 66 text

開 始 終 了 予測 予測 予測 対策 対策 対策

Slide 67

Slide 67 text

thinking time プロジェクト進行中に 発生する可能性があるトラブルを予測

Slide 68

Slide 68 text

トラブル予測 対策検討 タスク反映 マイルストーン反映 プロジェクト進行における リスクマネジメント

Slide 69

Slide 69 text

プロジェクト進行管理のまとめ

Slide 70

Slide 70 text

どう進めるか → ロードマップ どう進むか → 進行シミュレーション 何を決めるか → マイルストーン 何をするか → タスク 何を残すべきか → 記録を残す

Slide 71

Slide 71 text

開 始 終 了 task task task task task task task 二転三転やトラブルに備えた スムーズな進行を心がける

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

サイトプランニング

Slide 74

Slide 74 text

サイト制作プロジェクトの流れ 企画 設計 制作・開発 検証 リリース

Slide 75

Slide 75 text

サイトプランニングの大前提

Slide 76

Slide 76 text

クライアントは Webサイトが欲しいわけじゃない Webサイトを手段として 得られる成果に投資している

Slide 77

Slide 77 text

KGI 目標への貢献度を測る指標 目指す最終目標 KPI KPI KPI KPI

Slide 78

Slide 78 text

企画 設計 要件定義 要求整理 ヒアリング

Slide 79

Slide 79 text

ヒアリング クライアントの話を聞く行為

Slide 80

Slide 80 text

ヒアリング クライアントの話を聞く行為

Slide 81

Slide 81 text

クライアント Webディレクター 言葉に変換された情報

Slide 82

Slide 82 text

それが「全て」とは限らない それが「真意」とは限らない それが「絶対」とは限らない

Slide 83

Slide 83 text

ヒアリングは 相手の中から引き出す行為

Slide 84

Slide 84 text

病名は 何ですか？ 薬は何粒 欲しいですか？

Slide 85

Slide 85 text

何ページ 作ればいいですか？

Slide 86

Slide 86 text

相手の話を聞くだけ･･･ 質問を工夫して引き出す

Slide 87

Slide 87 text

相手の話を聞くだけ･･･ 質問を工夫して引き出す

Slide 88

Slide 88 text

ヒアリングシートの落とし穴 クライアントも要件も範囲も規模も プロジェクト毎に変わる

Slide 89

Slide 89 text

クライアントも要件も範囲も規模も プロジェクト毎に変わる ヒアリングの簡略化はハイリスク

Slide 90

Slide 90 text

質問の洗い出し ヒアリング前の準備 ①

Slide 91

Slide 91 text

質問 デ ィ レ ク タ ー 側 聞 き た い こ と 気 に な る こ と

Slide 92

Slide 92 text

自分が 聞きたいこと ＋ 相手が 聞かれたいこと

Slide 93

Slide 93 text

質問 デ ィ レ ク タ ー 側 ク ラ イ ア ン ト 側 聞 き た い こ と 気 に な る こ と 聞 か れ た い こ と 気 に な る こ と

Slide 94

Slide 94 text

質問後の回答予測 ヒアリング前の準備 ②

Slide 95

Slide 95 text

質問 デ ィ レ ク タ ー 側 ク ラ イ ア ン ト 側 聞 き た い こ と 気 に な る こ と 聞 か れ た い こ と 気 に な る こ と 回答予測

Slide 96

Slide 96 text

質問の工夫 ヒアリング前の準備 ③

Slide 97

Slide 97 text

質問 デ ィ レ ク タ ー 側 ク ラ イ ア ン ト 側 聞 き た い こ と 気 に な る こ と 聞 か れ た い こ と 気 に な る こ と 回答予測 質問の工夫

Slide 98

Slide 98 text

課題分析 ヒアリング前の準備 ④

Slide 99

Slide 99 text

現状 目標 課題

Slide 100

Slide 100 text

過去 現状 未来 目標 課題

Slide 101

Slide 101 text

ヒアリングの前段階から率先して 課題に向き合う

Slide 102

Slide 102 text

現状分析と競合分析 ヒアリング前の準備 ⑤

Slide 103

Slide 103 text

UI視点の課題 ・情報 ・構造 ・表現 UX視点の課題 ・伝達性 ・操作性 ・体験性

Slide 104

Slide 104 text

UI視点の課題 ・情報 ・構造 ・表現 UX視点の課題 ・伝達性 ・操作性 ・体験性

Slide 105

Slide 105 text

ヒアリングのまとめ

Slide 106

Slide 106 text

サイト制作プロジェクトにおける「ヒアリング」は、 プロジェクト進行における最初の一歩。 そこでは「ただ相手の話を聞くだけ」じゃなく、 「相手の中から引き出す」ことが求められる。 ヒアリングで引き出す情報の「量と質」は、 最終的な成果物に大きく影響し、 ひいてはプロジェクトの行く末をも左右する重要なポイント。 一問一答のテンプレート的な「ヒアリングシート」に依存するのではなく、 ケースバイケースのクライアントニーズに臨機応変に向き合うために、 「質問の工夫」を含めた「ヒアリング前の準備」を入念に行う必要がある。

Slide 107

Slide 107 text

プロジェクトの 要求整理と要件定義

Slide 108

Slide 108 text

企画 設計 要件定義 要求整理 ヒアリング クライアントが「求めること」の把握

Slide 109

Slide 109 text

要求整理のポイント

Slide 110

Slide 110 text

Why What Who Where When How How much → 背景、目的、課題 → 施策 → 誰が、誰に → 場所、範囲 → 納期、スケジュール → 目標 → 予算

Slide 111

Slide 111 text

提案依頼書の役割 あらかじめ「求める提案内容」を明確化することで 発注側と受注側の「認識のズレ」を防ぐ

Slide 112

Slide 112 text

提案依頼書に記載する項目例 ・プロジェクト名 ・プロジェクトの背景 ・プロジェクトの目的 ・達成したい目標や成果 ・スケジュールの希望 ・リリース日の希望 ・予算の希望 ・作業範囲の希望 ・求める成果物と納品形式 ・競合情報 ・ターゲットユーザー情報 ・求めるコンテンツ ・求める機能 ・利用中のCMS ・利用中のプラグインの有無 ・発注元からの画像提供の有無 ・解析系タグ設置の有無 ・広告系タグ設置の有無 ・開発手法、ツール、言語 ・開発環境 ・利用中のサーバー ・SSL証明書の有無 ・運用保守方法 ・教育要件 ・検証方法及び項目 ・クライアント側の体制 ・過去の外注案件での課題点

Slide 113

Slide 113 text

企画 設計 要件定義 要求整理 ヒアリング クライアントが「求めること」の把握

Slide 114

Slide 114 text

企画 設計 要件定義 要求整理 ヒアリング プロジェクトで「成すべきこと」の定義

Slide 115

Slide 115 text

要件定義のポイント

Slide 116

Slide 116 text

①プロジェクトのゴール ②プロジェクトのスコープ ③プロジェクトの条件 ④サイト要件 ⑤システム要件 ⑥非機能要件 ⑦インフラ要件 ⑧技術要件 ⑨リリース要件 ⑩運用要件

Slide 117

Slide 117 text

企画 設計 制作・開発 検証 要件定義 要求整理

Slide 118

Slide 118 text

コンテンツプランニング

Slide 119

Slide 119 text

GOAL ターゲット コンテンツ コンバージョン

Slide 120

Slide 120 text

GOAL 点じゃなく線で考える

Slide 121

Slide 121 text

コンバージョンポイントの設定

Slide 122

Slide 122 text

GOAL ターゲット コンテンツ コンバージョン

Slide 123

Slide 123 text

コンバージョンポイントの例 ・商品の購入 ・資料請求フォームの送信 ・お問合わせフォームの送信 ・見積りフォームの送信 ・電話での連絡 ・資料のダウンロード ・メルマガの登録 ・サービス会員の登録 ・トライアル体験 ・SNSシェア ・アプリのダウンロード ・チャットボットへの質問

Slide 124

Slide 124 text

ターゲットユーザーの設定

Slide 125

Slide 125 text

GOAL ターゲット コンテンツ コンバージョン

Slide 126

Slide 126 text

ターゲットユーザー 候補の洗い出し 狙いの絞り込み

Slide 127

Slide 127 text

既存ユーザー 新規ユーザー ターゲットユーザーになりえる候補 すでに利用している ユーザー属性 利用する可能性がある ユーザー属性

Slide 128

Slide 128 text

ターゲットユーザー 候補の洗い出し 狙いの絞り込み

Slide 129

Slide 129 text

ペルソナの設定

Slide 130

Slide 130 text

ターゲットユーザーのモデルとなる 人物像を具体的に定義する

Slide 131

Slide 131 text

ニーズ 接点 状況 ペルソナ

Slide 132

Slide 132 text

ペルソナのニーズを参考に コンテンツを導き出す

Slide 133

Slide 133 text

GOAL ターゲット コンテンツ コンバージョン

Slide 134

Slide 134 text

ユーザーの行動を予測して 仮説を立てる

Slide 135

Slide 135 text

GOAL Step1 Step2 Step3 Step4 状 況 場 所 心 境

Slide 136

Slide 136 text

ユーザーシナリオを軸に 必要となるコンテンツを配置 GOAL コンテンツ コンテンツ コンテンツ コンテンツ

Slide 137

Slide 137 text

サイト設計

Slide 138

Slide 138 text

情報設計 機能設計 体験設計

Slide 139

Slide 139 text

ユーザーにアプローチする 情報の組み立てと最適化

Slide 140

Slide 140 text

① 情報の洗い出し ② 情報の絞り込み ③ 情報の優先度付け ④ 情報の配置 ⑤ 情報の階層化 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報

Slide 141

Slide 141 text

情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 ① 情報の洗い出し ② 情報の絞り込み ③ 情報の優先度付け ④ 情報の配置 ⑤ 情報の階層化

Slide 142

Slide 142 text

情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 ① 情報の洗い出し ② 情報の絞り込み ③ 情報の優先度付け ④ 情報の配置 ⑤ 情報の階層化

Slide 143

Slide 143 text

情報 情報 情報 情報 情報 情報 情報 情報 情報 情報 Goal Start ユ ー ザ ー 導 線 ① 情報の洗い出し ② 情報の絞り込み ③ 情報の優先度付け ④ 情報の配置 ⑤ 情報の階層化

Slide 144

Slide 144 text

掲載情報リスト サイトマップ ① 情報の洗い出し ② 情報の絞り込み ③ 情報の優先度付け ④ 情報の配置 ⑤ 情報の階層化

Slide 145

Slide 145 text

掲載情報リスト サイトマップ ① 情報の洗い出し ② 情報の絞り込み ③ 情報の優先度付け ④ 情報の配置 ⑤ 情報の階層化

Slide 146

Slide 146 text

情報設計 機能設計 体験設計

Slide 147

Slide 147 text

「情報」×「表現」 ユーザーに与える ユーザーに届ける ① 伝達形式の設定 ② 画面レイアウト ③ インタラクションの設定 ④ UIデザインの作成

Slide 148

Slide 148 text

ワイヤーフレームの落とし穴

Slide 149

Slide 149 text

ワイヤーフレーム 制作側 発注側 悩ましい問題

Slide 150

Slide 150 text

制作側 発注側 クライアントは サイト制作のプロじゃない場合が多い 設計図のみでは 良し悪しの判断がつかない

Slide 151

Slide 151 text

制作側 発注側 具体的な指示をすればするほど デザインを考えづらくなる ワイヤーフレームを キレイに清書するモードになってしまう

Slide 152

Slide 152 text

レイアウト指示とデザイン指示の 線引きを明確にする

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

ワイヤーフレーム プロトタイプ デザインカンプ ① 伝達形式の設定 ② 画面レイアウト ③ インタラクションの設定 ④ UIデザインの作成

Slide 155

Slide 155 text

情報設計 機能設計 体験設計

Slide 156

Slide 156 text

ユーザーの行動と心境へのアプローチ

Slide 157

Slide 157 text

GOAL コンテンツ 心境

Slide 158

Slide 158 text

GOAL コンテンツ コンテンツ 行動 心境 心境の変化

Slide 159

Slide 159 text

GOAL コンテンツ コンテンツ コンテンツ 行動 心境 心境の変化

Slide 160

Slide 160 text

GOAL コンテンツ コンテンツ コンテンツ コンテンツ 行動 心境 心境の変化

Slide 161

Slide 161 text

GOAL コンテンツ コンテンツ コンテンツ コンテンツ 心境

Slide 162

Slide 162 text

流入前 タ ー ゲ ッ ト ユ ー ザ ー 抱 く 期 待 抱 え る 不 安 ファーストビュー サードビュー セカンドビュー

Slide 163

Slide 163 text

ユーザー体験設計のポイント ① シーン毎の心境の把握 ② 心境に対応した情報と表現の調整 ③ 心境変化に対応したアクションの最適化

Slide 164

Slide 164 text

企画 設計 制作・開発 件定義 検証 リリース

Slide 165

Slide 165 text

制作及び開発を スムーズに進める工夫

Slide 166

Slide 166 text

作業者の負荷を減らす

Slide 167

Slide 167 text

デザイナー プログラマー

Slide 168

Slide 168 text

デザイナーの作業負荷を減らすポイント ・仕上がりイメージの決定と共有 ・トンマナの決定と共有 ・ターゲットユーザーの決定と共有 ・コンバージョンポイントの決定と共有 ・画面構成要素の決定と共有 ・使用素材の決定と共有

Slide 169

Slide 169 text

デザイナー プログラマー

Slide 170

Slide 170 text

プログラマーの作業負荷を減らすポイント ・仕上がりイメージの決定と共有 ・画面構成要素の決定と共有 ・機能と制約の決定と共有 ・処理フローの決定と共有 ・エラー処理の扱いの決定と共有 ・対象環境の決定と共有 ・検証項目の決定と共有

Slide 171

Slide 171 text

デザイナー プログラマー クライアント

Slide 172

Slide 172 text

クライアントの作業負荷を減らすポイント ・検討段階のアシスト ・確認段階のアシスト ・承認段階のアシスト ・素材手配段階のアシスト

Slide 173

Slide 173 text

ムダに悩ませない

Slide 174

Slide 174 text

企画 設計 制作・開発 検証 リリース

Slide 175

Slide 175 text

最終成果物の品質管理の一例 ・シナリオテスト ・ユーザビリティテスト ・アクセシビリティテスト ・セキュリティテスト ・ストレステスト ・パフォーマンステスト ・ポリシーチェック ・デバイスチェック 提供者目線 利用者目線

Slide 176

Slide 176 text

企画 設計 制作・開発 検証 リリース 運用

Slide 177

Slide 177 text

サイトの改善

Slide 178

Slide 178 text

経営課題 マーケティング課題 ウェブ課題 サイト課題

Slide 179

Slide 179 text

経営課題 マーケティング課題 ウェブ課題 サイト課題 改善点 改善点 改善点 改善点 改善施策 改善施策 改善施策 改善施策

Slide 180

Slide 180 text

サイト改善の着眼点の例 GOAL 訪問 離脱 回遊

Slide 181

Slide 181 text

アクセス解析データの活用

Slide 182

Slide 182 text

様々な数値が取得できる サイトが抱える課題を発見するツール

Slide 183

Slide 183 text

様々な 数値が取得できる

Slide 184

Slide 184 text

解析データの参照例 ・ユーザーの流入元 （検索、広告、外部サイトなど） ・ユーザーの属性（性別、年齢、地域など） ・ユーザーの閲覧環境（デバイス、OS、ブラウザなど） ・ユーザーのアクセスタイミング ・ユーザーのランディングページ ・ユーザーの滞在時間 ・ユーザーの興味と関心（キーワードなど） ・ユーザーの離脱ページ

Slide 185

Slide 185 text

アクセス解析は課題発見ツール

Slide 186

Slide 186 text

サイトの改善施策例 ・SEO ・LPO ・EFO ・CRO → 検索エンジン最適化 → ランディングページ最適化 → エントリーフォーム最適化 → コンバージョン最適化

Slide 187

Slide 187 text

LPOの着眼点の例 ・ペルソナとの親和性（情報、機能、体験） ・ファーストビューの印象 ・ランディングからコンバージョンまでの導線 ・滞在時間とコンテンツ量のマッチング ・閲覧環境とのマッチング ・離脱ポイント

Slide 188

Slide 188 text

EFOの着眼点の例 ・入力項目の数 ・必須項目の扱い ・入力エリアのサイズ ・サンプル例の表記 ・エラー表示 ・画面遷移の扱い ・完了後のアクション設定 ・送信メールの内容 ・外部リンクの扱い ・個人情報保護の扱い

Slide 189

Slide 189 text

コンバージョンはウェブだけに限らない

Slide 190

Slide 190 text

GOAL point point

Slide 191

Slide 191 text

GOAL point point point

Slide 192

Slide 192 text

Webディレクターに求められる力

Slide 193

Slide 193 text

Webディレクターに求められる力 先読力 発想力 提案力

Slide 194

Slide 194 text

Webディレクターに求められる力 先読み力 発想力 提案力 コミュニケーション力

Slide 195

Slide 195 text

コミュニケーション方法

Slide 196

Slide 196 text

会議の取り扱い コミュニケーションのポイント ①

Slide 197

Slide 197 text

thinking time 良い会議と悪い会議の違い

Slide 198

Slide 198 text

会議は決めるための手段

Slide 199

Slide 199 text

参加する立場から仕切る立場へ 有意義な会議の設計

Slide 200

Slide 200 text

会議の流れ 議題 発散 収束 着地

Slide 201

Slide 201 text

理想的な会議の流れ 議題 発散 収束 着地 ゴール 設定 タスク 設定

Slide 202

Slide 202 text

決めるべきを決める

Slide 203

Slide 203 text

専門用語の取り扱い コミュニケーションのポイント ②

Slide 204

Slide 204 text

専門用語は コミュニケーションロスの要因に 相手のリテラシーレベルに合わせた配慮が必要

Slide 205

Slide 205 text

例え話の活用 コミュニケーションのポイント ③

Slide 206

Slide 206 text

thinking time サイト制作におけるデザイン制作工程を 「レストラン」に例えて説明

Slide 207

Slide 207 text

No content

Slide 208

Slide 208 text

No content

Slide 209

Slide 209 text

ファシリテーション コミュニケーションのポイント ④

Slide 210

Slide 210 text

意見が出ない状態 意見が溢れる状態 or

Slide 211

Slide 211 text

ヒアリング不足 or 発散不足 ヒアリング＆ブレスト 整理整頓 取捨不足 or 判断基準不足 なにもない状態 と散らかり状態

Slide 212

Slide 212 text

発散 収束 判断基準 取捨 選択 ヒアリング＆ブレスト 整理整頓

Slide 213

Slide 213 text

意見の交通整理 コミュニケーションのポイント ⑤

Slide 214

Slide 214 text

No content

Slide 215

Slide 215 text

意見 意見 意見 意見 意見 意見

Slide 216

Slide 216 text

優先度 高 優先度 低 見込み効果 低 見込み効果 高 意見 意見 意見 意見 意見 意見

Slide 217

Slide 217 text

あいまいワード コミュニケーションのポイント ⑥

Slide 218

Slide 218 text

カッコよく… シンプルに… クールに… 夏っぽく… 抽象的な表現は「認識のズレ」をはらむ

Slide 219

Slide 219 text

抽象的な表現 あいまいワードを掘り下げる 成分を分解

Slide 220

Slide 220 text

連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード 連想ワード あいまいワード

Slide 221

Slide 221 text

クールな感じ 大人っぽい 敷居高め 料亭 会員制 寒い 冬 コート 年末 清涼感 飲料水 健康 水しぶき 冷たい 金属 反射 硬い

Slide 222

Slide 222 text

クールな感じ 大人っぽい 敷居高め 料亭 会員制 寒い 冬 コート 年末 清涼感 飲料水 健康 水しぶき 冷たい 金属 反射 硬い

Slide 223

Slide 223 text

夏っぽさ 暑い 陽射し まぶしい 熱中症 海水浴 水着 波しぶき セクシー 夏休み 旅行 海外 家族 日焼け 若さ 青春 肌

Slide 224

Slide 224 text

夏っぽさ 暑い 陽射し まぶしい 熱中症 海水浴 水着 波しぶき セクシー 夏休み 旅行 海外 家族 日焼け 若さ 青春 肌

Slide 225

Slide 225 text

No content

Slide 226

Slide 226 text

アイデアブレスト コミュニケーションのポイント ⑦

Slide 227

Slide 227 text

No content

Slide 228

Slide 228 text

超ポジティブ役 超ネガティブ役 大好き役 大嫌い役 興味ない役 司会役

Slide 229

Slide 229 text

おもてなし コミュニケーションのポイント ⑧

Slide 230

Slide 230 text

西洋式のホテル 日本式の旅館 or

Slide 231

Slide 231 text

おせっかいなおもてなし 積極的な提案 プロとしての存在価値

Slide 232

Slide 232 text

提案視点 コミュニケーションのポイント ⑧

Slide 233

Slide 233 text

どの道で、 行きますか？

Slide 234

Slide 234 text

どの道で、 行きますか？

Slide 235

Slide 235 text

お客の立場で考えると サービスの理想型が見えてくる

Slide 236

Slide 236 text

アイデア発想 コミュニケーションのポイント ⑨

Slide 237

Slide 237 text

No content

Slide 238

Slide 238 text

着眼 分析 ＋ アイデアマンは常に アンテナを張り巡らせている アイデア発想

Slide 239

Slide 239 text

着眼 分析 妄想 着想 発想力を養う思考の習慣化 着眼力を鍛える

Slide 240

Slide 240 text

見積書と価格交渉 コミュニケーションのポイント ⑩

Slide 241

Slide 241 text

クライアント （発注側） ディレクター （制作側） 見積書

Slide 242

Slide 242 text

価格交渉テクニック ・料金メニューの提示 ・段階的に締める ・説得力の底上げ ・項目名の工夫 ・選びやすさ ・備考欄の活用

Slide 243

Slide 243 text

No content

Slide 244

Slide 244 text

料金プランをベースに 価格交渉を展開 クライアント （発注側） ディレクター （制作側）

Slide 245

Slide 245 text

価格交渉テクニック ・料金メニューの提示 ・段階的に締める ・説得力の底上げ ・項目名の工夫 ・選びやすさ ・備考欄の活用

Slide 246

Slide 246 text

企画 設計 制作・開発 検証 リリース

Slide 247

Slide 247 text

企画 設計 制作・開発 検証 リリース

Slide 248

Slide 248 text

企画 設計 制作・開発 検証 リリース

Slide 249

Slide 249 text

価格交渉テクニック ・料金メニューの提示 ・段階的に締める ・説得力の底上げ ・項目名の工夫 ・選びやすさ ・備考欄の活用

Slide 250

Slide 250 text

＋ 見積書 補足資料 見積りに「根拠」を与えて説得力を高める

Slide 251

Slide 251 text

価格交渉テクニック ・料金メニューの提示 ・段階的に締める ・説得力の底上げ ・項目名の工夫 ・選びやすさ ・備考欄の活用

Slide 252

Slide 252 text

松 竹 梅

Slide 253

Slide 253 text

選択を悩ませるような提案は逆効果

Slide 254

Slide 254 text

クライアント （発注側） ディレクター （制作側） 見積書は 価格交渉のツール

Slide 255

Slide 255 text

企画提案 コミュニケーションのポイント ⑪

Slide 256

Slide 256 text

提案後の反応予測

Slide 257

Slide 257 text

提案材料 ク ラ イ ア ン ト ポ ジ テ ィ ブ な 担 当 者 ネ ガ テ ィ ブ な 担 当 者 反応予測 質問 心境

Slide 258

Slide 258 text

相手の行動と心境をふまえたアプローチ

Slide 259

Slide 259 text

What Why How Action どんな企画？ 何故それが必要？ いくら必要？ よし、やろう！ 相 手 の 心 境 企 画 書 の 内 容 ・目的 ・目標 ・現状分析 ・競合分析 ・課題点とリスク ・課題解決に向けた施策 ・コンテンツのイメージ ・見込み効果予測 ・リソース ・費用 ・スケジュール アクション プラン 狙い 理由 条件 着地

Slide 260

Slide 260 text

プレゼンテーション コミュニケーションのポイント ⑫

Slide 261

Slide 261 text

No content

Slide 262

Slide 262 text

No content

Slide 263

Slide 263 text

No content

Slide 264

Slide 264 text

プレゼンテーションは 日常的に行っている身近な行為

Slide 265

Slide 265 text

thinking time プレゼンが「上手な人」と「下手な人」の違い

Slide 266

Slide 266 text

目標 目線 どこを目指すか？ どこを見るか？

Slide 267

Slide 267 text

発表に留めずアクションを促す

Slide 268

Slide 268 text

プレゼンに必要な能力 構成力 story 伝達力 delivery 表現力 performance

Slide 269

Slide 269 text

プレゼン作りの流れ

Slide 270

Slide 270 text

テーマ設定 ターゲット設定 ゴール設定 情報の配置 届ける表現 ストーリー設計 コンテンツ設計

Slide 271

Slide 271 text

プレゼンのストーリー設計

Slide 272

Slide 272 text

ゴールに向けて、どう進むか

Slide 273

Slide 273 text

相手の反応を意識

Slide 274

Slide 274 text

プレゼンジャーニーマップ 起 承 転 結

Slide 275

Slide 275 text

プレゼンジャーニーマップ 起 承 転 結 相手の反応を意識して「情報の配置」と「届ける表現」を考える 情報 情報 情報 情報 情報

Slide 276

Slide 276 text

プレゼンにおける伝達表現

Slide 277

Slide 277 text

喋りの上手さ ≠ プレゼンの上手さ 小手先のテクニックより「ナチュラルな喋り」を磨く

Slide 278

Slide 278 text

ナチュラルな喋りを磨くために 自分自身の喋りの「癖」を知る

Slide 279

Slide 279 text

速度 音色 音量 リズム

Slide 280

Slide 280 text

スライド資料 ≠ 配布資料

Slide 281

Slide 281 text

スライド資料 配布資料

Slide 282

Slide 282 text

主役はプレゼンター、スライドは補助資料 映画の字幕 テレビのテロップ

Slide 283

Slide 283 text

プレゼン力を養うトレーニング

Slide 284

Slide 284 text

No content

Slide 285

Slide 285 text

No content

Slide 286

Slide 286 text

No content

Slide 287

Slide 287 text

No content

Slide 288

Slide 288 text

No content

Slide 289

Slide 289 text

No content

Slide 290

Slide 290 text

プレゼンテクニック

Slide 291

Slide 291 text

プレゼンテクニック ・キャッチボールで進行 ・選びやすくする ・沈黙を有効活用 ・脱線を有効活用 ・あえてスキを残す ・ツールの使い分け ・他者との比較を逆手にとる ・タイミングを工夫

Slide 292

Slide 292 text

プレゼンの良し悪しを測るモノサシ

Slide 293

Slide 293 text

親和性 双方向性 相手を惹きつけ、相手を巻き込む 共感度 共鳴度

Slide 294

Slide 294 text

Webディレクションを支援するツール

Slide 295

Slide 295 text

No content

Slide 296

Slide 296 text

No content

Slide 297

Slide 297 text

No content

Slide 298

Slide 298 text

タスク設定 マイルストーン設定 プロジェクトマネジメントを支援するシート

Slide 299

Slide 299 text

工数算出 中間成果物 プロジェクトマネジメントを支援するシート

Slide 300

Slide 300 text

現状分析 競合分析 課題分析を支援するシート

Slide 301

Slide 301 text

ターゲットユーザーの洗い出し ペルソナの設定 ターゲットユーザーを設定するシート

Slide 302

Slide 302 text

カスタマージャーニー タッチポイント ターゲットユーザーへのアプローチを考えるシート

Slide 303

Slide 303 text

サイトシナリオ 画面設計 コンテンツプランニングを支援するシート

Slide 304

Slide 304 text

なぜアナログツール？

Slide 305

Slide 305 text

クライアント Webディレクター クリエイター

Slide 306

Slide 306 text

No content

Slide 307

Slide 307 text

クライアントと一緒にプロジェクトを進める 一緒に作った感が高まる ムダな二転三転や理不尽なやり直しを回避

Slide 308

Slide 308 text

持ち帰り文化からの脱却