制作概要

職業訓練の制作課題。「ベーカリーヤマグチ」のWebサイトを想定し、
デザイン・構成を制作した。
家族経営の温かみとパンのイメージを大切にし、配色は茶色やオレンジ系を中心に、
文字色にはこげ茶を使用することで、重くなりすぎない親しみやすい印象にまとめている。

スマートフォンとPCの両方で見やすいよう、全体のレイアウトは中央寄せとし、
スマートフォン表示を基準に設計した。ハンバーガーメニューは右上に固定し、
オンラインショップへ直感的にアクセスできるよう、メニュー展開時の右上にカートアイコンを配置している。

トップページには、お知らせ（現在はダミー）、メニュー、看板商品のクリームボックス、ショップ紹介を簡潔に配置し、ページ下部にはオンラインショップへの導線を設けた。

メニューページでは、最上部にクリームボックス専用ページへの導線を配置し、
パンは一括して一覧表示としている。スマートフォンでの視認性を考慮し、
2列配置とし、写真と商品名が目に入りやすいサイズ感を意識した。
価格はあえて記載せず、まずは商品に興味を持ってもらう構成としている。
期間限定商品は変更頻度が高いことと、「期間限定」という言葉に惹かれる層が一定数いる点を踏まえ、通常商品とは分けて掲載した。
ドリンクは閲覧優先度が低いと考え、ページ下部に配置し、
併せてオンラインショップへのボタンを設置して購入可能であることを訴求している。

クリームボックスページでは、ご当地感を出すため、訛りを取り入れた文章構成とした。
商品説明から始め、ベーカリーヤマグチならではのクリームボックスの特徴を紹介し、
商品一覧へと自然につながる流れを意識している。また、アレルゲン表記を明記し、アレルギーを持つ方への配慮も行った。

boutページでは、キャッチコピー「毎日の食卓に安心を」を軸に、
無添加素材へのこだわりや、アレルギーのある子どもでも安心して食べられる点を伝えている。
店舗の想いとこだわりについては、過去の公式サイトの情報を参考に構成した。

ショップページでは、本店とリネンシティ店の2店舗情報を1ページにまとめ、
外観・内装イメージを掲載することで、来店前に店舗の雰囲気が伝わるよう工夫している。
ページ下部にはオンラインショップへの導線を設置した。

オンラインショップはPC閲覧を前提として制作し、
トップページ、菓子パンページ、商品ページの一部を作成した。
トップページでは人気商品のランキングを最上部に配置し、続けてベーカリーヤマグチの紹介を掲載し、公式サイトへの導線を設けている。
カテゴリは「菓子パン」「その他」「ギフト」の順とし、看板商品のクリームボックスを含む菓子パンを最上位に配置した。

一覧に戻る