コンテンツのデザインとウェブデザイナーにできること

WCAN2017で発表したスライドです。

WCAN 2017 Summer | WCAN 名古屋近郊のイベント情報
https://wcan.jp/event/2017summer/

Transcript

1. 関口 裕
   WCAN 2017 Summer
   コンテンツのデザインと
   ウェブデザイナーにできること
   Web designers will design CONTENT
   1
   

   View Slide

2. はじめまして、
   2
   

   View Slide

3. 私は、デザイナーで す。
   3
   

   View Slide

4. で すが、
   4
   

   View Slide

5. 今日は、コンテンツの話をします。
   5
   

   View Slide

6. 自己 紹 介
   6
   

   View Slide

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

   View Slide

8. アートディレクター／デザイナー、株式会社コンセント所属。 静岡文化芸術大学でプロダクトデザインを修める。2006 年（株）
   アレフ・ゼロ（現・コンセント）入社。雑誌デザインを中心に書籍や広報誌など紙媒体のデザインに携わった後、大規模・中
   規模のコーポレートサイトやブランドサイトなどをはじめとしたデジタルメディアのデザインに従事。設計の上流工程からグラ
   フィックのフィニッシュワークまで、幅広く関わりデザインを手掛ける。現在はモジュール型デザイン開発とシステムの関係、コ
   ンテンツとデザインの関係について模索中。メディアや規模感の違う案件を同時に進めるのが好き。最近、紙の仕事が恋しい。
   雑 誌 や 広 報 誌、書 籍のデザイン … 5 年
   ウェブ サイトを中心としたデザイン … 6 年目
   8
   

   View Slide

9. View Slide

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

    View Slide

11. コンテンツファースト 4 5 年！
    株 式 会 社コンセント
    11
    

    View Slide

12. コンテンツファースト 4 5 年！
    S e r v i c e
    De s i g n
    E d i t o r i a l
    De s i g n
    We b
    De s i g n
    12
    

    View Slide

13. 基 本 的な Web IA 設 計フロー
    ［ 調 査・分 析 ］
    ユーザー
    コンテンツ コンテキスト
    ［ コンセプト定 義 ］
    ユ
    ー
    ザ
    ー
    体
    験
    の
    方
    針
    ［ 情 報 設 計 ］
    画
    面
    設
    計
    サイト
    ストラクチャ
    ナビゲーション
    ラベ ル
    H A S E G AWA , A t s u s h i , P h . D.
    13
    

    View Slide

14. ユーザー
    コンテンツ コンテキスト
    ［ 調 査・分 析 ］ ［ コンセプト
    ユ
    ー
    ザ
    ー
    体
    験
    の
    方
    針
    14
    

    View Slide

15. ユーザー
    コンテキスト
    コンテンツ
    ?
    15
    

    View Slide

16. 「コンテンツ」
    ってなんだっけ？
    今日のお 話
    16
    

    View Slide

17. さて。
    17
    

    View Slide

18. 疑 問 。
    18
    

    View Slide

19. ウェブ的な
    「コンテンツ」
    の定 義とは
    ※ウェブ＝ウェブ サイト
    19
    

    View Slide

20. ウェブ = プログラム + データ
    20
    

    View Slide

21. ウェブ = プログラム + データ
    コンテンツ
    ウェブ的な
    「コンテンツ」
    の定 義
    21
    

    View Slide

22. < p > の中 身 や 画 像ファイル
    たとえば 、
    など。
    ウェブ的な
    「コンテンツ」
    の定 義
    22
    

    View Slide

23. ?
    23
    

    View Slide

24. 違う。
    なんか すげ ーちがう。
    24
    

    View Slide

25. Na t h a n S h e d r o ff
    「 理 解の概 念 図」
    The Understanding Spectrum
    25
    

    View Slide

26. ［データ］を編 集 することよって［ 情 報 ］としての価 値を持 たせ 、
    ユーザーが 体 験 することで［ 知 識 ］となり、さらには［ 知 恵 ］にまで 昇 華される
    データ 情 報 知 識 知 恵
    制 作 者
    ユーザー
    体 験
    コンテキスト
    「 理 解 の概 念 図 」
    26
    

    View Slide

27. ウェブ的な
    「コンテンツ」
    の定 義
    < p > の中 身 や 画 像ファイル
    たとえば 、
    など。
    27
    

    View Slide

