ステップアップ実務セミナーB「ECサイト設計」全ページ

1. 事例例で学ぶ、Web制作者のための実践知識識！
理事・事務局長 杉浦 治
©
Copyright Accreditation Council for Internet Retailer Ability 1

2. ü はじめに
ü Webアーキテクト のポイント
1. 顧客はだれか？ ニーズは何か？ を理理解する。
2. ショップの特徴をサイト構造に盛り込む。
3. 必要なコンテンツを漏漏らさず、基本どおりレイアウトする。
4. カラーデザイン、フォントデザインのルールを設定する。
5. コンテンツの良良し悪しを決定する。
6. KPIを設定し、改善サイクルをスケジュールに組み込む。
ü まとめ
©
Copyright Accreditation Council for Internet Retailer Ability 2

3. お客様の購買⾏行行動を理理解し、購買⼼心理理に合わせたサイト設計をする。
お客様
購買⼼心理理の変化
情報 情報 情報 情報 情報 情報 情報 情報 情報
ECサイト設計
ショップ
ページ デザイン
コンテンツ レイアウト
©
Copyright Accreditation Council for Internet Retailer Ability 3

4. ü サイト設計コンセプトシートを作成する。
◎ 顧客セグメントと顧客ニーズ
◎ 基本ページと特徴ページ
◎ ページ概要、コンテンツチェック
ü 絵コンテに反映させてみる。
©
Copyright Accreditation Council for Internet Retailer Ability 4

5. ©
Copyright Accreditation Council for Internet Retailer Ability 5

6. 顧客セグメント
基本ページ・チェックリスト
商品カテゴリアイディア
販促ページ、ランディング
特徴ページ
p トップページ
p 商品種類
p 季節販促
p
p 特商法に基づくページ
ü
ü
ü
p 会社概要
ü
ü
ü
p 操作方法（サイト）
p 活用シーン
p アニバーサリー
ü
p 利用案内（サービス）
ü
ü
ü
p FAQ
ü
ü
ü
p スタッフ紹介
p 顧客セグメント
p わけあり系
p
p スタッフ・ブログ
ü
ü
ü
p プライバシーポリシー
ü
ü
ü
顧客ニーズ
p 問い合わせフォーム
p ニーズ
p 新規獲得
ü
p メルマガ登録
ü
ü
ü
p 会員ページ
ü
ü
ü
p カート
p
p リピート促進
p
p
ü
ü
ü
p
ü
ü
ü
p
p
p
ü
p
ü
ü
ü
ü
ü
ü
カラーデザインのコンセプト
フォントルールのコンセプト
サイト全体のKPI
カラーデザインのコンセプト
p PV
p
p UU
p
p 滞在時間
p
p コンバージョン率
p

7. ページコンテンツのチェックシート
タイトル：
概要：
KPI： □ PV □ UU □ 滞在時間 □ 参照元・メディアなど
□ ファーストビュー
□ 特徴の論理的な理由と解説
□ 物語り
広告文と一致しているか？
ファーストビューで伝わった直感的な印象を、論理的に説明して テンポが良いか？
流入時の感情と一致している いるか？詳細な内容へ展開しているか？
想いが伝わるか？
か？
説明内容は、具体的か？ 分かり易いか？
信頼されそうか？
一瞬で心をつかめるか？
他のショップと差別化できているか？
など
特徴が一目瞭然か？
購買意思決定に必要な情報を、漏れなく提供しているか？
キャッチコピーは特徴を示してい 文章は見やすいか？ 適切な単語を使用しているか？
るか？
など
など
□ 機能解説
□ バリエーション
□ 第三者評価
□ 基本情報
必要な情報が掲載されている カラー
お客様の声
か？
デザイン
専門家の声
画像などを使用し、分かり易い サイズ
調査データ
か？
セット
など
活用できそうな印象を与えてい など
るか？
など
□ FAQ
□ 注意事項
□ 付帯サービス
□ クロスセル
□ その他の商品
免責事項
同梱商品
最後までページを見た
瑕疵の判断基準
必要な備品
のに、購入を意思決定
など
便利なグッズ
できない場合に、さら
など
に検討をお勧めする他
の商品へのリンクを提
示し、購買行動の行き
止まりを作らない。

