みんなでデザイン、あなたもデザイン

Wordcamp Tokyo 2017で発表したプレゼンテーションです。
動画： https://wordpress.tv/2017/09/28/yutaka-sekiguchi-%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%82%82%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/

--

WordCamp Tokyo 2017
https://2017.tokyo.wordcamp.org/

hanarenoheya
http://www.hanarenoheya.com/

Transcript

1. 関口 裕
   WordCamp 2017 TOKYO
   みんなでデザイン、
   あなたもデザイン
   1
   

   View Slide

2. スライドは公開します。
   考え方をお 伝えしたいので、言 葉の説 明は少なめです。
   気になったキーワードは、後でゆっくり調べてみてください。
   2
   

   View Slide

3. 自己紹 介
   3
   

   View Slide

4. 関口 裕
   （ せきぐち・ゆたか ）
   D E S I G N E R
   4
   

   View Slide

5. 日本デザインセンター　オンスクリーン制作室　アートディレクター・デザイナー ｜ 大学でプロダクトデザインを修めた後、エ
   ディトリアルデザイン・情報デザインを扱うデザイン会社、コンセント（旧 アレフ・ゼロ）に就職。雑誌を中心に書籍や広報誌
   など紙媒体のデザインに多数携わった後、大規模・中規模のコーポレートサイトやブランドサイトなどを軸としたデジタルメディ
   アのデザインにも従事。設計の上流工程からグラフィックのフィニッシュワークまで、幅広く関わりデザインを手掛ける。アイデ
   ンティティ・デザインなど媒体にとらわれないデザインや、メディアや規模感・価値観の違う案件を同時に進めるのが好き。
   雑 誌 や 広 報 誌、
   書 籍のデザイン … 5 年
    
   ウェブサイトを中心としたデザイン … 6 年目
   5
   

   View Slide

6. 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
   

   View Slide

7. デザインでちゃんと食いたい！
   最 近のテーマ。
   サスティナブ ル でいたい！ いのちだいじに！
   7
   

   View Slide

8. h ttp://w w w.hanarenohey a.c om
   8
   

   View Slide

9. さて
   9
   

   View Slide

10. みんなでデザイン、あなたもデザイン
    ［ 今日のお 題 ］
    10
    

    View Slide

11. みんなでデザイン、あなたもデザイン
    本日お 越しのみなさん
    ウェブに関わる人すべて
    11
    

    View Slide

12. 「デザインは自分のもの」
    ［ 本日お 持ち帰りいただくこと ］
    12
    

    View Slide

13. とつ ぜ んで すが
    13
    

    View Slide

14. デザインは、デザイナーに
    任 せるには重 要 すぎる
    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
    

    View Slide

15. !!
    15
    

    View Slide

16. Ti m B r o w n | C E O, I DE O
    16
    

    View Slide

17. …は？ 何いってんの？
    （ガチガチの職 人 肌 DT P デ ザイナだった 2 009 年当時の私）
    17
    

    View Slide

18. （ 脊 髄 反 射 でした。
    ）
    若かった。
    18
    

    View Slide

19. 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
    

    View Slide

20. 2 009 年…
    ウェブ サービスが一 般 ユーザーへ 広がる。
    SEOのコンテンツ回帰 。
    CMS の一 般 化。
    新 規 立ち上げ → リニューアル への移 行 。
    20
    

    View Slide

21. ウェブサイトがあるのはあたりまえの時 代
    受 託ウェブ 制 作が 継 続 的な運 用改 善 へシフトし始め、
    表 面 的な差 異 化では 価 値が 作れなくなってきた
    2 009 年…
    21
    

    View Slide

22. ウェブを介したビジネスにおいても、
    より本 質的で 継 続 性のある
    価 値 創出が求められるように
    22
    

    View Slide

23. 2009 年
    23
    

    View Slide

24. View Slide

25.  
    ［デ ザイン思 考 ］
    Design thinking
    ※歴 史はもっと古いで す
    25
    

    View Slide

26. デ ザイナーがデ ザインを行う過 程 で 用いる、特 有の認 知的 活 動
    Design thinking
    26
    

    View Slide

27. デザイナー個人の頭の中にしかなかった
    デザインの思 考 法を
    ノンデザイナーにも扱えるように
    Design thinking
    27
    

    View Slide

