0からのウェブディレクション講座：設計編 v5.3

(C) 2015 DCHS / CONFIDENTIAL

0からのウェブディレクション講座設計編

1

0からのWebディレクション講座設計編 version5.3



2

氏名高瀬康次（タカセヤスジ）

略歴

2000年頃にウェブ制作の技術を独学で習得し、個人で制作を受託するなどして活動。

その後、不動産と広告の業界で営業職を経験し、2006年にウェブディレクターに転身。

2008年にフリーランスとして独立し、デジタルマーケティングオフィスDCHSを設立。

2013年より日本ディレクション協会に参画し、主に講師として活動。

2014年より株式会社BITAに所属し、某大手就職情報サイトの制作ディレクションを担当している。

2015年1月より、日本ディレクション協会デジタルマーケティング推進室の室長に就任。



3



ここから本題

4



5

まえがき

ウェブに関する用語については、概念的なものが多く、常に諸説あり、人により、意味が全く異なることがあります。

本講における各用語の使い方は、講師である高瀬の主観、および経験に基づいて定義されており、実際の業務の場において扱いやすいよう、あえて狭義的に用いていることが多くあります。

本講義を受講される方には、ご自身の理解、または職場での用法に置き換えていただき、ご理解くださいますようお願いいたします。



ウェブディレクターって何者？

6



7

ウェブディレクターの主な仕事

要件と人員と工期とを統括し、その進行管理をする人です。



8

ウェブディレクターの主な仕事

？

何をやるのか

？

誰がやるのか

？

いつやるのか

要件と人員と工期とを統括し、その進行管理をする人です。



9

オーケストラにおける指揮者

建設現場における現場監督



10

ウェブディレクションの流れ

①設計 ②構築 ③運用



11

本日のテーマ

①設計 ②構築 ③運用



ウェブにおける設計とは何か？

12



13

ウェブにおける設計とは何か？

？

何をやるのか

？

誰がやるのか

？

いつやるのか

要件その要件



14

何のために設計をするのか？

動感インプット

アウトプット

Feel Action



15

何のために設計をするのか？

ウェブサイトにおける設計とは、

ユーザーの「感動を設計」すること。



16

設計のステップ

①情報設計 ②仕様設計主に戦術面の設計を行います。ワイヤーフレーム、外部設計など

主に戦略面の設計を行います。コンセプトワーク、マーケティングプランなど



情報設計

17



18

カスタマーの定義（ペルソナモデル）Domain（分類・区分） Mind（意識・性格）

Behavior（行動・習慣）Visual（外見・服装）

Customer（人物）？カスタマーはどのような人物なのか？

カスタマーの人物像を、具体的に想定する。



19

バリューの定義（ポジションマップ）

Value（価値）？カスタマーにとっての価値は何か？

Position（優位性）

競合のサービスと比較して、目指すポジションを明確にする。



20

ゴールの定義（KPI/KGI）

Goal（KGI）？最終的に達成したい目標は何か？

Step（KPI）

目標を達成するために、積み上げるべき数値を設定する。



21

ミッションの定義（スローガン）Customer（人物） Goal（KGI）Value（価値）

カスタマーはどのような人物なのか？

カスタマーにとっての価値は何か？

最終的に達成したい目標は何か？

Mission（Slogan）

共通理念として掲げる言葉



設計してみた恋愛編

22



23

エロ偉い人が大事なことを言っていました。

マーケティングとは、恋愛である。



24

恋愛における登場人物

オレアイツら

あの娘

恋敵

片想い片想い



25

マーケットにおける登場人物（3C）

自社 Company

競合 Competitor

顧客 Customer

商売敵

訴求訴求



26

背景／課題／目的

気になるあの子は同期入社のマドンナ。昨年末、彼氏に浮気して別れて以来、ひとりでいるらしい。入社して2年、最近仕事の壁にぶつかっていて悩んでいるみたいだ。

あの子を狙っているのはオレだけじゃない。ひとりは同期入社の脳筋野郎、もうひとりは彼女と同じ部署の主任で、クールなスポーツマンだ。

最近、あの子は知的で渋いあの上司が気になっているみたいだけど、彼には奥さんがいるから、オレにもまだチャンスがあるはずだ。

なんとしてもあの子の気を惹いて、恋人にするんだ！



27

カスタマーの定義（ペルソナモデル）Domain（分類・区分） Mind（意識・性格）

Behavior（行動・習慣）Visual（外見・服装）

Customer（人物）？

新卒入社２年目、23歳、女性、彼氏なし、営業職、年収250万円

和やかなムードが好き、勉強家、問題を抱え込みがち

黒髪、ポニーテール、メガネ世話好き、人の話を聞くときはもの凄く目を見る

根が明るく、まじめで、物事を真剣に考える人



オレ上司

28


Value（価値）？

クールファニー

インテリジェンス

スポーツマン

Position（優位性）

主任同期

悩みを吹き飛ばし、笑顔の絶えない日々



29


Goal（KGI）？

Step（KPI）

Lineトーク：50件／day 　↓ Line通話：2件／Week 　↓ デート：2回／Month

交際の承諾：1件



30

ミッションの定義（スローガン）Customer（人物） Goal（KGI）Value（価値）

Mission（Slogan）

根が明るく、まじめで、物事を真剣に考える人

悩みを吹き飛ばし、笑顔の絶えない日々

交際の承諾：1件

頼りがい！遊びがい！安心と楽しさの相乗効果！



設計してみたウォッチブランド編

31



32

背景／課題／目的

参加者にのみ公開



33





34

カスタマーの定義（ペルソナモデル）




35

施策




36





37

ミッションの定義（スローガン）




仕様設計

38



39

仕様設計において重視すべきこと

１秒の追求



40

１秒でサイトの価値を伝える①

description

titleog: title

og: image

og: description

メタ情報は、集客導線上、非常に重要な役割を担っています。



41

１秒でサイトの価値を伝える②

タグライン

サイトの機能やメリットを簡潔な文言で紹介するものです。

キービジュアル

近い将来像を、ビジュアルで具体的に伝える役割をもつものです。

ナビゲーション

サイトの機能や得られる情報を単語レベルの文言で伝えるものです。

ファーストビューは、ユーザーの興味を最大化する最重要ポイントです。



42

１秒で進路を伝える

ユーザーの属性別ナビゲーション

クレジットリンク（信頼性を担保するナビゲーション）

ユーザーの興味別ナビゲーション

ナビゲーションのグルーピングにより、自然な理解を促します。



43

１秒で目的地へ導く

サイトマップは階層を浅くシンプルな構造にします。



44

１秒で内容の理解を得る

コンテンツのグルーピングにより、自然な理解を促します。

A-① / B-①タイトルエリア

A-③、B-⑥コンタクトエリア

B-④セールスエリア

B-⑤サービスエリア

A-① / B-②ステータスエリア

B-③ナビゲーションエリア



45

でも一番大事なのは

Customer Value Goal



46

ワイヤーフレームを学ぶなら！



情報設計ワークショップ

47



48

お題




おわり

49

Career

0からのウェブディレクション講座：設計編 v5.3