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

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

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

Transcript

1. 関口 裕 MTDDC 2016 ユーザー体 験 設 計と ウェブ サイト構 築 から導く 企 業ブランディング
2. 自己 紹 介 2
3. 関口 裕 （せきぐち・ゆたか ） D E S I G N E R 3
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
53. 中・大 規 模 サイト構 築 の問 題 53
54. …期間が 長いと、途 中で 忘 れる。 54
56. イメージを抽出 ［ イメージ・マッピング ］ 分 類・まとめて視 覚 化 ［ イメージ 整 理 ］ とっつきやすく擬 人 化 ［ イメージ ペ ルソナ ］ 56
57. 言 葉で 再 定 義 ［ デ ザ イン・プリンシプ ル ］ 57
59. 色・形に変 換 ［ スタイル・タイル ］ 59
61. パーツ化して展 開 ［ コンポーネント化 ］ 61
63. サンプ ル ページ 作 成 ［ テンプレート化 ］ 63
65. ルール 化してまとめる ［ デ ザ イン・ファウンデ ーション ］ 65
67. （コード化しておく） 67
68. - 「 なぜこうなっていたんだっけ 」の 根 拠 - 迷ったとき、いつでも立ち戻 れる資 料 - 長いプロジェクト期間のなか でブレない - デ ザ イン展 開するときのロジックになる デ ザ インのプロセス化 、 なぜ やるか 68
69. 新 潮 社コーポレートサイト制 作におけるポイント 69
70. ［ ポイント 1 ］ ウェブサイト構築の枠の外から ひろく課題を検討する いきなりサイト設計に入るのではなく、 企業が「どうなりたいか」基準で施策を検討。 タッチポイントをサイトに限定しない。 その上で、デジタル上でのコミュニケーションにどう着地させるかを詰め、 しくみ化＝ CMS 化していく - 課 題 抽出 - 70
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. ありがとうございました。