Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
IA2010フォーラム:IAチャンネル



自社サイト最適化講座 vol.6
地ビール会社サンクトガーレン:
リニューアル進行中

                   2010-01-13
                 Rakuten,...
発注側                            受注側




Mikiさん
(広報)       清水                      B社
         (Web担)
                      ...
デザインを調整
 していました

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




           © 2010 Makoto S...
© 2010 Makoto Shimizu   6
デザインへの注文
 もっと紫メインに


 チョコビールは黒ベースで
    バレンタインではなくチョコなんです
 バナー上の帯が余計
    バナーは3枠必要




           © 2010 Makoto Shimizu...
© 2010 Makoto Shimizu   8
デザインへの注文
 修道士が小さい
    下へ移動
 メイン画像の押せる感を出す
    ボタンや文言で
 商品バナーがクドイ
    白ベースであっさりに
 淡いカラーはNG
    うちのカラーにはない。違和感
     ...
Web担からのアドバイス
 メニューはテキストで日本語に
    CMSで自動更新するため
 金をアクセントカラーに
    醸造所壁のロゴを踏襲。高級感を出す
 グラデーションを使うと高級感が出る




          © 2...
デザインへの注文
 フォントが古風。明朝の方が高級感?



 紫の帯がしっくりこない




         © 2010 Makoto Shimizu   12
Web担からのアドバイス
 メニューとタイトルは画像ではないので
    読みやすいゴシック系がオススメ
    仮名ロゴのレトロ感を踏襲し下記に




     1.   ヒラギノ角ゴ Pro W3
     2.   メイリオ
  ...
Web担からのアドバイス
 帯のグラデーションと角丸やめましょう
    工場壁のように切り込みを入れ、シャープ
     でモダンなイメージを出しましょう




          © 2010 Makoto Shimizu   14
デザインへの注文
   帯がクドイのであっさりにしましょう
       案1:紫に金でアクセント                   案2:金でグラデ
                                      お知らせ

...
お知らせ                           お知らせ


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




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




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




TOP          ラインナップ                ラインナップ

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




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




TOP       下層

        © 2010 Makoto Shimizu   21
1
         王道ビール         お知らせ
左カラムで
理解を深め、                             ←新商品、イベント、
興味を持ち、                             新コンテン...
メニュー1   王道ビール
メニュー2
メニュー3

 お知らせ




                TOP以外の全ページに左カ
ブログ             ラムを入れる
                • 幅が広すぎるとスカスカ
  ...
デザインへの注文
 商品のバナーはもっと工夫を




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




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




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




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




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




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




         © 2010 Makoto Shimizu   30
Web担からのアドバイス




                                            ブ
                    ゴ           ア           ラ           ペ

...
買い方ページ用コンテンツ
•買い方

•オンラインで買う                                 •お店で買う
■サンクトガーレン直営【地ビールショップ】                     全国○箇所のお店で買えま...
買い方ページ用コンテンツ
•買い方


•オンラインで買う
■サンクトガーレン直営【地ビールショップ】      ■お好み注⽂フォーム
お薦めビール・売れ筋ビールをまとめたセット      銘柄の指名買いができます。
をご⽤意しました。注⽂する...
買い方ページ用コンテンツ
•ご購入


通信販売で買う                       店頭で買う
■サンクトガーレン直営【地ビールショップ】         全国○箇所のお店で買え
お薦めビール・売れ筋ビールをまとめたセット   ...
発注と受注の
生産的な関係
 のために
  © 2010 Makoto Shimizu   38
発注側が気を付けるべき留意点
 もっと頻繁に意見を
    うまく伝えられないなら、
     方法を変えて何度も伝えるしかない
 専門家のアドバイスを
    中立な立場で間に入ってもらう
 ただし完璧を求めない
    時間がか...
受注側が気を付けるべき留意点
 デザインのプロとして説明責任を果たす
    デザインの根拠は?
    推奨は?
 待たずに引き出す
    見るべきポイントを具体的に
    レビューは締切を
     過ぎるとどうなるのか?
...
bingo!CMS
 の使い方

  © 2010 Makoto Shimizu   41
公開までの流れ
   と
 スケジュール
  © 2010 Makoto Shimizu   42
残っているタスク
 TOP以外にも意見を
    状態は気にしないで思うことをすべて
    早く頻繁なほど良い
 コンテンツ(文章・画像)の最終確認を
    文章やキャッチコピー
 旧ショップのプログラム移行を依頼
    2...
IAチャンネル:地ビールのIA最適化事例その6
IAチャンネル:地ビールのIA最適化事例その6
IAチャンネル:地ビールのIA最適化事例その6
IAチャンネル:地ビールのIA最適化事例その6
Nächste SlideShare
Wird geladen in …5
×

