Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sekig
September 16, 2017

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

sekig

September 16, 2017
Tweet

More Decks by sekig

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 自己紹 介
    3

    View full-size slide

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

    View full-size slide

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

    ウェブサイトを中心としたデザイン … 6 年目
    5

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. みんなでデザイン、あなたもデザイン
    [ 今日のお 題 ]
    10

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. とつ ぜ んで すが
    13

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  16. ( 脊 髄 反 射 でした。

    若かった。
    18

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  24. [  たとえば、デ ザイナーの思 考 法とは?]

    デ ザイナー迷 言あるある
    ビ ジ ネ ス や デ ザ イ ン 思 考 の 文 脈 で 使 わ れ る 言 葉 に あ て は め て み る
    28

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  31. 「デザインの外 部 化」

    フレームワーク化・手 法 化
    35

    View full-size slide

  32. 【  おす すめ書 籍  】
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  37. [ 環 境の変 化]
    42

    View full-size slide

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

    View full-size slide

  39. Mu lti Touch Point
    マルチ


    ッチポイン

    コ ン テ ン ツ へ の 接 触 点 は 媒 体 か ら 独 立 し は じ め て い る 。 ユ ー ザ ー を 流 入 さ せ る の で は な く コ ン テ ン ツ を 拡 散 さ せ る 考 え 方
    44

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  42. [ 工 程の変 化]
    47

    View full-size slide

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

    View full-size slide

  44. 計画
    設計
    テスト
    分析
    評価
    実装
    (初期計画)
    (リリース)
    49

    View full-size slide

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

    View full-size slide

  46. 調 査 / 分 析 / 評 価 / 設 計
    51

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  52. [ 職 能の変 化]
    57

    View full-size slide

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

    View full-size slide

  54. 肩 書きの多様 化 = 観 点の多様 化
    59

    View full-size slide

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

    View full-size slide


  56. [ 環 境の変 化]

    [ 工 程の変 化]

    [ 職 能の変 化]
    61

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. (  わかる。

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

    View full-size slide

  69. フレンド・ファウンディング
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  73. [ 実 例 ]
    79

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. デザインとは、

    (ストーリー/ 物 語をつくる)設 計 だ。
    デ ザインとはスキンづくりのことではない。定 性的な設 計 行 為であり、肩 書きではなく、

    「ものの見 方 」。
    95

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. (  ちょっと厳しい予感・・・)
    103

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide














  106. Problem
    116

    View full-size slide

  107. 調 査
     ↓
    設 計・計 画


    プロトタイピング


    実 装
     ↓
    評 価
    117

    View full-size slide

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

    View full-size slide

  109. (なぜ やったか)
    119

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  112. デザインをひらく

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  116. しかし
    126

    View full-size slide

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

    View full-size slide

  118. (     )
     目の前のお 客さんの顔が明るくならない…
    128

    View full-size slide

  119. つらかった・・・
    129

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  127. デザインをひらく
    137

    View full-size slide

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

    View full-size slide


  129. ( デザインをひとに任 せない )
    139

    View full-size slide


  130. 【スキルの外 部 化】
    どんな職 種 で も、自分のスキルを可 視 化すると
    周囲の人を巻き込める。

    【 価 値 観の共 有 】
    協 働のためのプロトコルをつくる。その案 件に
    必 要な価 値 観を、阿 吽にせ ず 言 葉にしよう。
    140

    View full-size slide

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

    141

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  134. つまり
    144

    View full-size slide


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

    View full-size slide

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


    146

    View full-size slide

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

    View full-size slide

  138. 孤 独。
    148

    View full-size slide

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

    View full-size slide

  140. ただし、
    151

    View full-size slide

  141. Va l id a t ion の 結 果 / UI の 精 緻 さ / 工 数 見 積 / ビ
    ジュアル の 訴 求 力 / 技 術 的 負 債 のないコード et c ...

    品質のひとつの面 でしかない
    152

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  145. サイト構 築は手 段
    156

    View full-size slide

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

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

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

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

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

    View full-size slide

  151. (デザイナーは、他の世 界も見 てみよう)
    162

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  155. ( しんどいのは自分たちの代 で 終わりにしたい。
     )
    166

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  159. もうひとつ。
    170

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  165. Open!
    design !
    176

    View full-size slide

  166. design !
    enjoy,
    177

    View full-size slide

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

    View full-size slide

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