梢のあみめ。それはWEBの世界のはしくれのものであるために、WEBサイトのレビューを日々綴るブログです。

カテゴリー: ECサイト

No.011 チーズガーデン-CHEESE GARDEN

Web業界のはしくれのものになるために、ページを見る目を養うwebサイトレビュー。

第11回目は栃木県那須塩原市発のチーズケーキのショップ、「CHEESE GARDEN 」のサイト。

白と深緑が爽やかでゆったりした印象のサイトでした。

 

https://cheesegarden.jp/

 

チーズケーキ・ベイクドチーズケーキ・レアチーズケーキ・フロマージュ・クッキー・フィナンシェ・ガレット・季節のチーズケーキ・お歳暮・お年賀・お中元・ギフト・スイーツ・常温保存・工場直送

(ここにはいつもサイトの説明文を抜粋しているのですが、なんだこの一昔前のキーワードの羅列のようなdescriptionは…。まあどういうサイトなのかは何となくわかるけれども)

 

 

 

配色

白ベースに、青みよりの深緑。

ベース:#ffffff

メイン:#315147(他、表示場所によって微妙に色が違う緑)、#f2f5f4(フッターなど、邪魔にならないグレー)

アクセント:#003333(濃い深緑)

テキスト:#333332

 

 

フォント

見出しは明朝体、本文はゴシック体。

見出し:”Sabon Next”, serif

本文:Roboto, sans-serif

 

レイアウト

PCファースト。
ブレイクポイント:600px

line-height: 1.6~1.7くらい

内部コンテンツ幅: 最大1130px
セクション間空き:見た目でPC120px / SP60pxくらい空いて見えるように調整

ファーストビュー

No.011 チーズガーデン -CHEESE GARDEN

No.011 チーズガーデン -CHEESE GARDEN

商品画像が下からふわっと浮かび上がってきます。

 

 

導線

上部にヘッダーバーが追従(position:fixed;)。

右下にマイレージポイントの紹介と称し、ログインと会員登録への誘導を行うボタンが追従。

 

コンテンツ

PCサイズ表示限定で、「店舗紹介」コンテンツと「ブランド紹介」コンテンツの画像、「大口注文のご案内」コンテンツの背景画像がパララックス効果でずれてスクロールします。

(この手のサイトを「ページ全体をキャプチャ」機能でスクショ撮るとズレて表示されてしまうのか…学びを得た)

No.011 チーズガーデン-CHEESE GAEDEN フル画像

No.011 チーズガーデン -CHEESE GARDEN

 

 

ブランドコンセプトページは、中央に本文を記載。

少し狭めのコンテンツ幅にしてボックスを中央寄せ、文章そのものは左寄せ。

ゆったり読ませたい箇所には頻出?

 

「チーズガーデンについて」より

「チーズガーデンについて」より

 

梢のあみめ | Webサイト100選

No.001 ユニクロ公式オンラインストア

Web業界のはしくれのものになるために、ページを見る目を養うwebサイトレビュー。

第1回目は日本を代表するファストファッションブランド、ユニクロの公式オンラインストアです。

サイトはこちらから https://www.uniqlo.com/jp/ja/

ユニクロ公式オンラインストア。レディース・メンズ・キッズ・ベビー服のアイテムを豊富にご用意。ユニクロのアイテムを使ったコーデや新作、お得な情報も配信。

 

ターゲット

基本的に性別・世代を問わない。

 

ファーストビュー

現在開催しているキャンペーンや、目玉商品がメインビジュアルとして目に入ってきて、横方向の自動スライドショーと、スクロールで見る縦方向のスライドショーが組み込まれている。
下にスクロールしていくと必然的に全てのキャンペーンに目を通すことになる。

 

 

ナビゲーション

追従型のヘッダーナビゲーション。
マウスホバーでメガドロップダウンメニューが表示される。
わざわざクリックする必要がないのが使いやすい。

 

梢のあみめ | Webサイト100選

No.002 無印良品公式オンラインストア

Web業界のはしくれであるために、ページを見る目を養うwebサイトレビュー。

第2回目は無印良品の公式オンラインストア。

先日レビューしたユニクロとは、共にシンプルな衣料品を扱うブランドであるという点で競合する。しかしヘビーユーザーの層の違いからコンテンツに特色が見られた。

https://www.muji.com/jp/ja/store

無印良品は衣服、生活雑貨、食品という幅広い品ぞろえからなる品質の良い商品として、1980年に生まれました。現在、全世界で700店舗を超え、商品アイテムは、約7,000品目を扱っています。

 

ターゲット

世代や年代を問わないブランド。
ブランドのヘビーユーザーは女性であり、特に40代が多いそう。

無印良品に「惚れた」のはどんな人なのか?ブランドの強みをデータ分析でマーケコンサルが考察(参考サイト)

 

ファーストビュー

その時期におすすめの商品のキャンペーンページへのリンクがメインビジュアルとして真っ先に目に飛び込んでくる。

執筆当時(11月)は雨水を弾くダウンジャケットと、綿のインナーのキャンペーンページだった。

 

導線

追従型のヘッダーナビゲーション。普段は隠れていて、ユーザーがページの上部に戻ろうとスクロールをすると出てくる形式。
こういうナビゲーションは、コンテンツの閲覧を邪魔しないというメリットと、ナビゲーションがないユーザーの不安感とでイーブンな気がしている。

 

キャンペーンページだと、グローバルナビゲーションではなくキャンペーンページの内容に即したナビゲーションが表示される。

試しに綿のインナーのキャンペーンページに移動すると、「あったか綿」「あったか綿 厚手」「あったか綿 ウール」の3つのタブが上部に追従します。タブ切り替えでその商品に素早くアクセスできる。

無印良品オンラインストアの、あったか綿の紹介ページ。上部に3つの商品タブが追従し、タブ切り替えで商品ごとの詳細が表示される。

タブの下のラインの色とメインビジュアルの色がリンクしており、自分がなんのタブを開いているのかが直感的に分かる。

ただし再度グローバルナビゲーションにアクセスしたい場合には、ページの最上部までスクロールしなければならない。

 

 

トップページのコンテンツ

ファーストビューから下に見ていくと、季節のおすすめやネットストアの情報の下に商品カテゴリの一覧がある。

PCだと全部見えていて、モバイルだとアコーディオンパネルになって折りたたまれている。

そのあとには「ネットサービスの便利なサービス」という形で送料無料の案内がある。

「いろいろな無印良品(他ブランド展開紹介)」「良品計画について(企業情報や採用情報など)」「読みもの」「イベント」の順でコンテンツが続いている。

 

個人的に面白いと思った「読みもの」コンテンツには日めくりの商品紹介ページがあったり、ライフスタイルマガジンのようなページがあったり、雑誌のような感覚で読み進められる。
無印良品ヘビーユーザーの情報収集元に雑誌が多いという点を考慮したコンテンツなのかなと思った。

 

一方でECサイトであることを踏まえると、わざわざ「良品計画について」のセクションが割かれているのは冗長であるように感じた。

 

 

梢のあみめ | Webサイト100選