WCAFでの資料

1. Web最適化における
デザインアプローチ
WCAF × UX Fukui Fukui Creator Session
株式会社オールコネクト 澤田 幸弘

2. プロフィール
澤田 幸弘
SAWADA YUKIHIRO
株式会社オールコネクトにて、デザイン部のマネージメントと
Web サイトのディレクションを担 当。
最近は、スパーデザイナー佐々木の入社により、影が薄くなってきている。
好きな言 葉は 、 出る杭は 打たれる。
「 」

3. ？
Web最適化とは？
What is web optimization?

4. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ＡＴＭ
雑 誌

5. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ＡＴＭ
雑 誌

6. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
ATMで
陳列棚 お金を下ろす
コピー機 ＡＴＭ
雑 誌

7. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
ジャンプを
立ち読み 陳列棚
コピー機 ＡＴＭ
雑 誌

8. 陳列棚
新商品・付録付きの
飲 陳列棚
料
ジュースがないか確認
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ＡＴＭ
雑 誌

9. レジに並びつつ
陳列棚 HOTコーヒーを選ぶ
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ＡＴＭ
雑 誌

10. 陳列棚
PONTAカードを出し
飲 陳列棚 お金を払う
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ＡＴＭ
雑 誌

11. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ＡＴＭ
雑 誌

12. ユーザーの行 動を分析し
改 善・施 策を行うことで
ユーザーをよりゴールに
達 成しやすくすること

13. Webプロジェクトのプロセス
例 ） 社 E Cサイトにおいて
当
Web オペレー
デバイス 広告 成約
サイト ション

14. Webプロジェクトのプロセス
例 ） 社 E Cサイトにおいて
当
ＧＯＡＬ
Web オペレー
デバイス 広告 成約
サイト ション

15. 下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

16. 下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

17. 下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

18. 下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

19. 下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

21. 返事がない・ ・
・
どうやら屍のようだ 。

22. 下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

23. 環境
下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

24. 環境 流入
下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

25. 環境 流入 回遊
下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

26. 環境 流入 回遊 意向
下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

27. 環境 流入 回遊 意向 対応
下層 オペレーター
PC 広告Y ＬＰ 1 FD
ページ 佐々木
ＧＯＡＬ
スマート 下層 Web オペレーター
広告G ＬＰ 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O ＬＰ 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 ＬＰ 4 資料請求
ページ 佐藤

28. カテゴライズ（セグメント）することが 重 要

29. 数 値 化することで、具体的な指標となる
10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約

30. 遷 移 率も指 標となります。
10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約
60 % 17% 30% 13%

31. この 指 標 が 、ユーザー の 行 動を
探るヒントになり、改善を実施した時に
効果があった かどうかの 指 標となります。

32. 統合した数値で はユーザーの行 動 を想 定しにくい
環境 流入 回遊 意向 対応 成約

33. 環境の組み合わせごとに分ける
10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約
3,000 800 100 10 2
環境 流入 回遊 意向 対応 成約
100,000 64,000 20,000 3,600 1800
環境 流入 回遊 意向 対応 成約
20,000 8,000 2,000 400 20
環境 流入 回遊 意向 対応 成約

34. 環境の組 み合わせごとに分ける
10,000 6,000 1,000 300 40
環境 流入 PC + 広告 Y
回遊 意向 対応 成約
3,000 800 100 10 2
タブレット + 自然検索
環境 流入 回遊 意向 対応 成約
100,000 64,000 20,000 3,600 1800
環境 流入PC + 広告 G
回遊 意向 対応 成約
20,000 8,000 2,000 400 20
スマホ + バナー広告
環境 流入 回遊 意向 対応 成約

