$30 off During Our Annual Pro Sale. View Details »

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

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. 4

  2. 基 本 的な Web IA 設 計フロー [ 調 査・分

    析 ] ユーザー コンテンツ コンテキスト [ コンセプト定 義 ] ユ ー ザ ー 体 験 の 方 針 [ 情 報 設 計 ] 画 面 設 計 サイト ストラクチャ ナビ ゲーション ラベ ル 7
  3. [デ ータ]を編 集することよって[ 情 報 ]としての 価 値 を持たせ 、

    ユーザ ーが 体 験することで[ 知 識 ]となり、さらには[ 知 恵 ]にまで 昇 華される Na than She dr o f f - T he Under s t anding Sp ec tr um データ 情 報 知 識 知 恵 制 作 者 ユーザ ー 体 験 コンテキスト 「 理 解 の 概 念 図 」 10
  4. <p > の中身 や 画 像ファイル たとえば 、 など 。

    ウェブ 的な 「コンテンツ」 の 定 義 12
  5. データ 情 報 知 識 知 恵 制 作 者

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

    私 が 考える 「コンテンツ」 の 定 義 15
  7. イマドキ CMS 構 築 ブランディング = + + 1 2

    3 本日お 持ち帰りの内容 … という視 点 19
  8. C ont ent Mana gement S y s t em

    P a ge Mana gement S y s t em そもそも CMS って… 35
  9. 新 潮 社コーポレートサイト 2016 年 6 月公 開 - 満を持したフルリニューアル。

    - 時代に即したサイトになるために、ゼロからの再設計 - 「ナンバーワンの出版社サイトになる」という大きな目標 - 基盤 DB を活かしたまま、まったく違うサイトに - 対象は約 3 万ページ - 運用はクライアント内製、さまざまなステークホルダー 40
  10. 要 件 の 検 討と、サイト構 築 の目的を整 理 要 件

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

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

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

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

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

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

  17. 52

  18. 55

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

    整 理 ] とっつきやすく擬 人 化 [ イメージ ペ ルソナ ] 56
  20. 58

  21. 60

  22. 62

  23. 64

  24. 66

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

    - 長いプロジェクト期間のなか でブレない - デ ザ イン展 開するときのロジックになる デ ザ インのプロセス化 、 なぜ やるか 68
  26. 71

  27. 書 籍 担当 者 が 自由に、任 意で 追 加 入

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

    ユニークな テンプレート開発の、バランスをとる サイト上のタッチポイントを整理し、ユニバーサルにつくるところと 個別最適するところの力のかけどころを決めていく。 体験ごとに UI を作り分ける (マルチユーザー、マルチデバイス、マルチエントランス) 74
  29. CMS 構 築 のプロセス サイトの 個 性 を具 体 化する作

    業 企 業 がどうありたいか (ブランド) を 体 現するプロセス = 77
  30. 特 別なことはなにもない 。 まっとうにやるだけ ユーザ ー中心に課 題 を見 据え、 コンテンツを運

    用して 継 続 的にコミュニケーションがとれる、 しくみを作っていくこと 79
  31. 提 供 価 値 を 「 サイト構 築 」 から

    本 質 的な 「 課 題 解 決 」 に 89