1. 2014.08
www.infobahn.co.jp
ディレクターが
知っておくべき
のルール
企画・コンテンツ・デザイン は 一心同体！
デザインディレクション
1
企画・制作：上原潤子

2. 2
デザインディレクションが
できなきゃいけない理由 6
デザインディレクションの肝 !?
「記憶の編集力」の磨き方 2STEP
それじゃー 伝わらない
デザインディレクションの
「見直しポイント」４

3. 6
な
ん
て
言
っ
て
る
場
合
じ
ゃ
な
い
デ
ザ
イ
ン
デ
ィ
レ
ク
シ
ョ
ン
が
で
き
な
き
ゃ
い
け
な
い
理
由
3

4. 人は 9割
WEBも
理由
その１
2
4

5. 理由
その2
でもWEBのクオリティは
デザイナーをはじめ制作パートナーに依存せず
ディレクターの責任において担保しなければ！
毎度プレッシャーですよね、修行ですよね（切） 5

6. WEBの 2大要素
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
コピー。コピー。コピー。
デザ
イン
デザ
イン
デザ
イン
デザ
イン
〇
自分でも
なんとか
できる ×
自分では
なんとも
し難い
理由
その3
6

7. 納品物であり
自分の
ポートフォリオ
でもあり
自分の
ポートフォリオ
でもあり
ディレクションしたWEBは
理由
その4
7

8. 理由
その5
作 る = 記憶の編集
作れる
モノ
コト
好きな
モノ
コト
自分のスタイルが
できてくる♪
＝
好きな仕事が
できる・くる
ようになる♪♪
仕事が楽しく
なる♪♪♪
なぜなら
8

9. 理由
その5
作 る = 記憶の編集
作れる
モノ
コト
好きな
モノ
コト
自分のスタイルが
できてくる♪
＝
好きな仕事が
できる・くる
ようになる♪♪
仕事が楽しく
なる♪♪♪
だから
つまり
9

10. 理由
その5
作 る = 記憶の編集
作れる
モノ
コト
好きな
モノ
コト
自分のスタイルが
できてくる♪
＝
好きな仕事が
できる・くる
ようになる♪♪
仕事が楽しく
なる♪♪♪
だから
つまり
言わずもがな
WEBのあるべき方向性や
クライアントの好みが
自分のそれと
あわない場合は
プロとして律すること
いえむしろ
新境地開拓！
と前向きに
チャレンジ！
10

11. 企画でもあり
構成でもあり
編集でもある
デザインディレクション
とは、単なる飾りつけではなく
つまり
誰が
デザイン
するか
が、実は同じくらい大切！
＝
誰が
ﾃﾞｨﾚｸｼｮﾝ
するか
どう どう
企画は
具現化
できなければ
ただの
思いつき
理由
その6
企画段階から
デザイナーはじめ
制作パートナーと
ディスカッション
することも大切
11

12. デ
ザ
イ
ン
デ
ィ
レ
ク
シ
ョ
ン
の
肝
「
記
憶
の
編
集
力
」
の
磨
き
方
2 !?
12

13. STEP
1
記憶の
蓄積
好きな
モノやコト
を、たくさん見つける
13

14. STEP
2
記憶の
編集
＝ 自分の アイデア や ノウハウ になる
好き！ いい！ と思ったモノやコトが
なぜいいのか？ 分析 する
どう提案されたのか？ 想像する
14

15. 通勤中、電車やバスで気になった中吊り広告に
思いをめぐらせたり
突っ込みをいれたりするのも
オススメ
これ面白いー
これビミョー
かなりビミョー
honyarara♪ BUS honyarara♪ TRAIN
でも一見無関係な
組み合わせなのに
なんで？なんで？
これが面白いんです
って提案できる
面白さの
根拠ってなに？
おまけ
それでも
クライアントが
OKした理由って？
15

