青柳総本家さんのサイトを分析してみた
今日は和菓子の日ということで青柳総本家さんのサイトを分析させていただきました。イラストがかわくいて、美味しそうでついつい食べたくなるサイトです。
KNAPのデザイナー3人でトークしてます。
あくまでメンバーで個人的に分析をさせていただいておりますことをご了承ください。
デザイン分析元の基本情報
商品の特徴：青柳ういろうをはじめとする歴史のある和菓子
#和菓子の日 #カエル #イラスト #水彩画 #お菓子 #Webデザイン
URL：https://www.aoyagiuirou.co.jp/
企業名：青柳総本家
トップページ
イラストと写真のバランスが良く、誇りは高く敷居は低くのコピーにあっているサイトです。
-ファーストビュー
サイトに訪れると柳の演出で物語が始まるようなワクワク感があります。柳が開けるとイラストで書かれた和菓子たちが並んでおり、上質でありながらイラストなので親しみも出ています。
-コンテンツ
PRODUCTSでは、イメージビジュアルを使用して、おすすめの定番お菓子ではシンプルに白背景の和菓子の写真を使用しており、メリハリがあります。イメージ写真も商品のコンセプトにあわせて１つ１つ丁寧に作られている印象でした。
全店舗が下層ページまで行かなくても見れます。お店ごとに雰囲気も違うので、スライドしながらどのお店に行くか選べます。1/4などが出ており、どれだけスライドがあるか分かりやすく作られています。昔は○○○○と丸の数でスライドの数を表すことが多かったですが、最近では1/4などが主流になっていますね。
-共通箇所（サイトマップ、フッター）
ナビゲーションを開くと写真付きでとてもわかり易く作られています。黒背景の余白部分にもさりげなく柳のあしらいがあり、ブランディングされているなという印象でした。
フッターにも柳がさり気なく使用されています。全面ではなく、下の部分だけなのも控えめで文字が見やすくなっています。
スマホデザイン（レスポンシブ）
スマホ版ではファーストビューでタップすると映像が見れます。また、PC版では２つ画像を使用していた箇所が切り替わったりとスマホでも見やすく、使いやすく作られていました。
下層ページ
商品にもさりげなく柳が映り込みながら、カエルが可愛く見えるように葉っぱの上に載っています。小豆なども写り込んでいて小豆が入ったお菓子なんだなということが分かりやすくなっていました。
スライドになっており、パッケージや商品を開けたときにどんな物が入っているか分かりやすく作られており、オンラインショップで購入しても安心な気遣いがありました。
トップページで使われているイラストの雰囲気でそれぞれ特徴が書かれており、サイト全体としてイラストと写真がバランスよく使われてます。お店のこだわりが載っていると気になる商品だけでなく、お店の商品全体に対して信頼できる内容になっており、他の商品も食べてみたくなりました。
写真
すべての商品が同じトーンで撮影されていて並べたときにも統一感と上質さがあります。うっすら出ている影も商品を邪魔しないライティングになっています。
動き
柳の広がり、世界が開ける雰囲気が出ており、その後に出てくるイラストが商品の魅力を引き立てています。
フォント
歴史のある和菓子屋さんのイメージに合う明朝体を使っています。商品名やテキストのフォントは細めで上品に表現しています。また、黒ではなく濃いグレーを使うことで、優しい水彩画のトーンとも合っています。
日本語フォント：游明朝体
英語：CormorantSC
フォントのカラー：#171916
フォントの説明
CormorantSCはGoogle Fontsから使えるフリーフォントで、小文字はなく大文字だけのフォントになります。特殊な形の文字が揃っているのも面白いですね。
カラースキーム分析
基本は白系統でまとめられていますが、商品のイメージ画像やイラストは色が使われています。メインビジュアルはカラフルになっていますが、水彩画になっているため、淡くて優しい和菓子のイメージが保たれています。
ファビコン
OG画像
タイトル
青柳ういろう | 青柳総本家 公式サイト
名古屋名物「青柳ういろう」でおなじみの青柳総本家のオフィシャルサイト。さまざまなういろうをはじめ、「カエルまんじゅう」「きしめんパイ」「青柳 小倉サンド」などのお菓子をご紹介します。
この記事を書いているメンバーが働いている会社
よかったら見に来てください！
