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

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

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

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

自己紹介

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

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

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

経歴

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

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

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

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

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

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

“Webファンタジスタ“を目指し、活動中。

Webディレクターの役割


各メンバーが、

共通のゴールに向かって

取り組める下地をつくる


プロジェクトメンバーの

良き理解者


ノリが生まれる


Webデザイナーはサイトをつくる。

Webディレクターは

プロジェクトをつくる。


良いプロジェクトは、ブレない


そのためにはブレない設計と

コミュニケーションを円滑にする

情報共有がとても大事です。

Webにおける設計とは？


情報設計と仕様設計


情報設計は…誰に何を伝え、

どこに向かわせるか

を定義した戦略設計。


仕様設計は…

制作における具体的戦術設計

Webにおいて

ユーザーの行動は

いたってシンプル


訪問興味関心

行動


具体的なアクションとしては…

検索スクロールクリック


設計はこの3ステップに集中


いかにしてWebサイトへ

訪問させるか

どうやって興味を持ってもらい

行動させるか


出会い食事・ドライブ告白


自社

ユーザー（顧客）

他社（競合）

恋敵

片想い片想い


6w2hに基づいた設計


Webサイトは

情報伝達手段


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（いくら）


Why

Where

How

much

When

Whom

How

What Who


なぜ？

いつ？

いくらで？

どこで？

誰に？

どのように？

何を？誰が？

6w2h基づいた設計

情報伝達の基本に沿って

6w2hをおさえると、

伝わりやすくなる


Whatなにを？

6w2h基づいた設計：What

この商品・サービスはどんなものか？

Webサイトにおけるゴールは？


ブランディング

企業そのものや製品・サービスの認知をしてもらい知名度を上げる

販促

実店舗への誘導

見込み客の囲い込み

自社商材の資料請求や問い合わせ獲得

顧客フォロー

製品・商品に関するサポート

顧客獲得

顧客や会員者数の増加

Webサイトにおける主題を理解する。



Why

Where

How

much

When

Whom

How

What Who


Why

Where

How

much

When

Whom

How

What Who

ユーザーに関する情報


Why

Where

How

much

When

Whom

How

What Who

ビジネスモデル関する情報


Why

Where

How

much

When

Whom

How

What Who

自社に関する情報


Whom誰に？

ターゲットは誰か？

6w2h基づいた設計：Whom

ターゲットとするユーザーを

具体的にイメージし、

判断基準を明確にする。


ペルソナ


ペルソナとは？

ペルソナとは「企業が提供する製品・サービスにとって最も

重要で象徴的な顧客モデル」と定義されます。

（※出典：ペルソナ＆カスタマ・エクスペリエンス学会）

一般的に使われることの多いターゲットよりも具体的で

その人の価値観やライフスタイルなど、実在する一人の

人物を作り、そのペルソナの思考に合わせた優先順位や

改善を施して、ユーザー視点を徹底します。


• ユーザー視点の精度が向上

• 意思決定が早く的確に

• イメージが共有しやすくなる

• 企画の質が向上



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

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

Soup Stock Tokyo

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

TBC

3カ月で6,000万本！

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

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

ジャガビー（カルビー）

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



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



• TBC

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

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

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

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

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

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

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

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

ペルソナ設計WORKSHOP



How muchいくらで？

いくらで提供するのか？

6w2h基づいた設計：How much

どれほど投資するのか？

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

6w2h基づいた設計：How much

Whyなぜ？


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

6w2h基づいた設計：Why

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

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

6w2h基づいた設計：Why


ブレないユーザー視点

WhyHow

much

Whom


Howどのように？

どうやって提供するか？

6w2h基づいた設計：How

ビジネスモデルと

企画の狙いを理解する。

6w2h基づいた設計：How


Whereどこで？

この商品・サービスをどこで展開するか？

6w2h基づいた設計：Where

市場や地域性を共有。

6w2h基づいた設計：Where


Whenいつ？

いつ提供するか？

いつまで提供するか？

6w2h基づいた設計：When

なぜこのタイミングなのか？

繁忙期？閑散期？

リリース後のスケジュールは？

6w2h基づいた設計：When

6w2h基づいた設計：

ビジネスモデルをブラさない。

WhereWhen

How

Who誰が？


商品・サービスの提供者は誰か？

そして、その人にはどんな強みがあるか？

6w2h基づいた設計：Who

クライアントを知り、差別化。

6w2h基づいた設計：Who

トーン＆マナーを共有

「誰に何をどのように伝えるか？」

情報共有

6W2Hトーン

＆

マナー

ポジショニングマップの活用

もともとポジショニングマップは自社と競合する商品を差

別化し優位な地位を気づくためにそれぞれの位置づけを明

確にする図。

情報共有

トーン＆マナーを共有WORKSHOP

情報共有

仕様設計

仕様設計

仕様設計のポイントは、

“無意識”で伝わること

仕様設計

1.わかりやすい分類

2.優先順位

3.導線

仕様設計：グルーピング

わかりやすい分類とは、

慣習と意味あるグルーピング！

仕様設計：グルーピング

• 企業情報系

「企業理念」や「会社概要」など

• 製品情報系

「商品ページ」や「製品紹介」など

• サポート系

「ご利用ガイド」や「よくある質問」など

• 告知系

「ニュース＆トピックス」や

「キャンペーン情報」など

• 後押し系

「お客様の声」や「レビュー」など

競合サイトを調査し、ユーザー視点で大きく分類。一定の

ルールに沿った括りを設けることでわかりやすくなります。

仕様設計：優先順位

配置による誘導

視線の流れはパターン化さされている。

Fの法則Zの法則グーテンベルグダイアグラム


配置による誘導

上下左右のレイアウトによる違い。

①

②

③

④

上下左右＞

① ② ③

④ ⑤ ⑥

⑦ ⑧ ⑨


コントラスト

重要なものほど目立たせる。

カラーによるコントラストサイズによるコントラスト

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ディレクターは忙しい

フレームワークをもつ

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

なりきるプロであれ！

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

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

まとめ

おわりに

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

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

ぜひご参加ください！

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

Presentations & Public Speaking

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