8. ページコンテンツのチェックシート
タイトル：
概要：
KPI： □ PV □ UU □ 滞在時間 □ 参照元・メディアなど
□ ファーストビュー
□ 特徴の論理的な理由と解説
□ 物語り
□ 機能解説
□ バリエーション
□ 第三者評価
□ 基本情報
□ FAQ
□ 注意事項
□ 付帯サービス
□ クロスセル
□ その他の商品

9. 絵コンテのイメージ
9

10. 6つ
©
Copyright Accreditation Council for Internet Retailer Ability 10

11. ©
Copyright Accreditation Council for Internet Retailer Ability 11

12. ©
Copyright Accreditation Council for Internet Retailer Ability

13. ©
Copyright Accreditation Council for Internet Retailer Ability 13

14. ©
Copyright Accreditation Council for Internet Retailer Ability 14

15. ©
Copyright Accreditation Council for Internet Retailer Ability 15

16. ⾃自
分 売 商 商 購 メ
り 品 ⼊入 購 商 商 ン ク
の 品
ニ ⼿手 に に を ⼊入 品 品 テ チ
の 興 つ 意 を ⽀支 を を ナ コ
ー
存 い 思 申 払 受 使 ン ミ
ズ 在 味 て 決 し う け ⽤用 ス を
に を を 調 定 込 取 す を す
気 知 持 べ す む る る す る
づ る つ る る る
く
©
Copyright Accreditation Council for Internet Retailer Ability 16

17. たとえば・・・
テレビをみて、⾃自分も欲しくなる。
季節が来ると、買わなきゃいけない気になる。
©
Copyright Accreditation Council for Internet Retailer Ability 17

18. ©
Copyright Accreditation Council for Internet Retailer Ability 18

19. ©
Copyright Accreditation Council for Internet Retailer Ability 19

20. 1⽉月
初売り
2⽉月 節分、バレンタイン
3⽉月 桃の節句句、卒業記念念、ホワイトデー
4⽉月 ⼊入学記念念、花⾒見見
5⽉月 端午の節句句、⺟母の⽇日、鯉のぼり、GW
6⽉月 梅⾬雨、⽗父の⽇日、夏のボーナス
7⽉月 節電、暑さ対策、七⼣夕、お中元
8⽉月 夏休み、花⽕火
9⽉月 お⽉月⾒見見、敬⽼老老の⽇日
10⽉月 運動会、ハロウィン、孫の⽇日
11⽉月 お歳暮、勤労感謝の⽇日、冬のボーナス
12⽉月 クリスマス、冬休み
©
Copyright Accreditation Council for Internet Retailer Ability 20

21. ü ⾃自家⽤用
ニーズは何？
◎ 新しく○○を始めるから。
⾃自家⽤用
◎ 使っている○○が古くなったから。
• ○○の知識識
◎ 新型の○○が発売されたから。
• ○○性能アップ
ü プレゼント • 性能⽐比較
プレゼント
◎ 結婚
• 喜ばれる
◎ 中元、歳暮 • 邪魔にならない
◎ 誕⽣生⽇日 • 伝えたいメッセージ
がある
ü ・・・
©
Copyright Accreditation Council for Internet Retailer Ability 21

22. ©
Copyright Accreditation Council for Internet Retailer Ability 22

23. 顧客セグメント
顧客ニーズ
©
Copyright Accreditation Council for Internet Retailer Ability 23

24. 6つ
©
Copyright Accreditation Council for Internet Retailer Ability 24

