Tweet
Tweet

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

9

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

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

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

データ 情 報 知 識 知 恵 制 作 者 ユーザー 体 験 コンテキスト < p> < i m g > 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

86

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

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

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

< p>

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

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

< p>

Slide 130

Slide 130 text

< p> 130

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

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

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

enjoy, editorial ! 163

Slide 164

Slide 164 text

enjoy, design ! 164

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

好評 発売中！

Slide 167

Slide 167 text

No content