Web最適化におけるデザインアプローチ
- 2. プロフィール
澤田 幸弘
SAWADA YUKIHIRO
株式会社オールコネクトにて、デザイン部のマネージメントと
Web サイトのディレクションを担 当。
最近は、スパーデザイナー佐々木の入社により、影が薄くなってきている。
好きな言 葉は 、 出る杭は 打たれる。
「 」
- 4. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ATM
雑 誌
- 5. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ATM
雑 誌
- 6. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
ATMで
陳列棚 お金を下ろす
コピー機 ATM
雑 誌
- 7. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
ジャンプを
立ち読み 陳列棚
コピー機 ATM
雑 誌
- 9. レジに並びつつ
陳列棚 HOTコーヒーを選ぶ
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ATM
雑 誌
- 10. 陳列棚
PONTAカードを出し
飲 陳列棚 お金を払う
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ATM
雑 誌
- 11. 陳列棚
飲 陳列棚
料
・ レ
冷
ジ
凍
食 陳列棚
品
陳列棚
コピー機 ATM
雑 誌
- 14. Webプロジェクトのプロセス
例 ) 社 E Cサイトにおいて
当
GOAL
Web オペレー
デバイス 広告 成約
サイト ション
- 15. 下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 16. 下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 17. 下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 18. 下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 19. 下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 22. 下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 23. 環境
下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 24. 環境 流入
下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 25. 環境 流入 回遊
下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 26. 環境 流入 回遊 意向
下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 27. 環境 流入 回遊 意向 対応
下層 オペレーター
PC 広告Y LP 1 FD
ページ 佐々木
GOAL
スマート 下層 Web オペレーター
広告G LP 2 成約
フォン ページ 申込 澤田
下層 Web オペレーター
ガラケー 広告O LP 3 山田
ページ 問合
下層 オペレーター
タブレット 自然 検索 LP 4 資料請求
ページ 佐藤
- 30. 遷 移 率も指 標となります。
10,000 6,000 1,000 300 40
環境 流入 回遊 意向 対応 成約
60 % 17% 30% 13%
- 31. この 指 標 が 、ユーザー の 行 動を
探るヒントになり、改善を実施した時に
効果があった かどうかの 指 標となります。
- 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
環境 流入 回遊 意向 対応 成約
- 38. 表層 具体的
骨格 ナビゲーション
デザイン
情 報デザイン
構造
要件
戦略
佐々木氏 から、 いた本によると. ..
サイトの目的 頂
抽象的
- 39. 表層 具体的
ビジュアルデザイン
骨格 インターフェース
デザイン
ナビゲーション
デザイン
情 報デザイン
構造 インタラクション 情報
デザイン アーキテクチャ
要件 コンテンツ
機能仕様
要求
戦略 ユーザーニーズ
サイトの目的
抽象的
- 40. 表層 具体的
ビジュアルデザイン
骨格 インターフェース
デザイン
ナビゲーション
デザイン
情 報デザイン
構造 インタラクション 情報
デザイン アーキテクチャ
要件 コンテンツ
機能仕様
要求
戦略 ユーザーニーズ
サイトの目的
抽象的
- 41. 具体的
表層 対応
骨格 意向
構造 回遊
要件 回遊
流入
戦略 環境
抽象的
- 42. 表層 対応
骨格 意向
構造 回遊
要件 回遊
流入
戦略 環境
- 49. メリット
① 改 善 のスピードが 速い
② 効果の応用が可能
③ デザインの成果が具体的に
④ 競 合 に 真 似 されにくい
- 50. デメリット
① 数 値 化 するま で が 大 変
② 失 敗し た 場 合リスクがある
③ 優先順位が低い
- 54. before after
機 種詳 細ページのP Vが 増えたことにより
C V R 0.13% 向上
- 57. デ ザインの 価 値を上げていくには
ユーザーからのフィードバックが重 要
- 58. UX
そのフィードバックが
より良いユーザーエクスペリエンスを
構 築していく力になると考えます。