25. 基本ページ・チェックリスト
商品カテゴリアイディア
販促ページ、ランディング
特徴ページ
p トップページ
p 商品種類
p 季節販促
p
p 特商法に基づくページ
ü
ü
ü
p 会社概要
ü
ü
ü
p 操作⽅方法（サイト）
p 活⽤用シーン
p アニバーサリー
ü
p 利利⽤用案内（サービス）
ü
ü
ü
p FAQ
ü
ü
ü
p スタッフ紹介
p 顧客セグメント
p わけあり系
p
p スタッフ・ブログ
ü
ü
ü
p プライバシーポリシー
ü
ü
ü
p 問い合わせフォーム
p ニーズ
p 新規獲得
ü
p メルマガ登録
ü
ü
ü
p 会員ページ
ü ü ü
p カート
p
p リピート促進
p
p
ü
ü
ü
p
ü ü
ü
p
p
p
ü
p
ü
ü
ü
ü ü ü
©
Copyright Accreditation Council for Internet Retailer Ability 25

26. p124
©
Copyright Accreditation Council for Internet Retailer Ability 26

27. 基本ページ・チェックリスト
商品カテゴリアイディア
販促ページ、ランディング
特徴ページ
p トップページ
p 商品種類
p 季節販促
p
p 特商法に基づくページ
ü
ü
ü
p 会社概要
ü
ü
ü
p 操作⽅方法（サイト）
p 活⽤用シーン
p アニバーサリー
ü
p 利利⽤用案内（サービス）
ü
ü
ü
p FAQ
ü
ü
ü
p スタッフ紹介
p 顧客セグメント
p わけあり系
p
p スタッフ・ブログ
ü
ü
ü
p プライバシーポリシー
ü
ü
ü
p 問い合わせフォーム
p ニーズ
p 新規獲得
ü
p メルマガ登録
ü
ü
ü
p 会員ページ
ü ü ü
p カート
p
p リピート促進
p
p
ü
ü
ü
p
ü ü
ü
p
p
p
ü
p
ü
ü
ü
ü ü ü
©
Copyright Accreditation Council for Internet Retailer Ability 27

28. ©
Copyright Accreditation Council for Internet Retailer Ability 28

29. 基本ページ・チェックリスト
商品カテゴリアイディア
販促ページ、ランディング
特徴ページ
p トップページ
p 商品種類
p 季節販促
p
p 特商法に基づくページ
ü
ü
ü
p 会社概要
ü
ü
ü
p 操作⽅方法（サイト）
p 活⽤用シーン
p アニバーサリー
ü
p 利利⽤用案内（サービス）
ü
ü
ü
p FAQ
ü
ü
ü
p スタッフ紹介
p 顧客セグメント
p わけあり系
p
p スタッフ・ブログ
ü
ü
ü
p プライバシーポリシー
ü
ü
ü
p 問い合わせフォーム
p ニーズ
p 新規獲得
ü
p メルマガ登録
ü
ü
ü
p 会員ページ
ü ü ü
p カート
p
p リピート促進
p
p
ü
ü
ü
p
ü ü
ü
p
p
p
ü
p
ü
ü
ü
ü ü ü
©
Copyright Accreditation Council for Internet Retailer Ability 29

30. 1⽉月
初売り
2⽉月 節分、バレンタイン
3⽉月 桃の節句句、卒業記念念、ホワイトデー
4⽉月 ⼊入学記念念、花⾒見見
5⽉月 端午の節句句、⺟母の⽇日、鯉のぼり、GW
6⽉月 梅⾬雨、⽗父の⽇日、夏のボーナス
7⽉月 節電、暑さ対策、七⼣夕、お中元
8⽉月 夏休み、花⽕火
9⽉月 お⽉月⾒見見、敬⽼老老の⽇日
10⽉月 運動会、ハロウィン、孫の⽇日
11⽉月 お歳暮、勤労感謝の⽇日、冬のボーナス
12⽉月 クリスマス、冬休み
©
Copyright Accreditation Council for Internet Retailer Ability 30

31. ©
Copyright Accreditation Council for Internet Retailer Ability 31

