no.001 ビアードパパ

シュークリーム専門店 ビアードパパ

【制作会社】
ZIZO

【概要】
全国に展開する、シュークリーム店のホームページ

【ファーストインプレッション】
シュークリームが美味しそう
ポップで色使いが可愛い
文字や写真が大きくて見やすい
家族向け、子供向けなサイトだと感じた

【ターゲット層】
10代～40代

【使用フォント】
メイン
"Hiragino Sans" 
サブ
"Rammetto One"
日本語
"Zen Maru Gothic"
数字
"Rammetto One"

【配色】

ベースカラー　#FEF643
メインカラー　#FEF643
アクセントカラー
フォントカラー　#1E22B0

【文字や色の印象・雰囲気・効果】
サイト内のすべて、角ばったところが無いため、
"Zen Maru Gothic"を使い、文字にも丸みを出していて統一感がある。
(シュークリームの丸いイメージ？)


【サイト構成】
-ページ数
11ページ

-セクション数(トップページ)
10

- 導線はどうなっているか
最終的にお店で買ってもらう。

- お問い合わせ（CTA）はどこに配置しているか
ハンバーガーメニューの中。

- 背景色の変化はあるか
基本的には変わらず一色。

- スクロールするごとに変化はあるか
サブタイトルとなる文字が浮き出てくる。
途中に、スクロールしても背景画像が固定されているところがある。
cssだと「background-attachment: fixed;」？

【トップページ構成】
ヘッダー、メインビジュアル、お知らせ、商品紹介、
インフォメーション、店舗情報、SNS、フッター

【デザインポイント】
-メインビジュアル
たくさんのシュークリームの写真。

-ヘッダー
左にロゴ、右にハンバーガーメニュー。

-フッター
SNSのロゴ背景を白で大きく囲っていて、見やすい。
topへ戻るボタンがある。

-ナビ
あり。スクロールしても常に右上固定。
見てほしいところの文字は大きくなっている。

-ハンバーガーメニュー
ナビを全て隠しているのではなく、
Line up、shop、newsの見せたい3つだけ横に出ている。

- 一番最初に目につく箇所
シュークリームの写真

- キャッチコピー
≪いつもできたて　作りたて≫

- メインビジュアルの動き
なし

【実装ポイント】
新商品の紹介や最新ニュースをスライドで出している。
真ん中にくると大きく表示される。

【レスポンシブデザイン】
ナビが常に下に固定される。(フッターに入ると消える)
他大きな変化なし。

【ひとつだけ自分のデザインに取り入れるとしたら】
右から文字を流して区切りとして使う。

【感想・フリースペース】
誰がどう見てもシュークリームのサイトだと分かり、
文字や写真も大きくて、とても見やすいサイトだと感じた。
シュークリームが丸いのでそれに合わせているのか、
どこにも角がなく、文字にも丸みを感じた。
買って帰ろうかな～という気持ちになった♡