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

by sekig

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

本日のお題 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

運用するから。 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

デザイン is 何？ 27

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

UX is 何？ 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

UX ＝この辺のいろいろ 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

つまり 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

事例 38

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

やったこと 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Slide 67

Slide 67 text

（コード化しておく） 67

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

ブランド構築 is 何？ 78

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

まとめ 81

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

CMS 構築 85

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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