職業訓練校の修了制作(最終課題)として、実在するベーカリーショップ「マンシエール」様のWebサイトを制作いたしました。

URL

https://manneciel.com/

担当

デザイン・コーディング・写真やロゴ、イラストの制作

サイトの目的

知名度ならびにお店のイメージUP

ターゲット

近隣の大学生およびパン好きの新規顧客

デザインについて

【コンセプト】
お店の「近隣の大学生にもっと来店してほしい」という要望に応えるため、サイト全体で 「身近に感じられる街のパン屋さん」の雰囲気を忠実に再現することを最優先しました。

【一貫性の確保】
実店舗のシンボルカラーであるトリコロールをキーカラーに採用し、 Webサイトのデザインに一貫性を持たせることで、オンラインでの親近感と信頼性を高めました。

【現地取材の実施】
実際に店舗へ足を運び、オーナー様へのヒアリングや店内の撮影を行いました。 ネット上の情報だけでなく、お店の雰囲気やパン作りのこだわりを肌で感じることで、 デザインに説得力を持たせることを重視しました。
制作後、オーナー様にご確認いただき、現在は実際の店舗公式サイトとして公開・運用されています。

【エンゲージメント戦略】
お店の由来やパン作りへの「こだわり」を伝えるコンテンツを充実させ、 地域住民やパン愛好家層のエンゲージメント(愛着)を深めることを目指しました。

コーディングについて

【アクセス性の担保】
初めての来店を想定し、店舗の場所を迷うことなく確認できる分かりやすい設計に注力しました。

【インタラクション設計】
店頭の「いち推しパン」については、一覧画面でホバー(マウスオーバー)すると 断面写真が表示される工夫を実装。これにより、視覚的に商品の魅力が伝わるUI/UXを設計しました。

制作期間

11日間(企画|情報設計|WF/4日 デザイン/2日 コーディング/5日
※TOP・MENUのみ 他ページはデザイン/2日、コーディング/2日、イラスト作成/3日

使用ツール

VS Code|Photoshop|Illustrator