Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コンテンツのデザインとウェブデザイナーにできること
Search
sekig
July 14, 2017
Design
27
6.5k
コンテンツのデザインとウェブデザイナーにできること
WCAN2017で発表したスライドです。
WCAN 2017 Summer | WCAN 名古屋近郊のイベント情報
https://wcan.jp/event/2017summer/
sekig
July 14, 2017
Tweet
Share
More Decks by sekig
See All by sekig
らしさと向き合う - SmartHR Brand-Comm Unit
sekiguchiy
2
950
わたしのテック - DORP INSPIRATION 2020
sekiguchiy
3
850
なんでディレクターやってるの? 〜 思い描いていた自分を思い出すために。vol. 3|2019.3.8
sekiguchiy
6
3.6k
キャラばれのすすめ
sekiguchiy
5
960
情報設計は誰のものか?
sekiguchiy
12
2.8k
みんなでデザイン、あなたもデザイン
sekiguchiy
44
13k
エディトリアルとウェブ、コンテンツファーストでつながるビジュアルドリブン
sekiguchiy
3
460
ウェブ・エディトリアルのすゝめ
sekiguchiy
13
1.8k
コーディングなんかこわくない! アレルギー克服講座
sekiguchiy
8
28k
Other Decks in Design
See All in Design
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
410
231206_Book-launch-event_kato
hjmkth
2
1.2k
Portfolio 2023.07.28
helemarudesu
0
610
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
240
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
5.1k
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
0
140
Breaking News on the Web
souvikdg
0
110
TrollsTopia: Funtography- Part 1
kenijam
1
220
Sensitive Texter Storyboard
ctagulao98
0
110
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
660
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
140
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
620
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
23
1.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
A Philosophy of Restraint
colly
197
16k
Building Your Own Lightsaber
phodgson
100
5.7k
Happy Clients
brianwarren
92
6.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
A Tale of Four Properties
chriscoyier
153
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Transcript
関口 裕 WCAN 2017 Summer コンテンツのデザインと ウェブデザイナーにできること Web designers will
design CONTENT 1
はじめまして、 2
私は、デザイナーで す。 3
で すが、 4
今日は、コンテンツの話をします。 5
自己 紹 介 6
関口 裕 ( せきぐち・ゆたか ) D E S I G
N E R 7
アートディレクター/デザイナー、株式会社コンセント所属。 静岡文化芸術大学でプロダクトデザインを修める。2006 年(株) アレフ・ゼロ(現・コンセント)入社。雑誌デザインを中心に書籍や広報誌など紙媒体のデザインに携わった後、大規模・中 規模のコーポレートサイトやブランドサイトなどをはじめとしたデジタルメディアのデザインに従事。設計の上流工程からグラ フィックのフィニッシュワークまで、幅広く関わりデザインを手掛ける。現在はモジュール型デザイン開発とシステムの関係、コ ンテンツとデザインの関係について模索中。メディアや規模感の違う案件を同時に進めるのが好き。最近、紙の仕事が恋しい。 雑 誌 や
広 報 誌、書 籍のデザイン … 5 年 ウェブ サイトを中心としたデザイン … 6 年目 8
9
h ttp://w w w.hanarenohey a.c om 10
コンテンツファースト 4 5 年! 株 式 会 社コンセント 11
コンテンツファースト 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
基 本 的な Web IA 設 計フロー [ 調 査・分
析 ] ユーザー コンテンツ コンテキスト [ コンセプト定 義 ] ユ ー ザ ー 体 験 の 方 針 [ 情 報 設 計 ] 画 面 設 計 サイト ストラクチャ ナビゲーション ラベ ル H A S E G AWA , A t s u s h i , P h . D. 13
ユーザー コンテンツ コンテキスト [ 調 査・分 析 ] [ コンセプト
ユ ー ザ ー 体 験 の 方 針 14
ユーザー コンテキスト コンテンツ ? 15
「コンテンツ」 ってなんだっけ? 今日のお 話 16
さて。 17
疑 問 。 18
ウェブ的な 「コンテンツ」 の定 義とは ※ウェブ=ウェブ サイト 19
ウェブ = プログラム + データ 20
ウェブ = プログラム + データ コンテンツ ウェブ的な 「コンテンツ」 の定 義
21
< p > の中 身 や 画 像ファイル たとえば 、
など。 ウェブ的な 「コンテンツ」 の定 義 22
? 23
違う。 なんか すげ ーちがう。 24
Na t h a n S h e d r
o ff 「 理 解の概 念 図」 The Understanding Spectrum 25
[データ]を編 集 することよって[ 情 報 ]としての価 値を持 たせ 、 ユーザーが
体 験 することで[ 知 識 ]となり、さらには[ 知 恵 ]にまで 昇 華される データ 情 報 知 識 知 恵 制 作 者 ユーザー 体 験 コンテキスト 「 理 解 の概 念 図 」 26
ウェブ的な 「コンテンツ」 の定 義 < p > の中 身 や
画 像ファイル たとえば 、 など。 27
< p > の中 身 や 画 像ファイル たとえば 、
など。 私が 考える 「コンテンツ」 の定 義 28
データ 情 報 知 識 知 恵 制 作 者
ユーザー 体 験 コンテキスト < p> < i m g > e t c . 29
Da t a ≠ Con t en t 私が 考える
「コンテンツ」 の定 義 30
コンテンツはどこにあるのか? では、 31
考えてみた。 32
データ 情 報 知 識 知 恵 制 作 者
ユーザー 体 験 コンテキスト このあたり…? 33
情 報 知 識 ータ 知 ユーザー コンテキスト 34
In f or m a t i on と Kno
w l e d ge の間にあるもの 私が 考える 「コンテンツ」 の定 義 35
情 報 知 識 ータ 知 36
それぞ れ の間には 何がある? 37
情 報 知 識 ータ 知 38
情 報 知 識 ータ 知 編 集・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
データ 情 報 知 恵 体 験 知 識 編
集・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
コンテンツの前 後には、 編 集・デ ザ イン・体 験 がある 41
① 編 集 ② デ ザ イ ン ③ 体
験 42
① 編 集 ② デ ザ イ ン ③ 体
験 43
編 集 i s 何? ① 44
編 集とは 書物(書籍や雑誌) ・文章・映画、などの仕分け素材を、 取捨選択、構成、配置、関連づけ、調整、などすることである。 編 集 - Wik ip
e dia 45
情 報を適 切に 加 工・整 形 すること 編 集とは ①
46
編 集 = この辺 のもろもろ 47
情 報を、 意図をもって 加 工・整 形 すること 編 集とは ①
48
① 編 集 ② デ ザ イ ン ③ 体
験 49
デ ザ イン i s 何? ② 50
デ ザ インとは デザインとは、現状を少しでも 望ましいものに変えようとするための一連の行為 He r b e r
t A . S i m o n 51
m a k e b e t t e r
m a k e b e t t e r 「コミュニケーションそのもの」 私の考えるデ ザ イン 52
よりよい姿を求めて コミュニケーションすること デ ザ インとは ② 53
① 編 集 ② デ ザ イ ン ③ 体
験 54
体 験 i s 何? ③ 55
ユーザーエクスペリエンスデザインは、ユーザーエクスペリエンスについてのエク スペリエンスデザインである。デジタル機器/システムに対するユーザーの見方に 影響を与えるようなアーキテクチャやインタラクションモデルの生成に関する手法 である。 「製品とユーザーのインタラクションのあらゆる面、すなわちどのように気 づかれ、学ばれ、使われるのか」をその適用範囲とする。 ユー ザーエクス ペリエンスデ ザイン
- Wikipedia U X とは 56
U X = この辺 のもろもろ 57
( U X デ ザ インっていろいろあるみたいだけど… ) 手 法はデ ザ
イナーの思 考を外 部 化したもの。 す べ てはユーザーのよりよい 体 験 のためにある。 「 U X は手 法 ではなく目的 」 58
目指 す べき よりよい 状 態・ゴール 体 験とは ③ 59
つまり 60
コンテンツの前 後には、 編 集・デ ザ イン・体 験 がある 61
“ コンテンツの前 後には、 編 集・デ ザ イン・体 験 がある …
… … 62
“ コンテンツの前 後には、 編 集・デ ザ イン・体 験 がある 意
図 を も っ た 情 報 の 加 工 … … … 63
“ コンテンツの前 後には、 編 集・デ ザ イン・体 験 がある 意
図 を も っ た 情 報 の 加 工 … よ り 良 い 姿 を 求 め る コ ミ ュ ニ ケ ー シ ョ ン … … 64
“ コンテンツの前 後には、 編 集・デ ザ イン・体 験 がある 意
図 を も っ た 情 報 の 加 工 … よ り 良 い 姿 を 求 め る コ ミ ュ ニ ケ ー シ ョ ン … 目 指 す べ き 状 態 … 65
私が 考える 「コンテンツ」 の定 義 66
ユーザー視 点 で データや 情 報を意図をもって加 工し、 よりよい 形に落とし込 んだもの。
私が 考える 「コンテンツ」 の定 義 67
ユーザー視 点 で 編 集・デ ザ インされ た、 データや 情
報 私が 考える 「コンテンツ」 の定 義 68
ウェブ = プログラム + データ 69
グラム + データ 70
グラム + データ + 編 集 デ ザ イン 体
験 71
! 72
ユーザー視 点 で 編 集・デ ザ インされ た、 データや 情
報 私が 考える 「コンテンツ」 の定 義 73
編 集・デ ザ イン 74
E d i t or i a l & De
s i g n [ 編 集 ] [デ ザ イン] 75
E d i t or i a l De s
i g n 76
E d i t or i a l De s
i g n コンテンツを適 切に加 工・整 形 するデ ザ イン。 77
( エディトリアル デ ザ イン ≠ 紙のデ ザ イン )
78
E d i t or i a l De s
i g n f or Us er E x per i ence [ 編 集 ] [ 体 験 ] [デ ザ イン] 79
E d i t or i a l De s
i g n U X De s i g n 80
!! 81
編 集と U X はつながる 82
編 集 デ ザ イ ン コ ン テ ン
ツ の デ ザ イ ン 体 験 デ ザ イ ン = = 83
「コンテンツ」 はデザインするもの 84
大 事 な こ と な の で も う
一 回 言 い ま す 85
86
[ ウェブデ ザイナーあるある ] 87
コンテンツを流し込 む どんなコンテンツで も収まる コンポーネントにうっとり デ ザ インをアテる 88
コンテンツを流し込 む どんなコンテンツで も収まる コンポーネントにうっとり デ ザ インをアテる 89
De s i g n Web De s i g
n 90
ウェブ ペ ージ を デ ザイン する だけ で なく、
もっと 本 質 的 な デ ザイン が 必 要 。 91
本日のテーマおさらい 92
コンテンツのデザインと ウェブデザイナーにできること 93
コ ン テ ン ツ の デ ザ イ ン
= デ ー タ の デ ザ イ ン “ デ ー タに 「 人 間 的 な か た ち を 与 え ること 」 が 、これ からの デ ザ イナ ー の 役 割 だ ” 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
では、 95
ウェブデザイナーに できることとは? 96
ウェブを取り巻く状 況 97
Responsive Web Design 可変レイアウト マ ル チ デ バ イ
ス が 一 般 化 し 、 ひ と つ の コ ン テ ン ツ が 取 り う る 形 は 幅 広 い グ ラ デ ー シ ョ ン に 98
Mu lti Touch Point マルチ ・ タ ッチポイン ト コ
ン テ ン ツ へ の 接 触 点 は 媒 体 か ら 独 立 し は じ め て い る 。 ユ ー ザ ー を 流 入 さ せ る の で は な く コ ン テ ン ツ を 拡 散 さ せ る 考 え 方 99
Design System デザインのシステム化 コ ン ポ ー ネ ン ト
の 考 え 方 に よ る 、 維 持 管 理 の で き る デ ザ イ ン の 必 要 性 100
Gover na nce ウェブ デ ザ イ ナ ー に
求 め ら れ る こ と ( 統治すること。 そのあらゆるプロセス ) ガバナンス 101
デザインのルール設計 = ガバナンス ウェブ デ ザ イ ナ ー に
求 め ら れ る こ と 102
ウェブのこれ から 103
Instagram や Airbnb などの UI デザインに見る新しいトレンド | UX MILK http:
//uxmilk.jp/48364 余分なものが削ぎ落とされていく イ ンターフ ェイ ス 104
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
Content is King By Bill Gates 1996 コンテンツ ・イズ ・キング
© 2001 Microsoft C orp ora tion. Al l rights reser ved . Term s of Use 106
107
裸 に な っ て い く コ ン テ
ン ツ 108
ウェブは枯れていく 技 術 の 進 歩 で 表 現 は
枯 れ て い く 。 印 刷 媒 体 の よ う に 、 枯 れ た メ デ ィ ア に 向 か っ て い る 109
枯れた技術の水平思考 横 井 軍 平 任 天 堂 1 9
4 1 – 1 9 9 7 「最先端ではないが、すでに広く使われてノウハウも固まり不具合も出し尽くして安定して使える技術」 をうまく使い、 「今まで無かった使い道を考える」 という考え方、 視点のこと。 「枯れたメディア」 こそ本質的なデザインが必要なのでは。
つまり
編集デザインの腕の見せ所
より本質的な “ 設計 ” が求められている デ ザ イ ン と
は 設 計 だ 。 H T M L 仕 様 の 外 に ま で 想 像 力 を 伸 ば し て み よ う 。
最後まで残るのは 文字情報
最後まで残るのは 編集とタイポグラフ ィ
Typography is King Content is King, in other words, タ
イ ポグラフ ィ ・イズ ・キング 116
事 例を見 てみる 117
新潮社 h t t p : / / w w
w. s h i n c h o s h a . c o . j p デザイン 担当 しました 118
None
None
None
< p>
None
テキストが スペック的なデータにしか 見えてこない
体 験に コンテキストが 生まれ 、 データがストーリーとして 見えてくる < p>
とある雑誌の例 ※ こ れ は 作 例 で す 126
None
None
< p>
< p> 130
None
読 むモチ ベーションが 上がりにくい
ありきたりな テーマの中に 独自の切り口があることを 匂わ せる < p>
“ < h n > になれなかった < p > 問
題 ” 134
あ る 日 の イ ン ト ラ “ 謎
の < p > 問 題 ” 135
あ る 日 の イ ン ト ラ “ 謎
の < p > 問 題 ” 136
あ る 日 の イ ン ト ラ “ 謎
の < p > 問 題 ” 137
あ る 日 の イ ン ト ラ “ 謎
の < p > 問 題 ” 138
あ る 日 の イ ン ト ラ “ 謎
の < p > 問 題 ” 139
構 造を示 す 見出し と 内 容を表 す 見出し 140
文 中 見 出 し 小 見 出 し キ
ャ ッ チ シ ョ ル ダ ー タ ラ シ ボ デ ィ リ ー ド キ ャ プ シ ョ ン 注 釈 脚 注 141
文 中 見 出 し 小 見 出 し キ
ャ ッ チ シ ョ ル ダ ー タ ラ シ ボ デ ィ リ ー ド キ ャ プ シ ョ ン 注 釈 脚 注 <p> 142
マシンリーダビリティ ヒューマンリーダビリティ ≠ 143
コンテンツを よりよい 体 験にするために もっとできることがある 144
145
「あるべきところに見出しがある」 内容のサマリをきちんと置く 146
147
「 構 造と意 味のバランスをとる」 <h 2 > はあくまで も 文
書 構 造のためのもの <h 3> のほうが 意 味としては重 要 強 調 度 合 いのチューニング 148
まとめ 149
仕 様・標 準が 存 在 するのは ウェブの良いところ 150
ただし、 151
べき論 や 手 法に依 存して 思 考 停 止にならず、 ユーザーが
得られる体 験を基 準に 考え 続けることが 大 事 152
De s i g n Web De s i g
n ウェブの外 側から、ウェブを見 つめてみよう 153
「 サイトがあれば いい」 という時 代 ではない 154
どんなサイトが 必 要 で 、 どうしたい 企 業・サービスなのか 体 現していくことが
必 要 。 155
サイト構 築は手 段 でしかない 156
難しく考えないで 、 できることからやってみる 157
あるべきところに 見出しをつける 見出しの階層関係を 整理する 内容に合わせた フォーマット設計 CMS の設計を コンテンツ基準に ユーザーだけでなく、
クライアントの立場に なってみる 取材・編集工程を 設けてみる コンテンツインベントリを 作って棚卸し ヒアリング(インタビュー)を いつもの倍やってみる コンポーネント志向で コンテンツ表現の幅を担保する バリュープロポジションについて よく考えてみる コンセプトを もっと明快に サイトの外まで UX 定義を広げる ビジュアルの ディレクション 文章のスタイルガイド (ライティングポリシー) を定義 158
コンテンツ開 発も デ ザ インの一 部 。 159
デ ザインそのものもコンテンツ 160
提 供 価 値を 「 サイト構 築 」から 本 質
的な「 課 題 解 決 」に 161
“ 制 作 ” から “ デ ザイン” へ 162
enjoy, editorial ! 163
enjoy, design ! 164
ありがとうございました。 165
好評 発売中!
None