More Related Content
Similar to 0からのウェブディレクション講座:設計編 v5.3
Similar to 0からのウェブディレクション講座:設計編 v5.3 (20)
0からのウェブディレクション講座:設計編 v5.3
- 1. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
1
0からのWebディレクション講座
設計編 version5.3
- 2. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
2
氏名
高瀬 康次(タカセ ヤスジ)
略歴
2000年頃にウェブ制作の技術を独学で習得し、個人
で制作を受託するなどして活動。
その後、不動産と広告の業界で営業職を経験し、2006
年にウェブディレクターに転身。
2008年にフリーランスとして独立し、デジタルマー
ケティングオフィスDCHSを設立。
2013年より日本ディレクション協会に参画し、主に
講師として活動。
2014年より株式会社BITAに所属し、某大手就職情報
サイトの制作ディレクションを担当している。
2015年1月より、日本ディレクション協会デジタル
マーケティング推進室の室長に就任。
- 5. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
5
まえがき
ウェブに関する用語については、概念的なものが多く、常に諸説あり、
人により、意味が全く異なることがあります。
本講における各用語の使い方は、講師である高瀬の主観、および経験に
基づいて定義されており、実際の業務の場において扱いやすいよう、あ
えて狭義的に用いていることが多くあります。
本講義を受講される方には、ご自身の理解、または職場での用法に置き
換えていただき、ご理解くださいますようお願いいたします。
- 6. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
ウェブディレクターって何者?
6
- 7. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
7
ウェブディレクターの主な仕事
要件 と 人員 と 工期 とを統括し、
その 進行管理 をする人です。
- 8. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
8
ウェブディレクターの主な仕事
?
何をやるのか
?
誰がやるのか
?
いつやるのか
要件 と 人員 と 工期 とを統括し、
その 進行管理 をする人です。
- 9. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
9
オーケストラにおける
指揮者
建設現場における
現場監督
- 10. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
10
ウェブディレクションの流れ
①設計 ②構築 ③運用
- 11. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
11
本日のテーマ
①設計 ②構築 ③運用
- 12. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
ウェブにおける設計とは何か?
12
- 13. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
13
ウェブにおける設計とは何か?
?
何をやるのか
?
誰がやるのか
?
いつやるのか
要件
その
要件
- 14. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
14
何のために設計をするのか?
動感
インプット
アウトプット
Feel Action
- 15. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
15
何のために設計をするのか?
ウェブサイトにおける設計とは、
ユーザーの「感動を設計」すること。
- 16. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
16
設計のステップ
①情報設計 ②仕様設計
主に戦術面の設計を行います。
ワイヤーフレーム、外部設計 など
主に戦略面の設計を行います。
コンセプトワーク、マーケティングプラン など
- 18. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
18
カスタマーの定義(ペルソナモデル)
Domain(分類・区分) Mind(意識・性格)
Behavior(行動・習慣)Visual(外見・服装)
Customer(人物)
?
カスタマーはどのような人物なのか?
カスタマーの人物像を、
具体的に想定する。
- 19. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
19
バリューの定義(ポジションマップ)
Value(価値)
?
カスタマーにとっての価値は何か?
Position(優位性)
競合のサービスと比較して、
目指すポジションを明確にする。
- 20. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
20
ゴールの定義(KPI/KGI)
Goal(KGI)
?
最終的に達成したい目標は何か?
Step(KPI)
目標を達成するために、
積み上げるべき数値を設定する。
- 21. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
21
ミッションの定義(スローガン)
Customer(人物) Goal(KGI)Value(価値)
カスタマーは
どのような人物なのか?
カスタマーにとっての
価値は何か?
最終的に達成したい
目標は何か?
Mission(Slogan)
共通理念として掲げる言葉
- 22. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
設計してみた
恋愛編
22
- 23. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
23
エロ偉い人が大事なことを言っていました。
マーケティングとは、恋愛である。
- 24. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
24
恋愛における登場人物
オレ アイツら
あの娘
恋敵
片想い 片想い
- 25. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
25
マーケットにおける登場人物(3C)
自社
Company
競合
Competitor
顧客
Customer
商売敵
訴求 訴求
- 26. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
26
背景/課題/目的
気になるあの子は同期入社のマドンナ。
昨年末、彼氏に浮気して別れて以来、ひとりでいるらしい。
入社して2年、最近仕事の壁にぶつかっていて悩んでいるみたいだ。
あの子を狙っているのはオレだけじゃない。
ひとりは同期入社の脳筋野郎、
もうひとりは彼女と同じ部署の主任で、クールなスポーツマンだ。
最近、あの子は知的で渋いあの上司が気になっているみたいだけど、
彼には奥さんがいるから、オレにもまだチャンスがあるはずだ。
なんとしてもあの子の気を惹いて、恋人にするんだ!
- 27. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
27
カスタマーの定義(ペルソナモデル)
Domain(分類・区分) Mind(意識・性格)
Behavior(行動・習慣)Visual(外見・服装)
Customer(人物)
?
新卒入社2年目、23歳、女性、
彼氏なし、営業職、年収250万円
和やかなムードが好き、勉強家、
問題を抱え込みがち
黒髪、ポニーテール、メガネ 世話好き、
人の話を聞くときはもの凄く目を見る
根が明るく、まじめで、物事を真剣に考える人
- 28. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
オレ上司
28
バリューの定義(ポジションマップ)
Value(価値)
?
クール ファニー
インテリジェンス
スポーツマン
Position(優位性)
主任 同期
悩みを吹き飛ばし、笑顔の絶えない日々
- 29. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
29
ゴールの定義(KPI/KGI)
Goal(KGI)
?
Step(KPI)
Lineトーク:50件/day
↓
Line通話:2件/Week
↓
デート:2回/Month
交際の承諾:1件
- 30. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
30
ミッションの定義(スローガン)
Customer(人物) Goal(KGI)Value(価値)
Mission(Slogan)
根が明るく、まじめで、
物事を真剣に考える人
悩みを吹き飛ばし、
笑顔の絶えない日々
交際の承諾:1件
頼りがい!遊びがい!安心と楽しさの相乗効果!
- 31. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
設計してみた
ウォッチブランド編
31
- 32. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
32
背景/課題/目的
参加者にのみ公開
- 33. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
33
バリューの定義(ポジションマップ)
参加者にのみ公開
- 34. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
34
カスタマーの定義(ペルソナモデル)
参加者にのみ公開
- 35. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
35
施策
参加者にのみ公開
- 36. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
36
ゴールの定義(KPI/KGI)
参加者にのみ公開
- 37. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
37
ミッションの定義(スローガン)
参加者にのみ公開
- 39. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
39
仕様設計において重視すべきこと
1秒の追求
- 40. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
40
1秒でサイトの価値を伝える①
description
title
og: title
og: image
og: description
メタ情報は、集客導線上、非常に重要な役割を担っています。
- 41. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
41
1秒でサイトの価値を伝える②
タグライン
サイトの機能やメリット
を簡潔な文言で紹介する
ものです。
キービジュアル
近い将来像を、ビジュア
ルで具体的に伝える役割
をもつものです。
ナビゲーション
サイトの機能や得られる
情報を単語レベルの文言
で伝えるものです。
ファーストビューは、ユーザーの興味を最大化する最重要ポイントです。
- 42. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
42
1秒で進路を伝える
ユーザーの属性別ナビゲーション
クレジットリンク(信頼性を担保するナビゲーション)
ユーザーの興味別
ナビゲーション
ナビゲーションのグルーピングにより、自然な理解を促します。
- 43. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
43
1秒で目的地へ導く
サイトマップは階層を浅くシンプルな構造にします。
- 44. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
44
1秒で内容の理解を得る
コンテンツのグルーピングにより、自然な理解を促します。
A-① / B-①
タイトルエリア
A-③、B-⑥
コンタクトエリア
B-④
セールスエリア
B-⑤
サービスエリア
A-① / B-②
ステータスエリア
B-③
ナビゲーションエリア
- 45. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
45
でも一番大事なのは
Customer Value Goal
- 46. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
46
ワイヤーフレームを学ぶなら!
- 47. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
情報設計
ワークショップ
47
- 48. (C) 2015 DCHS / CONFIDENTIAL
0からのウェブディレクション講座
設計編
48
お題
参加者にのみ公開