MENU
  1. ホーム
  2. HTML/CSS
  3. Figma | Bakery

Figma | Bakery

HTML/CSS
目次

概要

Figmaで作成された「Bakeryサイトデザイン」をもとに、コーディングを行いました。
HTML・CSS・JavaScript（jQuery）を使用し、ECサイト風のランディングページを再現しています。

グリッドレイアウトやハンバーガーメニュー、タブUIなど、実務を意識したUI構造の再現に重点を置いて制作しました。

GitHub
デモサイト

使用技術

  • HTML
  • CSS
  • JavaScript（jQuery）
  • Git / GitHub

実装内容

ヘッダー（ナビゲーション＋ハンバーガーメニュー）

PCでは横並びナビゲーション、スマートフォンではハンバーガーメニューに切り替わる構造を実装しました。

jQueryを使用し、クリック時にメニューの開閉状態を切り替えています。

$(".hamburger").click(function () {
  $(this).toggleClass("active");
  $(".header nav").toggleClass("active");
});

$(".header nav a").click(function () {
  $(".header nav").removeClass("active");
  $(".hamburger").removeClass("active");
});

メインビジュアル（ヒーローセクション）

背景画像とテキストを重ねたヒーローセクションを実装しました。

  • フルスクリーンレイアウト
  • 中央寄せのテキスト配置
  • ブランドイメージを強調したタイポグラフィ

ファーストビューで世界観が伝わる構成を意識しています。

TOP PRODUCTS（商品一覧）

CSS Gridを使用し、商品カードを3カラムで配置しました。

  • 商品画像＋価格＋商品名＋ボタン構成
  • position: absolute による情報オーバーレイ
  • レスポンシブ時は1カラムに変更

ECサイトを意識したカードUI構造です。

セカンドビジュアル（プロモーションセクション）

背景画像を使ったキャンペーン訴求セクションを実装しました。

  • 割引訴求（20% Off）
  • 中央寄せレイアウト
  • CTAボタン設置

視覚的に強いプロモーションブロックとして設計しています。

EXPLORE MORE（ギャラリー＋カテゴリタブ）

カテゴリタブと画像グリッドを組み合わせたギャラリーセクションを実装しました。

  • CSS Gridによる画像レイアウト
  • activeクラスによるタブ表現（見た目ベース）
  • カテゴリ別閲覧を想定した構造

ABOUT US（情報セクション）

テキスト中心のブランド紹介セクションを実装しました。

  • 中央寄せレイアウト
  • ストーリー性のあるテキスト構成
  • CTAボタン配置

FEATURED TREATS（商品紹介）

3つの商品を横並びで表示するセクションを実装しました。

スマホでは縦並びに変更

Gridレイアウト

商品名＋価格のシンプルな構成

フッター（情報量の多い構成）

フッターは3カラム構成で実装しました。

  • About（住所・連絡先）
  • Explore（ナビゲーション）
  • Recent News（画像付きニュース）

Gridを用いて情報を整理し、視認性を確保しています。

ハンバーガーメニュー（レスポンシブ対応）

スマートフォン表示時にナビゲーションをハンバーガーメニューに切り替えるUIを実装しました。

クリックで開閉状態を制御し、シンプルなアニメーションで操作性を向上させています。

レスポンシブ対応

@media (max-width: 768px) を使用し、スマートフォン表示に対応しました。

主な対応内容：

  • ナビゲーション → ハンバーガーメニュー化
  • 商品一覧 → 1カラム表示
  • ギャラリー → 縦並び表示
  • フッター → 縦積みレイアウト

HTML/CSS
目次