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

E3b55df6f02b7398173190fbb852f410?s=47 sekig
July 14, 2017

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

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

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

E3b55df6f02b7398173190fbb852f410?s=128

sekig

July 14, 2017
Tweet

Transcript

  1. 9.

    9

  2. 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
  3. 13.

    基 本 的な Web IA 設 計フロー [ 調 査・分

    析 ] ユーザー コンテンツ コンテキスト [ コンセプト定 義 ] ユ ー ザ ー 体 験 の 方 針 [ 情 報 設 計 ] 画 面 設 計 サイト ストラクチャ ナビゲーション ラベ ル H A S E G AWA , A t s u s h i , P h . D. 13
  4. 22.

    < p > の中 身 や 画 像ファイル たとえば 、

    など。 ウェブ的な 「コンテンツ」 の定 義 22
  5. 23.
  6. 25.

    Na t h a n S h e d r

    o ff 「 理 解の概 念 図」 The Understanding Spectrum 25
  7. 26.

    [データ]を編 集 することよって[ 情 報 ]としての価 値を持 たせ 、 ユーザーが

    体 験 することで[ 知 識 ]となり、さらには[ 知 恵 ]にまで 昇 華される データ 情 報 知 識 知 恵 制 作 者 ユーザー 体 験 コンテキスト 「 理 解 の概 念 図 」 26
  8. 27.

    ウェブ的な 「コンテンツ」 の定 義 < p > の中 身 や

    画 像ファイル たとえば 、 など。 27
  9. 28.

    < p > の中 身 や 画 像ファイル たとえば 、

    など。 私が 考える 「コンテンツ」 の定 義 28
  10. 29.

    データ 情 報 知 識 知 恵 制 作 者

    ユーザー 体 験 コンテキスト < p> < i m g > e t c . 29
  11. 30.

    Da t a ≠ Con t en t 私が 考える

    「コンテンツ」 の定 義 30
  12. 33.

    データ 情 報 知 識 知 恵 制 作 者

    ユーザー 体 験 コンテキスト このあたり…? 33
  13. 35.

    In f or m a t i on と Kno

    w l e d ge の間にあるもの 私が 考える 「コンテンツ」 の定 義 35
  14. 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
  15. 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
  16. 52.

    m a k e b e t t e r

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

    ( U X デ ザ インっていろいろあるみたいだけど… ) 手 法はデ ザ

    イナーの思 考を外 部 化したもの。 す べ てはユーザーのよりよい 体 験 のためにある。 「 U X は手 法 ではなく目的 」 58
  18. 63.
  19. 64.

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

    図 を も っ た 情 報 の 加 工 … よ り 良 い 姿 を 求 め る コ ミ ュ ニ ケ ー シ ョ ン … … 64
  20. 65.

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

    図 を も っ た 情 報 の 加 工 … よ り 良 い 姿 を 求 め る コ ミ ュ ニ ケ ー シ ョ ン … 目 指 す べ き 状 態 … 65
  21. 68.

    ユーザー視 点 で 編 集・デ ザ インされ た、 データや 情

    報 私が 考える 「コンテンツ」 の定 義 68
  22. 72.
  23. 73.

    ユーザー視 点 で 編 集・デ ザ インされ た、 データや 情

    報 私が 考える 「コンテンツ」 の定 義 73
  24. 75.

    E d i t or i a l & De

    s i g n [ 編 集 ] [デ ザ イン] 75
  25. 76.
  26. 77.

    E d i t or i a l De s

    i g n コンテンツを適 切に加 工・整 形 するデ ザ イン。 77
  27. 79.

    E d i t or i a l De s

    i g n f or Us er E x per i ence [ 編 集 ] [ 体 験 ] [デ ザ イン] 79
  28. 80.

    E d i t or i a l De s

    i g n U X De s i g n 80
  29. 81.
  30. 83.

    編 集 デ ザ イ ン コ ン テ ン

    ツ の デ ザ イ ン 体 験 デ ザ イ ン = = 83
  31. 85.

    大 事 な こ と な の で も う

    一 回 言 い ま す 85
  32. 86.

    86

  33. 91.

    ウェブ ペ ージ を デ ザイン する だけ で なく、

    もっと 本 質 的 な デ ザイン が 必 要 。 91
  34. 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
  35. 98.

    Responsive Web Design 可変レイアウト マ ル チ デ バ イ

    ス が 一 般 化 し 、 ひ と つ の コ ン テ ン ツ が 取 り う る 形 は 幅 広 い グ ラ デ ー シ ョ ン に 98
  36. 99.

    Mu lti Touch Point マルチ ・ タ ッチポイン ト コ

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

    Design System デザインのシステム化 コ ン ポ ー ネ ン ト

    の 考 え 方 に よ る 、 維 持 管 理 の で き る デ ザ イ ン の 必 要 性 100
  38. 101.

    Gover na nce ウェブ デ ザ イ ナ ー に

    求 め ら れ る こ と ( 統治すること。 そのあらゆるプロセス ) ガバナンス 101
  39. 104.

    Instagram や Airbnb などの UI デザインに見る新しいトレンド | UX MILK http:

    //uxmilk.jp/48364 余分なものが削ぎ落とされていく イ ンターフ ェイ ス 104
  40. 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
  41. 106.

    Content is King By Bill Gates 1996 コンテンツ ・イズ ・キング

    © 2001 Microsoft C orp ora tion. Al l rights reser ved . Term s of Use 106
  42. 107.

    107

  43. 109.

    ウェブは枯れていく 技 術 の 進 歩 で 表 現 は

    枯 れ て い く 。 印 刷 媒 体 の よ う に 、 枯 れ た メ デ ィ ア に 向 か っ て い る 109
  44. 110.

    枯れた技術の水平思考 横 井 軍 平 任 天 堂 1 9

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

    より本質的な “ 設計 ” が求められている デ ザ イ ン と

    は 設 計 だ 。 H T M L 仕 様 の 外 に ま で 想 像 力 を 伸 ば し て み よ う 。
  47. 116.

    Typography is King Content is King, in other words, タ

    イ ポグラフ ィ ・イズ ・キング 116
  48. 118.

    新潮社 h t t p : / / w w

    w. s h i n c h o s h a . c o . j p デザイン 担当 しました 118
  49. 119.
  50. 120.
  51. 121.
  52. 122.
  53. 123.
  54. 127.
  55. 128.
  56. 129.
  57. 130.
  58. 131.
  59. 135.

    あ る 日 の イ ン ト ラ “ 謎

    の < p > 問 題 ” 135
  60. 136.

    あ る 日 の イ ン ト ラ “ 謎

    の < p > 問 題 ” 136
  61. 137.

    あ る 日 の イ ン ト ラ “ 謎

    の < p > 問 題 ” 137
  62. 138.

    あ る 日 の イ ン ト ラ “ 謎

    の < p > 問 題 ” 138
  63. 139.

    あ る 日 の イ ン ト ラ “ 謎

    の < p > 問 題 ” 139
  64. 141.

    文 中 見 出 し 小 見 出 し キ

    ャ ッ チ シ ョ ル ダ ー タ ラ シ ボ デ ィ リ ー ド キ ャ プ シ ョ ン 注 釈 脚 注 141
  65. 142.

    文 中 見 出 し 小 見 出 し キ

    ャ ッ チ シ ョ ル ダ ー タ ラ シ ボ デ ィ リ ー ド キ ャ プ シ ョ ン 注 釈 脚 注 <p> 142
  66. 145.

    145

  67. 147.

    147

  68. 148.

    「 構 造と意 味のバランスをとる」 <h 2 > はあくまで も 文

    書 構 造のためのもの <h 3> のほうが 意 味としては重 要 強 調 度 合 いのチューニング 148
  69. 152.

    べき論 や 手 法に依 存して 思 考 停 止にならず、 ユーザーが

    得られる体 験を基 準に 考え 続けることが 大 事 152
  70. 153.

    De s i g n Web De s i g

    n ウェブの外 側から、ウェブを見 つめてみよう 153
  71. 158.

    あるべきところに 見出しをつける 見出しの階層関係を 整理する 内容に合わせた フォーマット設計 CMS の設計を コンテンツ基準に ユーザーだけでなく、

    クライアントの立場に なってみる 取材・編集工程を 設けてみる コンテンツインベントリを 作って棚卸し ヒアリング(インタビュー)を いつもの倍やってみる コンポーネント志向で コンテンツ表現の幅を担保する バリュープロポジションについて よく考えてみる コンセプトを もっと明快に サイトの外まで UX 定義を広げる ビジュアルの ディレクション 文章のスタイルガイド (ライティングポリシー) を定義 158
  72. 161.

    提 供 価 値を 「 サイト構 築 」から 本 質

    的な「 課 題 解 決 」に 161
  73. 167.