パン屋のWEBサイト(架空)

https://web.sakina-portfolio.site


ターゲット

20代後半~30代の子育て世代の主婦

課題

商品の魅力が伝わっていない、お店の認知度が低い
季節メニューや営業時間の変更を告知できていない

解決策

WEBサイトを制作し、「joie(ジョワ)」の魅力を伝える
お知らせ欄を設置し、タイムリーな情報発信を可能にする

目的

WEBサイトを通じて「joie(ジョワ)」の存在を知ってもらい来店を促す

デザイン説明

ターゲット層に安心感を与えるため、白を基調とした清潔感のあるデザインにしました。黒をアクセントとして使うことで、全体を引き締め、信頼感・品のある印象をプラスしています。
ファーストビューにはお店の外観写真を全面に表示し、店舗の温かみが伝わるよう工夫しました。ユーザーの視線が自然とコンテンツに流れるよう、セクションごとに余白や文字サイズを調整し、視認性・可読性を高めています。
パンの写真はカテゴリごとに表示して直観的に選びやすくし、一目で商品の魅力が伝わるよう工夫しました。また、親子での来店を想定してキャラパンなどの可愛らしい写真を選びました。

技術的ポイント

モバイルファーストを意識し、スマホでの閲覧を優先したレイアウト設計にしました。
CSSではSassを活用して実装したため、保守性の高い構造となっています。
デザインカンプは実装を想定してパディングや文字サイズ等を設定し、実装工程をスムーズに進めることができました。

制作年月日

2025年4月

制作時間

3週間

担当範囲

要件定義 / ワイヤーフレーム / デザイン / コーディング

使用ツール

HTML / CSS / java Script / Figma / Photoshop / Illustrator

ワイヤーフレーム / デザインカンプ (スマホ)

PCの全体デザイン
(ファーストビュー)

スマホの全体デザイン
(ファーストビュー)