No.028 THE CITY BAKERY – webサイト分析

THE CITY BAKERY公式サイト(https://thecitybakery.jp/)分析

PCメインビュー

 

THE CITY BAKERY(ザ シティ ベーカリー)は、ニューヨーク発の街のベーカリーです(公式通販サイト説明を一部参考に記載)。公式サイトは、トップページに画像がグリッドレイアウトで配置されています。お店のイメージ通りのサイトです。
今回は勉強のために、デザイン・レイアウトを分析しました。

 

font

游ゴシック体,YuGothic,游ゴシック,Yu Gothic,sans-serif
文字:黒・白
読みやすい文字です。

 

color

ブルーグレー(#abb8c3)、紺(#0C2139)、黒、白

 

メニュー

中央にロゴがあり、PCは上部にメニューが並んでいます。

スマートフォンでは、右上にハンバーガーメニューがあります。

 

スマートフォンハンバーガーメニュー内

 

グリッドレイアウトが利用されていて、とてもかっこ良いです。

 

PCトップページ

 

まとめ

とてもかっこいいサイトです。グリッドレイアウトを学ぶのにとても良いサイトです。トップページの並んだ画像のどこがリンクなのかが少しわかりにくいかもしれませんが、見せ方としてとても勉強になりました。

初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。

 

PCトップページスクリーンショット
スマートフォントップページスクリーンショット

 

webサイト100選 | 雨とホットケーキ