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

by sekig

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

はじめまして、 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ですが、 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

自己紹介 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

コンテンツファースト 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

さて。 17

Slide 18

Slide 18 text

疑問。 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

? 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Da t a ≠ Con t en t 私が考える「コンテンツ」の定義 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

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

Slide 36

Slide 36 text

情報知識ータ知 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

情報知識ータ知 38

Slide 39

Slide 39 text

情報知識ータ知編集・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

Slide 40

Slide 40 text

データ情報知恵体験知識編集・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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

編集 i s 何？ ① 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

デザイン i s 何？ ② 50

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

体験 i s 何？ ③ 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

“ コンテンツの前後には、編集・デザイン・体験がある意図をもった情報の加工 … … … 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

編集・デザイン 74

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

!! 81

Slide 82

Slide 82 text

編集と U X はつながる 82

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

本日のテーマおさらい 92

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

コンテンツのデザイン＝データのデザイン “ データに「人間的なかたちを与えること」が、これからのデザイナーの役割だ ” 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

Slide 95

Slide 95 text

では、 95

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

ウェブを取り巻く状況 97

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

ウェブのこれから 103

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

Slide 107

Slide 107 text

107

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

つまり

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

事例を見てみる 117

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

Slide 130

Slide 130 text

130

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

ある日のイントラ “ 謎の 問題 ” 135

Slide 136

Slide 136 text

ある日のイントラ “ 謎の 問題 ” 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

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

Slide 142

Slide 142 text

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

142

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

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

難しく考えないで、できることからやってみる 157

Slide 158

Slide 158 text

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