Webサイト分析「阿部守商店」

今回は宮城県のお魚を販売している「阿部守商店」さんのWebサイトを分析します。

魚ギフトの通販・お取り寄せ｜宮城塩竈阿部守商店

どうやらTwitterでさまざまな方が「素晴らしい」と絶賛されているWebサイトのようです！

ターゲット

・阿部守商店の商品を買いたい人
・阿部守商店のことを知りたい人
・商品を使ったレシピを知りたい人

サイトのねらい

・お店のコンセプトやこだわりを正しく伝える
・商品を売る
・お店のことを知ってもらう

サイトから受ける印象

・和
・味がある
・落ち着いている

使用フォント

・shippori-mincho
・shippori-antique(Adobe Fonts / 漢字はゴシック、ひらがなは明朝体)
・游明朝
・Helvetica Neue

文字のウエイトがしっかりしていて丁寧な中にも強さがある。

使用カラー

・文字色　#000
・ボタン矢印　#aa0813

・背景に和紙のような、小さい斑点のようなものがついた画像を使用している。写真との境界線も和紙のような感じできっちり綺麗に切れ目があるのではなく、少しけばけばしたような感じ。

余白の取り方

・ほぼ全ての各パーツで1em以上の余白がある。
・それぞれ同じレベルの情報が一塊として見えるくらいしっかり余白がある。

文字の組み方

・縦書き文字を使用している。
・文字の序列をつけてそれぞれ統一している。
　ー見出し　　　　　　　　　　　縦書き・明朝体
　ー小見出し　　　　　　　　　　本文の0.7倍
　ー本文（の読ませたい文）　　　しっぽりアンチック
　ー本文（の補足的な文）　　　　#696a6b（グレー）
・letter-spacing ちょっと広め
・line-height　1.05〜2

写真について

・シンプルな食器を使用しているため、商品が映える。
・お茶漬け→白→朝の爽やかさ、炊き込みご飯→黒→夜と温かさのような雰囲気を感じる。
・暗い部分が多く感じる。でも、決して暗くて「見えない」訳ではなく、落ち着きを感じる。

TOPページの構成

FV（メニュー）
↓
商品写真
↓
メッセージ
↓
商品一覧
↓
おさかなレシピ
↓
美味しさの理由
↓
お知らせ/ブログ
↓
フッター

機能的な特長

・フッターには、ECを利用する人と店舗について知りたい人向けの案内が大きく載っている。ただメニューを並べただけのフッターになっていない。

・コンテンツ構成が商品一覧→レシピとなっているのでより商品に興味を持ちやすい。

・商品の購入完了まで簡単で速い。

動きの特徴

・ページの上の方に筆で描かれたような魚がいるが、スクロールの速度に対して少し速く（大きく？）動く。
下にスクロールしていくと、上にサササッと上っていくような感じ。
魚によっても動く幅が異なっているようだ。

・ボタンのホバー時はborderが太くなり、矢印が右に消えて左から出てくる。

・「阿部守商店について」と「商品一覧」の間に色の濃さの違う波（のような線）が動いている。手前と真ん中と奥で動く速さが異なる。手前と奥が右から左へ、真ん中が左から右へ動いている。

・「商品一覧」の写真はスクロールすると少しずつ縮小していく。写真がウィンドウの上部に到達するまでスクロールされたら、写真は留まり、炊き込みご飯の写真がかぶさるように上にスクロールされてくる。

・「おさかなレシピ」の写真は、そのレシピの項目のホバー時に拡大する。「詳しくみる」の下線は消える。

・ページの遷移の際には、下から阿部守商店のロゴの画面が現れ消えていく。

視線の流れ

・「商品一覧」は見出しが右で内容が左、「おさかなレシピ」は見出しが左で内容が右、「美味しさの理由」は見出しが中央で内容が左右にある。

良いと思ったところ

・トップページだけでなく、「私たちについて」のページの美味しさの理由のスクロールに対する動きも面白かった。スクロールが制御されるとイラっとすることが多いが、このサイトはそれがなかった。スムーズだった。

・波の遠近感をつけるために、手前から奥に向けて薄く、動きが遅くなっている。

・筆で書いたような魚、縦書き文字、フォントと雰囲気が全て合っている。

・スクロールの動きが楽しい。