28.  
    ［  たとえば、デ ザイナーの思 考 法とは？］
     
    デ ザイナー迷 言あるある
    ビ ジ ネ ス や デ ザ イ ン 思 考 の 文 脈 で 使 わ れ る 言 葉 に あ て は め て み る
    28
    

    View Slide

29. 【なぜなぜ 分 析 】
    それって、そもそもの、そもそもなんですけどォ〜・・・
    f au l t t r ee a n a l y s i s
    Des i g ner
    29
    

    View Slide

30. （お 絵かきじゃないですよ…考えてるんです………）
    【マインドマッピング 】
    m i nd -m a pp i n g
    Des i g ner
    30
    

    View Slide

31. 【 状 況 分 析 】
    素 朴にユーザ ー観 察してたらワイヤーにない別案が…
    s i t u a t i on a l a n a l y s i s
    Des i g ner
    31
    

    View Slide

32. 【 類 推 】
    アーーー、それたぶ んこないだ の 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
    

    View Slide

33. 【アハ 体 験 】
    悩んでたら、急に閃いちゃって〜。良くないスかこれ！
    a - h a momen t
    Des i g ner
    33
    

    View Slide

34. 無 意 識 下にあったデザイナーの思 考 法を
    手 法として外 部 化したもの
    Design thinking
    34
    

    View Slide

35. 「デザインの外 部 化」
    ＝
    フレームワーク化・手 法 化
    35
    

    View Slide

36. 【  おす すめ書 籍  】
    Ser v ic e De sign： User E x per ienc e De sign：
    手 法：
    考え方：
    @b ane _ t a
    HCD-Ne t 認 定 人間中心 設 計 専門家
    サービスデ ザ イナー
    thank s:
    36
    

    View Slide

37. デザインは “ ひらかれ て” きている
    良いとか 悪いとかではなく、時 勢として
    37
    

    View Slide

38. ひらかれ ていくデザイン
    Desi g n t o be opened
    38
    

    View Slide

39. ウェブ 制作の現 場 では何が 起きているのか
    ウェブ 制作の外 側では何が 起きているのか
    いま、これから
    これからの先 へ
    まとめ
    1.
    2 .
    3.
    4 .
    5.
    「ひらかれ ていくデザイン」について考えてみる
    39
    

    View Slide

40. では
    40
    

    View Slide

41. ウェブ 制 作の現 場 では
    何が 起きているのか
    1
    ─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
    41
    

    View Slide

42.  
    ［ 環 境の変 化］
    42
    

    View Slide

43. Responsive Web Design
    可変レイアウト
    マ ル チ デ バ イ ス が 一 般 化 し 、 ひ と つ の コ ン テ ン ツ が 取 り う る 形 は 幅 広 い グ ラ デ ー シ ョ ン に
    43
    

    View Slide

44. Mu lti Touch Point
    マルチ
    ・
    タ
    ッチポイン
    ト
    コ ン テ ン ツ へ の 接 触 点 は 媒 体 か ら 独 立 し は じ め て い る 。 ユ ー ザ ー を 流 入 さ せ る の で は な く コ ン テ ン ツ を 拡 散 さ せ る 考 え 方
    44
    

    View Slide

45. Design System
    デザインのシステム化
    コ ン ポ ー ネ ン ト の 考 え 方 に よ る 、 グ ラ フ ィ ッ ク と コ ー ド を 結 び つ け た か た ち で 品 質 の 維 持 管 理 が で き る デ ザ イ ン の 必 要 性
    45
    

    View Slide

46. 対 象 領 域が 広がり、デザインのルール 化・ロジック化が求められ ている
    ウェブ 構 築は、より設 計 志向に
    G o v er n a nc e ─ デ ザ インの ル ー ル 設 計
    46
    

    View Slide

47.  
    ［ 工 程の変 化］
    47
    

    View Slide

48. ウォーターフォール では
    対 応できないことが 増えてきた
    48
    

    View Slide

49. 計画
    設計
    テスト
    分析
    評価
    実装
    （初期計画）
    （リリース）
    49
    

    View Slide

50. Iterative a nd Incrementa l Development
    反復型開発
    詳 細 な 設 計 ／ 計 画 後 、 P D C A 的 に プ ロ ト タ イ ピ ン グ 〜 評 価 の サ イ ク ル を 繰 り 返 し 、 全 体 を 作 っ て は 壊 し な が ら 開 発 し 、 リ リ ー ス す る 手 法 。
    体 制 に よ っ て は ア ジ ャ イ ル や ス プ リ ン ト に 近 い 、 か な り 細 か い 粒 度 で 意 思 決 定 を 行 う 場 合 も 。
    50
    

    View Slide

