架空小売店(パン屋)Webサイト制作

OVERVIEW

架空の海辺のパン屋のWebサイトを制作しました。要件定義・ワイヤーフレーム・デザインカンプ・コーディングまで1人で作りました。

YEAR 2022

要件定義

  • 目的

Webサイトでパン屋に興味を持ち来店してほしい


  • サービスの内容

神奈川県逗子市にある古民家を改装した逗子の海岸近くにあるパン屋。店主は首都圏有名ベーカリーで修行。食材にこだわり、すべてのパンに国産小麦を使用。食パンや食事パンなどのベーシックなパンから、地元湘南の食材を使ったパンなどを作っている。


  • ターゲット

30代のパン好きな女性


  • ペルソナ

逗子 綾子 33歳女性 神奈川県内メーカー勤務

家族構成:夫(33歳・正社員)、息子(3歳)

収入:400万円

趣味:カフェ巡り

普段の生活の様子:現在時短勤務中。結婚を機に地元逗子に移り住む。地元の友人やママ友と美味しいご飯を食べに行くのが好き。主にInstagramで新規のお店の情報を知って食べに行く。

よく利用するサービス:Instagram


  • どのように使うか

各種SNSの店舗アカウントからの飛び先となり、パンのメニューやを紹介する公式サイトとして使う


  • サービスやプランから与えたい印象

海が見える立地であることからも、さわやかな印象を与えたい。食材にこだわりがあり、やさしい雰囲気や親しみのある印象にしたい。


  • 配色

ワイヤーフレーム

デザインカンプ

工夫した点

  • 海辺のパン屋らしさを出すため、湘南の海の写真をメインビジュアルとフッターに使用し、CAFEの背景の上部を波型にしました。
  • LINE UP(パンのメニュー)は、jQueryでスライドできるようにし、さらに左右の矢印を押せば自分でも動かせるようにしました。
  • 砂浜や空の雲をイメージできるような配色にしました。