16. じ
ゃ
ー
伝
わ
ら
な
い
4
で
き
て
る
つ
も
り
…
わ
か
っ
て
る
つ
も
り
…
デ
ザ
イ
ン
デ
ィ
レ
ク
シ
ョ
ン
16

17. デザイナーさん選び
POINT
1
17

18. やりやすさ
デザイン
の
方向性
予 算
デザイナーさん選びの “基準”
18

19. デザインスキルが高い
デザインスキルが低い
コンテンツへの
コミットが深い
コンテンツへの
コミットが浅い
designer
A
designer
B
designer
D
“やりやすさ” マトリックス
提案型
指示まち型
designer
C
19

20. designer
A
ある程度の
デザイン知識がないと
ディレクションが難しい
ことも?!
具体的なイメージが
できすぎていると
モチベーションを
さげてしまう
ことも?!
具体的なイメージが
ありつつ
もっと何か違う方向が
あるんじゃないか？
と探りたい場合
ほぼ構成通りが
いい場合
具体的なイメージが
ある場合
具体的なイメージが
ある場合
意外と
上級者向け?!
育て＆育てられる
いい関係から
いいパートナーに
designer
B
designer
C
designer
D
デザインスキルが高い人となら勉強できる
低い人となら自分が知恵を絞れるようになる、また切磋琢磨しあうことでいいパートナーに
だから、ABCDすべてのパートナーとのおつきあいを大切に！
デザインスキルが低い人
ではなく、あくまでも
自分にないスキルをもっている人
ということを忘れずに
コミュニケーション
20

21. 諸々の が大切
ディレクターに
できないことが
できる人
という大前提を
忘れずに
相性
や
バランス
改めて、デザインスキルが高ければ高いほどいい！
と言うワケではありません…
このあたりは経験（数・人数）をつんで
肌感覚でつちかっていきましょう。
21

22. デザインの依頼の仕方
POINT
2
22

23. 参考サイト
通りだなぁ
構成通りだなぁ
なんか違う
わかってないなぁ
デザインがあがってきた際
って、思うこと少なくないですよね？
でもちょっとまってください
それ ディレクター側の原因?! かもしれません
23

24. いえいえ依頼通り、ですよね？
渡したものの
どこをどう拾ってほしいか
どこをどう広げて欲しいか
を、伝えていますか？
企画主旨は伝えていますか？
構成を正しく＆各要素の意図を補足
していますか？
参考サイト
通りだなぁ
構成通りだなぁ
なんか違う
わかってないなぁ
デザイナーがイメージをふくらませるための
“元“ や “バッファー“ を
渡し＆伝えていますか？
24

25. ①
企画主旨
④
構 成
②
ﾃﾞｻﾞｲﾝｲﾒｰｼﾞ
③
競合との
ｲﾒｰｼﾞﾏﾄﾘｯｸｽ
※その他、ガイドラインやレギュレーションなど
デザイン依頼 “基本セット”
25

26. ① 企画主旨
企 画
↓
構 成
↓
デザイン
構成だけ渡すのは伝言ゲーム と同じ
企画書も共有 し、企画主旨をきちんと共有しましょう！
企 画
デザイン構 成
26

27. ② デザインイメージ
参考サイト
A
ズバリな参考サイトを提示
手っ取り早い＆確実。
ただし、
その通りに直球であがってきたり
その通りだと思われたくないと変化球であがってくることも。
その
１
参考サイト
A
イメージが近い参考サイトや
デザインTips を提示
少々手間ですが
「参考サイト通りだな…」
「無理して変化球投げてくれなくてもよかったのに…」
という双方の無駄なストレスは軽減できるやも。
その
2
配色は
こんな
感じで
こんな風に
タイトル
＋ｱｲｷｬｯﾁ
を基本ルールに
して
ｱｲｷｬｯﾁは
こんな
手書き風で
27

