日本ウェブ協会のUstream番組「IAチャンネル：自社サイト最適化講座」vol.6

1. IA2010フォーラム：IAチャンネル
自社サイト最適化講座 vol.6
地ビール会社サンクトガーレン：
リニューアル進行中
2010-01-13
Rakuten, Inc.
Web Analytics & Optimization
Evangelist
清水 誠

2. 発注側 受注側
Mikiさん
（広報） 清水 B社
（Web担）
CMS
© 2010 Makoto Shimizu 2

3. デザインを調整
していました
© 2010 Makoto Shimizu 3

4. © 2010 Makoto Shimizu 4

5. デザインへの注文
 もっと紫メインに
 醸造所の壁も一面が紫
 修道士を入れて
 これはブランド。
 メイン画像はプロモーション用に
 時々入れ替えたい
© 2010 Makoto Shimizu 5

6. © 2010 Makoto Shimizu 6

7. デザインへの注文
 もっと紫メインに
 チョコビールは黒ベースで
 バレンタインではなくチョコなんです
 バナー上の帯が余計
 バナーは３枠必要
© 2010 Makoto Shimizu 7

8. © 2010 Makoto Shimizu 8

9. デザインへの注文
 修道士が小さい
 下へ移動
 メイン画像の押せる感を出す
 ボタンや文言で
 商品バナーがクドイ
 白ベースであっさりに
 淡いカラーはNG
 うちのカラーにはない。違和感
© 2010 Makoto Shimizu 9

10. Web担からのアドバイス
 メニューはテキストで日本語に
 CMSで自動更新するため
 金をアクセントカラーに
 醸造所壁のロゴを踏襲。高級感を出す
 グラデーションを使うと高級感が出る
© 2010 Makoto Shimizu 10

12. デザインへの注文
 フォントが古風。明朝の方が高級感？
 紫の帯がしっくりこない
© 2010 Makoto Shimizu 12

13. Web担からのアドバイス
 メニューとタイトルは画像ではないので
 読みやすいゴシック系がオススメ
 仮名ロゴのレトロ感を踏襲し下記に
1. ヒラギノ角ゴ Pro W3
2. メイリオ
3. Osaka ※環境により異なる
4. ＭＳ Ｐゴシック ので複数指定
© 2010 Makoto Shimizu 13

14. Web担からのアドバイス
 帯のグラデーションと角丸やめましょう
 工場壁のように切り込みを入れ、シャープ
でモダンなイメージを出しましょう
© 2010 Makoto Shimizu 14

15. デザインへの注文
 帯がクドイのであっさりにしましょう
案１：紫に金でアクセント 案２：金でグラデ
お知らせ
お知らせ
おすすめ
© 2010 Makoto Shimizu 15

16. お知らせ お知らせ
© 2010 Makoto Shimizu 16

17. デザインへの注文
 修道士は入れただけ？切れている
© 2010 Makoto Shimizu 17

18. デザインへの注文
 商品の画像が押せるバナーに見えない
 もっと写真でシズル感を
 ロゴは要素を残して工夫を
© 2010 Makoto Shimizu 18

19. Web担からのアドバイス
 商品訴求方法はサイトやPOPで一貫性を
 情報量や大きさのバリエーションはOK
TOP ラインナップ ラインナップ
© 2010 Makoto Shimizu 19

20. デザインへの注文
 商品の位置を指定
 カスタムも追加したい
© 2010 Makoto Shimizu 20

21. Web担からのアドバイス
 エリアの位置づけ、ユーザーのフローを整
理すると良いです
TOP 下層
© 2010 Makoto Shimizu 21

22. １
王道ビール お知らせ
左カラムで
理解を深め、 ←新商品、イベント、
興味を持ち、 新コンテンツの紹介
２
具体的な商 （まとめる）
品を選ぶ。
3 さらに飲む・買う方
法を調べる
スイーツビール
ブログ
←Blog等はリピーター
用。下層ページにも入
れるので下でもok

23. メニュー１ 王道ビール
メニュー２
メニュー３
お知らせ
TOP以外の全ページに左カ
ブログ ラムを入れる
• 幅が広すぎるとスカスカ
• 下層ページへのリンクは
CMSで自動生成が楽
• 非TOPでもお知らせやバ
ナーを掲載すべき（常連
はTOPを見ない）

24. デザインへの注文
 商品のバナーはもっと工夫を
© 2010 Makoto Shimizu 24

25. デザインへの注文
 商品のバナーはもっと工夫を
© 2010 Makoto Shimizu 25

26. デザインへの注文
 商品のバナーはもっと工夫を
© 2010 Makoto Shimizu 26

27. デザインへの注文
 商品のバナーはもっと工夫を
