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

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

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

Transcript

1. 関口 裕
   MTDDC 2016
   ユーザー体 験 設 計と
   ウェブ サイト構 築 から導く
   企 業ブランディング
   

   View Slide

2. 自己 紹 介
   2
   

   View Slide

3. 関口 裕
   （せきぐち・ゆたか ）
   D E S I G N E R
   3
   

   View Slide

4. View Slide

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

   View Slide

6. コンテンツファースト 45 年！
   Ser v ic e
   De sign
   Edi t or ial
   De sign
   W eb
   De sign
   6
   

   View Slide

7. 基 本 的な Web IA 設 計フロー
   ［ 調 査・分 析 ］
   ユーザー
   コンテンツ コンテキスト
   ［ コンセプト定 義 ］
   ユ
   ー
   ザ
   ー
   体
   験
   の
   方
   針
   ［ 情 報 設 計 ］
   画
   面
   設
   計
   サイト
   ストラクチャ
   ナビ ゲーション
   ラベ ル
   7
   

   View Slide

8. ユーザー
   コンテンツ コンテキスト
   8
   

   View Slide

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

   View Slide

10. ［デ ータ］を編 集することよって［ 情 報 ］としての 価 値 を持たせ 、
    ユーザ ーが 体 験することで［ 知 識 ］となり、さらには［ 知 恵 ］にまで 昇 華される
    Na than She dr o f f - T he Under s t anding Sp ec tr um
    データ 情 報 知 識 知 恵
    制 作 者
    ユーザ ー
    体 験
    コンテキスト
    「 理 解 の 概 念 図 」
    10
    

    View Slide

11. ウェブ = プログラム + デ ータ
    コンテンツ
    ウェブ 的な
    「コンテンツ」
    の 定 義
    11
    

    View Slide

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

    View Slide

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

    View Slide

14. データ 情 報 知 識 知 恵
    制 作 者
    ユーザ ー
    体 験
    コンテキスト
    このあたり
    14
    

    View Slide

15. ユーザ ー視 点で 編 集され た
    デ ータや 情 報
    私 が 考える
    「コンテンツ」
    の 定 義
    15
    

    View Slide

16. 本日のお 題
    16
    

    View Slide

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

    View Slide

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

    View Slide

19. イマドキ CMS 構 築
    ブランディング
    ＝
    ＋ ＋
    1 2 3
    本日お 持ち帰りの内容
    … という視 点
    19
    

    View Slide

20. CMS とは
    コンテンツマネジメントシステム（英 : content management
    system, CMS）は、ウェブコンテンツを構成するテキストや画像など
    のデジタルコンテンツを統合・体系的に管理し、配信など必要な処理を
    行うシステムの総称。2005 年頃より一般的に普及したといわれる。コ
    ンテンツ管理システムとも呼ばれる。 コンテンツマ ネージ メントシステ ム - Wik ip e dia
    20
    

    View Slide

21. 「 なんで CMS 導 入するんだっけ？」
    21
    

    View Slide

22. 運 用するから。
    22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. デ ザ イン is 何？
    27
    

    View Slide

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

    View Slide

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

    View Slide

30. UX is 何？
    30
    

    View Slide

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

    View Slide

32. UX ＝ この 辺 のいろいろ
    32
    

    View Slide

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

    View Slide

34. （ UX デ ザ インっていろいろあるみたいだけど… ）
    コンテンツについて徹 底 的に考える事 が 大 切
    「UX は 手 法ではなく目的 」
    34
    

    View Slide

35. C ont ent Mana gement S y s t em
    P a ge Mana gement S y s t em
    そもそも CMS って…
    35
    

    View Slide

36. つまり
    36
    

    View Slide

37. 「CMS 設 計」
    と
    「デ ザ イン」
    と
    「UX」
    は
    つなが る
    37
    

    View Slide

38. 事 例
    38
    

    View Slide

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

    View Slide

40. 新 潮 社コーポレートサイト
    2016 年 6 月公 開
    - 満を持したフルリニューアル。
    - 時代に即したサイトになるために、ゼロからの再設計
    - 「ナンバーワンの出版社サイトになる」という大きな目標
    - 基盤 DB を活かしたまま、まったく違うサイトに
    - 対象は約 3 万ページ
    - 運用はクライアント内製、さまざまなステークホルダー
    40
    

    View Slide

41. 「日常と本 が つなが る場 所 」
    コンセプト
    41
    

    View Slide

42. やったこと
    42
    

    View Slide

43. 要 件 の 検 討と、サイト構 築 の目的を整 理
    要 件 定 義
    調査
    ・
    分析
    UX 設 計
    デ ザ イン
    実 装
    クリエイティブ・ブリーフ
    43
    

    View Slide

