2. 「山梨果実菓子 和乃果|WANOCA」 ブランドサイト #1日1サイトレビュー
こんにちわ、ayakaです。
今回は、HACK JAPAN ホールディングス 株式会社のブランドサイト「山梨果実菓子 和乃果|WANOCA」をレビューさせていただきます！
サイト選びは下記から行いました。
レビュー
⓪このサイトを選んだ理由:
新鮮な白ブドウ、夕方の桜、白いクリームとレモンシフォン色の生地、夜の粉雪を連想した写真、自動スライドショー式に出ていたファーストビューが、見るだけで癒されて自然とページを見続けたくなるものであった。またファーストビューより下の部分も、配色が白ベースでどんな項目があるかも見やすい見映えであった。上記のように、強く印象に残ったサイトを分析して、自然とページを見続けたくなるサイトはどのようなサイトなのかについての知識を深めたいと思ったため。
① サイト概要:
WANOCAのコンセプト紹介、商品紹介、商品製造の素材紹介、店舗紹介、店舗やオンライン販売等に関するお知らせ、和乃果のブログ紹介、会社概要、オンライン販売ページ
②予想ターゲット層:
メインは山梨県民で、その他は和菓子を食べる頻度が減っている年齢層、つまり全国の20代から30代の若者や１０代以下の子供を持つファミリー層を重視しつつ、それ以上の年齢層もターゲットとして含む。
参考ページ:
(前略)普段、私たち、特に若い人たちは日々の生活の中でそう和菓子を食べなくなってきていますよね。ならばHACK JAPANの企画力やリブランドのノウハウを活かして、和菓子のカタチと見せ方を変えて、地元山梨の方はもちろん、より多くの人にも喜んでもらえる新しい商品・新しい価値を世に送り出そうという事になったんです。(「山梨のそして日本の魅力を「和乃果」に込めて。」項目より)
③全体の印象:
ブランド紹介に武家屋敷内でのシェフによる製造過程の写真が用られていること、店舗案内に武家屋敷の外観写真が用いられていること、また商品や商品の素材の背景写真が全て白であることにより、商品・素材そのものの新鮮さを感じられる。
上記の内容と「⓪このサイトを選んだ理由」で記載したファーストビューの印象を踏まえると、全体の印象としては、山梨県には心が癒される風土があると感じられ、癒しを求めて山梨県を観光してみたいと思いました。
また山梨の新鮮な果物やお菓子に心が魅了され、実際に味わってみたいと感じました。
④配色:
白・グレー・黒
白
・サイト最下部のメニュー内の文字#E9EAE
・ABOUT WANOCA部分の背景: #F4F4FA
・所作部分の背景: #FFFFFC
・果実部分の背景: #F9F8F9
・店舗紹介の背景: #F6F7F6
グレー
・ABOUT WANOCA部分の背景: #F4F4FA
・菓子の紹介部分の背景: #EBE8E9
・ブログ紹介の背景: #F1F2F2
・お知らせ部分の背景: #EBEAEE
黒
・上記以外の文字とサイトの最下部メニューの背景: #1c1c1c
⑤フォント:
日時以外の日本語部分全て: しっぽり明朝 (物静かで上品な明朝体)
日時と英語部分: Jost(上品なゴシック体の１種)
参考:
⑥競合サイト:
⑦このサイトのデザインから学べる事:
・落ち着いた雰囲気のサイトに適するフォントとして、日本語では「しっぽり明朝」、英語では「Jost」が有用であること。
・日本語に用いている上品なフォントが英文字も対応しているものであっても、英語も用いる場合は、英語を別の上品なフォントにすることで、日本語と英語の見え方の区別が明確になり、より上品な印象を与えることができる。
・今回はファーストビューの印象が全体の印象にも大きくつながったので、閲覧者の印象に残るサイトにするには、ファーストビューで閲覧者の目に止まるデザインにすることが重要であると体感できた。
・ファーストビューで印象付ける方法の１つが、キャッチコピーを中央に表示させてから、写真のスライドショーが始まる構造と設定すること。
・「③全体の印象」で山梨の風土や果実について思いを巡らせていたので、このサイトは「閲覧者に山梨を体験させるユーザーエクスペリエンス（UX）」になっていると思った。またUXを加味したサイトを作るための手段として、実際の店舗の外観、その地域の風景や製造過程の写真を載せることや、地域振興への思いを記したブログも掲載することが挙げられると理解できた。
・商品の種類紹介へジャンプするボタン(所作部分)で、それぞれの種類に応じた製造過程の写真を大きいサイズで掲載することで、閲覧者への印象付けやUXにつながること。
・和風を感じるサイトにするには、見出し、又は見出しと本文の両方を縦書きにすることが有用であること。
・メニューの見映えがコンパクトにする方法の１つは、大きな区分を横書き、より詳細な項目を縦書きとすること。
参考サイト
記事作成にあたり上記で示したサイトの他、下記のサイトを参考にさせていただきました。
参考になるサイトを作成して下さった皆さん、ありがとうございました。
https://digitalidentity.co.jp/blog/creative/above-the-fold.html
最後までお読みいただき、ありがとうございました！
クリエイティブを通じて、多くの人をワクワクさせる人材になりたいと思い、日々鍛錬しています！この思いに共感頂ける方はサポートしていただけると嬉しいです😊