51. 調 査 ／ 分 析 ／ 評 価 ／ 設 計
    51
    

    View Slide

52. デザイン思 考っぽいやつは大 体「ぐるぐる」
    52
    

    View Slide

53. Spira l Model
    スパイラルモデル
    ウ ォ ー タ ー フ ォ ー ル モ デ ル と 対 に な る 考 え 方 。 観 察 ／ 理 解 ／ 設 計 ／ 評 価 な ど の サ イ ク ル を 繰 り 返 し て 開 発 し て い く プ ロ セ ス 全 体 を 差 す 概 念 。
    P D C A 、 H C D 、 U X D 、 そ し て デ ザ イ ン シ ン キ ン グ ・ ・ ・ 基 本 的 に デ ザ イ ン 思 考 と 呼 ば れ る も の は ス パ イ ラ ル モ デ ル を ベ ー ス に し て い る 。
    53
    

    View Slide

54. まず 設 計して → ぐるぐるまわして → どこかで 止める
    54
    

    View Slide

55. まず 設 計して → ぐるぐるまわして → どこかで 止める
    55
    

    View Slide

56. （ 　 　 ）
    美 術系大 学における、
    伝 統的な作品制作の基 本的プロセスも
    スパイラルモデル 。
    ※ 私 の 個 人 的 な 考 え で す
    56
    

    View Slide

57.  
    ［ 職 能の変 化］
    57
    

    View Slide

58. グ ラフィックデ ザ イナ ー ／ UI デ ザ イナ ー ／ イン タラ クション デ ザ イナ ー ／ UX デ
    ザ イ ナ ー ／ ア ート デ ィレ ク タ ー ／ サ ー ビ ス デ ザ イ ナ ー ／ イン フォ メ ー ション ア ー
    キ テ クト ／ ワ ー クショップ デ ザ イ ナ ー ／ ウ ェ ブ デ ィレ ク タ ー ／ テ ク ニ カ ル デ ィレ
    ク タ ー ／ プ ラ ン ナ ー ／ プ ロ デ ュ ー サ ー ／ マ ー ク ア ップ エ ン ジ ニ ア ／ フ ロ ント エ
    ンド エ ン ジ ニ ア ／ バ ック エ ンド エ ン ジ ニ ア ／ ネ ットワ ー ク エ ン ジ ニ ア ／ デ ー タ サ
    イ エ ン テ ィスト ／ フォトグ ラファ ー ／ ラ イター ／ イラ ストレ ー ター ／ プ ロ ジ ェ クト
    マ ネ ー ジ ャ ー ／ ア ナ リスト ／ エ デ ィタ ー ／ コン テ ン ツ デ ィレ ク タ ー ／ マ ー ケ タ ー
    ウ ェ ブ の 重 要 性 が 増 す に つ れ て 専 門 領 域 が 深 ま り 、 さ ま ざ ま な 職 種 の メ ン バ ー が 同 時 に 関 わ る こ と が 増 え た 。
    58
    

    View Slide

59. 肩 書きの多様 化 ＝ 観 点の多様 化
    59
    

    View Slide

60. プロダクトに
    たくさんの観 点を盛り込めるようになった
    60
    

    View Slide

61.  
    ［ 環 境の変 化］
     
    ［ 工 程の変 化］
     
    ［ 職 能の変 化］
    61
    

    View Slide

62. さまざまな要 素が 変わってきている
    62
    

    View Slide

63. 「ウェブ 制作 業 」 自 体 の意味と役 割が
    変わってきている
    1 . ウ ェ ブ 制 作 の 現 場 で は 何 が 起 き て い る の か
    63
    

    View Slide

64. ウェブ 制 作の外 側 では
    何が 起きているのか
    2
    ─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
    64
    

    View Slide

65.  
    「 記 号から物 語 へ 」
    65
    

    View Slide

66. 冠 位 十 二階
    血 筋（ 姓 名）ではない尺 度 ＝ 色という記 号でシステマチックに身 分を定 義
    66
    

    View Slide

