webサイト分析(1)サッポロビール株式会社

サッポロビール

【概要】

サッポロビールのコーポレートサイト

【想定ターゲット】
20歳以上の男女
どんな人：飲酒習慣のある人
流入理由：サッポロビールの商品を知りたい、キャンペーンに興味を持った、ビールができるまでを知りたい、公式が出しているおすすめの飲み方、おつまみを知りたい、新商品を知りたい、等

【第一印象】

シンプルな印象、デザインより商品画像を前面に押し出している

【デザインポイント】

ヘッダー
一番上にお客様サポート、飲食店様サポート、English、サッポロホールディングスへのリンク(サポートは急を要するため上にあると見つけやすい)

ナビ：商品情報、CM・動画、 エンタメ 、レシピ、 工場見学・ミュージアム、 キャンペーン、マイアカウント、企業情報、採用情報

・マイアカウント、企業情報、採用情報→ロゴ付。商品情報ではないため？
・商品情報→メガメニュー(画像付)になっている。お酒の種類が分からない人でも探しやすそう
・ホバーで下線(#F3BE00)

メインビジュアル
定番商品の写真をスライドショーで表示
中央の画像は通常表示だが、左右の画像は切り替えで暗く表示

フッター
SNSリンクが貼ってある、ロゴ使用。浮いておらず、馴染んでいる。

動き
・キャンペーンや新商品情報はスライドショー→より多くの情報を受け手に伝える
・ホバーで商品情報が拡大

全体の配置
画像多め
スライドショー→グリッド→スライドショー→グリッドの繰り返し
ニュースリリース、お知らせはテキストのみ
L新商品情報もテキスト→あえてクリックさせ印象に残す効果？

【カラー】

全体的なベース#F1F2F6
ホバー時下線、部分的なボタン#F3BE00(ロゴの★マークとは違う色だった)
グレー部分#F1F2F6
ヘッダー一部#000000

【フォント】

YakuHanJP

【構成】

ヘッダー(ナビ)
メインビジュアル
※重要なお知らせ
ニュースリリース(新商品情報)
商品情報
商品カテゴリ
キャンペーン
おすすめレシピ
新商品情報
CM・動画
エンタメ
お知らせ(お詫びなど)

【レスポンシブ】 

・シンプルなレイアウト。背景、フォントが大人しいので画像が映える
・おすすめレシピ：定番餃子の画像が大きめなので食欲をそそる
・商品情報が2×3から3×2に。CM・動画が3×2から縦3つ並びに。(どうやって選ばれた3つの動画なんだろう・・気になる)

【考察・感想】
商品バナーが鮮やかな代わりに、基本のデザインがシンプルなので商品が目につきやすいサイトだった。