website見る練習06

00.選んだサイトはこちら！

村岡総本舗謹製「シベリア」通販 特設ページ

02.このサイトを選んだ理由

• お菓子とか食べ物系をいつかやってみたいから

• どう見せるのかな？と気になった

03.概要

カステラで羊羹を挟んで食べる昔懐かしいお菓子「シベリア」。
村岡総本舗では長年「羊羹」と「カステラ」を作り続けてきた。そんな本店が「シベリア」を作ってみた。それを発表するLP。

04.目的

村岡総本舗から「シベリア」が出たことを知らせる。
シベリアを購入してもらう。

05.ターゲット予想

40～50代主婦、女性

06.ファーストビュー

• 商品がパッケージに包まれた未開封の状態で並べた写真2枚が自動で切り替わる

• 左側にロゴ

• 「小城羊羹初祖の村岡総本舗がシベリアを作りました。MURAOKA SOHOMP SIBERIA」という主題が写真の下の白地のスペースに書いてある。すぐに何のサイトかがわかる。

07.ナビゲーションメニュー

• FVと主題の下にナビがある。変わっている。FVの写真をメインに見せたかったのかも。FV上にメニューがないことでFVがカタログのような上品さが出ている。

• メニューをタップすると、別ページに移動するのではなく、下にスクロールする。

08.フォント

• FOT-筑紫Aオールド明朝 Pr6 M

大見出し27px、中見出し19px、本文15px

こちらのフォント1種だけだった。
縦書きの部分など画像になっている部分もある。

09.配色

• 下地…#FFFFFF　白

• キーカラー…#D3B048　黄金色

• 文字色…#000000　黒

• 補助色…#F5F1EB　薄い黄色

10.考察や気づき

• 文字色に真っ黒を使っていて珍しいと思った。

• フォントは1種類だけで、色数、文字の大きさの数が少なくとてもがシンプルなのに綺麗。

• FVの上部にメニューがなく、上品さがあるが、「不便さは出ないのか？」と考えたときに、そもそもページが長くなく単ページで完結しているので、メニューなどなくても下まで読み終えることがほとんどと踏んで、メニューがFVになくスクロールしてもFIXしないのかもと思った。上品等世界観のイメージを強く押し出すことで美しく魅力的になり結果的最後まで読むのでメニューはあしらい程度にしているということなのかも。

• FVの写真が商品パッケージの写真で、主題とメニューの下に商品の中身の写真が来ている。パッケージもかわいいというのと、開ける楽しみ、どんなお菓子なの？というワクワク感のためにパッケージそして中身という順序で見せているのかもしれない。

• そしてその写真の下に、村岡総本舗のシベリアの誕生秘話みたいなものを語っている。読ませるものは縦組みで。これまでも部分で縦組みにしているサイトがあったがそれは全部「ストーリー」「歴史」など読ませるところに使っていた。日本に人に根付いた「教科書」「新聞」「本」などのものが縦組みだから「歴史」や「ストーリー」とイメージが結びつくのかも。

• メニューでは「はじめに」「村岡総本舗謹製「シベリア」の特徴」「素材へのこだわり」「村岡総本舗の歴史」「購入を希望の方」となっているが、「村岡総本舗謹製「シベリア」の特徴」「素材へのこだわり」「村岡総本舗の歴史」は一つ一つの項目として区切られているのではなく「01村岡総本舗謹製「シベリア」の特徴」「02素材へのこだわり」「03村岡総本舗の歴史」となっていてLPなどでよくある「3つのポイント」に値する部分であることがわかる。メニューなんて押さないで見たら、というかほとんどの人は押さないで見ると思うが、そのときに01、02、03と流れをつくれば自然。いちいち中見出しを大きく真ん中に入れていたら短い話なのに区切られていてリズムがつかめない。メニューには区切って入れているのは「話題」が異なるから。

• シベリア断面図がシベリアの切り抜き写真ではなく、角丸の長方形のクリッピングマスク？のような状態で、かわいく見やすい。自分なら商品の切り抜き使うのが一番いいでしょ？と考えなしに使ってしまうところだ。あえて長方形に収めることで収まりがいいし、断面図を載せるスペースが小さく限られていたとしても断面部分を大きく拡大してのせればいいだけ。

• 「歴史」の項目は写真の載せ方が。新聞っぽいレイアウト、WEBを感じさせないのはバラバラに自由に配置しているように見せていることでそう感じる。

• ちなみに、スマホ版は全部横書き、写真の配置もPC版に比べると箱にしっかり入っている感じ。