67. ピースマーク
    抽象的な 概 念を記 号に
    67
    

    View Slide

68. L ou i s Vu i t ton × S upr eme
    ビッグメゾンとストリートファッションのアイコンがコラボ 。極まる記 号 遊 び
    68
    

    View Slide

69. イタリアのタバコ屋の次 元 大 介
    肩 身の狭くなった嗜 好品のイメージに、まったく文 脈の違うアニメキャラクターが 持ち込まれた
    69
    

    View Slide

70. スタバで Ma c でドヤリング
    手 段が目的に。記 号自体の消費から記 号のメタ情 報 化・自己情 報 化 へ
    70
    

    View Slide

71. #d a n iel wel l i n g t on
    インフルエンサーマーケティング ＝ 人そのものの記 号 化
    71
    

    View Slide

72. View Slide

73. お 顔も存じ上げない Tw i t t er のママたち
    なんというパワーワード・・・
    73
    

    View Slide

74. （  わかる。
    ）
    インフルエンサーよりも、市 井のアカウントの属人的な物 語のほうがインパクトが ある
    74
    

    View Slide

75. フレンド・ファウンディング
    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
    

    View Slide

76. 物 流の人 脈 化、消 費財の物 語 化。
    76
    

    View Slide

77. ストーリーのないものに
    価 値がうまれにくくなっている。
    77
    

    View Slide

78. 見た目だけのデザインは共 感を呼ばない
    78
    

    View Slide

79.  
    ［ 実 例 ］
    79
    

    View Slide

80. View Slide

81. 1,000 son g s i n you r poc k et .
    MP3 プレイヤーはす でに存 在していた。違ったのはビジョンの提 示
    81
    

    View Slide

82. View Slide

83. EDL P（E ver yd a y L ow Pr ice）
    モノの向こうにある価 値を伝える。ワケあって安い。絶 対 評 価 で 常に安いという価 値
    83
    

    View Slide

84. View Slide

85. これがいい → これ でいい
    最 上を求めなくても幸 せに過ご せる、という価 値 観 。大 量 消 費 社 会 へのアンチテーゼ
    85
    

    View Slide

86. View Slide

87. YES, WE CAN.
    「C h a n ge 」へのアンサー。あいまいになりがちな政 治 的 主 張をラベリング することで 、圧 倒的な訴 求力に。
    87
    

    View Slide

88. Stor y telling
    ストーリーテリング
    情 報 を 共 有 す る 手 段 の 一 つ 。 定 性 的 な 情 報 共 有 の こ と 。 語 り の 技 術 。 語 り 手 が 自 分 の 言 葉 に 直 し て 語 る こ と 。
    焚 き 火 を 囲 ん だ 口 伝 。 フ レ ー ム ワ ー ク 化 さ れ た よ み き か せ の ス キ ル 。
    88
    

    View Slide

89. ストーリーはつくれる
    カ リ ス マ が な く て も
    プラグマティックペ ルソナ／ 人間中心 設 計プロセス／ 半 構 造 化インタビュー／
    アクティブリスニング／ 5 つのコンテクスト／ 6 つの構 造 パターン　 et c ...
    Stor y telling
    89
    

    View Slide

90. U X デザインもストーリーの一 種 。
    90
    

    View Slide

91. 語り ＝ 物 語も “ ひらかれ て ” いる
    91
    

    View Slide

92. モノ・媒 体といった点・面 で 捉えるのではなく
    連 続 性のある着眼 点が必 要
    （ 体 験・ジャーニー・商 流・背 景 e t c…）
    92
    

    View Slide

93. 価 値は時間軸を伴うものに
    記 号 消費社 会から物 語 消費社 会 へ
    2 . ウ ェ ブ の 外 側 で は 何 が 起 き て い る の か
    93
    

    View Slide

94. いま、これから
    3
    ─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
    94
    

    View Slide

95. デザインとは、
     
    （ストーリー／ 物 語をつくる）設 計 だ。
    デ ザインとはスキンづくりのことではない。定 性的な設 計 行 為であり、肩 書きではなく、
     
    「ものの見 方 」。
    95
    

    View Slide

96. ブラックボックスだった
    デザイン手 法は外 部 化され 、
    だれもがアクセスできるように
    96
    

    View Slide

97. ノンデザイナー向けの、
    デザイン本が 売れ ている。
    97
    

    View Slide