32. ©
Copyright Accreditation Council for Internet Retailer Ability 32

33. 基本ページ・チェックリスト
商品カテゴリアイディア
販促ページ、ランディング
特徴ページ
p トップページ
p 商品種類
p 季節販促
p
p 特商法に基づくページ
ü
ü
ü
p 会社概要
ü
ü
ü
p 操作⽅方法（サイト）
p 活⽤用シーン
p アニバーサリー
ü
p 利利⽤用案内（サービス）
ü
ü
ü
p FAQ
ü
ü
ü
p スタッフ紹介
p 顧客セグメント
p わけあり系
p
p スタッフ・ブログ
ü
ü
ü
p プライバシーポリシー
ü
ü
ü
p 問い合わせフォーム
p ニーズ
p 新規獲得
ü
p メルマガ登録
ü
ü
ü
p 会員ページ
ü ü ü
p カート
p
p リピート促進
p
p
ü
ü
ü
p
ü ü
ü
p
p
p
ü
p
ü
ü
ü
ü ü ü
©
Copyright Accreditation Council for Internet Retailer Ability 33

34. ü 必須のページ
テキストより
ü ショップの特徴を表すページ
レシピ、ギフト、おすすめ
©
Copyright Accreditation Council for Internet Retailer Ability 34

35. ©
Copyright Accreditation Council for Internet Retailer Ability 35

36. ©
Copyright Accreditation Council for Internet Retailer Ability 36

37. ©
Copyright Accreditation Council for Internet Retailer Ability 37

38. 基本ページ・チェックリスト
商品カテゴリアイディア
販促ページ、ランディング
特徴ページ
p トップページ
p 商品種類
p 季節販促
p
p 特商法に基づくページ
ü
ü
ü
p 会社概要
ü
ü
ü
p 操作⽅方法（サイト）
p 活⽤用シーン
p アニバーサリー
ü
p 利利⽤用案内（サービス）
ü
ü
ü
p FAQ
ü
ü
ü
p スタッフ紹介
p 顧客セグメント
p わけあり系
p
p スタッフ・ブログ
ü
ü
ü
p プライバシーポリシー
ü
ü
ü
p 問い合わせフォーム
p ニーズ
p 新規獲得
ü
p メルマガ登録
ü
ü
ü
p 会員ページ
ü ü ü
p カート
p
p リピート促進
p
p
ü
ü
ü
p
ü ü
ü
p
p
p
ü
p
ü
ü
ü
ü ü ü
©
Copyright Accreditation Council for Internet Retailer Ability 38

39. 6つ
©
Copyright Accreditation Council for Internet Retailer Ability 39

40. ©
Copyright Accreditation Council for Internet Retailer Ability 40

41. ü 「辞書で調べて下さい。」
ü 「隣隣のお店で聞いて下さい。」
あなたは、このお店で買いますか？
©
Copyright Accreditation Council for Internet Retailer Ability 41

42. ©
Copyright Accreditation Council for Internet Retailer Ability 42

43. ©
Copyright Accreditation Council for Internet Retailer Ability 43

44. ページコンテンツのチェックシート
タイトル：
概要：
KPI： □ PV □ UU □ 滞在時間 □ 参照元・メディアなど
□ ファーストビュー
□ 特徴の論理的な理由と解説
□ 物語り
広告文と一致しているか？
ファーストビューで伝わった直感的な印象を、論理的に説明して テンポが良いか？
流入時の感情と一致している いるか？詳細な内容へ展開しているか？
想いが伝わるか？
か？
説明内容は、具体的か？ 分かり易いか？
信頼されそうか？
一瞬で心をつかめるか？
他のショップと差別化できているか？
など
特徴が一目瞭然か？
購買意思決定に必要な情報を、漏れなく提供しているか？
キャッチコピーは特徴を示してい 文章は見やすいか？ 適切な単語を使用しているか？
るか？
など
など
□ 機能解説
□ バリエーション
□ 第三者評価
□ 基本情報
必要な情報が掲載されている カラー
お客様の声
か？
デザイン
専門家の声
画像などを使用し、分かり易い サイズ
調査データ
か？
セット
など
活用できそうな印象を与えてい など
るか？
など
□ FAQ
□ 注意事項
□ 付帯サービス
□ クロスセル
□ その他の商品
免責事項
同梱商品
最後までページを見た
瑕疵の判断基準
必要な備品
のに、購入を意思決定
など
便利なグッズ
できない場合に、さら
など
に検討をお勧めする他
の商品へのリンクを提
示し、購買行動の行き
止まりを作らない。

