せろりのセオリー | Webサイト100選

Webデザイン未経験の私が、魅力的で優れたWebサイトを見て考察力、表現力を学ぶ学習サイトです。

No.57 PaPa2 bakery

■概要

大阪にあるパン屋さんのホームページ

 

 

■視点

扱っているパンの魅力もそうだが、お店の雰囲気を知ることで通いやすさも出てくる。サイトの爽やかな雰囲気とパンのある生活をイメージしやすいこちらのサイトをレビュー。

 

 

■ターゲット

パン好きの全世代

 

 

■FV

お店の商品と店構えの写真をスライダーで表示。コロナ禍になり私自身もパン作りを始めて趣味の一つなったが、テーブルの上に色んな種類のパンが並んいるのは幸せな気持ちになる。ユーザーにも品揃えの多さや、パンのある食卓をイメージさせる。

お問合せと最新情報が掲載されるインスタグラムは、右側に固定。右側のアイコンとのバランスを取るためか、反対の左側にはcopyrightが表示されている。
スライダーに重なるよう、Newを中央下に3つ配置しているため、必ず目に入るようになっている。

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

 

 

■特徴

背景は単色でシンプルにすることで、パンが目に入りやすく商品の魅力が伝わりやすくなる。写真は各版だけではなく切り抜きも使用することで、立体感が出てより映える。背景色を白にすることで、全体のイメージが明るく、お店への通いやすい雰囲気も出ている。

写真の背景図形はずらして配置し、文字も背景や写真と重なるように配置されていてお洒落感が出る。

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

 

 

 

・ラインナップ

画像は自動で流れるようになっていて、スピードも早め。紹介商品が多いためテンポ良く動いている。毎日40・50種のパンを焼いていて、その写真が別ページで紹介されている。パンの種類が豊富なため、ここのお店の特徴としてトップページでもアピールしてもいいのではないかと感じた。

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

 

 

 

line upの下には店内の様子や商品を写真をslickで紹介。スクロールすると中央にお店のロゴが現れるが、一定の時間が経つと消えるようになっている。ロゴを印象付けつつも見づらさを配慮して消えるようにデザインされている。

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

 

■フォント

・見出し、ナビゲーション:Popins
・本文:YuGothic

 

 

■配色

・ベースカラー:#fff、#00122e
・文字:#000,#111

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

 

 

 

 

 

Webサイト:PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

せろりのセオリー/ Webサイト100選 No.57 PaPa2 bakery

次へ 投稿

前へ 投稿

返信する

© 2025 せろりのセオリー | Webサイト100選

テーマの著者 Anders Norén