IAチャンネル:地ビールのIA最適化事例その6

1.233 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Business
  • Als Erste(r) kommentieren

IAチャンネル:地ビールのIA最適化事例その6

  1. 1. IA2010フォーラム:IAチャンネル 自社サイト最適化講座 vol.6 地ビール会社サンクトガーレン: リニューアル進行中 2010-01-13 Rakuten, Inc. Web Analytics & Optimization Evangelist 清水 誠
  2. 2. 発注側 受注側 Mikiさん (広報) 清水 B社 (Web担) CMS © 2010 Makoto Shimizu 2
  3. 3. デザインを調整 していました © 2010 Makoto Shimizu 3
  4. 4. © 2010 Makoto Shimizu 4
  5. 5. デザインへの注文  もっと紫メインに  醸造所の壁も一面が紫  修道士を入れて  これはブランド。  メイン画像はプロモーション用に  時々入れ替えたい © 2010 Makoto Shimizu 5
  6. 6. © 2010 Makoto Shimizu 6
  7. 7. デザインへの注文  もっと紫メインに  チョコビールは黒ベースで  バレンタインではなくチョコなんです  バナー上の帯が余計  バナーは3枠必要 © 2010 Makoto Shimizu 7
  8. 8. © 2010 Makoto Shimizu 8
  9. 9. デザインへの注文  修道士が小さい  下へ移動  メイン画像の押せる感を出す  ボタンや文言で  商品バナーがクドイ  白ベースであっさりに  淡いカラーはNG  うちのカラーにはない。違和感 © 2010 Makoto Shimizu 9
  10. 10. Web担からのアドバイス  メニューはテキストで日本語に  CMSで自動更新するため  金をアクセントカラーに  醸造所壁のロゴを踏襲。高級感を出す  グラデーションを使うと高級感が出る © 2010 Makoto Shimizu 10
  11. 11. デザインへの注文  フォントが古風。明朝の方が高級感?  紫の帯がしっくりこない © 2010 Makoto Shimizu 12
  12. 12. Web担からのアドバイス  メニューとタイトルは画像ではないので  読みやすいゴシック系がオススメ  仮名ロゴのレトロ感を踏襲し下記に 1. ヒラギノ角ゴ Pro W3 2. メイリオ 3. Osaka ※環境により異なる 4. MS Pゴシック ので複数指定 © 2010 Makoto Shimizu 13
  13. 13. Web担からのアドバイス  帯のグラデーションと角丸やめましょう  工場壁のように切り込みを入れ、シャープ でモダンなイメージを出しましょう © 2010 Makoto Shimizu 14
  14. 14. デザインへの注文  帯がクドイのであっさりにしましょう 案1:紫に金でアクセント 案2:金でグラデ お知らせ お知らせ おすすめ © 2010 Makoto Shimizu 15
  15. 15. お知らせ お知らせ © 2010 Makoto Shimizu 16
  16. 16. デザインへの注文  修道士は入れただけ?切れている © 2010 Makoto Shimizu 17
  17. 17. デザインへの注文  商品の画像が押せるバナーに見えない  もっと写真でシズル感を  ロゴは要素を残して工夫を © 2010 Makoto Shimizu 18
  18. 18. Web担からのアドバイス  商品訴求方法はサイトやPOPで一貫性を  情報量や大きさのバリエーションはOK TOP ラインナップ ラインナップ © 2010 Makoto Shimizu 19
  19. 19. デザインへの注文  商品の位置を指定  カスタムも追加したい © 2010 Makoto Shimizu 20
  20. 20. Web担からのアドバイス  エリアの位置づけ、ユーザーのフローを整 理すると良いです TOP 下層 © 2010 Makoto Shimizu 21
  21. 21. 1 王道ビール お知らせ 左カラムで 理解を深め、 ←新商品、イベント、 興味を持ち、 新コンテンツの紹介 2 具体的な商 (まとめる) 品を選ぶ。 3 さらに飲む・買う方 法を調べる スイーツビール ブログ ←Blog等はリピーター 用。下層ページにも入 れるので下でもok
  22. 22. メニュー1 王道ビール メニュー2 メニュー3 お知らせ TOP以外の全ページに左カ ブログ ラムを入れる • 幅が広すぎるとスカスカ • 下層ページへのリンクは CMSで自動生成が楽 • 非TOPでもお知らせやバ ナーを掲載すべき(常連 はTOPを見ない)
  23. 23. デザインへの注文  商品のバナーはもっと工夫を © 2010 Makoto Shimizu 24
  24. 24. デザインへの注文  商品のバナーはもっと工夫を © 2010 Makoto Shimizu 25
  25. 25. デザインへの注文  商品のバナーはもっと工夫を © 2010 Makoto Shimizu 26
  26. 26. デザインへの注文  商品のバナーはもっと工夫を © 2010 Makoto Shimizu 27
  27. 27. デザインへの注文  例えば… © 2010 Makoto Shimizu 28
  28. 28. デザインへの注文  例えば… © 2010 Makoto Shimizu 29
  29. 29. デザインへの注文  例えば… © 2010 Makoto Shimizu 30
  30. 30. Web担からのアドバイス ブ ゴ ア ラ ペ YOKOHAMA XPA 中 ゴ ク ー し っ ン 毒 性 ウ 普 通 ー 病 み お ゴ ル し か バ を ン 水 の ル ビ つ か わ いク け デ っ か り コ ー 秘 め ポ に 感 ビ ー エ タ 感ー き に 率り る ン り ク エ た ー じ ル ー な 、 エ 苦 、 ー 黒 タ る を ル 、る No. 味 濃 1 ー ル ー さ ル
  31. 31. 買い方ページ用コンテンツ •買い方 •オンラインで買う •お店で買う ■サンクトガーレン直営【地ビールショップ】 全国○箇所のお店で買えます、取扱い商品が お薦めビール・売れ筋ビールをまとめたセット ○○(全部買えるわけではないと伝える) をご⽤意しました。注⽂すると○⽇で届きます。 【⽀払】カード・代引・銀⾏振込 ■お好み注⽂フォーム 実際の⽩い箱 •お店で飲む 銘柄の指名買いができます。 に6本程度詰 【⽀払】代引・銀⾏振込のみ めた開封写真 全国○箇所の飲⾷店で飲めます、樽なので新鮮、 を 泡が○○、○○が通年で飲める、などメリット を訴求 © 2010 Makoto Shimizu 35
  32. 32. 買い方ページ用コンテンツ •買い方 •オンラインで買う ■サンクトガーレン直営【地ビールショップ】 ■お好み注⽂フォーム お薦めビール・売れ筋ビールをまとめたセット 銘柄の指名買いができます。 をご⽤意しました。注⽂すると○⽇で届きます。 【⽀払】代引・銀⾏振込のみ 【⽀払】カード・代引・銀⾏振込 ■電話で注⽂する 電話でのご注⽂は 046-224-2317へお願いし ます。 【⽀払】代引・銀⾏振込のみ •お店で買う •お店で飲む 全国○箇所のお店で買えます、取扱い商品が 全国○箇所の飲⾷店で飲めます、樽 ○○(全部買えるわけではないと伝える) なので新鮮、泡が○○、○○が通年 で飲める、などメリットを訴求 © 2010 Makoto Shimizu 36
  33. 33. 買い方ページ用コンテンツ •ご購入 通信販売で買う 店頭で買う ■サンクトガーレン直営【地ビールショップ】 全国○箇所のお店で買え お薦めビール・売れ筋ビールをまとめたセット ます、取扱い商品が○○ をご⽤意しました。注⽂すると○⽇で届きます。 (全部買えるわけではな 【⽀払】クレジットカード・代引・銀⾏振込 いと伝える) オンラインで注文 お店で飲む 銘柄の指名買いはこちら。 全国○箇所の飲⾷店で飲 【⽀払】代引・銀⾏振込のみ めます、樽なので新鮮、 お好み注⽂フォーム 泡が○○、○○が通年で 飲める、などメリットを 訴求 電話で注文 ■電話 【⽀払】代引・銀⾏振込のみ 046-224-2317 © 2010 Makoto Shimizu 37
  34. 34. 発注と受注の 生産的な関係 のために © 2010 Makoto Shimizu 38
  35. 35. 発注側が気を付けるべき留意点  もっと頻繁に意見を  うまく伝えられないなら、 方法を変えて何度も伝えるしかない  専門家のアドバイスを  中立な立場で間に入ってもらう  ただし完璧を求めない  時間がかかる=コストがかかる  前よりは良くなる © 2010 Makoto Shimizu 39
  36. 36. 受注側が気を付けるべき留意点  デザインのプロとして説明責任を果たす  デザインの根拠は?  推奨は?  待たずに引き出す  見るべきポイントを具体的に  レビューは締切を 過ぎるとどうなるのか? © 2010 Makoto Shimizu 40
  37. 37. bingo!CMS の使い方 © 2010 Makoto Shimizu 41
  38. 38. 公開までの流れ と スケジュール © 2010 Makoto Shimizu 42
  39. 39. 残っているタスク  TOP以外にも意見を  状態は気にしないで思うことをすべて  早く頻繁なほど良い  コンテンツ(文章・画像)の最終確認を  文章やキャッチコピー  旧ショップのプログラム移行を依頼  2月になると旧サーバーの延長が必要  SSLの証明書を購入します © 2010 Makoto Shimizu 43

×