© 2010 Makoto Shimizu 27

28. デザインへの注文
 例えば…
© 2010 Makoto Shimizu 28

29. デザインへの注文
 例えば…
© 2010 Makoto Shimizu 29

30. デザインへの注文
 例えば…
© 2010 Makoto Shimizu 30

33. Web担からのアドバイス
ブ
ゴ ア ラ ペ
YOKOHAMA XPA
中
ゴ
ク ー し
っ ン 毒
性 ウ 普
通 ー 病
み
お ゴ ル し か バ を ン 水 の ル ビ つ
か
わ
いク
け デ っ
か
り
コ ー 秘
め ポ に
感
ビ
ー エ タ
感ー
き
に
率り る ン り ク エ た ー じ ル ー な
、
エ 苦 、
ー 黒
タ る を
ル 、る
No.
味 濃
１
ー ル ー さ
ル

35. 買い方ページ用コンテンツ
•買い方
•オンラインで買う •お店で買う
■サンクトガーレン直営【地ビールショップ】 全国○箇所のお店で買えます、取扱い商品が
お薦めビール・売れ筋ビールをまとめたセット ○○（全部買えるわけではないと伝える）
をご⽤意しました。注⽂すると○⽇で届きます。
【⽀払】カード・代引・銀⾏振込
■お好み注⽂フォーム 実際の⽩い箱 •お店で飲む
銘柄の指名買いができます。 に６本程度詰
【⽀払】代引・銀⾏振込のみ めた開封写真 全国○箇所の飲⾷店で飲めます、樽なので新鮮、
を 泡が○○、○○が通年で飲める、などメリット
を訴求
© 2010 Makoto Shimizu 35

36. 買い方ページ用コンテンツ
•買い方
•オンラインで買う
■サンクトガーレン直営【地ビールショップ】 ■お好み注⽂フォーム
お薦めビール・売れ筋ビールをまとめたセット 銘柄の指名買いができます。
をご⽤意しました。注⽂すると○⽇で届きます。 【⽀払】代引・銀⾏振込のみ
【⽀払】カード・代引・銀⾏振込
■電話で注⽂する
電話でのご注⽂は 046-224-2317へお願いし
ます。
【⽀払】代引・銀⾏振込のみ
•お店で買う •お店で飲む
全国○箇所のお店で買えます、取扱い商品が 全国○箇所の飲⾷店で飲めます、樽
○○（全部買えるわけではないと伝える） なので新鮮、泡が○○、○○が通年
で飲める、などメリットを訴求
© 2010 Makoto Shimizu 36

37. 買い方ページ用コンテンツ
•ご購入
通信販売で買う 店頭で買う
■サンクトガーレン直営【地ビールショップ】 全国○箇所のお店で買え
お薦めビール・売れ筋ビールをまとめたセット ます、取扱い商品が○○
をご⽤意しました。注⽂すると○⽇で届きます。 （全部買えるわけではな
【⽀払】クレジットカード・代引・銀⾏振込 いと伝える）
オンラインで注文 お店で飲む
銘柄の指名買いはこちら。 全国○箇所の飲⾷店で飲
【⽀払】代引・銀⾏振込のみ めます、樽なので新鮮、
お好み注⽂フォーム 泡が○○、○○が通年で
飲める、などメリットを
訴求
電話で注文
■電話
【⽀払】代引・銀⾏振込のみ
046-224-2317
© 2010 Makoto Shimizu 37

38. 発注と受注の
生産的な関係
のために
© 2010 Makoto Shimizu 38

39. 発注側が気を付けるべき留意点
 もっと頻繁に意見を
 うまく伝えられないなら、
方法を変えて何度も伝えるしかない
 専門家のアドバイスを
 中立な立場で間に入ってもらう
 ただし完璧を求めない
 時間がかかる＝コストがかかる
 前よりは良くなる
© 2010 Makoto Shimizu 39

40. 受注側が気を付けるべき留意点
 デザインのプロとして説明責任を果たす
 デザインの根拠は？
 推奨は？
 待たずに引き出す
 見るべきポイントを具体的に
 レビューは締切を
過ぎるとどうなるのか？
© 2010 Makoto Shimizu 40

41. bingo!CMS
の使い方
© 2010 Makoto Shimizu 41

42. 公開までの流れ
と
スケジュール
© 2010 Makoto Shimizu 42

43. 残っているタスク
 TOP以外にも意見を
 状態は気にしないで思うことをすべて
 早く頻繁なほど良い
 コンテンツ（文章・画像）の最終確認を
 文章やキャッチコピー
 旧ショップのプログラム移行を依頼
 ２月になると旧サーバーの延長が必要
 SSLの証明書を購入します
© 2010 Makoto Shimizu 43