Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
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
持ち帰り文化からの脱却