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

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

～ S T O P ! ブ レ ブ レ デ ィ レ ク シ ョ ン ！ ～

日 本 デ ィ レ ク シ ョ ン 協 会 主 催

自己紹介

池宮愛児（イケミヤ アイジ）

株式会社ディーゼロ Webディレクター。

1976年10月生まれ。福岡市出身。

経歴

2002年より福岡のWeb制作会社でデザイン制作に携わり、

2008年よりWebディレクターへ転向。地元大手企業も数多く

手掛けるなど、サイトの立ち上げから運営業務までの

膨大な業務をこなしつつ、制作現場のリーダー・監督役としても

活躍。2015年株式会社ディーゼロへ移籍。

4歳になる愛娘を溺愛するお笑いマニア。

“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 （ な ぜ ）

W h a t （ 何 を ）

H o w（どのよ うに）

How much（いくら）

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

6w2h基づいた設計：Whom

ペルソナマーケティングの成功事例

女性に愛され、売上高42億円！

Soup Stock Tokyo

問い合わせ数30～40％アップ

TBC

3カ月で6,000万本！

クールドラフト（アサヒビール）

売れすぎて生産が追いつかない！

ジャガビー（カルビー）

参考：ペルソナマーケティングが5分で理解できる！【日本企業の厳選事例6選】http://liskul.com/wm_personam6-5104

6w2h基づいた設計：Whom

ペルソナマーケティングの成功事例

参考：スープストックの成功秘訣はこれ！共感をつくるお客様中心のペルソナマーケティングhttp://ikigoto.com/digitalmarketing/blog/post-6/

6w2h基づいた設計：Whom

ペルソナマーケティングの成功事例

• TBC

都内在住の自営業者（44歳）、年収900万円、

家族は1歳下の妻と長男16歳、長女13歳の4人家族・・・

• クールドラフト（アサヒビール）

三軒茶屋のワンルールマンションに住んでいる

都内のA学院大学に通う20歳の男性

• ジャガビー（カルビー）

文京区在住、ヨガと水泳に凝っている27歳の独身女性

参考：ペルソナマーケティングが5分で理解できる！【日本企業の厳選事例6選】http://liskul.com/wm_personam6-5104

ペルソナ設計WORKSHOP

6w2h基づいた設計：Whom

6w2h基づいた設計

How muchいくらで？

いくらで提供するのか？

6w2h基づいた設計：How much

どれほど投資するのか？

ユーザーにとっての価値を知る。

6w2h基づいた設計：How much

Whyなぜ？

6w2h基づいた設計

なぜこの商品やサービスを欲しがるのか？

6w2h基づいた設計：Why

Webサイトが果たすべき役割と

ユーザーの行動動機を共有する。

6w2h基づいた設計：Why

6w2h基づいた設計

ブレないユーザー視点

WhyHow

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ディレクション講座：設計編～STOP!ブレブレディレクション！～

日本ディレクション協会主催

0からのWebディレクション講座：設計編～STOP!ブレブレディレクション！～

日本ディレクション協会主催

仕様設計：導線

導線設計

誘導につながるリンクは

コンテンツの底。

行き止まりを作らない。

ヘッダー グロナビ

サイドナビ

フッター

ここが大事

仕様設計

クライアント環境や制作に関するガイドラインをまとめておく

• OS環境 ・・・Windows / mac

• 対応ブラウザ ・・・ IE / Safari / Chrome / Firefox / Opera の推奨バージョン

• スクリーンサイズ ・・・ デスクトップ / スマートフォン におけるサイズを数値で

• 文字コード ・・・ UTF-8 / S-JIS / EUC-JP のいずれか

• マークアップ ・・・HTML5 + CSS3

• CMS ・・・WP / MT / baserCMS など

• 解析ツール ・・・ GoogleAnalytics

毎回0から定義は不要。

確認が必要なものはフォーマット化しておく。

まとめ

まとめ

まとめ

Webディレクターは忙しい

フレームワークをもつ

ブレるディレクターは誰も必要していない

なりきるプロであれ！

広い知識とコミュニケーションスキル

「ありがとう」「ごめんなさい」

まとめ

おわりに

ありがとうございました。

「制作・開発編」「運用編」も

ぜひご参加ください！