WORKS
Stories told through design.
概要
地域密着のベーカリーカフェ公式サイトの実装を担当しました。
ランチ・グランドメニュー・ギフト・オンラインショップ・ギャラリー・ニュース・アクセス・お問い合わせまで、情報量の多い構成を、余白とレイアウト、マイクロアニメーションで最適化。レスポンシブ対応と細かなホバーアニメーションを実装し、「お店の世界観」と「メニューの魅力」がオンラインでもしっかり伝わるブランドサイトを構築しました。
ターゲット
カフェ好きの20〜40代、近隣エリアのファミリー層・カップルを中心に、 「行ってみたい」「誰かを連れて行きたい」と感じてもらえる来店促進用サイト。
制作期間
30日
担当範囲
コーディング
ツール/言語
テーマ
温かみ / 清潔感 / 手づくり感 / 上質さ / 親しみやすさ
コンセプト
「日常の少し上のご褒美時間を、画面から伝える」
店内の空気感や焼きたてパンの香りまで想像できるような写真を活かしつつ、
やわらかな配色と余白設計で“居心地の良さ”を表現。
こだわりの食材や手づくり感を大切にしながらも、情報の見やすさと予約・来店導線の分かりやすさを両立した構成としました。
情報設計
・トップページで「お店の雰囲気 → ランチ / グランドメニュー → ギャラリー → ニュース → アクセス」の流れを設計し、初見でも迷わずスクロールできる構成に最適化
・コンセプト・メニュー・ギフト・ショップ・ニュースをページごとに整理し、目的別に情報へ辿り着きやすいグローバルナビを設計
・ランチ / グランドメニューはカテゴリ別にブロックを分け、見出し・装飾罫線・余白で視線誘導しながら一覧性とワクワク感を両立
・ギャラリーにはInstagram連携のレイアウトを導入し、PC 4列 / SP 2列のグリッドで自動更新される写真をきれいに表示
・アクセス情報は地図の比率・トリミングを調整し、スマホでもストレスなくスクロールできる枠内表示に最適化
・フッターにはSNSアイコンとコピーライトをコンパクトに配置し、ブランドカラーを維持しながら視認性を確保
【動き・インタラクション】
・メニューカードやニュースカードにホバー時のズームアニメーションを実装し、写真の魅力を自然に強調
・トップのファーストビューやランチ・グランドメニュー周辺に、背景ブロックや装飾イラストの重なりをCSSで表現し、静止画でも立体感のあるレイアウトに
・ギャラリーはプラグイン標準の横並びレイアウトを上書きし、CSS Gridベースでレスポンシブに最適化
・ニュース一覧 / 詳細では、ページネーション・関連記事ブロック・ホバーアニメーションを統一し、読み進めやすさと世界観の一貫性を担保
・お問い合わせフォームでは、ラジオボタンや入力フォームをカスタムスタイルで実装し、フォーカス・ホバー時のアクセシビリティと操作感を向上
【レスポンシブ対応】
・PC（1280px〜） / タブレット / スマートフォン（〜375px）でレイアウトを細かく分岐させ、画像比率・余白・フォントサイズをブレイク【ポイントごとに最適化】
・SPではセクション間の余白や装飾画像の位置を調整し、「縦に読み進める心地よさ」を重視した1カラム構成に再設計し、ストレスのない閲覧体験を実現しました。