1. GARAGE Webディレクターセミナー
WEB DIRECTION
WORKSHOP
キュープラス株式会社 中村健太

2. まあ初開催ということで
まず、
WEB DIRECTION
WORKSHOP
て何よ？

3. 基本的な目的
企業の抱える悩み Directors Mtgのやりたいこと
使えるディレクターが欲しい。 ディレクターの地位向上
でも使えるディレクター自体が少ない。
というよりは認知。
ディレクターの教育のノウハウが無い。 使えるディレクターを育成したい。
教育しようにも時間とコストが高すぎる
「ディレクターの不在というリスク」
の存在を広めたい
ディレクターの重要性そのものを知らない。 もっとディレクションのノウハウを共
ディレクターと営業をはき違えている。 有化していきたい。
そのため採用の基準がおかしい。 ディレクターにとってのマニュアルを
作りたい。
キュープラス株式会社 中村健太

4. 実際の問題点
目的達成の前に立ちはだかる問題点
ディレクターの職域が曖昧 未経験者にとって
すぎて理解されづらい
どこまで学べばいいのか分からない。という不安から、選ぶには異常に
ハードルが高い職種に見える。
・ヒアリング
⇒下地となるベース人数の不足
・折衝
・素材手配やスケジューリング
・リソース管理
・UI設計や原稿の作成
・デザイン管理 別業種から見ると
・アクセス解析
などなどなどなど・・・ やること多い割に「報われない」職種に見えてしまい、
メリットが少なそうに映る。
どこまでがディレクターの職域 ⇒ディレクターに対する地位の下落に遠からず影響
と呼べるのか、企業やプロジェ
クトによって大きく異なる
企業からしてみると
「何が出来る人を採用すればいいのか？」があまりにも不明確で「良い
ディレクターが欲しい」しか言えなくなる。
だから・・・ ⇒結局のところディレクター育成の弊害になってる。
キュープラス株式会社 中村健太

5. ではDirectors Mtgは何をどうするべきなのか？
「ディレクターって何やる人なの？」
を明確に示し
伝え、育て、それを広める
多分その先に、企業に取っての目的の達成とDirectors
Mtgとしてのやりたいことの達成があると思う。
キュープラス株式会社 中村健太

6. 案件シミュレーション概要
ディレクターとはな 初回提案までの改善 ディレクターの作る
チームの管理
んだろう？ 点とUI設計の基本 モノと頼むモノ アクセス解析
▼
改善提案
モックアップ作成
ヒアリング コントロール 確認と修正
▼ 各種マッピング ▼ 変更対応
要件まとめ ▼ リソース管理 ▼
▼ ワイヤーフレーム ▼ 最終調整
コンセプト 作成 デザイン管理 ▼
提案資料作成 ▼ ▼ リリース
▼ 原稿/素材準備 組み込み仕様指示 ▼
初期提案と折衝 ▼ 報告 最終講義
最も改善するべきは
動作テスト
なにか
キュープラス株式会社 中村健太

7. 1回目の開催
トーク（担当：中村）・・・約40分
・ディレクションて何のため？
・ヒアリングからコンセプトシートまでの作り方
ワーク（参加者）・・・約2時間
・ヒアリング（囲み取材）
・コンセプトシート作成
・初期提案資料作成とプレゼン
・採用する資料を選抜

8. 2回目の開催
トーク（担当：中村）・・・約40分
・UI設計の基本的な方法と考え方
・コンテンツマップとディレクトリマップ
・ワイヤーフレームの作り方について（中村流）
ワーク（参加者）・・・約2時間
・1回目に採用されたコンセプトに即して
コンセプトマップ、ディレクトリマップ作成
・原稿/素材についての準備方法などを決める
・実際にワイヤー「案」の作成
・作成したワイヤー案についてのプレゼンを実施
その後はプロの制作チームで実際の制作に入る。

9. おまたせしました
というわけで
はじまります。

10. トークセッション01
ディレクションて
何のため？