28. キレイ系
カジュアル系
一般的 個性的
年齢高め
年齢低め
③ 競合とのマトリックス
競合 A社
競合 B社
競合 C社 クライアント
競合サイトとの差別化 を意識してもらう！
28

29. 〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇
〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇 〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇
●●●
なにが
なんだか…
④ 構成 1/２
29

30. 〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇 〇〇〇〇〇〇
●●●
●new
●new
●new
④ 構成 2/２
正しく
わかりやすく
伝える
3コーナーの
最新コンテンツの
バナーを
自動切換表示
テイストが混在するので
フレームはデザインせず
シンプルに
メインコンテンツとなる
ファッションスナップへの
誘導口
フレームを
デザインするなどして
強調したい
左）
サブコンテンツ
インタビューコーナーへの
誘導口
イメージはﾌﾟﾛﾌｨｰﾙ写真
になる予定
右）
サブコンテンツ
スタッフブログへの
誘導口
イメージはブログ依存
↑↑↑↑↑
構成理解のためのやりとりや
構成の説明相違による
デザイナーさんの
無駄な稼動やストレスは
極力おさえること
30

31. デザインフィードバック
「?」な場合
「!」な場合
POINT
3
31

32. まずは、基本から見直してみましょう！
「何かがおかしい…、でもなんだろう ? 」な場合
●見せ方の 強弱・優先順位が、構成とあっているか
（配置、フォントの種類・サイズ、配色等）
●配色ルール、デザインルール、アイキャッチの配置ルールが
構成とあっているか
→あっていない場合は、
ディレクターから正しく伝えられているか？ まずは自分を疑う
●余白のとりかた、字下げルール、配置ルールが
統一されているか
→デザイン処理の問題なので、具体的に修正依頼する
32

33. 単色使いのデザインにメリハリが欲しいなぁ……と思ったら
統一感があってキレイ！
なので、同じトーンで色数を増やしてカテゴリ別に使い分けたら
構成もわかりやすくなるんじゃないかと、いかがでしょう？
デザインルールがめちゃくちゃだなぁ……と思ったら
このアイキャッチとか配色がイイと思う ので
タイトルまわりにはアイキャッチ、タイトルとリードをこの配色
と デザインルールを作ったら
構成がグッとわかりやすくなるかと、いかがでしょう？
「ココが ! 」といいたい場合
ポジティブに置き換えて交渉！
直球ではなく、変化球で交渉！
33

34. 自分を信じる！
POINT
4
34

35. 自分が新人であろうと
デザイナーさんがベテランであろうと
あがってきたデザインに対して
「あれれ？」と思ったら
気後れせず
自分を信じてディレクション！
ディレクターとして
理想のゴールは描けているし
クライアントとも握れているし
最低限、1ユーザーとしての
視点・判断基準は
もっているはず。
ただし＆もちろん
そこにたどりつくまでの
自分のディレクションに否がないか
謙虚に精査した上で。
デザインがあがってきたら
必ず第3者の意見を聞きましょう。
ターゲットに近い人、そうでない人にも。
ただし、話半分で聞くこと。
みんながOKと言わなければ
むしろOK。
自分の中でピンッとくるものがあるなら
それを信じて！
でなければ
新しいモノ・結果、自分らしさは
つくりだせないから。
そして何より
クライアントとユーザーを
最も理解しているのは
自分です。
総
監
督
で
あ
り
総
責
任
者
で
す
。
DIRECTOR
35

36. 受
け
て
の
心
に
届
く
か
ど
う
か
大
き
く
左
右
す
る
の
は
制
作
者
の
心
づ
か
い
に
よ
る
。
企画・制作：上原潤子（コンテンツディレクター） 36

37. インフォバーンで
働いてみたい！
という方はこちらへ。
https://js01.jposting.net/infobahn/u/regular/job.phtml
インフォバーンに
問い合わせてみたい！
という方はこちらへ。
http://www.infobahn.co.jp/ask
採用情報
お問い合わせ
37