webサイト分析(4)株式会社虎屋
【概要】
和菓子の製造・販売を行う株式会社虎屋のコーポレートサイト
【想定ターゲット】
どんな人：40~60代
流入理由：商品を探したい、取り寄せしたい、販売店舗を知りたい
【第一印象】
ページ一面が画像になっているが、和菓子がポツンと1つだけ置かれている
→シンプルかつ、おすすめ商品かな？と興味をそそる
→さくらもち、桜の花の形の何かが入っている羊羹、半分から上がピンクで下が緑色の羊羹が表示されていた。春っぽい商品なので季節ごとに変わるかもしれない！背景の色味が春らしくて可愛い。
【デザインポイント】
ヘッダー：文字のみになっている、背景なく、一面に広がるメインビジュアルに重ねて表示されている。
→お知らせが表示されるまでスクロールするとヘッダーの背景が白になる＆テキストサイズが少し小さくなる(固定表示)
ナビ：ホバーで下線表示。
とらやの和菓子・オンラインショップのみホバーと同時にドロップダウンメニュー表示、かなり細かく書かれているので見たい商品が探しやすい。
オンラインショップ→メニューの羊羹をクリック→直接羊羹のページに飛べる。一度オンラインショップに飛ぶ必要がない◎
メインビジュアル
※第一印象に補足！
ページ一面が画像になっているが、和菓子がポツンと1つだけ置かれている
→シンプルかつ、おすすめ商品かな？と興味をそそる
→さくらもち、桜の花の形の何かが入っている羊羹、半分から上がピンクで下が緑色の羊羹が表示されていた。春っぽい商品なので季節ごとに変わるかもしれない！背景の色味が春らしくて可愛い。
お知らせ
定義リスト
ボタンをホバーで枠線が濃くなる(黒になる)
店舗・茶寮を探す、とらやについて
店舗の写真→よりとらやを身近に感じることができる
和菓子のイラスト→あえてイラストにしたのはなぜだろう？温かみを表現したかったのかな。写真じゃないからこそ、老舗っぽいイメージもできる。
虎屋文庫
読み物として設置されている。和菓子について知ることができて面白い
ホバーで画像拡大、テキストは透過。
SNS
インスタグラムの写真のみ。あえてテキストを表示しないことで、読みたくなる→クリックして飛ぶように導線組まれてるとみた。
フッター
英語・中国語の表示切替はフッターに設置されている
動き
・メインビジュアル→5～6秒で画面遷移。切り替え早い。
・オンラインショップ→矢印をクリックするとスライド。矢印ホバーで拡大。商品画像ホバーで拡大＆白くもやがかかる
【カラー】
テキスト ＃111111
背景 ＃ffffff ＃111111
【フォント】
【構成】
ヘッダー
メインビジュアル
お知らせ
オンラインショップ
店づくり→店舗・茶寮を探す
経営理念→とらやについて
菓子資料室 虎屋文庫
公式インスタグラム
メルマガ登録
フッター
【レスポンシブ】
・店舗・茶寮を探す、とらやについて の
写真とテキスト部分が縦表示
・ インスタ写真が2×2表示(スマホ)
・ フッターナビ縦表示
【考察・感想】
ベースはモノクロでシンプルだが、その分和菓子の色が映えていた。春ということもあり、桜色やうぐいす色が使われていたので、他の季節の色づかいも楽しみになる。
見出しは明朝体になっていたため、老舗和菓子店の高級感や厳かな雰囲気が出ていた。
一部店舗写真やイラストを挟むことで、親しみやすさも感じ取れた。