Slide 1
Slide 1 text
関口 裕
WordCamp 2017 TOKYO
みんなでデザイン、
あなたもデザイン
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
日本デザインセンター オンスクリーン制作室 アートディレクター・デザイナー ｜ 大学でプロダクトデザインを修めた後、エ
ディトリアルデザイン・情報デザインを扱うデザイン会社、コンセント（旧 アレフ・ゼロ）に就職。雑誌を中心に書籍や広報誌
など紙媒体のデザインに多数携わった後、大規模・中規模のコーポレートサイトやブランドサイトなどを軸としたデジタルメディ
アのデザインにも従事。設計の上流工程からグラフィックのフィニッシュワークまで、幅広く関わりデザインを手掛ける。アイデ
ンティティ・デザインなど媒体にとらわれないデザインや、メディアや規模感・価値観の違う案件を同時に進めるのが好き。
雑 誌 や 広 報 誌、
書 籍のデザイン … 5 年
ウェブサイトを中心としたデザイン … 6 年目
5
Slide 6
Slide 6 text
Ed i t or i a l d es i g n（ m a g a z i ne ）／ Web d es i g n ／ App d es i g n ／ G r a ph i c d es i g n ／ Book d es i g n ／ U X d es i g n ／ Ot her s k i l l ...
Edit orial
Web
App
Graphic
Book
UX
O ther
6
Slide 7
Slide 7 text
デザインでちゃんと食いたい！
最 近のテーマ。
サスティナブ ル でいたい！ いのちだいじに！
7
Slide 8
Slide 8 text
h ttp://w w w.hanarenohey a.c om
8
Slide 9
Slide 9 text
さて
9
Slide 10
Slide 10 text
みんなでデザイン、あなたもデザイン
［ 今日のお 題 ］
10
Slide 11
Slide 11 text
みんなでデザイン、あなたもデザイン
本日お 越しのみなさん
ウェブに関わる人すべて
11
Slide 12
Slide 12 text
「デザインは自分のもの」
［ 本日お 持ち帰りいただくこと ］
12
Slide 13
Slide 13 text
とつ ぜ んで すが
13
Slide 14
Slide 14 text
デザインは、デザイナーに
任 せるには重 要 すぎる
Ti m B r o w n | C E O, I DE O - “ D e s i g n e r s ─ t h i n k b i g ! ” T E D G l o b a l 2 0 0 9
14
Slide 15
Slide 15 text
!!
15
Slide 16
Slide 16 text
Ti m B r o w n | C E O, I DE O
16
Slide 17
Slide 17 text
…は？ 何いってんの？
（ガチガチの職 人 肌 DT P デ ザイナだった 2 009 年当時の私）
17
Slide 18
Slide 18 text
（ 脊 髄 反 射 でした。
）
若かった。
18
Slide 19
Slide 19 text
2 009 年…
# i r a nelec t ion #s w i nef l u e # i n au g 09
# f ol low me JP #2 289
19
Slide 20
Slide 20 text
2 009 年…
ウェブ サービスが一 般 ユーザーへ 広がる。
SEOのコンテンツ回帰 。
CMS の一 般 化。
新 規 立ち上げ → リニューアル への移 行 。
20
Slide 21
Slide 21 text
ウェブサイトがあるのはあたりまえの時 代
受 託ウェブ 制 作が 継 続 的な運 用改 善 へシフトし始め、
表 面 的な差 異 化では 価 値が 作れなくなってきた
2 009 年…
21
Slide 22
Slide 22 text
ウェブを介したビジネスにおいても、
より本 質的で 継 続 性のある
価 値 創出が求められるように
22
Slide 23
Slide 23 text
2009 年
23
Slide 24
Slide 24 text
24
Slide 25
Slide 25 text
［デ ザイン思 考 ］
Design thinking
※歴 史はもっと古いで す
25
Slide 26
Slide 26 text
デ ザイナーがデ ザインを行う過 程 で 用いる、特 有の認 知的 活 動
Design thinking
26
Slide 27
Slide 27 text
デザイナー個人の頭の中にしかなかった
デザインの思 考 法を
ノンデザイナーにも扱えるように
Design thinking
27
Slide 28
Slide 28 text
［ たとえば、デ ザイナーの思 考 法とは？］
デ ザイナー迷 言あるある
ビ ジ ネ ス や デ ザ イ ン 思 考 の 文 脈 で 使 わ れ る 言 葉 に あ て は め て み る
28
Slide 29
Slide 29 text
【なぜなぜ 分 析 】
それって、そもそもの、そもそもなんですけどォ〜・・・
f au l t t r ee a n a l y s i s
Des i g ner
29
Slide 30
Slide 30 text
（お 絵かきじゃないですよ…考えてるんです………）
【マインドマッピング 】
m i nd -m a pp i n g
Des i g ner
30
Slide 31
Slide 31 text
【 状 況 分 析 】
素 朴にユーザ ー観 察してたらワイヤーにない別案が…
s i t u a t i on a l a n a l y s i s
Des i g ner
31
Slide 32
Slide 32 text
【 類 推 】
アーーー、それたぶ んこないだ の UI が ハマると思う、うん 。
a n a l o g i c a l t h i nk i n g / a bd u c t i on
Des i g ner
32
Slide 33
Slide 33 text
【アハ 体 験 】
悩んでたら、急に閃いちゃって〜。良くないスかこれ！
a - h a momen t
Des i g ner
33
Slide 34
Slide 34 text
無 意 識 下にあったデザイナーの思 考 法を
手 法として外 部 化したもの
Design thinking
34
Slide 35
Slide 35 text
「デザインの外 部 化」
＝
フレームワーク化・手 法 化
35
Slide 36
Slide 36 text
【 おす すめ書 籍 】
Ser v ic e De sign： User E x per ienc e De sign：
手 法：
考え方：
@b ane _ t a
HCD-Ne t 認 定 人間中心 設 計 専門家
サービスデ ザ イナー
thank s:
36
Slide 37
Slide 37 text
デザインは “ ひらかれ て” きている
良いとか 悪いとかではなく、時 勢として
37
Slide 38
Slide 38 text
ひらかれ ていくデザイン
Desi g n t o be opened
38
Slide 39
Slide 39 text
ウェブ 制作の現 場 では何が 起きているのか
ウェブ 制作の外 側では何が 起きているのか
いま、これから
これからの先 へ
まとめ
1.
2 .
3.
4 .
5.
「ひらかれ ていくデザイン」について考えてみる
39
Slide 40
Slide 40 text
では
40
Slide 41
Slide 41 text
ウェブ 制 作の現 場 では
何が 起きているのか
1
─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
41
Slide 42
Slide 42 text
［ 環 境の変 化］
42
Slide 43
Slide 43 text
Responsive Web Design
可変レイアウト
マ ル チ デ バ イ ス が 一 般 化 し 、 ひ と つ の コ ン テ ン ツ が 取 り う る 形 は 幅 広 い グ ラ デ ー シ ョ ン に
43
Slide 44
Slide 44 text
Mu lti Touch Point
マルチ
・
タ
ッチポイン
ト
コ ン テ ン ツ へ の 接 触 点 は 媒 体 か ら 独 立 し は じ め て い る 。 ユ ー ザ ー を 流 入 さ せ る の で は な く コ ン テ ン ツ を 拡 散 さ せ る 考 え 方
44
Slide 45
Slide 45 text
Design System
デザインのシステム化
コ ン ポ ー ネ ン ト の 考 え 方 に よ る 、 グ ラ フ ィ ッ ク と コ ー ド を 結 び つ け た か た ち で 品 質 の 維 持 管 理 が で き る デ ザ イ ン の 必 要 性
45
Slide 46
Slide 46 text
対 象 領 域が 広がり、デザインのルール 化・ロジック化が求められ ている
ウェブ 構 築は、より設 計 志向に
G o v er n a nc e ─ デ ザ インの ル ー ル 設 計
46
Slide 47
Slide 47 text
［ 工 程の変 化］
47
Slide 48
Slide 48 text
ウォーターフォール では
対 応できないことが 増えてきた
48
Slide 49
Slide 49 text
計画
設計
テスト
分析
評価
実装
（初期計画）
（リリース）
49
Slide 50
Slide 50 text
Iterative a nd Incrementa l Development
反復型開発
詳 細 な 設 計 ／ 計 画 後 、 P D C A 的 に プ ロ ト タ イ ピ ン グ 〜 評 価 の サ イ ク ル を 繰 り 返 し 、 全 体 を 作 っ て は 壊 し な が ら 開 発 し 、 リ リ ー ス す る 手 法 。
体 制 に よ っ て は ア ジ ャ イ ル や ス プ リ ン ト に 近 い 、 か な り 細 か い 粒 度 で 意 思 決 定 を 行 う 場 合 も 。
50
Slide 51
Slide 51 text
調 査 ／ 分 析 ／ 評 価 ／ 設 計
51
Slide 52
Slide 52 text
デザイン思 考っぽいやつは大 体「ぐるぐる」
52
Slide 53
Slide 53 text
Spira l Model
スパイラルモデル
ウ ォ ー タ ー フ ォ ー ル モ デ ル と 対 に な る 考 え 方 。 観 察 ／ 理 解 ／ 設 計 ／ 評 価 な ど の サ イ ク ル を 繰 り 返 し て 開 発 し て い く プ ロ セ ス 全 体 を 差 す 概 念 。
P D C A 、 H C D 、 U X D 、 そ し て デ ザ イ ン シ ン キ ン グ ・ ・ ・ 基 本 的 に デ ザ イ ン 思 考 と 呼 ば れ る も の は ス パ イ ラ ル モ デ ル を ベ ー ス に し て い る 。
53
Slide 54
Slide 54 text
まず 設 計して → ぐるぐるまわして → どこかで 止める
54
Slide 55
Slide 55 text
まず 設 計して → ぐるぐるまわして → どこかで 止める
55
Slide 56
Slide 56 text
（ ）
美 術系大 学における、
伝 統的な作品制作の基 本的プロセスも
スパイラルモデル 。
※ 私 の 個 人 的 な 考 え で す
56
Slide 57
Slide 57 text
［ 職 能の変 化］
57
Slide 58
Slide 58 text
グ ラフィックデ ザ イナ ー ／ UI デ ザ イナ ー ／ イン タラ クション デ ザ イナ ー ／ UX デ
ザ イ ナ ー ／ ア ート デ ィレ ク タ ー ／ サ ー ビ ス デ ザ イ ナ ー ／ イン フォ メ ー ション ア ー
キ テ クト ／ ワ ー クショップ デ ザ イ ナ ー ／ ウ ェ ブ デ ィレ ク タ ー ／ テ ク ニ カ ル デ ィレ
ク タ ー ／ プ ラ ン ナ ー ／ プ ロ デ ュ ー サ ー ／ マ ー ク ア ップ エ ン ジ ニ ア ／ フ ロ ント エ
ンド エ ン ジ ニ ア ／ バ ック エ ンド エ ン ジ ニ ア ／ ネ ットワ ー ク エ ン ジ ニ ア ／ デ ー タ サ
イ エ ン テ ィスト ／ フォトグ ラファ ー ／ ラ イター ／ イラ ストレ ー ター ／ プ ロ ジ ェ クト
マ ネ ー ジ ャ ー ／ ア ナ リスト ／ エ デ ィタ ー ／ コン テ ン ツ デ ィレ ク タ ー ／ マ ー ケ タ ー
ウ ェ ブ の 重 要 性 が 増 す に つ れ て 専 門 領 域 が 深 ま り 、 さ ま ざ ま な 職 種 の メ ン バ ー が 同 時 に 関 わ る こ と が 増 え た 。
58
Slide 59
Slide 59 text
肩 書きの多様 化 ＝ 観 点の多様 化
59
Slide 60
Slide 60 text
プロダクトに
たくさんの観 点を盛り込めるようになった
60
Slide 61
Slide 61 text
［ 環 境の変 化］
［ 工 程の変 化］
［ 職 能の変 化］
61
Slide 62
Slide 62 text
さまざまな要 素が 変わってきている
62
Slide 63
Slide 63 text
「ウェブ 制作 業 」 自 体 の意味と役 割が
変わってきている
1 . ウ ェ ブ 制 作 の 現 場 で は 何 が 起 き て い る の か
63
Slide 64
Slide 64 text
ウェブ 制 作の外 側 では
何が 起きているのか
2
─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
64
Slide 65
Slide 65 text
「 記 号から物 語 へ 」
65
Slide 66
Slide 66 text
冠 位 十 二階
血 筋（ 姓 名）ではない尺 度 ＝ 色という記 号でシステマチックに身 分を定 義
66
Slide 67
Slide 67 text
ピースマーク
抽象的な 概 念を記 号に
67
Slide 68
Slide 68 text
L ou i s Vu i t ton × S upr eme
ビッグメゾンとストリートファッションのアイコンがコラボ 。極まる記 号 遊 び
68
Slide 69
Slide 69 text
イタリアのタバコ屋の次 元 大 介
肩 身の狭くなった嗜 好品のイメージに、まったく文 脈の違うアニメキャラクターが 持ち込まれた
69
Slide 70
Slide 70 text
スタバで Ma c でドヤリング
手 段が目的に。記 号自体の消費から記 号のメタ情 報 化・自己情 報 化 へ
70
Slide 71
Slide 71 text
#d a n iel wel l i n g t on
インフルエンサーマーケティング ＝ 人そのものの記 号 化
71
Slide 72
Slide 72 text
72
Slide 73
Slide 73 text
お 顔も存じ上げない Tw i t t er のママたち
なんというパワーワード・・・
73
Slide 74
Slide 74 text
（ わかる。
）
インフルエンサーよりも、市 井のアカウントの属人的な物 語のほうがインパクトが ある
74
Slide 75
Slide 75 text
フレンド・ファウンディング
p o l c a のデ ザ インノート - h t t p s : / / t w i t t e r. co m / i / mo me n t s / 8 9 56 2 853 913 0 6 3 4 2 41 | タカヤ・オオタさん
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
80
Slide 81
Slide 81 text
1,000 son g s i n you r poc k et .
MP3 プレイヤーはす でに存 在していた。違ったのはビジョンの提 示
81
Slide 82
Slide 82 text
82
Slide 83
Slide 83 text
EDL P（E ver yd a y L ow Pr ice）
モノの向こうにある価 値を伝える。ワケあって安い。絶 対 評 価 で 常に安いという価 値
83
Slide 84
Slide 84 text
84
Slide 85
Slide 85 text
これがいい → これ でいい
最 上を求めなくても幸 せに過ご せる、という価 値 観 。大 量 消 費 社 会 へのアンチテーゼ
85
Slide 86
Slide 86 text
86
Slide 87
Slide 87 text
YES, WE CAN.
「C h a n ge 」へのアンサー。あいまいになりがちな政 治 的 主 張をラベリング することで 、圧 倒的な訴 求力に。
87
Slide 88
Slide 88 text
Stor y telling
ストーリーテリング
情 報 を 共 有 す る 手 段 の 一 つ 。 定 性 的 な 情 報 共 有 の こ と 。 語 り の 技 術 。 語 り 手 が 自 分 の 言 葉 に 直 し て 語 る こ と 。
焚 き 火 を 囲 ん だ 口 伝 。 フ レ ー ム ワ ー ク 化 さ れ た よ み き か せ の ス キ ル 。
88
Slide 89
Slide 89 text
ストーリーはつくれる
カ リ ス マ が な く て も
プラグマティックペ ルソナ／ 人間中心 設 計プロセス／ 半 構 造 化インタビュー／
アクティブリスニング／ 5 つのコンテクスト／ 6 つの構 造 パターン et c ...
Stor y telling
89
Slide 90
Slide 90 text
U X デザインもストーリーの一 種 。
90
Slide 91
Slide 91 text
語り ＝ 物 語も “ ひらかれ て ” いる
91
Slide 92
Slide 92 text
モノ・媒 体といった点・面 で 捉えるのではなく
連 続 性のある着眼 点が必 要
（ 体 験・ジャーニー・商 流・背 景 e t c…）
92
Slide 93
Slide 93 text
価 値は時間軸を伴うものに
記 号 消費社 会から物 語 消費社 会 へ
2 . ウ ェ ブ の 外 側 で は 何 が 起 き て い る の か
93
Slide 94
Slide 94 text
いま、これから
3
─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
94
Slide 95
Slide 95 text
デザインとは、
（ストーリー／ 物 語をつくる）設 計 だ。
デ ザインとはスキンづくりのことではない。定 性的な設 計 行 為であり、肩 書きではなく、
「ものの見 方 」。
95
Slide 96
Slide 96 text
ブラックボックスだった
デザイン手 法は外 部 化され 、
だれもがアクセスできるように
96
Slide 97
Slide 97 text
ノンデザイナー向けの、
デザイン本が 売れ ている。
97
Slide 98
Slide 98 text
ひらかれるデザイン
98
Slide 99
Slide 99 text
［ 実 例 ］
案 件のお 話はできませんが…この夏、自分もひらいてました。
99
Slide 100
Slide 100 text
小 1 息 子、はじめての自由研 究
100
Slide 101
Slide 101 text
!!
ダンボーつくる。
101
Slide 102
Slide 102 text
「 手が 勝 手に動くタイプ “ ではない ” 」わが 子
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
KJ 法もどきの言語イメージ抽出で
自分自身の思考を整理し、ゴール
の定義をする。
調 査
108
Slide 109
Slide 109 text
デッサンのかわりに言葉で気づき
を出させたあと、詳細部分ごとの
サムネイル スケッチとして定 着。
ディテールを掴んだ後、各部品に
落とし込む。
設 計・計 画
109
Slide 110
Slide 110 text
デッサンのかわりに言葉で気づき
を出させたあと、詳細部分ごとの
サムネイル スケッチとして定 着。
ディテールを掴んだ後、各部品に
落とし込む。
設 計・計 画
110
Slide 111
Slide 111 text
コピー用紙でのダーティプロトタイ
ピングで、箱（ 立 方 体 ）の構 造・
展開図を認識させる。
プロトタイプ
111
Slide 112
Slide 112 text
まだ 数 値による寸 法 の 概 念 がな
いので、モデュロール的な考え方
でプロポーションを意 識させる。
キャッチ & トライ（反復）しながら
制作を進める。
実 装
建 築 家 ル・コルビュジエによるモデュロール 。人 体 の
寸 法と比 率から、全 体 の 構 造 設 計に展開する考え方
112
Slide 113
Slide 113 text
空間認識と習熟が必要になる図面
は引かず、フィギュアと部品を比較
確認させ、ひとつひとつをラピッド
モデル的に作りながら全体感を確
かめさせる。キャッチ & トライしな
がら制作を進める。
実 装
113
Slide 114
Slide 114 text
加工作業は手取り足取りだが、い
ま何のためのプロセスをやってい
るのか答えさせながら進め、前後
工程を意識させる。ここでもキャッ
チ & トライしながら制作を進める。
実 装
114
Slide 115
Slide 115 text
完成したら、振り返りとして KPT
（Keep/Problem/Try）
。 ※ さ す
がに集中力が続かないので、改善
サイクルは放棄した。
評 価
115
Slide 116
Slide 116 text
「
お
と
う
さ
ん
が
こ
わ
か
っ
た
」
Problem
116
Slide 117
Slide 117 text
調 査
↓
設 計・計 画
↔
プロトタイピング
↔
実 装
↓
評 価
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
デザインをひらく
＝
適 切な批 評をし、改 善していくことができる
3 . い ま 、 こ れ か ら
122
Slide 123
Slide 123 text
これからの先 へ
4
─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
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
（ ）
目の前のお 客さんの顔が明るくならない…
128
Slide 129
Slide 129 text
つらかった・・・
129
Slide 130
Slide 130 text
“ ひらいて ” 発 散したデザインを
収 束させる腕力
3 3
が必 要
130
Slide 131
Slide 131 text
デザイナー、必 要で す。
131
Slide 132
Slide 132 text
クリエイティブジャンプ
132
Slide 133
Slide 133 text
改 善プロセスは
仕 様 書 製 造 機 ではなく、飛 躍のジャンプ台
133
Slide 134
Slide 134 text
チームで つかんだアイデアの、
精 度をひとつ上に押し上げる
専門家としての定 着力
3 3 3
も必 要 。
文 脈が 共 有されているので、
「いきなりデ ザイナーが 変なことを言い出した」状 態にもなりにくい。
134
Slide 135
Slide 135 text
デザインのダイナミックレンジが 重 要に
4 . い ま 、 こ れ か ら
広 義のデザインから狭 義のデ ザインへ 、どれ だけ行き来 できるか？
135
Slide 136
Slide 136 text
まとめ
5
─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
136
Slide 137
Slide 137 text
デザインをひらく
137
Slide 138
Slide 138 text
デザインはみんなで ひらく
138
Slide 139
Slide 139 text
（ デザインをひとに任 せない ）
139
Slide 140
Slide 140 text
【スキルの外 部 化】
どんな職 種 で も、自分のスキルを可 視 化すると
周囲の人を巻き込める。
【 価 値 観の共 有 】
協 働のためのプロトコルをつくる。その案 件に
必 要な価 値 観を、阿 吽にせ ず 言 葉にしよう。
140
Slide 141
Slide 141 text
仕 様 書から、プリンシプル へ
Pr i nc i ple
原 理・主 義・信 条
S pec i f ic a t ion s hee t
規 格・性 能・機 能
→
141
Slide 142
Slide 142 text
スペックシートは制作、コンセプトは企 画 。
両 方をつなげるスキルが求められ ている。
142
Slide 143
Slide 143 text
コンセプト ＝ 思 想を持とう。
143
Slide 144
Slide 144 text
つまり
144
Slide 145
Slide 145 text
「 そ の 案 件 の 価 値 の 拠 り 所 は？ 」
Va lue proposition
145
Slide 146
Slide 146 text
はっきり答えが出ることなんてない。
。
。
146
Slide 147
Slide 147 text
問いを立 てるのはこわい。
147
Slide 148
Slide 148 text
孤 独。
148
Slide 149
Slide 149 text
149
Slide 150
Slide 150 text
仕 様・標 準が 存 在 するのはウェブの良いところ
（ 評 価がしやすい）
150
Slide 151
Slide 151 text
ただし、
151
Slide 152
Slide 152 text
Va l id a t ion の 結 果 ／ UI の 精 緻 さ ／ 工 数 見 積 ／ ビ
ジュアル の 訴 求 力 ／ 技 術 的 負 債 のないコード et c ...
↓
品質のひとつの面 でしかない
152
Slide 153
Slide 153 text
De s i g n
Web De s i g n
ウェブ サイトの外 側から、ウェブを見 てみる
153
Slide 154
Slide 154 text
べき論 や手 法に依 存して
思 考 停 止にならず、
ユーザーが 得られるストーリーを基 準に
考え続けるプロセスが大 事
154
Slide 155
Slide 155 text
「 サイトがあればいい」
という時 代 ではない
155
Slide 156
Slide 156 text
サイト構 築は手 段
156
Slide 157
Slide 157 text
「 共 通 言 語 」からア イデ ア や コン セプトは つくられ ていく－松 倉 早 星 イン タビュー（ 1 ） | デ ザ イン 情 報 サ イト [ J DN ]
h t t p s : //w w w. j a p a n d e s i g n . n e . j p / i n t e r v i e w/ m a t s u k u r a - s ub a r u -1/
157
Slide 158
Slide 158 text
何かひとつクリエイティブで 課 題を解 決しても、プランナーなのでそこの奥にある課 題が
見えちゃったりします。本当はそこも手をつけたい！ でも、依 頼としてはすでに終わって
いるので「お 疲れ 様 でした！」で 終わってたんで す……。でも、どうしても言わずにはい
れなくなって、伝え出したのが去 年あたりからで す。
「言われるまで 気づきませんでした」
としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感
じました。
一過性のもので人の行動とか価 値 観、さらには人生観を変えることはできないけれど、丁
寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。
リサ ー チとプ ラン ニン グ にしっかり向き 合 える会 社 を つくりた い－松 倉 早 星 イン タビュー（ 2 ） | デ ザ イン 情 報 サ イト [ J DN ]
h t t p s : //w w w. j a p a n d e s i g n . n e . j p / i n t e r v i e w/ m a t s u k u r a - s ub a r u - 2 /
158
Slide 159
Slide 159 text
何かひとつクリエイティブで 課 題を解 決しても、プランナーなのでそこの奥にある課 題が
見えちゃったりします。本当はそこも手をつけたい！ でも、依 頼としてはす でに終わって
いるので「お 疲れ 様 でした！」で 終わってたんで す……。でも、どうしても言わずにはい
れなくなって、伝え出したのが去 年あたりからで す。
「言われるまで 気づきませんでした」
としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感
じました。
一過性のもので人の行動とか価 値 観、さらには人生観を変えることはできないけれど、丁
寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。
リサ ー チとプ ラン ニン グ にしっかり向き 合 える会 社 を つくりた い－松 倉 早 星 イン タビュー（ 2 ） | デ ザ イン 情 報 サ イト [ J DN ]
h t t p s : //w w w. j a p a n d e s i g n . n e . j p / i n t e r v i e w/ m a t s u k u r a - s ub a r u - 2 /
159
Slide 160
Slide 160 text
“ デザインがはじまる前 ” を整 理 する。
リサ ー チとプ ラン ニン グ にしっかり向き 合 える会 社 を つくりた い－松 倉 早 星 イン タビュー（ 2 ） | デ ザ イン 情 報 サ イト [ J DN ]
h t t p s : //w w w. j a p a n d e s i g n . n e . j p / i n t e r v i e w/ m a t s u k u r a - s ub a r u - 2 /
160
Slide 161
Slide 161 text
エンジニアも、ディレクターも、フルスタックでも
デザインしよう
161
Slide 162
Slide 162 text
（デザイナーは、他の世 界も見 てみよう）
162
Slide 163
Slide 163 text
難しく考えないで 、
できることからやってみる
（ 力みすぎ て、私もよく失 敗しています・・・。 ）
163
Slide 164
Slide 164 text
あるべきところに
見出しをつける
コミュニケーションツールを
工夫
現場に足を運んでみる
CMS の選定をする
ユーザーだけでなく、
クライアントの立場に
なってみる
ランチに
出かけてみる
カンプか、モックアップか？
それとも…。
サイトの課題について
言葉でゆっくり話し合ってみる
コンセプトを練り上げる
スケジュールに改善サイクルを組み込む
仕様をみんなで
再考する
マークアップできる
デザインか考えてみる
メインビジュアルを
撮り下ろしてみる
プロダクトの言葉遣いを
定義してみる
164
Slide 165
Slide 165 text
ほんのすこしでも
巻き込んでいくことが、次につながる
作っておわりではない、持 続 可 能 性の高い生き方 。
協 働 するデ ザインは、継 続を前 提にしたデ ザイン。
165
Slide 166
Slide 166 text
（ しんどいのは自分たちの代 で 終わりにしたい。
）
166
Slide 167
Slide 167 text
他 者をひらくには、まず自分から。
無 理にまわりを変えようとせず 、自分が 変わる。
167
Slide 168
Slide 168 text
自分を可 視 化することからはじめよう。
相互 乗り入れをしてみよう。
168
Slide 169
Slide 169 text
デザインは、デザイナーに
任 せるには重 要 すぎる
Ti m B r o w n | C E O, I DE O - “ D e s i g n e r s ─ t h i n k b i g ! ” T E D G l o b a l 2 0 0 9
169
Slide 170
Slide 170 text
もうひとつ。
170
Slide 171
Slide 171 text
Science of design
He r b e r t A . S i m o n
171
Slide 172
Slide 172 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
172
Slide 173
Slide 173 text
「デザインは自分のもの」
［ 本日お 持ち帰りいただくこと ］
173
Slide 174
Slide 174 text
共 感力 ─
自分ごとにするスキル
［ 本日お 持ち帰りいただくこと ］
Empathy
174
Slide 175
Slide 175 text
“ 制作 ” から “デザイン” へ
175
Slide 176
Slide 176 text
Open!
design !
176
Slide 177
Slide 177 text
design !
enjoy,
177
Slide 178
Slide 178 text
ありがとうございました。
Slide 179
Slide 179 text
雑っぴ んぐ ダーティプロトタイプ
ロイヤルカスタマー 二 郎 # za t sudan、してる？
計 画を記 号に表す IDEO HCD
正しくないデ ザイン Designer s think big!
イテレーティブとインクリメンタル
プロトコル イコン・インデックス・シンボ ル
ブリコラージュ デ ザイン 語 源
一 貫 性と継 続 性 アドビ ISO 13407
デ ザイン批 評
S t yle Manual
魂 動 エフェクチュエーション
デ ザイン思 考 アブ ダクション デ ザイン
サービスデ ザイン コンテンツストラテジー
- o m a k e k e y w o r d s -