Your SlideShare is downloading. ×
  • Like
0からのウェブディレクション講座:設計編 v5.3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 71,591 views
Published

設計とは、道標である。 by DCHS …

設計とは、道標である。 by DCHS

本講では、ウェブ構築の大前提となる、「誰のために、何をするのか」をメインテーマとし、概念ばかりが先行し、解釈が多様化し、理解が困難な「設計」という工程を、具体的に、体系的に、実践的に解説します。

【講師】
DCHS 高瀬
https://twitter.com/DCHSjp
https://www.facebook.com/DCHSjp

【主催】
日本ディレクション協会
http://www.direkyo.com
https://www.facebook.com/direkyo.org

Published in Career
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
71,591
On SlideShare
0
From Embeds
0
Number of Embeds
39

Actions

Shares
Downloads
355
Comments
0
Likes
99

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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月より、日本ディレクション協会デジタル マーケティング推進室の室長に就任。
  • 3. (C) 2015 DCHS / CONFIDENTIAL 0からのウェブディレクション講座 設計編 3
  • 4. (C) 2015 DCHS / CONFIDENTIAL 0からのウェブディレクション講座 設計編 ここから本題 4
  • 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 設計のステップ ①情報設計 ②仕様設計 主に戦術面の設計を行います。 ワイヤーフレーム、外部設計 など 主に戦略面の設計を行います。 コンセプトワーク、マーケティングプラン など
  • 17. (C) 2015 DCHS / CONFIDENTIAL 0からのウェブディレクション講座 設計編 情報設計 17
  • 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 ミッションの定義(スローガン) 参加者にのみ公開
  • 38. (C) 2015 DCHS / CONFIDENTIAL 0からのウェブディレクション講座 設計編 仕様設計 38
  • 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 お題 参加者にのみ公開
  • 49. (C) 2015 DCHS / CONFIDENTIAL 0からのウェブディレクション講座 設計編 おわり 49