28. < p > の中 身 や 画 像ファイル
    たとえば 、
    など。
    私が 考える
    「コンテンツ」
    の定 義
    28
    

    View Slide

29. データ 情 報 知 識 知 恵
    制 作 者
    ユーザー
    体 験
    コンテキスト
    < p> < i m g >
    e t c .
    29
    

    View Slide

30. Da t a ≠ Con t en t
    私が 考える
    「コンテンツ」
    の定 義
    30
    

    View Slide

31. コンテンツはどこにあるのか？
    では、
    31
    

    View Slide

32. 考えてみた。
    32
    

    View Slide

33. データ 情 報 知 識 知 恵
    制 作 者
    ユーザー
    体 験
    コンテキスト
    このあたり…？
    33
    

    View Slide

34. 情 報 知 識
    ータ 知
    ユーザー
    コンテキスト
    34
    

    View Slide

35. In f or m a t i on と
    Kno w l e d ge の間にあるもの
    私が 考える
    「コンテンツ」
    の定 義
    35
    

    View Slide

36. 情 報 知 識
    ータ 知
    36
    

    View Slide

37. それぞ れ の間には 何がある？
    37
    

    View Slide

38. 情 報 知 識
    ータ 知
    38
    

    View Slide

39. 情 報 知 識
    ータ 知
    編 集・IA デ ザイン
    ※ I A - In f o r m a t i o n A r c h i t e ct u r e
    39
    

    View Slide

40. データ 情 報 知 恵
    体 験
    知 識
    編 集・IA デ ザイン
    ※ I A - In f o r m a t i o n A r c h i t e ct u r e
    40
    

    View Slide

41. コンテンツの前 後には、
    編 集・デ ザ イン・体 験 がある
    41
    

    View Slide

42. ①
    編
    集
    ②
    デ
    ザ
    イ
    ン
    ③
    体
    験
    42
    

    View Slide

43. ①
    編
    集
    ②
    デ
    ザ
    イ
    ン
    ③
    体
    験
    43
    

    View Slide

44. 編 集 i s 何？
    ①
    44
    

    View Slide

45. 編 集とは
    書物（書籍や雑誌）
    ・文章・映画、などの仕分け素材を、
    取捨選択、構成、配置、関連づけ、調整、などすることである。
    編 集 - Wik ip e dia
    45
    

    View Slide

46. 情 報を適 切に
    加 工・整 形 すること
    編 集とは
    ①
    46
    

    View Slide

47. 編 集 ＝ この辺 のもろもろ
    47
    

    View Slide

48. 情 報を、
    意図をもって
    加 工・整 形 すること
    編 集とは
    ①
    48
    

    View Slide

49. ①
    編
    集
    ②
    デ
    ザ
    イ
    ン
    ③
    体
    験
    49
    

    View Slide

50. デ ザ イン i s 何？
    ②
    50
    

    View Slide

51. デ ザ インとは
    デザインとは、現状を少しでも
    望ましいものに変えようとするための一連の行為
    He r b e r t A . S i m o n
    51
    

    View Slide

52. m a k e b e t t e r m a k e b e t t e r
    「コミュニケーションそのもの」
    私の考えるデ ザ イン
    52
    

    View Slide

53. よりよい姿を求めて
    コミュニケーションすること
    デ ザ インとは
    ②
    53
    

    View Slide

54. ①
    編
    集
    ②
    デ
    ザ
    イ
    ン
    ③
    体
    験
    54
    

    View Slide

55. 体 験 i s 何？
    ③
    55
    

    View Slide

56. ユーザーエクスペリエンスデザインは、ユーザーエクスペリエンスについてのエク
    スペリエンスデザインである。デジタル機器／システムに対するユーザーの見方に
    影響を与えるようなアーキテクチャやインタラクションモデルの生成に関する手法
    である。
    「製品とユーザーのインタラクションのあらゆる面、すなわちどのように気
    づかれ、学ばれ、使われるのか」をその適用範囲とする。 ユー ザーエクス ペリエンスデ ザイン - Wikipedia
    U X とは
    56
    

    View Slide

57. U X ＝ この辺 のもろもろ
    57
    

    View Slide

58. （ U X デ ザ インっていろいろあるみたいだけど… ）
    手 法はデ ザ イナーの思 考を外 部 化したもの。
    す べ てはユーザーのよりよい 体 験 のためにある。
    「 U X は手 法 ではなく目的 」
    58
    

    View Slide

