Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

sekig
November 12, 2016

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

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

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

sekig

November 12, 2016
Tweet

More Decks by sekig

Other Decks in Design

Transcript

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

    View full-size slide

  2. 自己 紹 介
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 基 本 的な Web IA 設 計フロー
    [ 調 査・分 析 ]
    ユーザー
    コンテンツ コンテキスト
    [ コンセプト定 義 ]









    [ 情 報 設 計 ]




    サイト
    ストラクチャ
    ナビ ゲーション
    ラベ ル
    7

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 本日のお 題
    16

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. イマドキ CMS 構 築
    ブランディング

    + +
    1 2 3
    本日お 持ち帰りの内容
    … という視 点
    19

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 運 用するから。
    22

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    25

    View full-size slide

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

    View full-size slide

  26. デ ザ イン is 何?
    27

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. UX is 何?
    30

    View full-size slide

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

    View full-size slide

  31. UX = この 辺 のいろいろ
    32

    View full-size slide

  32. コンテンツ

    UX = この 辺 のいろいろ
    33

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 「CMS 設 計」

    「デ ザ イン」

    「UX」

    つなが る
    37

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. やったこと
    42

    View full-size slide

  40. 要 件 の 検 討と、サイト構 築 の目的を整 理
    要 件 定 義
    調査

    分析
    UX 設 計
    デ ザ イン
    実 装
    クリエイティブ・ブリーフ
    43

    View full-size slide

  41. 市 場 調 査 、競 合 調 査 、ユーザ ー調 査
    要 件 定 義
    調査

    分析
    UX 設 計
    デ ザ イン
    実 装
    ユーザ ー調 査
    44

    View full-size slide

  42. C Xモデ ル 、コンセプト視 覚 化 、詳 細 設 計
    要 件 定 義
    調査

    分析
    UX 設 計
    デ ザ イン
    実 装
    コンセプトビジュア ル
    カスタマージャーニーマップ
    カスタマー
    エクスペリエンス方 針
    [UX 設 計 ]
    [ 情 報 設 計 ]
    ハイレベ ル 画 面 設 計 詳 細 画 面 設 計
    ハイレベ ルストラクチャ
    45

    View full-size slide

  43. コンセプト具 体 化 、モジュール 設 計
    要 件 定 義
    調査

    分析
    UX 設 計
    デ ザ イン
    実 装
    サイトイメージ 抽出、
    デ ザ インプリンシプ ル 定 義
    画 面デ ザ イン
    46

    View full-size slide

  44. コンポーネント実 装とマークアップ 、
    システム開 発 、DB 連 結
    要 件 定 義
    調査

    分析
    UX 設 計
    デ ザ イン
    実 装
    コンポーネント実 装 システム開 発
    47

    View full-size slide

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

    分析
    UX 設 計
    デ ザ イン
    実 装
    48

    View full-size slide

  46. … デ ザ インパートのプロセスについて
    要 件 定 義
    調査

    分析
    UX 設 計
    デ ザ イン
    実 装
    49

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 言 葉で 再 定 義
    [ デ ザ イン・プリンシプ ル ]
    57

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    76

    View full-size slide

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

    体 現するプロセス

    77

    View full-size slide

  66. ブランド構 築 is 何?
    78

    View full-size slide

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

    View full-size slide

  68. 「 サイトの ふるまい 」

    しくみをつくる
    ブランドの 構 築

    80

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. CMS 構 築
    85

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    89

    View full-size slide

  77. “制 作”
    から
    “デ ザ イン”

    90

    View full-size slide

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

    View full-size slide