45. ©
Copyright Accreditation Council for Internet Retailer Ability 45

46. ©
Copyright Accreditation Council for Internet Retailer Ability 46

47. ©
Copyright Accreditation Council for Internet Retailer Ability 47

48. ©
Copyright Accreditation Council for Internet Retailer Ability 48

49. ©
Copyright Accreditation Council for Internet Retailer Ability 49

50. ？
？
©
Copyright Accreditation Council for Internet Retailer Ability 50

51. ©
Copyright Accreditation Council for Internet Retailer Ability 51

52. ©
Copyright Accreditation Council for Internet Retailer Ability 52

53. 絵コンテのイメージ
53

54. 6つ
©
Copyright Accreditation Council for Internet Retailer Ability 54

55. L2/p150〜～
©
Copyright Accreditation Council for Internet Retailer Ability 55

56. L2/p150〜～
©
Copyright Accreditation Council for Internet Retailer Ability 56

57. 6つ
©
Copyright Accreditation Council for Internet Retailer Ability 57

58. ©
Copyright Accreditation Council for Internet Retailer Ability 58

59. 素⼈人でも知っておくべき、 3つの要素
カメラ
構図 照明 セッティ
ング
©
Copyright Accreditation Council for Internet Retailer Ability 59

60. ©
Copyright Accreditation Council for Internet Retailer Ability 60

61. ©
Copyright Accreditation Council for Internet Retailer Ability 61

62. ©
Copyright Accreditation Council for Internet Retailer Ability 62

63. ©
Copyright Accreditation Council for Internet Retailer Ability 63

64. ©
Copyright Accreditation Council for Internet Retailer Ability 64

65. 照明
©
Copyright Accreditation Council for Internet Retailer Ability 65

66. ©
Copyright Accreditation Council for Internet Retailer Ability 66

67. ©
Copyright Accreditation Council for Internet Retailer Ability 67

68. ©
Copyright Accreditation Council for Internet Retailer Ability 68

69. ©
Copyright Accreditation Council for Internet Retailer Ability 69

70. ©
Copyright Accreditation Council for Internet Retailer Ability 70

71. ©
Copyright Accreditation Council for Internet Retailer Ability 71

72. ©
Copyright Accreditation Council for Internet Retailer Ability 72

73. ©
Copyright Accreditation Council for Internet Retailer Ability 73

74. ©
Copyright Accreditation Council for Internet Retailer Ability 74

75. ©
Copyright Accreditation Council for Internet Retailer Ability 75

76. ©
Copyright Accreditation Council for Internet Retailer Ability 76

77. 商品タイトル
画像に⼊入れ込むメッセージ
メールマガジンの件名
説明⽂文の⾒見見出し
広告⽂文
©
Copyright Accreditation Council for Internet Retailer Ability 77

78. ⽬目的を明確にすること！ 〜～それぞれの⽬目的は何か？〜～
商品タイトル
画像に⼊入れ込むメッセージ
メールマガジンの件名
説明⽂文の⾒見見出し
広告⽂文
©
Copyright Accreditation Council for Internet Retailer Ability 78

79. ü 5W3H
What、Where、Who、When、Why、How、How much、How many
ü 類語
プレゼント ⇒ ギフト、贈り物、⼟土産、贈答品・・・
ü 検索索トレンド
ü ブログ、Twitter
©
Copyright Accreditation Council for Internet Retailer Ability 79