59. 目指 す べき
    よりよい 状 態・ゴール
    体 験とは
    ③
    59
    

    View Slide

60. つまり
    60
    

    View Slide

61. コンテンツの前 後には、
    編 集・デ ザ イン・体 験 がある
    61
    

    View Slide

62. “ コンテンツの前 後には、
    編 集・デ ザ イン・体 験 がある
    … … …
    62
    

    View Slide

63. “ コンテンツの前 後には、
    編 集・デ ザ イン・体 験 がある
    意
    図
    を
    も
    っ
    た
    情
    報
    の
    加
    工
    … … …
    63
    

    View Slide

64. “ コンテンツの前 後には、
    編 集・デ ザ イン・体 験 がある
    意
    図
    を
    も
    っ
    た
    情
    報
    の
    加
    工
    …
    よ
    り
    良
    い
    姿
    を
    求
    め
    る
    コ
    ミ
    ュ
    ニ
    ケ
    ー
    シ
    ョ
    ン
    … …
    64
    

    View Slide

65. “ コンテンツの前 後には、
    編 集・デ ザ イン・体 験 がある
    意
    図
    を
    も
    っ
    た
    情
    報
    の
    加
    工
    …
    よ
    り
    良
    い
    姿
    を
    求
    め
    る
    コ
    ミ
    ュ
    ニ
    ケ
    ー
    シ
    ョ
    ン
    …
    目
    指
    す
    べ
    き
    状
    態
    …
    65
    

    View Slide

66. 私が 考える
    「コンテンツ」
    の定 義
    66
    

    View Slide

67. ユーザー視 点 で
    データや 情 報を意図をもって加 工し、
    よりよい 形に落とし込 んだもの。
    私が 考える
    「コンテンツ」
    の定 義
    67
    

    View Slide

68. ユーザー視 点 で
    編 集・デ ザ インされ た、
    データや 情 報
    私が 考える
    「コンテンツ」
    の定 義
    68
    

    View Slide

69. ウェブ = プログラム + データ
    69
    

    View Slide

70. グラム + データ
    70
    

    View Slide

71. グラム + データ
    ＋
    編 集 デ ザ イン
    体 験
    71
    

    View Slide

72. !
    72
    

    View Slide

73. ユーザー視 点 で
    編 集・デ ザ インされ た、
    データや 情 報
    私が 考える
    「コンテンツ」
    の定 義
    73
    

    View Slide

74. 編 集・デ ザ イン
    74
    

    View Slide

75. E d i t or i a l & De s i g n
    ［ 編 集 ］ ［デ ザ イン］
    75
    

    View Slide

76. E d i t or i a l De s i g n
    76
    

    View Slide

77. E d i t or i a l De s i g n
    コンテンツを適 切に加 工・整 形 するデ ザ イン。
    77
    

    View Slide

78. （ エディトリアル デ ザ イン ≠ 紙のデ ザ イン ）
    78
    

    View Slide

79. E d i t or i a l De s i g n
    f or Us er E x per i ence
    ［ 編 集 ］
    ［ 体 験 ］
    ［デ ザ イン］
    79
    

    View Slide

80. E d i t or i a l De s i g n
    U X De s i g n
    80
    

    View Slide

81. !!
    81
    

    View Slide

82. 編 集と U X はつながる
    82
    

    View Slide

83. 編
    集
    デ
    ザ
    イ
    ン
    コ
    ン
    テ
    ン
    ツ
    の
    デ
    ザ
    イ
    ン
    体
    験
    デ
    ザ
    イ
    ン
    ＝ ＝
    83
    

    View Slide

84. 「コンテンツ」
    はデザインするもの
    84
    

    View Slide

85. 大 事 な こ と な の で も う 一 回 言 い ま す
    85
    

    View Slide

86. View Slide

87. ［ ウェブデ ザイナーあるある ］
    87
    

    View Slide

88. コンテンツを流し込 む
    どんなコンテンツで も収まる
    コンポーネントにうっとり
    デ ザ インをアテる
    88
    

    View Slide

89. コンテンツを流し込 む
    どんなコンテンツで も収まる
    コンポーネントにうっとり
    デ ザ インをアテる
    89
    

    View Slide

90. De s i g n
    Web De s i g n
    90
    

    View Slide