44. 市 場 調 査 、競 合 調 査 、ユーザ ー調 査
    要 件 定 義
    調査
    ・
    分析
    UX 設 計
    デ ザ イン
    実 装
    ユーザ ー調 査
    44
    

    View Slide

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

    View Slide

46. コンセプト具 体 化 、モジュール 設 計
    要 件 定 義
    調査
    ・
    分析
    UX 設 計
    デ ザ イン
    実 装
    サイトイメージ 抽出、
    デ ザ インプリンシプ ル 定 義
    画 面デ ザ イン
    46
    

    View Slide

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

    View Slide

48. - 約 一 年 半の 制 作 期間
    - 典 型 的なウォーターフォール
    - 実 装も堅 実に
    アウトプットは 尖ったものに。
    でも、
    - 厚い 設 計・検 討
    要 件 定 義
    調査
    ・
    分析
    UX 設 計
    デ ザ イン
    実 装
    48
    

    View Slide

49. … デ ザ インパートのプロセスについて
    要 件 定 義
    調査
    ・
    分析
    UX 設 計
    デ ザ イン
    実 装
    49
    

    View Slide

50. 実 施デ ザ インのプロセス
    デ ザ イン
    50
    

    View Slide

51. View Slide

52. View Slide

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

    View Slide

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

    View Slide

55. View Slide

56. イメージを抽出
    ［ イメージ・マッピング ］
    分 類・まとめて視 覚 化
    ［ イメージ 整 理 ］
    とっつきやすく擬 人 化
    ［ イメージ ペ ルソナ ］
    56
    

    View Slide

57. 言 葉で 再 定 義
    ［ デ ザ イン・プリンシプ ル ］
    57
    

    View Slide

58. View Slide

59. 色・形に変 換
    ［ スタイル・タイル ］
    59
    

    View Slide

60. View Slide

61. パーツ化して展 開
    ［ コンポーネント化 ］
    61
    

    View Slide

62. View Slide

63. サンプ ル ページ 作 成
    ［ テンプレート化 ］
    63
    

    View Slide

64. View Slide

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

    View Slide

66. View Slide

67. （コード化しておく）
    67
    

    View Slide

68. - 「 なぜこうなっていたんだっけ 」の 根 拠
    - 迷ったとき、いつでも立ち戻 れる資 料
    - 長いプロジェクト期間のなか でブレない
    - デ ザ イン展 開するときのロジックになる
    デ ザ インのプロセス化 、
    なぜ やるか
    68
    

    View Slide

69. 新 潮 社コーポレートサイト制 作におけるポイント
    69
    

    View Slide

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

    View Slide

71. View Slide

72. ［ ポイント 2 ］
    CMS 設計を
    ユーザー基準で進める
    書誌情報をどこで呼び出すか＝ユーザーモデルに基づいたデータ出力
    （ページにたくさんのデータを持たせるが、その順番や量を顧客体験ベースでコントロール）
    複数の運用者（広報宣伝担当・運用支援担当・書籍編集者 等）によって
    ページコンテンツを分散協力して作っていける仕組み
    - 設 計 -
    72
    

    View Slide

73. 書 籍 担当 者 が
    自由に、任 意で
    追 加 入 力
    システム出力
    +
    広 報 宣 伝 部 入 力
    73
    

    View Slide

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

    View Slide

75. モジュール・コンポーネント単 位 ページテンプレート単 位
    75
    

    View Slide

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

    View Slide

77. CMS 構 築 のプロセス
    サイトの 個 性 を具 体 化する作 業
    企 業 がどうありたいか
    （ブランド）
    を
    体 現するプロセス
    ＝
    77
    

    View Slide

78. ブランド構 築 is 何？
    78
    

    View Slide

79. 特 別なことはなにもない 。
    まっとうにやるだけ
    ユーザ ー中心に課 題 を見 据え、
    コンテンツを運 用して
    継 続 的にコミュニケーションがとれる、
    しくみを作っていくこと
    79
    

    View Slide

80. 「 サイトの ふるまい 」
    の
    しくみをつくる
    ブランドの 構 築
    ＝
    80
    

    View Slide

81. まとめ
    81
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

85. CMS 構 築
    85
    

    View Slide

86. クライアントが
    エンドユーザ ーとの向き合い 方
    （ 体 験 ）
    をつくる
    お 手 伝いをする、
    という考え方
    CMS 構 築
    86
    

    View Slide

87. 難しく考えないで 、
    できることからやってみる
    87
    

    View Slide

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

    View Slide

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

    View Slide

90. “制 作”
    から
    “デ ザ イン”
    へ
    90
    

    View Slide

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

    View Slide