80. ©
Copyright Accreditation Council for Internet Retailer Ability 80

81. ©
Copyright Accreditation Council for Internet Retailer Ability 81

82. ©
Copyright Accreditation Council for Internet Retailer Ability 82

83. ©
Copyright Accreditation Council for Internet Retailer Ability 83

84. ©
Copyright Accreditation Council for Internet Retailer Ability 84

85. ü 限定感を出す。対象者を絞る。
◎ 年年齢、性別、地域、季節、天候などで区切切る。
期間、個数を限定する。
ü ⾒見見た⽬目を重視する。「印象の強い」⾔言葉葉を選択する。
◎ ボーッとながめても、⽬目に⾶飛び込んでくるか？を検討する。
ü ⼗十分に短い⽂文字列列にする。
◎ よけいな⾔言葉葉を排除する。⽂文章として成り⽴立立たなくて良良い。
©
Copyright Accreditation Council for Internet Retailer Ability 85

86. ü ひらがな、漢字、カタカナのバランスを整える。
ü ⾒見見慣れた漢字を使う。
ü 漢字の意味を確認する。
◎ 例例えば、「寒」「冷冷」「温」、「艶」「装」「魅」、「旬」
「泡」「旨」
ü ⾳音読して、⽿耳で確認する。
ü ⽂文字数を確認する。
◎ 1⾏行行なら8〜～12⽂文字、2⾏行行なら6〜～10⽂文字×2⾏行行
©
Copyright Accreditation Council for Internet Retailer Ability 86

87. ©
Copyright Accreditation Council for Internet Retailer Ability 87

88. ©
Copyright Accreditation Council for Internet Retailer Ability 88

89. 絵コンテのイメージ
89

90. 6つ
©
Copyright Accreditation Council for Internet Retailer Ability 90

91. サイト構築〜～改善のサイクル 【本講座の⽬目的】
顧客ニーズを理理解し、サイトを設
計する。
Plan
戦略略オプション
• サイト制作
Ac@on Do • サイト公開
• 広告実施
Check
KPIの評価
©
Copyright Accreditation Council for Internet Retailer Ability 91

92. ü 定期的（⽇日次、週次）に確認する。
◎ 異異常値を⾒見見つける。
◎ ⽬目標と⽐比較する。
◎ 標準値と⽐比較する。
ü 理理由（仮説）を考える。
ü 対策オプションを考える。
ü 優先順を決めて実⾏行行する。
©
Copyright Accreditation Council for Internet Retailer Ability 92

93. ü 課題とは何か？
ü 課題の分析とは何か？
ü 対策を考える際に、課題を混同しない。
ü 複数の課題に対しては、それぞれ対策を考えるが、
同時に実施するのではなく、優先順を決める。
©
Copyright Accreditation Council for Internet Retailer Ability 93

94. ü はじめに
ü Webアーキテクト6つのポイント
1. 顧客はだれか？ ニーズは何か？ を理理解する。
2. ショップの特徴をサイト構造に盛り込む。
3. 必要なコンテンツを漏漏らさず、基本どおりレイアウトする。
4. カラーデザイン、フォントデザインのルールを設定する。
5. コンテンツの良良し悪しを決定する。
6. KPIを設定し、改善サイクルをスケジュールに組み込む。
ü まとめ
©
Copyright Accreditation Council for Internet Retailer Ability 94

95. 1. 顧客はだれか？ ニーズは何か？ を理理解する。
2. ショップの特徴をサイト構造に盛り込む。
3. 必要なコンテンツを漏漏らさず、基本どおりレイアウトする。
4. カラーデザイン、フォントデザインのルールを設定する。
5. コンテンツの良良し悪しを決定する。
6. KPIを設定し、改善サイクルをスケジュールに組み込む。
©
Copyright Accreditation Council for Internet Retailer Ability 95

96. ©
Copyright Accreditation Council for Internet Retailer Ability 96