O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

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

1.231 visualizações

Publicada em

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

Publicada em: Negócios
  • Seja o primeiro a comentar

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

×