11. トークセッション01
どこからどこまでがWebディレクターの仕事なの？
プログラムとビジュアルデ
ザイン以外の全部
By だから、Webディレクターはやめられない
できるWebディレクターの成功戦略
島元 大輔さん

12. トークセッション01
もうちょい具体的にお願いします。
01 02 03
依頼者がWebで何をし で実際それを形にする 具体的な形にするため
たいか？を聞いて、 ならどうするか？ に必要なものを揃える
「じゃあどうするべき
か？」をまとめる を決める
04 05
それを 完成したものを管理し、
「作ってもらう」 育てていくための方針
を決める

13. トークセッション01
つまり・・・
Webにおけるサービスなりビ
ジネスをユーザーに届ける
そのためのあらゆる部分の根幹にいる人
それがWebディレクター

14. トークセッション01
ごめ。もちっとわかりやすく。
中村は「神輿の上の人」だと思ってます。

15. 2DAYSやることおさらい
今日やること
・ディレクションってなにって話を聞いて
・コンセプトシートの作り方を聞いて
・ヒアリングを実際にやってみて
・コンセプトシートを作って、でプレゼンしてみる。
次回やること
・UI設計の考え方を聞いて
・各種マッピングの方法を聞いて
・でワイヤーの作り方を知る
・実際にディレクトリマップ（案）とコンテンツマップ（案）
およびワイヤー（案）を作る
・作ったものでプレゼンする
※多分全員は無理だから独断と偏見でエコヒイ…ｹﾞﾌｹﾞﾌﾝ…選抜します。

16. トークセッション02
コンセプトシート
て何？

17. トークセッション02
まずコンセプトて何？
01 依頼者がWebで何をしたいか？を聞いて、
「じゃあどうするべきか？」をまとめる
これを効率良く共有できるよう、
考えだされたもの。

18. トークセッション02
たとえば？
ディズニー「夢と魔法の国」
ナナピ「7分でできるライフレシピ」
⇒「みんなで作るくらしのレシピ」

19. トークセッション02
ごめ。もちっとわかりやすく。
コンセプトは
神輿が目指すべき「誰にでも分かる場所」

20. トークセッション02
ちなみに中村はこんな感じで書きます。
要素A 要素B
例：クライアント側でやりたいこと 例：現状やれない理由
実現したいこと 実現に立ちはだかる問題
現在抱える問題点など 他社やマーケットの実情など
つまり〇〇すればいいんじゃね？
てことは「〇〇」ってことだよね。
この部分がサイトコンセプトになる。

21. トークセッション02
コンセプトシート例：SUPER GT 2012 サイト構築提案より抜粋
イベントの目的 サイトとしての目的
・より多くのチケットを販売し、来場者数を増やしたい。 ・既に国内最高の観客動員数を誇るレースシリーズだけど、もてぎ
での最終戦こそが最高に面白い！と認知を広める。
・単品より複数人（ファミリー）で来場して欲しい。
・チームやドライバーの情報が見れる（もてぎ戦を見るかどうか
・予選から決勝まで、できれば泊まり込みで来て欲しい。 を検討しているユーザーに他サイトへの移動を勧めるのはナンセ
ンスなので）
必要なのは・・・ ・基本的なルール、楽しみ方をしっかり伝える。（辺にPOP路線を
チケットが買いやすいこと
狙う必要ななし。イベントのあり方がハードなのだから）
イベントやおトクなプランが分かりやすいこと
予選日の楽しさが伝わること
・チケットの販売数増加（前年比150％取りたい）
他会場がやってないことをやる。だからユーザーが知る。見る。共有する。そして、買う。
つまり、 GTの本体サイトにあるコンテンツだからもてぎには要らない。ではなく、一定期間だけでも
どうすればいい？
「本体サイトよりももてぎのサイトを見る」という状況を作れば目的は達成しやすくなる。
そのため、コンセプトは 「当日まで観る価値のあるサイト」と提唱します。

22. トークセッション02
じゃあまずは要素AとＢをうまいことまとめるために、
クライアントに色々聞いてみよう。
実践！囲みヒアリングスタート