98. ひらかれるデザイン
    98
    

    View Slide

99.  
    ［ 実 例 ］
      案 件のお 話はできませんが…この夏、自分もひらいてました。
    99
    

    View Slide

100. 小 1 息 子、はじめての自由研 究
     100
     

     View Slide

101. !!
     ダンボーつくる。
     101
     

     View Slide

102. 「 手が 勝 手に動くタイプ “ ではない ” 」わが 子
     102
     

     View Slide

103. （  ちょっと厳しい予感・・・）
     103
     

     View Slide

104. ただ作っておわりではない、
     プロセス込みの完 成までナビゲートしたい。
     104
     

     View Slide

105. これまで 培ってきた
     「デザインをひらく」ことを活かせないか？
     105
     

     View Slide

106. お 休み
     頂 戴しました。
     106
     

     View Slide

107. 原作マンガの中から、自分にとって
     印象的なコマを選ばせる。対象の
     明確化を行う。
     調 査
     107
     

     View Slide

108. KJ 法もどきの言語イメージ抽出で
     自分自身の思考を整理し、ゴール
     の定義をする。
     調 査
     108
     

     View Slide

109. デッサンのかわりに言葉で気づき
     を出させたあと、詳細部分ごとの
     サムネイル スケッチとして定 着。
     ディテールを掴んだ後、各部品に
     落とし込む。
     設 計・計 画
     109
     

     View Slide

110. デッサンのかわりに言葉で気づき
     を出させたあと、詳細部分ごとの
     サムネイル スケッチとして定 着。
     ディテールを掴んだ後、各部品に
     落とし込む。
     設 計・計 画
     110
     

     View Slide

111. コピー用紙でのダーティプロトタイ
     ピングで、箱（ 立 方 体 ）の構 造・
     展開図を認識させる。
     プロトタイプ
     111
     

     View Slide

112. まだ 数 値による寸 法 の 概 念 がな
     いので、モデュロール的な考え方
     でプロポーションを意 識させる。
     キャッチ & トライ（反復）しながら
     制作を進める。
     実 装
     建 築 家 ル・コルビュジエによるモデュロール 。人 体 の
     寸 法と比 率から、全 体 の 構 造 設 計に展開する考え方
     112
     

     View Slide

113. 空間認識と習熟が必要になる図面
     は引かず、フィギュアと部品を比較
     確認させ、ひとつひとつをラピッド
     モデル的に作りながら全体感を確
     かめさせる。キャッチ & トライしな
     がら制作を進める。
     実 装
     113
     

     View Slide

114. 加工作業は手取り足取りだが、い
     ま何のためのプロセスをやってい
     るのか答えさせながら進め、前後
     工程を意識させる。ここでもキャッ
     チ & トライしながら制作を進める。
     実 装
     114
     

     View Slide

115. 完成したら、振り返りとして KPT
     （Keep/Problem/Try）
     。 ※ さ す
     がに集中力が続かないので、改善
     サイクルは放棄した。
     評 価
     115
     

     View Slide

116. 「
     お
     と
     う
     さ
     ん
     が
     こ
     わ
     か
     っ
     た
     」
     Problem
     116
     

     View Slide

117. 調 査
      ↓
     設 計・計 画
      
     ↔
     プロトタイピング
      
     ↔
     実 装
      ↓
     評 価
     117
     

     View Slide

118. ノートにして
     提出
     ドキュメンテーション
     118
     

     View Slide

119. （なぜ やったか）
     119
     

     View Slide

120. つくるだけ ＝ 表 現の精 度 でしか 評 価 できない
     120
     

     View Slide

121. 工 作のうまさではなく、
     本 人のダンボーが 好きだという気 持ちを
     お 友 達 や先 生に知ってもらうための
     ファシリテーション
     121
     

     View Slide

122. デザインをひらく
     ＝
     適 切な批 評をし、改 善していくことができる
     3 . い ま 、 こ れ か ら
     122
     

     View Slide

123. これからの先 へ
     4
     ─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
     123
     

     View Slide

124. ひらかれ たデザインは、
     その後どうなるのか。
     124
     

     View Slide

125. 適 切な評 価をし、よりよいサイクルに
     125
     

     View Slide

126. しかし
     126
     

     View Slide