91. ウェブ ペ ージ を デ ザイン する
    だけ で なく、
    もっと 本 質 的 な デ ザイン が 必 要 。
    91
    

    View Slide

92. 本日のテーマおさらい
    92
    

    View Slide

93. コンテンツのデザインと
    ウェブデザイナーにできること
    93
    

    View Slide

94. コ ン テ ン ツ の デ ザ イ ン ＝ デ ー タ の デ ザ イ ン
    “ デ ー タに
    「 人 間 的 な か た ち を 与 え ること 」 が 、これ からの デ ザ イナ ー の 役 割 だ ”
    Design of data
    Ma r k Ro l s t o n - a r g o d e s i g n L LC .
    94
    

    View Slide

95. では、
    95
    

    View Slide

96. ウェブデザイナーに
    できることとは？
    96
    

    View Slide

97. ウェブを取り巻く状 況
    97
    

    View Slide

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

    View Slide

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

    View Slide

100. Design System
     デザインのシステム化
     コ ン ポ ー ネ ン ト の 考 え 方 に よ る 、 維 持 管 理 の で き る デ ザ イ ン の 必 要 性
     100
     

     View Slide

101. Gover na nce
     ウェブ デ ザ イ ナ ー に 求 め ら れ る こ と
     （ 統治すること。
     そのあらゆるプロセス ）
     ガバナンス
     101
     

     View Slide

102. デザインのルール設計
     ＝
     ガバナンス
     ウェブ デ ザ イ ナ ー に 求 め ら れ る こ と
     102
     

     View Slide

103. ウェブのこれ から
     103
     

     View Slide

104. Instagram や Airbnb などの UI デザインに見る新しいトレンド | UX MILK
     http: //uxmilk.jp/48364
     余分なものが削ぎ落とされていく
     イ
     ンターフ
     ェイ
     ス
     104
     

     View Slide

105. The Future of Mobile Content: Facebook Instant Articles vs. Google AMP
     http: // w w w.business2communit y.com /brandviews/upwork /f uture-mobile-content-facebook-instant-articles-vs-google-amp-01589166#E86CER x0y6r vcIQt.97
     コ
     ンテンツはひと
     りでに出歩く
     よ
     う
     になった
     105
     

     View Slide

106. Content is King
     By Bill Gates 1996
     コンテンツ
     ・イズ
     ・キング
     © 2001 Microsoft C orp ora tion. Al l rights reser ved . Term s of Use 106
     

     View Slide

107. View Slide

108. 裸 に な っ て い く コ ン テ ン ツ
     108
     

     View Slide

109. ウェブは枯れていく
     技 術 の 進 歩 で 表 現 は 枯 れ て い く 。 印 刷 媒 体 の よ う に 、 枯 れ た メ デ ィ ア に 向 か っ て い る
     109
     

     View Slide

110. 枯れた技術の水平思考
     横 井 軍 平
     任 天 堂 1 9 4 1 – 1 9 9 7
     「最先端ではないが、すでに広く使われてノウハウも固まり不具合も出し尽くして安定して使える技術」
     をうまく使い、
     「今まで無かった使い道を考える」
     という考え方、
     視点のこと。
     「枯れたメディア」
     こそ本質的なデザインが必要なのでは。
     

     View Slide

111. つまり
     

     View Slide

112. 編集デザインの腕の見せ所
     

     View Slide

113. より本質的な “ 設計 ” が求められている
     デ ザ イ ン と は 設 計 だ 。 H T M L 仕 様 の 外 に ま で 想 像 力 を 伸 ば し て み よ う 。
     

     View Slide

114. 最後まで残るのは
     文字情報
     

     View Slide

115. 最後まで残るのは
      編集とタイポグラフ
     ィ
     

     View Slide

116. Typography is King
     Content is King, in other words,
     タ
     イ
     ポグラフ
     ィ
     ・イズ
     ・キング
     116
     

     View Slide

117. 事 例を見 てみる
     117
     

     View Slide

118. 新潮社
     h t t p : / / w w w. s h i n c h o s h a . c o . j p
     デザイン
     担当
     しました
     118
     

     View Slide

119. View Slide

120. View Slide

121. View Slide

122. < p>
     

     View Slide

123. View Slide

124. テキストが
     スペック的なデータにしか
     見えてこない
     

     View Slide

125. 体 験に
     コンテキストが 生まれ 、
     データがストーリーとして
     見えてくる
     < p>
     

     View Slide

