ユーザー体験設計とウェブサイト構築から導く企業ブランディング

E3b55df6f02b7398173190fbb852f410?s=47 sekig
November 12, 2016

 ユーザー体験設計とウェブサイト構築から導く企業ブランディング

顧客の抱える課題がサイト構築にとどまらず、もっと大きなものだった場合、どのように解決していけばよいのでしょうか。UX・CXを中心にした設計フェーズ、設計を目に見える形に落とすためのデザインフェーズ、それらをシステムに組み込む実装フェーズと、一連の流れを実際のプロジェクトの事例をもとにして紐解きます。今回は、UX設計とデザインのフローを中心に、エンドユーザーとクライアントを「つなぐ」ためのウェブサイトデザインについてお伝えします。

---
MTDDC Meetup Tokyo 2016で発表したスライドです。

E3b55df6f02b7398173190fbb852f410?s=128

sekig

November 12, 2016
Tweet

Transcript

  1. 関口 裕 MTDDC 2016 ユーザー体 験 設 計と ウェブ サイト構

    築 から導く 企 業ブランディング
  2. 自己 紹 介 2

  3. 関口 裕 (せきぐち・ゆたか ) D E S I G N

    E R 3
  4. 4

  5. 株式会社コンセント アートディレクター/デザイナー。 静岡文化芸術大学でプロダクトデザインを修め る。2006 年(株)アレフ・ゼロ(現・コンセント)入社。雑誌デザインを中心に書籍や広報誌など紙媒体 のデザインに携わった後、大規模・中規模のコーポレートサイトやブランドサイトなどをはじめとしたデジ タルメディアのデザインに従事。コンセプトワーク・UX 方針策定・システム要件定義などの上流工程から グラフィックのフィニッシュワークまで、幅広くデザインを手掛ける。現在はモジュール型デザイン開発と CMS、そして横断的な

    UX の関係について模索中。メディアや規模感の違う案件を同時に進めるのが好き。 雑 誌 や 広 報 誌 、書 籍のデ ザ イン … 5 年 ウェブ サイトを中心としたデ ザ イン … 5 年目 5
  6. コンテンツファースト 45 年! Ser v ic e De sign Edi

    t or ial De sign W eb De sign 6
  7. 基 本 的な Web IA 設 計フロー [ 調 査・分

    析 ] ユーザー コンテンツ コンテキスト [ コンセプト定 義 ] ユ ー ザ ー 体 験 の 方 針 [ 情 報 設 計 ] 画 面 設 計 サイト ストラクチャ ナビ ゲーション ラベ ル 7
  8. ユーザー コンテンツ コンテキスト 8

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

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

    ユーザ ーが 体 験することで[ 知 識 ]となり、さらには[ 知 恵 ]にまで 昇 華される Na than She dr o f f - T he Under s t anding Sp ec tr um データ 情 報 知 識 知 恵 制 作 者 ユーザ ー 体 験 コンテキスト 「 理 解 の 概 念 図 」 10
  11. ウェブ = プログラム + デ ータ コンテンツ ウェブ 的な 「コンテンツ」

    の 定 義 11
  12. <p > の中身 や 画 像ファイル たとえば 、 など 。

    ウェブ 的な 「コンテンツ」 の 定 義 12
  13. <p > の中身 や 画 像ファイル 私 が 考える 「コンテンツ」

    の 定 義 たとえば 、 など 。 13
  14. データ 情 報 知 識 知 恵 制 作 者

    ユーザ ー 体 験 コンテキスト このあたり 14
  15. ユーザ ー視 点で 編 集され た デ ータや 情 報

    私 が 考える 「コンテンツ」 の 定 義 15
  16. 本日のお 題 16

  17. 顧客の抱える課題がサイト構築にとどまらず、もっと 大きなものだった場合、どのように解決していけばよ いのでしょうか。UX・CXを中心にした設計フェーズ、 設計を目に見える形に落とすためのデザインフェー ズ、それらをシステムに組み込む実装フェーズと、一 連の流れを実際のプロジェクトの事例をもとにして紐 解きます。今回は、UX設計とデザインのフローを中 心に、エンドユーザーとクライアントを「つなぐ」た めのウェブサイトデザインについてお伝えします。 17

  18. 顧客の抱える課題がサイト構築にとどまらず、もっと 大きなものだった場合、どのように解決していけばよ いのでしょうか。UX・CXを中心にした設計フェーズ、 設計を目に見える形に落とすためのデザインフェー ズ、それらをシステムに組み込む実装フェーズと、一 連の流れを実際のプロジェクトの事例をもとにして紐 解きます。今回は、UX設計とデザインのフローを中 心に、エンドユーザーとクライアントを「つなぐ」た めのウェブサイトデザインについてお伝えします。 1

    2 3 18
  19. イマドキ CMS 構 築 ブランディング = + + 1 2

    3 本日お 持ち帰りの内容 … という視 点 19
  20. CMS とは コンテンツマネジメントシステム(英 : content management system, CMS)は、ウェブコンテンツを構成するテキストや画像など のデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を 行うシステムの総称。2005

    年頃より一般的に普及したといわれる。コ ンテンツ管理システムとも呼ばれる。 コンテンツマ ネージ メントシステ ム - Wik ip e dia 20
  21. 「 なんで CMS 導 入するんだっけ?」 21

  22. 運 用するから。 22

  23. 「 なんで 運 用するんだっけ?」 23

  24. ユーザ ーとの、継 続 的な コミュニケーションのため。 24

  25. コミュニケーションを設 計する デ ザ インすること。 = 25

  26. CMS 構 築 = デ ザ イン つまり 26

  27. デ ザ イン is 何? 27

  28. デ ザ インとは デザインとは、現状を少しでも 望ましいものに変えようとするための一連の行為 Her b er t A

    . Simon 28
  29. 「コミュニケーションそのもの 」 受 託 業におけるデ ザ イン m a k

    e b e t t e r m a k e b e t t e r 29
  30. UX is 何? 30

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

    ペリエンスデ ザイン - Wikipedia 31
  32. UX = この 辺 のいろいろ 32

  33. コンテンツ = UX = この 辺 のいろいろ 33

  34. ( UX デ ザ インっていろいろあるみたいだけど… ) コンテンツについて徹 底 的に考える事 が

    大 切 「UX は 手 法ではなく目的 」 34
  35. C ont ent Mana gement S y s t em

    P a ge Mana gement S y s t em そもそも CMS って… 35
  36. つまり 36

  37. 「CMS 設 計」 と 「デ ザ イン」 と 「UX」 は

    つなが る 37
  38. 事 例 38

  39. ht tp:/ / w w w .shincho sha.c o. jp

    39
  40. 新 潮 社コーポレートサイト 2016 年 6 月公 開 - 満を持したフルリニューアル。

    - 時代に即したサイトになるために、ゼロからの再設計 - 「ナンバーワンの出版社サイトになる」という大きな目標 - 基盤 DB を活かしたまま、まったく違うサイトに - 対象は約 3 万ページ - 運用はクライアント内製、さまざまなステークホルダー 40
  41. 「日常と本 が つなが る場 所 」 コンセプト 41

  42. やったこと 42

  43. 要 件 の 検 討と、サイト構 築 の目的を整 理 要 件

    定 義 調査 ・ 分析 UX 設 計 デ ザ イン 実 装 クリエイティブ・ブリーフ 43
  44. 市 場 調 査 、競 合 調 査 、ユーザ ー調

    査 要 件 定 義 調査 ・ 分析 UX 設 計 デ ザ イン 実 装 ユーザ ー調 査 44
  45. C Xモデ ル 、コンセプト視 覚 化 、詳 細 設 計

    要 件 定 義 調査 ・ 分析 UX 設 計 デ ザ イン 実 装 コンセプトビジュア ル カスタマージャーニーマップ カスタマー エクスペリエンス方 針 [UX 設 計 ] [ 情 報 設 計 ] ハイレベ ル 画 面 設 計 詳 細 画 面 設 計 ハイレベ ルストラクチャ 45
  46. コンセプト具 体 化 、モジュール 設 計 要 件 定 義

    調査 ・ 分析 UX 設 計 デ ザ イン 実 装 サイトイメージ 抽出、 デ ザ インプリンシプ ル 定 義 画 面デ ザ イン 46
  47. コンポーネント実 装とマークアップ 、 システム開 発 、DB 連 結 要 件

    定 義 調査 ・ 分析 UX 設 計 デ ザ イン 実 装 コンポーネント実 装 システム開 発 47
  48. - 約 一 年 半の 制 作 期間 - 典

    型 的なウォーターフォール - 実 装も堅 実に アウトプットは 尖ったものに。 でも、 - 厚い 設 計・検 討 要 件 定 義 調査 ・ 分析 UX 設 計 デ ザ イン 実 装 48
  49. … デ ザ インパートのプロセスについて 要 件 定 義 調査 ・

    分析 UX 設 計 デ ザ イン 実 装 49
  50. 実 施デ ザ インのプロセス デ ザ イン 50

  51. 51

  52. 52

  53. 中・大 規 模 サイト構 築 の問 題 53

  54. …期間が 長いと、途 中で 忘 れる。 54

  55. 55

  56. イメージを抽出 [ イメージ・マッピング ] 分 類・まとめて視 覚 化 [ イメージ

    整 理 ] とっつきやすく擬 人 化 [ イメージ ペ ルソナ ] 56
  57. 言 葉で 再 定 義 [ デ ザ イン・プリンシプ ル

    ] 57
  58. 58

  59. 色・形に変 換 [ スタイル・タイル ] 59

  60. 60

  61. パーツ化して展 開 [ コンポーネント化 ] 61

  62. 62

  63. サンプ ル ページ 作 成 [ テンプレート化 ] 63

  64. 64

  65. ルール 化してまとめる [ デ ザ イン・ファウンデ ーション ] 65

  66. 66

  67. (コード化しておく) 67

  68. - 「 なぜこうなっていたんだっけ 」の 根 拠 - 迷ったとき、いつでも立ち戻 れる資 料

    - 長いプロジェクト期間のなか でブレない - デ ザ イン展 開するときのロジックになる デ ザ インのプロセス化 、 なぜ やるか 68
  69. 新 潮 社コーポレートサイト制 作におけるポイント 69

  70. [ ポイント 1 ] ウェブサイト構築の枠の外から ひろく課題を検討する いきなりサイト設計に入るのではなく、 企業が「どうなりたいか」基準で施策を検討。 タッチポイントをサイトに限定しない。 その上で、デジタル上でのコミュニケーションにどう着地させるかを詰め、

    しくみ化= CMS 化していく - 課 題 抽出 - 70
  71. 71

  72. [ ポイント 2 ] CMS 設計を ユーザー基準で進める 書誌情報をどこで呼び出すか=ユーザーモデルに基づいたデータ出力 (ページにたくさんのデータを持たせるが、その順番や量を顧客体験ベースでコントロール) 複数の運用者(広報宣伝担当・運用支援担当・書籍編集者

    等)によって ページコンテンツを分散協力して作っていける仕組み - 設 計 - 72
  73. 書 籍 担当 者 が 自由に、任 意で 追 加 入

    力 システム出力 + 広 報 宣 伝 部 入 力 73
  74. [ ポイント 3 ] - デ ザ イン - モジュール型開発と、

    ユニークな テンプレート開発の、バランスをとる サイト上のタッチポイントを整理し、ユニバーサルにつくるところと 個別最適するところの力のかけどころを決めていく。 体験ごとに UI を作り分ける (マルチユーザー、マルチデバイス、マルチエントランス) 74
  75. モジュール・コンポーネント単 位 ページテンプレート単 位 75

  76. CMS 構 築 のプロセス サイトの 個 性 を具 体 化する作

    業 = 76
  77. CMS 構 築 のプロセス サイトの 個 性 を具 体 化する作

    業 企 業 がどうありたいか (ブランド) を 体 現するプロセス = 77
  78. ブランド構 築 is 何? 78

  79. 特 別なことはなにもない 。 まっとうにやるだけ ユーザ ー中心に課 題 を見 据え、 コンテンツを運

    用して 継 続 的にコミュニケーションがとれる、 しくみを作っていくこと 79
  80. 「 サイトの ふるまい 」 の しくみをつくる ブランドの 構 築 =

    80
  81. まとめ 81

  82. 「 サイトが あればいい 」 という時 代ではない 82

  83. ど んなサイトが 必 要で 、 どうしたい 企 業・サービスなのか を体 現していくことが

    必 要 。 83
  84. ど んなサイトが 必 要で 、 どうしたい 企 業・サービスなのか を体 現していくことが

    必 要 。 サイト構 築は 手 段 でしか ない 。 84
  85. CMS 構 築 85

  86. クライアントが エンドユーザ ーとの向き合い 方 ( 体 験 ) をつくる お

    手 伝いをする、 という考え方 CMS 構 築 86
  87. 難しく考えないで 、 できることからやってみる 87

  88. 調 査・設 計も、 デ ザ インも、開 発 も、 全 部ブランディングにつなが

    る “デ ザ イン” と言える 88
  89. 提 供 価 値 を 「 サイト構 築 」 から

    本 質 的な 「 課 題 解 決 」 に 89
  90. “制 作” から “デ ザ イン” へ 90

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