Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
0からのWebディレクション講座:設計編
~ S T O P ! ブ レ ブ レ デ ィ レ ク シ ョ ン ! ~
日 本 デ ィ レ ク シ ョ ン 協 会 主 催
自己紹介
池宮愛児(イケミヤ アイジ)
株式会社ディーゼロ Webディレクター。
1976年10月生まれ。福岡市出身。
経歴
2002年より福岡のWeb制作会社でデザイン制作に携わり、
2008年よりWebディレクターへ転向。地元大手企業も数多...
Webディレクターの役割
Webディレクターの役割
各メンバーが、
共通のゴールに向かって
取り組める下地をつくる
Webディレクターの役割
プロジェクトメンバーの
良き理解者
Webディレクターの役割
ノリが生まれる
Webディレクターの役割
Webデザイナーはサイトをつくる。
Webディレクターは
プロジェクトをつくる。
Webディレクターの役割
良いプロジェクトは、ブレない
Webディレクターの役割
そのためには ブレない設計 と
コミュニケーションを円滑にする
情報共有 がとても大事です。
Webにおける設計とは?
Webにおける設計とは?
情報設計と仕様設計
Webにおける設計とは?
情報設計は…誰に何を伝え、
どこに向かわせるか
を定義した戦略設計。
Webにおける設計とは?
仕様設計は…
制作における具体的戦術設計
Webにおいて
ユーザーの行動は
いたってシンプル
Webにおける設計とは?
訪問
興味
関心
行動
Webにおける設計とは?
具体的なアクションとしては…
検索 スクロール クリック
Webにおける設計とは?
設計はこの3ステップに集中
Webにおける設計とは?
いかにしてWebサイトへ
訪問させるか
どうやって興味を持ってもらい
行動させるか
Webにおける設計とは?
出会い 食事・ドライブ 告白
Webにおける設計とは?
自社
ユーザー
(顧客)
他社
(競合)
恋敵
片想い片想い
Webにおける設計とは?
6w2hに基づいた設計
6w2hに基づいた設計
Webサイトは
情報伝達手段
6w2hに基づいた設計
6w2hです。
6w2hに基づいた設計
情報伝達をわかりやすく、漏れなく
行うために用いる確認事項。
W h e n ( い つ )
W h e r e ( ど こ で )
W h o ( 誰 が )
W h o m ( 誰 に )
W h y ( な ぜ )...
6w2hに基づいた設計
Why
Where
How
much
When
Whom
How
What Who
6w2hに基づいた設計
なぜ?
いつ?
いくらで?
どこで?
誰に?
どのように?
何を? 誰が?
6w2h基づいた設計
情報伝達の基本に沿って
6w2hをおさえると、
伝わりやすくなる
6w2h基づいた設計
What
なにを?
6w2h基づいた設計:What
この商品・サービスはどんなものか?
Webサイトにおけるゴールは?
6w2h基づいた設計:What
ブランディング
企業そのものや製品・サービスの認知をしてもらい知名度を上げる
販促
実店舗への誘導
見込み客の囲い込み
自社商材の資料請求や問い合わせ獲得
顧客フォロー
製品・商品に関するサポート
顧客...
Webサイトにおける主題を理解する。
6w2h基づいた設計:What
6w2hに基づいた設計
Why
Where
How
much
When
Whom
How
What Who
6w2hに基づいた設計
Why
Where
How
much
When
Whom
How
What Who
ユーザーに関する情報
6w2hに基づいた設計
Why
Where
How
much
When
Whom
How
What Who
ビジネスモデル関する情報
6w2hに基づいた設計
Why
Where
How
much
When
Whom
How
What Who
自社に関する情報
6w2h基づいた設計
Whom
誰に?
ターゲットは誰か?
6w2h基づいた設計:Whom
ターゲットとするユーザーを
具体的にイメージし、
判断基準を明確にする。
6w2h基づいた設計:Whom
ペルソナ
6w2h基づいた設計:Whom
ペルソナとは?
ペルソナとは「企業が提供する製品・サービスにとって最も
重要で象徴的な顧客モデル」と定義されます。
(※出典:ペルソナ&カスタマ・エクスペリエンス学会)
一般的に使われることの多いターゲットよりも具体的で
その人の価値観やライフ...
• ユーザー視点の精度が向上
• 意思決定が早く的確に
• イメージが共有しやすくなる
• 企画の質が向上
6w2h基づいた設計:Whom
6w2h基づいた設計:Whom
ペルソナマーケティングの成功事例
女性に愛され、売上高42億円!
Soup Stock Tokyo
問い合わせ数30~40%アップ
TBC
3カ月で6,000万本!
クールドラフト
(アサヒビール)
売れすぎて生...
6w2h基づいた設計:Whom
ペルソナマーケティングの成功事例
参考:スープストックの成功秘訣はこれ!共感をつくるお客様中心のペルソナマーケティング
http://ikigoto.com/digitalmarketing/blog/post-...
6w2h基づいた設計:Whom
ペルソナマーケティングの成功事例
• TBC
都内在住の自営業者(44歳)、年収900万円、
家族は1歳下の妻と長男16歳、長女13歳の4人家族・・・
• クールドラフト(アサヒビール)
三軒茶屋のワンルールマン...
ペルソナ設計
WORKSHOP
6w2h基づいた設計:Whom
6w2h基づいた設計
How much
いくらで?
いくらで提供するのか?
6w2h基づいた設計:How much
どれほど投資するのか?
ユーザーにとっての価値を知る。
6w2h基づいた設計:How much
Why
なぜ?
6w2h基づいた設計
なぜこの商品やサービスを欲しがるのか?
6w2h基づいた設計:Why
Webサイトが果たすべき役割と
ユーザーの行動動機を共有する。
6w2h基づいた設計:Why
6w2h基づいた設計
ブレないユーザー視点
Why
How
much
Whom
6w2h基づいた設計
How
どのように?
どうやって提供するか?
6w2h基づいた設計:How
ビジネスモデルと
企画の狙いを理解する。
6w2h基づいた設計:How
6w2h基づいた設計
Where
どこで?
この商品・サービスをどこで展開するか?
6w2h基づいた設計:Where
市場や地域性を共有。
6w2h基づいた設計:Where
6w2h基づいた設計
When
いつ?
いつ提供するか?
いつまで提供するか?
6w2h基づいた設計:When
なぜこのタイミングなのか?
繁忙期?閑散期?
リリース後のスケジュールは?
6w2h基づいた設計:When
6w2h基づいた設計:
ビジネスモデルをブラさない。
WhereWhen
How
Who
誰が?
6w2h基づいた設計
商品・サービスの提供者は誰か?
そして、その人にはどんな強みがあるか?
6w2h基づいた設計:Who
クライアントを知り、差別化。
6w2h基づいた設計:Who
トーン&マナーを共有
「誰に何をどのように伝えるか?」
情報共有
6W2H
トーン
&
マナー
ポジショニングマップの活用
もともとポジショニングマップは自社と競合する商品を差
別化し優位な地位を気づくためにそれぞれの位置づけを明
確にする図。
情報共有
トーン&マナーを共有
WORKSHOP
情報共有
仕様設計
仕様設計
仕様設計のポイントは、
“無意識”で伝わること
仕様設計
1.わかりやすい分類
2.優先順位
3.導線
仕様設計:グルーピング
わかりやすい分類とは、
慣習と意味あるグルーピング!
仕様設計:グルーピング
• 企業情報系
「企業理念」や「会社概要」など
• 製品情報系
「商品ページ」や「製品紹介」など
• サポート系
「ご利用ガイド」や「よくある質問」など
• 告知系
「ニュース&トピックス」や
「キャンペーン情報」など
...
仕様設計:優先順位
配置による誘導
視線の流れはパターン化さされている。
Fの法則Zの法則グーテンベルグ ダイアグラム
仕様設計:優先順位
配置による誘導
上下左右のレイアウトによる違い。
①
②
③
④
上下 左右>
① ② ③
④ ⑤ ⑥
⑦ ⑧ ⑨
仕様設計:優先順位
コントラスト
重要なものほど目立たせる。
カラーによるコントラスト サイズによるコントラスト
0からのWebディレクション講座:設計編
~STOP!ブレブレディレクション!~
日本ディレクション協会主催
0からのWebディレ...
仕様設計:導線
導線設計
誘導につながるリンクは
コンテンツの底。
行き止まりを作らない。
ヘッダー グロナビ
サイドナビ
フッター
ここが大事
仕様設計
クライアント環境や制作に関する
ガイドラインをまとめておく
• OS環境 ・・・ Windows / mac
• 対応ブラウザ ・・・ IE / Safari / Chrome / Firefox / Opera の推奨バージョン
•...
まとめ
まとめ
まとめ
 Webディレクターは忙しい
 フレームワークをもつ
 ブレるディレクターは誰も必要していない
 なりきるプロであれ!
 広い知識とコミュニケーションスキル
 「ありがとう」「ごめんなさい」