126. とある雑誌の例
     ※ こ れ は 作 例 で す
     126
     

     View Slide

127. View Slide

128. View Slide

129. < p>
     

     View Slide

130. < p>
     130
     

     View Slide

131. View Slide

132. 読 むモチ ベーションが
     上がりにくい
     

     View Slide

133. ありきたりな
     テーマの中に
     独自の切り口があることを
     匂わ せる
     < p>
     

     View Slide

134. “ < h n > になれなかった < p > 問 題 ”
     134
     

     View Slide

135. あ る 日 の
     イ ン ト ラ
     “ 謎 の < p > 問 題 ”
     135
     

     View Slide

136. あ る 日 の
     イ ン ト ラ
     “ 謎 の < p > 問 題 ”
     136
     

     View Slide

137. あ る 日 の
     イ ン ト ラ
     “ 謎 の < p > 問 題 ”
     137
     

     View Slide

138. あ る 日 の
     イ ン ト ラ
     “ 謎 の < p > 問 題 ”
     138
     

     View Slide

139. あ る 日 の
     イ ン ト ラ
     “ 謎 の < p > 問 題 ”
     139
     

     View Slide

140. 構 造を示 す 見出し
     と
     内 容を表 す 見出し
     140
     

     View Slide

141. 文
     中
     見
     出
     し
     小
     見
     出
     し
     キ
     ャ
     ッ
     チ
     シ
     ョ
     ル
     ダ
     ー
     タ
     ラ
     シ
     ボ
     デ
     ィ
     リ
     ー
     ド
     キ
     ャ
     プ
     シ
     ョ
     ン
     注
     釈
     脚
     注
     141
     

     View Slide

142. 文
     中
     見
     出
     し
     小
     見
     出
     し
     キ
     ャ
     ッ
     チ
     シ
     ョ
     ル
     ダ
     ー
     タ
     ラ
     シ
     ボ
     デ
     ィ
     リ
     ー
     ド
     キ
     ャ
     プ
     シ
     ョ
     ン
     注
     釈
     脚
     注
     
     142
     

     View Slide

143. マシンリーダビリティ
     ヒューマンリーダビリティ
     ≠
     143
     

     View Slide

144. コンテンツを
     よりよい 体 験にするために
     もっとできることがある
     144
     

     View Slide

145. View Slide

146. 「あるべきところに見出しがある」
     内容のサマリをきちんと置く
     146
     

     View Slide

147. View Slide

148. 「 構 造と意 味のバランスをとる」
     はあくまで も
     文 書 構 造のためのもの
     のほうが
     意 味としては重 要
     強 調 度 合 いのチューニング
     148
     

     View Slide

149. まとめ
     149
     

     View Slide

150. 仕 様・標 準が 存 在 するのは
     ウェブの良いところ
     150
     

     View Slide

151. ただし、
     151
     

     View Slide

152. べき論 や 手 法に依 存して
     思 考 停 止にならず、
     ユーザーが 得られる体 験を基 準に
     考え 続けることが 大 事
     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. 難しく考えないで 、
     できることからやってみる
     157
     

     View Slide

158. あるべきところに
     見出しをつける
     見出しの階層関係を
     整理する
     内容に合わせた
     フォーマット設計
     CMS の設計を
     コンテンツ基準に
     ユーザーだけでなく、
     クライアントの立場に
     なってみる
     取材・編集工程を
     設けてみる
     コンテンツインベントリを
     作って棚卸し
     ヒアリング（インタビュー）を
     いつもの倍やってみる
     コンポーネント志向で
     コンテンツ表現の幅を担保する
     バリュープロポジションについて
     よく考えてみる
     コンセプトを
     もっと明快に
     サイトの外まで
     UX 定義を広げる
     ビジュアルの
     ディレクション
     文章のスタイルガイド
     （ライティングポリシー）
     を定義
     158
     

     View Slide

159. コンテンツ開 発も
     デ ザ インの一 部 。
     159
     

     View Slide

160. デ ザインそのものもコンテンツ
     160
     

     View Slide

161. 提 供 価 値を
     「 サイト構 築 」から
     本 質 的な「 課 題 解 決 」に
     161
     

     View Slide

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

     View Slide

163. enjoy,
     editorial !
     163
     

     View Slide

164. enjoy,
     design !
     164
     

     View Slide

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

     View Slide

166. 好評
     発売中！
     

     View Slide

167. View Slide