ウェブサイト／ベーカリー

ひとよ製パン

毎朝の一個を、
そのまま見せるサイト。

神奈川の架空のベーカリーを題材にしたウェブサイトです。生地をこねる映像から始め、商品の紹介、直営四店舗の案内、卸の窓口までを、日常のパンという一本の筋でまとめました。

作品を開く

架空の事業者を題材にした自主制作です。

きょう買う人にも、
卸先を探す人にも。

週に何度も来る近所の人と、取引先を探すホテルやカフェの担当者を同時に想定しました。冒頭に焼き上がりの案内への導線を置き、商品・店舗・お知らせを先に並べています。

その後ろへ卸・法人の窓口と採用を置きました。こだわりのページは粉・発酵種・製法・焼成の順で、価格より先に作り方が読める並びにしています。

生成りと淡い砂色を地にして、見出しは明朝体、本文はゴシック体を使っています。操作の色は赤茶です。ヘッダーは画面の下中央に浮かぶ木札のバーにし、ロゴと主なページ、値札の形の「お問い合わせ」を並べました。

写真はどれも白い縁のプリントにして少し傾け、マスキングテープやピンで留めています。下層ページの冒頭は、テープで留めた見出しのカードと3枚のプリントのコラージュです。店舗のページでは、外観のプリントの横に住所・営業時間・駐車場を罫線の索引カードにまとめました。

商品と店舗のページには、本文からの絞り込みと紹介項目の選択を置きました。駐車と入れると該当は四件になり、件数の表示が変わります。「すべて表示」で元に戻ります。

トップのこだわりはスマートフォンで折り畳まれ、見出しを押すと開きます。問い合わせは確認画面を挟みますが、内容は送信も保存もしない画面内だけのデモです。

スマートフォンでは映像を画面いっぱいに敷き、下から暗くなる地に見出し・説明・二つのボタンを重ねています。画面の下にはホーム・商品紹介・店舗案内・こだわり・メニューのタブを常に置き、メニューを押すと全ページの一覧が下から開きます。ロゴはテープで留めた紙札として左上に置きました。