まとめ
おわりに
ありがとうございました。
「制作・開発編」「運用編」も
ぜひご参加ください!
Nächste SlideShare
Wird geladen in …5
×

0からのwebディレクション講座 福岡 設計編_150117

2015年1月17日実施の 九州支部 ゼロディレ第1弾
「設計編」のスライドです。

  • Als Erste(r) kommentieren

0からのwebディレクション講座 福岡 設計編_150117

  1. 1. 0からのWebディレクション講座:設計編 ~ S T O P ! ブ レ ブ レ デ ィ レ ク シ ョ ン ! ~ 日 本 デ ィ レ ク シ ョ ン 協 会 主 催
  2. 2. 自己紹介 池宮愛児(イケミヤ アイジ) 株式会社ディーゼロ Webディレクター。 1976年10月生まれ。福岡市出身。 経歴 2002年より福岡のWeb制作会社でデザイン制作に携わり、 2008年よりWebディレクターへ転向。地元大手企業も数多く 手掛けるなど、サイトの立ち上げから運営業務までの 膨大な業務をこなしつつ、制作現場のリーダー・監督役としても 活躍。2015年株式会社ディーゼロへ移籍。 4歳になる愛娘を溺愛するお笑いマニア。 “Webファンタジスタ“を目指し、活動中。
  3. 3. Webディレクターの役割
  4. 4. Webディレクターの役割 各メンバーが、 共通のゴールに向かって 取り組める下地をつくる
  5. 5. Webディレクターの役割 プロジェクトメンバーの 良き理解者
  6. 6. Webディレクターの役割 ノリが生まれる
  7. 7. Webディレクターの役割 Webデザイナーはサイトをつくる。 Webディレクターは プロジェクトをつくる。
  8. 8. Webディレクターの役割 良いプロジェクトは、ブレない
  9. 9. Webディレクターの役割 そのためには ブレない設計 と コミュニケーションを円滑にする 情報共有 がとても大事です。
  10. 10. Webにおける設計とは?
  11. 11. Webにおける設計とは? 情報設計と仕様設計
  12. 12. Webにおける設計とは? 情報設計は…誰に何を伝え、 どこに向かわせるか を定義した戦略設計。
  13. 13. Webにおける設計とは? 仕様設計は… 制作における具体的戦術設計
  14. 14. Webにおいて ユーザーの行動は いたってシンプル Webにおける設計とは?
  15. 15. 訪問 興味 関心 行動 Webにおける設計とは?
  16. 16. 具体的なアクションとしては… 検索 スクロール クリック Webにおける設計とは?
  17. 17. 設計はこの3ステップに集中 Webにおける設計とは?
  18. 18. いかにしてWebサイトへ 訪問させるか どうやって興味を持ってもらい 行動させるか Webにおける設計とは?
  19. 19. 出会い 食事・ドライブ 告白 Webにおける設計とは?
  20. 20. 自社 ユーザー (顧客) 他社 (競合) 恋敵 片想い片想い Webにおける設計とは?
  21. 21. 6w2hに基づいた設計
  22. 22. 6w2hに基づいた設計 Webサイトは 情報伝達手段
  23. 23. 6w2hに基づいた設計 6w2hです。
  24. 24. 6w2hに基づいた設計 情報伝達をわかりやすく、漏れなく 行うために用いる確認事項。 W h e n ( い つ ) W h e r e ( ど こ で ) W h o ( 誰 が ) W h o m ( 誰 に ) W h y ( な ぜ ) W h a t ( 何 を ) H o w ( ど の よ う に ) How much(いくら)
  25. 25. 6w2hに基づいた設計 Why Where How much When Whom How What Who
  26. 26. 6w2hに基づいた設計 なぜ? いつ? いくらで? どこで? 誰に? どのように? 何を? 誰が?
  27. 27. 6w2h基づいた設計 情報伝達の基本に沿って 6w2hをおさえると、 伝わりやすくなる
  28. 28. 6w2h基づいた設計 What なにを?
  29. 29. 6w2h基づいた設計:What この商品・サービスはどんなものか? Webサイトにおけるゴールは?
  30. 30. 6w2h基づいた設計:What ブランディング 企業そのものや製品・サービスの認知をしてもらい知名度を上げる 販促 実店舗への誘導 見込み客の囲い込み 自社商材の資料請求や問い合わせ獲得 顧客フォロー 製品・商品に関するサポート 顧客獲得 顧客や会員者数の増加
  31. 31. Webサイトにおける主題を理解する。 6w2h基づいた設計:What
  32. 32. 6w2hに基づいた設計 Why Where How much When Whom How What Who
  33. 33. 6w2hに基づいた設計 Why Where How much When Whom How What Who ユーザーに関する情報
  34. 34. 6w2hに基づいた設計 Why Where How much When Whom How What Who ビジネスモデル関する情報
  35. 35. 6w2hに基づいた設計 Why Where How much When Whom How What Who 自社に関する情報
  36. 36. 6w2h基づいた設計 Whom 誰に?
  37. 37. ターゲットは誰か? 6w2h基づいた設計:Whom
  38. 38. ターゲットとするユーザーを 具体的にイメージし、 判断基準を明確にする。 6w2h基づいた設計:Whom
  39. 39. ペルソナ 6w2h基づいた設計:Whom
  40. 40. ペルソナとは? ペルソナとは「企業が提供する製品・サービスにとって最も 重要で象徴的な顧客モデル」と定義されます。 (※出典:ペルソナ&カスタマ・エクスペリエンス学会) 一般的に使われることの多いターゲットよりも具体的で その人の価値観やライフスタイルなど、実在する一人の 人物を作り、そのペルソナの思考に合わせた優先順位や 改善を施して、ユーザー視点を徹底します。 6w2h基づいた設計:Whom
  41. 41. • ユーザー視点の精度が向上 • 意思決定が早く的確に • イメージが共有しやすくなる • 企画の質が向上 6w2h基づいた設計:Whom
  42. 42. 6w2h基づいた設計:Whom ペルソナマーケティングの成功事例 女性に愛され、売上高42億円! Soup Stock Tokyo 問い合わせ数30~40%アップ TBC 3カ月で6,000万本! クールドラフト (アサヒビール) 売れすぎて生産が追いつかない! ジャガビー(カルビー) 参考:ペルソナマーケティングが5分で理解できる!【日本企業の厳選事例6選】 http://liskul.com/wm_personam6-5104
  43. 43. 6w2h基づいた設計:Whom ペルソナマーケティングの成功事例 参考:スープストックの成功秘訣はこれ!共感をつくるお客様中心のペルソナマーケティング http://ikigoto.com/digitalmarketing/blog/post-6/
  44. 44. 6w2h基づいた設計:Whom ペルソナマーケティングの成功事例 • TBC 都内在住の自営業者(44歳)、年収900万円、 家族は1歳下の妻と長男16歳、長女13歳の4人家族・・・ • クールドラフト(アサヒビール) 三軒茶屋のワンルールマンションに住んでいる 都内のA学院大学に通う20歳の男性 • ジャガビー(カルビー) 文京区在住、ヨガと水泳に凝っている27歳の独身女性 参考:ペルソナマーケティングが5分で理解できる!【日本企業の厳選事例6選】 http://liskul.com/wm_personam6-5104
  45. 45. ペルソナ設計 WORKSHOP 6w2h基づいた設計:Whom
  46. 46. 6w2h基づいた設計 How much いくらで?
  47. 47. いくらで提供するのか? 6w2h基づいた設計:How much
  48. 48. どれほど投資するのか? ユーザーにとっての価値を知る。 6w2h基づいた設計:How much
  49. 49. Why なぜ? 6w2h基づいた設計
  50. 50. なぜこの商品やサービスを欲しがるのか? 6w2h基づいた設計:Why
  51. 51. Webサイトが果たすべき役割と ユーザーの行動動機を共有する。 6w2h基づいた設計:Why
  52. 52. 6w2h基づいた設計 ブレないユーザー視点 Why How much Whom
  53. 53. 6w2h基づいた設計 How どのように?
  54. 54. どうやって提供するか? 6w2h基づいた設計:How
  55. 55. ビジネスモデルと 企画の狙いを理解する。 6w2h基づいた設計:How
  56. 56. 6w2h基づいた設計 Where どこで?
  57. 57. この商品・サービスをどこで展開するか? 6w2h基づいた設計:Where
  58. 58. 市場や地域性を共有。 6w2h基づいた設計:Where
  59. 59. 6w2h基づいた設計 When いつ?
  60. 60. いつ提供するか? いつまで提供するか? 6w2h基づいた設計:When
  61. 61. なぜこのタイミングなのか? 繁忙期?閑散期? リリース後のスケジュールは? 6w2h基づいた設計:When
  62. 62. 6w2h基づいた設計: ビジネスモデルをブラさない。 WhereWhen How
  63. 63. Who 誰が? 6w2h基づいた設計
  64. 64. 商品・サービスの提供者は誰か? そして、その人にはどんな強みがあるか? 6w2h基づいた設計:Who
  65. 65. クライアントを知り、差別化。 6w2h基づいた設計:Who
  66. 66. トーン&マナーを共有
  67. 67. 「誰に何をどのように伝えるか?」 情報共有 6W2H トーン & マナー
  68. 68. ポジショニングマップの活用 もともとポジショニングマップは自社と競合する商品を差 別化し優位な地位を気づくためにそれぞれの位置づけを明 確にする図。 情報共有
  69. 69. トーン&マナーを共有 WORKSHOP 情報共有
  70. 70. 仕様設計
  71. 71. 仕様設計 仕様設計のポイントは、 “無意識”で伝わること
  72. 72. 仕様設計 1.わかりやすい分類 2.優先順位 3.導線
  73. 73. 仕様設計:グルーピング わかりやすい分類とは、 慣習と意味あるグルーピング!
  74. 74. 仕様設計:グルーピング • 企業情報系 「企業理念」や「会社概要」など • 製品情報系 「商品ページ」や「製品紹介」など • サポート系 「ご利用ガイド」や「よくある質問」など • 告知系 「ニュース&トピックス」や 「キャンペーン情報」など • 後押し系 「お客様の声」や「レビュー」など 競合サイトを調査し、ユーザー視点で大きく分類。一定の ルールに沿った括りを設けることでわかりやすくなります。
  75. 75. 仕様設計:優先順位 配置による誘導 視線の流れはパターン化さされている。 Fの法則Zの法則グーテンベルグ ダイアグラム
  76. 76. 仕様設計:優先順位 配置による誘導 上下左右のレイアウトによる違い。 ① ② ③ ④ 上下 左右> ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨
  77. 77. 仕様設計:優先順位 コントラスト 重要なものほど目立たせる。 カラーによるコントラスト サイズによるコントラスト 0からのWebディレクション講座:設計編 ~STOP!ブレブレディレクション!~ 日本ディレクション協会主催 0からのWebディレクション講座:設計編 ~STOP!ブレブレディレクション!~ 日本ディレクション協会主催 0からのWebディレクション講座:設計編 ~STOP!ブレブレディレクション!~ 日本ディレクション協会主催
  78. 78. 仕様設計:導線 導線設計 誘導につながるリンクは コンテンツの底。 行き止まりを作らない。 ヘッダー グロナビ サイドナビ フッター ここが大事
  79. 79. 仕様設計 クライアント環境や制作に関する ガイドラインをまとめておく • OS環境 ・・・ Windows / mac • 対応ブラウザ ・・・ IE / Safari / Chrome / Firefox / Opera の推奨バージョン • スクリーンサイズ ・・・ デスクトップ / スマートフォン におけるサイズを数値で • 文字コード ・・・ UTF-8 / S-JIS / EUC-JP のいずれか • マークアップ ・・・HTML5 + CSS3 • CMS ・・・ WP / MT / baserCMS など • 解析ツール ・・・ GoogleAnalytics 毎回0から定義は不要。 確認が必要なものはフォーマット化しておく。
  80. 80. まとめ
  81. 81. まとめ まとめ  Webディレクターは忙しい  フレームワークをもつ  ブレるディレクターは誰も必要していない  なりきるプロであれ!  広い知識とコミュニケーションスキル  「ありがとう」「ごめんなさい」
  82. 82. まとめ おわりに ありがとうございました。 「制作・開発編」「運用編」も ぜひご参加ください!

×