BAGEL BAGEL公式サイト(https://bagelbagel.jp/)分析
BAGEL BAGELのサイトは、開くとロゴが表示される画面が短くあります。トップページはメインビューに動く画像が2段あり、上の段は左へ動き、下の段は右に画像が動きます。その他にトップページにはお知らせと各コンテンツへのリンクがあります。
今回は勉強のために、デザインを分析しました。
font
‘Zen Kaku Gothic New’, sans-serif
文字：黒・白・茶系（#c8a063）
読みやすい文字です。
color
白・黒・ベージュ系（#5a3a24）
背景：白・ベージュ系（#c89f62・#e6c37f80・#ffffff99）
メニュー
PC・スマートフォンは上部にメニューがあります。スクロールすると画面の一番上に固定されます。フッターはPCは5列に横に各コンテンツへのリンクが並んでいて、スマートフォンは縦に一列に並んでいます。
画面の見せ方
トップページは開くとロゴが中央に表示される画面が短くあります。
また、トップページはスクロールすると、お知らせや各コンテンツへのリンクバナーが左から右へ表示が薄くなり、そのすぐ後に薄い表示がはっきりするようになっています。
製品情報ページは、各製品の詳細ページへのリンクがあるタイプでは無く、一覧で画像とアイコン・各製品（ベーグル）の説明が書かれています。各詳細ページに行かなくても一覧で商品について分かるので、ページ遷移をしません。このページの滞在率は高くなると推測します。日本語のタイトルの下に、英語のタイトルも小さく書かれています。
アイコンが右配置・右寄せのテキストで文字数が長いものが上部に表示されています。おしゃれです。左上には赤い傾斜した文字でNewマークが表示されています。
まとめ
シンプルに縦が短めのトップページです。画像がとてもきれいで、とてもベーグルが食べたくなりました。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
