親子向けのカフェというコンセプトがしっかりと現れた視覚的に楽しめるデザイン。
画像のフレームや、コンセプト、メニューの表示方法など全てがつぼ！
結構前に初めてみたサイトでしたが、今でもすごくお気に入りのサイト。

◾️大まかなレイアウト
　HERO部 (メニュー・お店情報含む)> コンセプト > メニュー > ギャラリー > GOODS > NEWS > アクセス
賑やかなデザインだが各要素は規則性を持った配置。
縦書き、横書きが組み合わさったデザイン。
　背景に若干のイラストを含めることで、一見変化のない背景でもコンテンツの違いがわかる。

・HERO部
HERO部に写真とナビゲーション、店舗情報がまとめられた珍しいデザイン。
写真に馴染むデザインで気が逸れることはない。

写真：手書き風で作成したフレームないで写真が動くアニメーション。
手描き感を出すことで、アットホームな親子で気軽にこれるイメージが出る。
時間ごとに写真が動くというストーリー性のあるデザインも素敵！

ナビゲーション：フワッとドーナツのイラストが現れ,hover時にメニューが螺旋状に表示される面白いデザイン。
ついついHEADER固定かハンバーガーメニューにしがちなので新しい表現方法に感動。。

・CONCEPT部
一般的に大きく画像を設置しがちなエリアだが、お客さんの顔を丸く切り抜き、お客さんの層や表情に焦点を当てたデザイン。
縦書きなところも目をひくデザイン。

・MENU部
大きく画像を設置し、ジャンルを選ぶとそのジャンルの画像に切り替わる仕組み。
フレームはこちらも手書き風。ほっこりかんが出る。
個人的に表題を左右に縦書きで入れるデザインは参考にしたい。

・ギャラリー
画像下にサムネイルを設置。
サムネイルhover時に文字が出てくるので、何に関してのかがすぐ判断できる。
画像上に詳細を記載しているのでスペースを有効活用しつつ、目に入りやすいデザイン。

・GOODS
白抜き文字で大きく「HAND MADE」と載せることでインパクトが出ると共に
すぐに手作り品を扱っていることがわかる
→文書で書くよりもインパクトを与える手法の大切さ
各種取扱アイテムも背景や写真の組み合わせで特徴的に見える。
→手書き切り抜き風デザインのよさ◎

・NEWS
最新トピックは大きく配置。
その他のトピックは下に二個づつ配置。
→トピックでも前面に画像があることで注目したくなる（個人談。）

・ブランド紹介部
背景：グレーに切り替え、上部と下部との切り替えを強調。
飲料のジャンルごとにわけ、正方形のボタン内には商品ではなくロゴを設置。→わかりやすく、クリックしやすい。
hover時に若干ロゴが大きくなる。

・FOOTER (アクセス情報)
地図だけでなく、アクセス方法として道順を写真を載せて紹介している。
丁寧だ・・・（きゅん）

■余白
まったりアットホーム感が際立つ余白たっぷりのデザイン。
写真も切り抜きされているので、間の余白が通常の長方形で設置するより余白が十分に生まれる。

■配色：会社を象徴するサッポロビールのデザインがそのまま配色になっている。
メイン：黒　アクセント：黄色

◾️文字組
フォント：Brandon Grotesque
40px > 36px > 20px 16px (ベース)> 15px

■あしらい
手書き風イラストを、背景と似たトーンで背景に設置することで統一感を保ちつつ隙間をうまくうめるようなデザイン
切り抜き画像
手書き文字を各種タイトルに設置
縦文字や縁取り文字など、文字であしらうデザイン