127. 漠 然とプロセス化するだけでは「あたりまえすぎる結 論 」から抜けられないことも…。
     ［ デ ザイン思 考プロセスあるある ］
     あたりまえすぎ 問題
     み ん な 納 得 で き て は い る も の の 、 正 し い 答 え の 枠 か ら 抜 け ら れ ず 、 発 見 性 に 乏 し い ア イ デ ア し か 出 ず 期 待 に 応 え ら れ な い こ と が よ く あ る 。
     デ ザ イ ン 思 考 は あ く ま で 考 え 方 ・ プ ロ セ ス で あ り 、 銀 の 弾 丸 で は な い 。
     127
     

     View Slide

128. （ 　 　 ）
      目の前のお 客さんの顔が明るくならない…
     128
     

     View Slide

129. つらかった・・・
     129
     

     View Slide

130. “ ひらいて ” 発 散したデザインを
     収 束させる腕力
     3 3
     が必 要
     130
     

     View Slide

131. デザイナー、必 要で す。
     131
     

     View Slide

132. クリエイティブジャンプ
     132
     

     View Slide

133. 改 善プロセスは
     仕 様 書 製 造 機 ではなく、飛 躍のジャンプ台
     133
     

     View Slide

134. チームで つかんだアイデアの、
     精 度をひとつ上に押し上げる
     専門家としての定 着力
     3 3 3
     も必 要 。
     文 脈が 共 有されているので、
     「いきなりデ ザイナーが 変なことを言い出した」状 態にもなりにくい。
     134
     

     View Slide

135. デザインのダイナミックレンジが 重 要に
     4 . い ま 、 こ れ か ら
     広 義のデザインから狭 義のデ ザインへ 、どれ だけ行き来 できるか？
     135
     

     View Slide

136. まとめ
     5
     ─ 「 ひらかれ ていくデ ザイン」について考えてみる ─
     136
     

     View Slide

137. デザインをひらく
     137
     

     View Slide

138. デザインはみんなで ひらく
     138
     

     View Slide

139.  
     （ デザインをひとに任 せない ）
     139
     

     View Slide

140.  
     【スキルの外 部 化】
     どんな職 種 で も、自分のスキルを可 視 化すると
     周囲の人を巻き込める。
      
     【 価 値 観の共 有 】
     協 働のためのプロトコルをつくる。その案 件に
     必 要な価 値 観を、阿 吽にせ ず 言 葉にしよう。
     140
     

     View Slide

141. 仕 様 書から、プリンシプル へ
     Pr i nc i ple
     原 理・主 義・信 条
     S pec i f ic a t ion s hee t
     規 格・性 能・機 能
     →
     141
     

     View Slide

142. スペックシートは制作、コンセプトは企 画 。
     両 方をつなげるスキルが求められ ている。
     142
     

     View Slide

143. コンセプト ＝ 思 想を持とう。
     143
     

     View Slide

144. つまり
     144
     

     View Slide

145.  
     「 そ の 案 件 の 価 値 の 拠 り 所 は？ 」
     Va lue proposition
     145
     

     View Slide

146. はっきり答えが出ることなんてない。
     。
     。
     146
     

     View Slide

147. 問いを立 てるのはこわい。
     147
     

     View Slide

148. 孤 独。
     148
     

     View Slide

149. View Slide

150. 仕 様・標 準が 存 在 するのはウェブの良いところ
     （ 評 価がしやすい）
     150
     

     View Slide

151. ただし、
     151
     

     View Slide

152. Va l id a t ion の 結 果 ／ UI の 精 緻 さ ／ 工 数 見 積 ／ ビ
     ジュアル の 訴 求 力 ／ 技 術 的 負 債 のないコード et c ...
     ↓
     品質のひとつの面 でしかない
     152
     

     View Slide

153. De s i g n
     Web De s i g n
     ウェブ サイトの外 側から、ウェブを見 てみる
     153
     

     View Slide

154. べき論 や手 法に依 存して
     思 考 停 止にならず、
     ユーザーが 得られるストーリーを基 準に
     考え続けるプロセスが大 事
     154
     

     View Slide

155. 「 サイトがあればいい」
     という時 代 ではない
     155
     

     View Slide

156. サイト構 築は手 段
     156
     

     View Slide

157. 「 共 通 言 語 」からア イデ ア や コン セプトは つくられ ていく－松 倉 早 星 イン タビュー（ 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
     

     View Slide