35. 環境の組み合わせごとに分ける
10,000 6,000 1,000 300 40 10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約 環境 流入 回遊 意向 対応 成約
3,000 800 100 10 2 3,000 800 100 10 2
環境 流入 回遊 意向 対応 成約 環境 流入 回遊 意向 対応 成約
100,000 64,000 20,000 3,600 1800 100,000 64,000 20,000 3,600 1800
環境 流入 回遊 意向 対応 成約 環境 流入 回遊 意向 対応 成約
20,000 8,000 2,000 400 20 20,000 8,000 2,000 400 20
環環 境
境 流流 入
入 回回 遊
遊 意意 向
向 対対 応
応 成成 約
約 環環 境
境 流流 入
入 回回 遊
遊 意意 向
向 対対 応
応 成成 約
約
10,000 6,000 1,000 300 40 10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約 環境 流入 回遊 意向 対応 成約
3,000 800 100 10 2 3,000 800 100 10 2
環境 流入 回遊 意向 対応 成約 環境 流入 回遊 意向 対応 成約
100,000 64,000 20,000 3,600 1800 100,000 64,000 20,000 3,600 1800
環境 流入 回遊 意向 対応 成約 環境 流入 回遊 意向 対応 成約
20,000 8,000 2,000 400 20 20,000 8,000 2,000 400 20
環環 境
境 流流 入
入 回回 遊
遊 意意 向
向 対対 応
応 成成 約
約 環環 境
境 流流 入
入 回回 遊
遊 意意 向
向 対対 応
応 成成 約
約

36. 重 要な環境からの指標をマークする
10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約
さぁ、デザインアプローチを仕掛けてみましょう
3,000 800 100 10 2
環境 流入 回遊 意向 対応 成約
100,000 64,000 20,000 3,600 1800
環境 流入 回遊 意向 対応 成約
20,000 8,000 2,000 400 20
環境 流入 回遊 意向 対応 成約

37. ？
デザインアプローチとは？
What is Design Approach?

38. 表層 具体的
骨格 ナビゲーション
デザイン
情 報デザイン
構造
要件
戦略
佐々木氏 から、 いた本によると. ..
サイトの目的 頂
抽象的

39. 表層 具体的
ビジュアルデザイン
骨格 インターフェース
デザイン
ナビゲーション
デザイン
情 報デザイン
構造 インタラクション 情報
デザイン アーキテクチャ
要件 コンテンツ
機能仕様
要求
戦略 ユーザーニーズ
サイトの目的
抽象的

40. 表層 具体的
ビジュアルデザイン
骨格 インターフェース
デザイン
ナビゲーション
デザイン
情 報デザイン
構造 インタラクション 情報
デザイン アーキテクチャ
要件 コンテンツ
機能仕様
要求
戦略 ユーザーニーズ
サイトの目的
抽象的

41. 具体的
表層 対応
骨格 意向
構造 回遊
要件 回遊
流入
戦略 環境
抽象的

42. 表層 対応
骨格 意向
構造 回遊
要件 回遊
流入
戦略 環境

43. 流入・回遊・意向のフェーズに対して
持 てるＵＸ要素の 範 囲で 改善を行うこと
表層 対応
骨格
ウリャー！ 意向
構造 回遊
要件 回遊
流入
戦略 環境

44. ×
流入・回遊・意向のフェーズに対して
持 てる権 限の 範 囲で 改善を行うこと
表層 対応
骨格
ウリャー！ 意向
構造 回遊
だけではダメです。
要件 回遊
流入
戦略 環境

45. テスト 検 証 ）
（ を
必ず 行う！

46. ＡＢテスト

48. デザインアプローチとは？
流入・回 遊・意向のフェーズに対して
持 てるＵＸ要素の 範 囲で 改善を行い
効 果 検 証 を 繰り返 すこと

49. メリット
① 改 善 のスピードが 速い
② 効果の応用が可能
③ デザインの成果が具体的に
④ 競 合 に 真 似 されにくい

50. デメリット
① 数 値 化 するま で が 大 変
② 失 敗し た 場 合リスクがある
③ 優先順位が低い

51. before

52. after

53. before after

54. before after
機 種詳 細ページのP Vが 増えたことにより
C V R 0.13% 向上

55. before
after

56. before
トップページの直帰率が 1.1% DOWN
サイト全体 の平均 P V が 0.52%UP
after
C V R 0.06% 向上

57. デ ザインの 価 値を上げていくには
ユーザーからのフィードバックが重 要

58. UX
そのフィードバックが
より良いユーザーエクスペリエンスを
構 築していく力になると考えます。

59. ご清 聴 ありがとうございました！