Slide 1
Slide 1 text
日 本 デ ザイン セン ター 関 口 裕
なんでディレクターやってるの？ 〜 思い描いていた自分を思い出すために。 vol.3 ｜ 2019.3.8
な ん で ディレ クタ ー
やってる の？
1
Slide 2
Slide 2 text
スライドは配 布します。
後でゆっくり、ご 覧ください。
2
Slide 3
Slide 3 text
自己 紹 介
3
Slide 4
Slide 4 text
関口 裕
（ せきぐち・ゆたか ）
D E S I G N E R
4
Slide 5
Slide 5 text
D E S I G N E R
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
8
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
http://www.hanare no he ya. c o m
10
Slide 11
Slide 11 text
日本デザインセンター オンスクリーン制作室 クリエイティブディレクター・デザイナー ｜ 大学でプロダクトデザインを修
めた後、エディトリアルデザイン・情報デザインを扱うデザイン会社に就職。雑誌を中心に書籍や広報誌など紙媒体のデザイ
ンに携わった後、大規模
・
中規模のコーポレートサイトやブランドサイトの制作を軸としたデジタルメディアのデザインに従事。
設計の上流工程からグラフィックのフィニッシュワークまで、幅広く関わりデザインを手掛ける。近年はクリエイティブディレ
クターとしてプロジェクトそのもののデザインを行う。メディアや規模感・価値観の違う案件を同時に進めるのが好き。
雑 誌 や 広 報 誌 、
書 籍のデ ザイン 5 年
ウェブサイトを中心としたデザイン 6 年
ガチのディレクション的な何か 1.5 年
11
Slide 12
Slide 12 text
35
years old.
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
35
years old.
14
Slide 15
Slide 15 text
17
years.
15
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
design.
※
当
社
比
17
Slide 18
Slide 18 text
?
direction?
※
当
社
比
18
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
い
ま
、
一
言
で
言
え
な
い
。
20
Slide 21
Slide 21 text
（ウェブ ）
ディレクター
21
Slide 22
Slide 22 text
（ウェブ ）
ディレクター
22
Slide 23
Slide 23 text
お 前 i s だれ
23
Slide 24
Slide 24 text
事 例 紹 介
飛ば すので
後で 質問
してください！
24
Slide 25
Slide 25 text
A r t D i r ec t or / De s i g ner
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
27
Slide 28
Slide 28 text
28
Slide 29
Slide 29 text
瞬
発
力
。
冷
蔵
庫
の
あ
り
も
の
で
さ
ば
く
デ
ザ
イ
ン
。
チ
ー
ム
の
勢
い
が
コ
ン
テ
ン
ツ
に
表
れ
る
。
リ
ニ
ア
な
（
サ
イ
ク
ル
し
な
い
）
デ
ザ
イ
ン
ス
プ
リ
ン
ト
。
29
Slide 30
Slide 30 text
30
Slide 31
Slide 31 text
31
Slide 32
Slide 32 text
32
Slide 33
Slide 33 text
33
Slide 34
Slide 34 text
34
Slide 35
Slide 35 text
c o ve r. i c o
35
Slide 36
Slide 36 text
36
Slide 37
Slide 37 text
37
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
40
Slide 41
Slide 41 text
41
Slide 42
Slide 42 text
42
Slide 43
Slide 43 text
43
Slide 44
Slide 44 text
テンプレートとしてのエディトリアル 設 計 。コンテンツとスタイルを分 離したデ ザ イン
44
Slide 45
Slide 45 text
45
Slide 46
Slide 46 text
ブランディングデ ザ インをウェブメディアで いかに再 構 築 するか
46
Slide 47
Slide 47 text
運 用改 善 改 修 ／ウェブアクセシビリティ WC AG 2.0 A A 対 応 ／ V I との連 携
47
Slide 48
Slide 48 text
専 用版 A E M 基 盤 開 発 ／グローバ ル・デ ザ インガ バナンス／ドキュメントベースの合 意 形 成
48
Slide 49
Slide 49 text
49
Slide 50
Slide 50 text
50
Slide 51
Slide 51 text
マル チエントランス・ハブとしての特 設 サイト型 詳 細 ページ
51
Slide 52
Slide 52 text
各 書 籍 担当者が
自由に、任 意 で
追 加入力
データベースから
+
広 報 チームから
［ 公 式 ］
52
Slide 53
Slide 53 text
53
Slide 54
Slide 54 text
Des i g n F ou nd a t ion
54
Slide 55
Slide 55 text
55
Slide 56
Slide 56 text
「レイアウト」と聞いて、みなさんはどんなイメージを抱くでしょうか。部屋の模様替え、資料や紙
面のレイアウ
ト、グラフィックの構成、ウェブの画面設計 ……いろいろな観点があると思います。本
書はそんな
「レイアウ
ト」について、基本的なことを丁寧に、繰り返し、さまざまな手法で語ることを
意識しています。タイ
トルは
「レイアウトデザイン見本帳」
。まさにパラパラとめく
り、それぞれのペー
ジに記された
「レイアウトのひとつの方法」を眺めることで、みなさんの中にあるデザインの引き出
しを少しずつ増やしていく
ことができたら、という思いで編集されています。／しかし、本書に掲載
されているひとつひとつの手法は、あくまで一例にすぎません。あるページの手法が、まったく逆に
使われるケースもあるでしょう。デザインに絶対の正解・方程式はないのです。／無数の正解の中
からもっともよいものを
「自分で決める」責任と自由度が、レイアウトを楽しくエキサイティングな
作業にさせるのではないでしょうか。デザイナーが変われば、その正解もまた異なって
く
るでしょう。
そのデザインがなぜよいのか説明する場面も出てく
ると思います。そこには主体性が必要です。デ
ザインには
「個」が必要です。／デザインもデザイナーも、透明にはなれないと私は考えています。
社会を構成するフィルターのひとつとして、情報を咀嚼し、再構成してアウト
プッ
トする。そこにあな
たがいる意味が出てきます。レイアウ
トをすることで、
あなたという存在が社会に影響を及ぼします。
クライアントのことをまじめに考えたり、扱う問題や商品について知った度合いが、また、自分だけ
のデザインの引き出しから選び出されたひとつのアプローチが、レイアウトという行為を通してその
まま社会に影響を与えるのです。／レイアウ
トは、あなたを必要としています。社会があなたを必要
としています。レイアウトを行う人の及ぼすよい影響が、世の中にとって必要なのです。情報も、何
らかの問題も、うまく伝わらなければ存在していないことと同じです。ぜひ、そんなレイアウ
トの担い
手にとって少しでも本書がお力になれたら幸いです。──
──
───
──
──
──
─著者代表 関口 裕
Slide 57
Slide 57 text
C r e a t i v e D i r ec t or
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
だれ？
UX Design
Develop
Develop
Content
Direction
Art Direction
+
Slide 61
Slide 61 text
61
Slide 62
Slide 62 text
・方向性づけ
・口説いて回る
・ずっと喋り続ける
・ずっと見てる
・翻訳とか責任とか
や
っ
た
こ
と
62
Slide 63
Slide 63 text
く
、
く
りえいて
ぃぶ
でぃれく
たぁ、
です、
、
、
かね？
63
Slide 64
Slide 64 text
64
Slide 65
Slide 65 text
65
Slide 66
Slide 66 text
66
Slide 67
Slide 67 text
67
Slide 68
Slide 68 text
68
Slide 69
Slide 69 text
69
Slide 70
Slide 70 text
70
Slide 71
Slide 71 text
71
Slide 72
Slide 72 text
72
Slide 73
Slide 73 text
73
Slide 74
Slide 74 text
h t t p s :// y o u t u . b e / U R f k d C F 63 g A
74
Slide 75
Slide 75 text
75
Slide 76
Slide 76 text
76
Slide 77
Slide 77 text
77
Slide 78
Slide 78 text
78
Slide 79
Slide 79 text
・
・
・で ？
79
Slide 80
Slide 80 text
(C r e a t i v e ) D i r ec t or
80
Slide 81
Slide 81 text
デザイナーとしてキャリアをスタートし、
年齢とともにディレクションを求められ、
葛藤している方に
元気を与えてあげてください！
81
Slide 82
Slide 82 text
なりたい。
↓
82
Slide 83
Slide 83 text
思 い 描 い て い た 自 分 を 思 い 出 す た め に 。
83
Slide 84
Slide 84 text
あの、
84
Slide 85
Slide 85 text
みんな未 来が 見えるの？
予 知スキル 持ちなの？
85
Slide 86
Slide 86 text
流されるな、流れろ
b y 川崎昌平 w / 壮 子
86
Slide 87
Slide 87 text
Di r ec t ion ?
87
Slide 88
Slide 88 text
肩 書 き は さ て お き 、 僕 が 仕 事 に 期 待 す る も の ：
ワイガヤからの、
予測していなかった着地 。
─ 麻薬的 なモチベーション 。
88
Slide 89
Slide 89 text
バンドができなかった奴のバンドリ
©B a nG Dr e a m! P r o je ct ©C r a f t E g g Inc . © b u s h i r o a d A l l R i g h t s Re s e r ve d .
89
バンドができなかった奴のバンドリ
Slide 90
Slide 90 text
同人になれなかった奴の SHIROBAKO
© 「 SHIROB A KO」製 作 委 員 会
90
同人になれなかった奴の SHIROBAKO
Slide 91
Slide 91 text
再 生 産 できなかった奴のレヴュー。
（ お 持ちなさい、あなたの望 んだその星を ）
© P r o je ct Re v ue S t a r l i g h t
91
再 生 産 できなかった奴のレヴュー。
（ お 持ちなさい、あなたの望 んだその星を ）
Slide 92
Slide 92 text
必 要 な も の ：
当事者性（俺が俺でお前 も 俺 だ ）
熱量をどれだけ生み出せ る か
俺氏」 というポジショニ ン グ 。
俺」と「客観」が両立す る ヤ バ さ 。
一 番 に そ れ を 好 き に な る 。
は じ め の 読 者 ・ ユ ー ザ ー ・ 相 談 相 手 。
「
「
92
Slide 93
Slide 93 text
あとはただ、実現させる だ け 。
Ti p s やスキル・
ノウハウは 別のお 話
93
Slide 94
Slide 94 text
E m p a t hy ( not s y mpa t hy )
94
Slide 95
Slide 95 text
ワイガ ヤ ＝ いろんな人とや る 。意 見 を 戦 わ せる、協
95
Slide 96
Slide 96 text
軸が違う人とやる、
ということは妥協ではな い 。
それは自己拡張。
自分を曖昧にし、汚すこ と で
隙間ができる。
それらしく「成長」なん て で き な く て も
自 己 組 成 は 変 え ら れ る 。
96
Slide 97
Slide 97 text
Pa r t ner ( Bu s i ne s s p a r t ne r )
97
Slide 98
Slide 98 text
ひとりではなにもできな い 。
98
Slide 99
Slide 99 text
ひとりではなにもできな い 。 ひ と り で は 、
他人のせいにすることし か で き な い 。
自分の中の “ ふつう ” を 振 り 回 す 」
ことしかできなくなる。
「
99
Slide 100
Slide 100 text
あなたが良いから、
素晴らしいから、
必要だから。
そう思うから。
そう思うから。だから自 分 が い る
3 3 3 3 3 3 3 3
。
居 る ・ 要 る
100
Slide 101
Slide 101 text
生業は自己肯定作業にも な る 。
生きていていいのだ、と い う 実 感 。
─ という 麻薬
101
Slide 102
Slide 102 text
Ac t ion
102
Slide 103
Slide 103 text
ワガママを、思いの丈を 現 実 化 す る に は 。
しくみがいる。
政治がいる。
整理と言い換えがいる。
最もらしさがいる。
手続きがいる。
気遣いがいる。
まったく
クリエイションじゃない。
本 質的じゃない。
繊 細じゃない。
簡 潔じゃない。
静 謐じゃない。
※それは人を使い潰さないとできなくなってしまう。
103
Slide 104
Slide 104 text
まったく
クリエイションじゃない。
本 質的じゃない。
繊 細じゃない。
簡 潔じゃない。
静 謐じゃない。
※それは人を使い潰さないとできなくなってしまう。
104
Slide 105
Slide 105 text
でもそうじゃない泥臭い 方 法 で 、
それを誰かがやらなけれ ば 、
美しいものが、世に出な い 。
105
Slide 106
Slide 106 text
誰もやらない？ 俺がいる 。
106
Slide 107
Slide 107 text
ディレクターがいる。
107
Slide 108
Slide 108 text
私たちがいる。
108
Slide 109
Slide 109 text
世界を動かすには “ セカイ ” が 要 る
109
Slide 110
Slide 110 text
世界を動かすには “ セカイ ” が 要 る
自 己 と 価 値 観 ・ 内 面 世 界
周 囲
110
Slide 111
Slide 111 text
アリかナシ かを決めるの は 私 たち
（ 決 めなきゃいけない）
111
Slide 112
Slide 112 text
-
er
112
Slide 113
Slide 113 text
CxO
113
Slide 114
Slide 114 text
自分が何 者 か な ん て 意 味 が な い 。
他 者 が 決 め る こ と 。
cogito cogito, ergo cogito sum .
114
Slide 115
Slide 115 text
お前の人生の主人公は、 お 前 な の か ？
お前は自分が作ったのか ？
次 ” へ遺せ ること、
そのかけらは掴むことは で き な い の か ？
ほんとうに？
“
115
Slide 116
Slide 116 text
キャラバレしていけ。
ダサくていい。
やれ 。
言え。
相手の前に出ろ。隣りにいけ。
全 部やれ。
人を使え
・利用されろ
（共 犯関係）
。
お客さんでさえ、パートナーであり共 犯者。隣に座る人。
ビジネスなんて手 続きでしかない。大 袈 裟なこと言うな。
116
Slide 117
Slide 117 text
キャラば れ 前
2 0 07
キャラば れ 後
2 011
→
117
Slide 118
Slide 118 text
なんでやってるかなんて わ か る わ け な い 。
デザイナーでもディレク タ ー で も い い 。
自分が見たいものを見た い だ け 。
手段は問わない。
そして
それは「世界」にしかな く て 、
セカイ」を通さないとい け な く て 、
そして「世界」でしか実 現 で き な い 。
「
118
Slide 119
Slide 119 text
遠くの誰かの「大きな正 し さ 」 よ り 、
あなたの「小さな正しさ 」 が 必 要
119
Slide 120
Slide 120 text
金をくれ。権限をくれ。 手 数 を く れ 。
（ 全部いらないから）
120
Slide 121
Slide 121 text
ひとを見ていると、
無限にやりたいことが出 て く る
121
Slide 122
Slide 122 text
デザイナーとしてキャリアをスタートし、
年齢とともにディレクションを求められ、
葛藤している方に
元気を与えてあげてください！
122
Slide 123
Slide 123 text
生きろ。死ぬな。
とにかく死ぬな。
（いや マ ジ で ）
低空飛行を続けよう。
いま僕はここで生きてい ま す 。
123
Slide 124
Slide 124 text
124
Slide 125
Slide 125 text
（ もっともらしくします ）
125
Slide 126
Slide 126 text
【 得 意なことを見える化 】
どんな人 で も、自分のスキルを可 視 化 すると
周囲の人を巻き込める。
【 感 覚の共 有 】
共 通 言 語をつくる。その場に
必 要な価 値 観を、阿 吽にせ ず 言 葉にしよう。
126
Slide 127
Slide 127 text
目の前の課 題を
自分自身のものにする
127
Slide 128
Slide 128 text
He r b e r t A . S i m o n
128
Slide 129
Slide 129 text
デ ザインとは、
現 状を少しでも望ましいものに
変えようとするための、
一 連の行 為
He r b e r t A . S i m o n | “ T h e S c i e n c e o f t h e A r t i fi c i a l ” , T h e Ma s s a c h u s e t t s In s t i t u t e o f Te c h n o l o g y, 1 9 7 8
129
Slide 130
Slide 130 text
「デ ザインは自分のもの」
130
Slide 131
Slide 131 text
「ディレクションは自分のもの」
131
Slide 132
Slide 132 text
direction!
enjoy,
132
Slide 133
Slide 133 text
ありがとうございました。