158. 何かひとつクリエイティブで 課 題を解 決しても、プランナーなのでそこの奥にある課 題が
     見えちゃったりします。本当はそこも手をつけたい！ でも、依 頼としてはすでに終わって
     いるので「お 疲れ 様 でした！」で 終わってたんで す……。でも、どうしても言わずにはい
     れなくなって、伝え出したのが去 年あたりからで す。
     「言われるまで 気づきませんでした」
     としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感
     じました。
     一過性のもので人の行動とか価 値 観、さらには人生観を変えることはできないけれど、丁
     寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。
     リサ ー チとプ ラン ニン グ にしっかり向き 合 える会 社 を つくりた い－松 倉 早 星 イン タビュー（ 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
     

     View Slide

159. 何かひとつクリエイティブで 課 題を解 決しても、プランナーなのでそこの奥にある課 題が
     見えちゃったりします。本当はそこも手をつけたい！ でも、依 頼としてはす でに終わって
     いるので「お 疲れ 様 でした！」で 終わってたんで す……。でも、どうしても言わずにはい
     れなくなって、伝え出したのが去 年あたりからで す。
     「言われるまで 気づきませんでした」
     としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感
     じました。
     一過性のもので人の行動とか価 値 観、さらには人生観を変えることはできないけれど、丁
     寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。
     リサ ー チとプ ラン ニン グ にしっかり向き 合 える会 社 を つくりた い－松 倉 早 星 イン タビュー（ 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
     

     View Slide

160. “ デザインがはじまる前 ” を整 理 する。
     リサ ー チとプ ラン ニン グ にしっかり向き 合 える会 社 を つくりた い－松 倉 早 星 イン タビュー（ 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
     

     View Slide

161. エンジニアも、ディレクターも、フルスタックでも
     デザインしよう
     161
     

     View Slide

162. （デザイナーは、他の世 界も見 てみよう）
     162
     

     View Slide

163. 難しく考えないで 、
     できることからやってみる
     （  力みすぎ て、私もよく失 敗しています・・・。 ）
     163
     

     View Slide

164. あるべきところに
     見出しをつける
     コミュニケーションツールを
     工夫
     現場に足を運んでみる
     CMS の選定をする
     ユーザーだけでなく、
     クライアントの立場に
     なってみる
     ランチに
     出かけてみる
     カンプか、モックアップか？
     それとも…。
     サイトの課題について
     言葉でゆっくり話し合ってみる
     コンセプトを練り上げる
     スケジュールに改善サイクルを組み込む
     仕様をみんなで
     再考する
     マークアップできる
     デザインか考えてみる
     メインビジュアルを
     撮り下ろしてみる
     プロダクトの言葉遣いを
     定義してみる
     164
     

     View Slide

165. ほんのすこしでも
     巻き込んでいくことが、次につながる
     作っておわりではない、持 続 可 能 性の高い生き方 。
     協 働 するデ ザインは、継 続を前 提にしたデ ザイン。
     165
     

     View Slide

166. （ しんどいのは自分たちの代 で 終わりにしたい。
      ）
     166
     

     View Slide

167. 他 者をひらくには、まず自分から。
     無 理にまわりを変えようとせず 、自分が 変わる。
     167
     

     View Slide

168. 自分を可 視 化することからはじめよう。
     相互 乗り入れをしてみよう。
     168
     

     View Slide

169. デザインは、デザイナーに
     任 せるには重 要 すぎる
     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
     

     View Slide

170. もうひとつ。
     170
     

     View Slide

171. Science of design
     He r b e r t A . S i m o n
     171
     

     View Slide

172. デザインとは、
     現 状を少しでも望ましいものに
     変えようとするための、
     一 連の行 為
     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
     

     View Slide

173. 「デザインは自分のもの」
     ［ 本日お 持ち帰りいただくこと ］
     173
     

     View Slide

174. 共 感力 ─
     自分ごとにするスキル
     ［ 本日お 持ち帰りいただくこと ］
     Empathy
     174
     

     View Slide

175. “ 制作 ” から “デザイン” へ
     175
     

     View Slide

176. Open!
     design !
     176
     

     View Slide

177. design !
     enjoy,
     177
     

     View Slide

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

     View Slide

179. 雑っぴ んぐ 　 ダーティプロトタイプ
     ロイヤルカスタマー 二 郎 # 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 -
     

     View Slide