CSS UI・Webデザイン集 | Webサイト基本構成：ECサイト

Web APP CSS
スポンサーリンク
スポンサーリンク

ECサイトは「商品を迷わず選べる導線」を作ることが最重要

ECサイトは、ユーザーが商品を探し、比較し、購入するまでの流れをスムーズにするための構成が必要です。 プロダクトサイトより情報量が多く、UIの密度も高くなるため、整理されたレイアウト・視線誘導・操作性 が特に重要になります。 ここでは、実務で使われる王道構成を、初心者向けにかみ砕いて解説しながら、CSSとSCSSのテンプレートを提示します。

ECサイトの基本構成

ECサイトは大きく ヘッダー（検索・カテゴリ） 商品一覧（グリッド） 商品カード（画像・価格・CTA） 商品詳細ページ（情報の整理） カート・購入導線 という流れで構成されます。 この構成は「ユーザーが商品を探す順番」に沿っているため、どのECでもほぼ共通です。

ヘッダー（検索とカテゴリが主役）

ヘッダーの役割

ECサイトのヘッダーは、ロゴよりも 検索バーとカテゴリ が主役です。 ユーザーは「探す」行動から始めるため、検索バーを中央に大きく配置するのが実務の定番です。

CSS例

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

header .logo {
  font-size: 1.4rem;
  font-weight: bold;
}

header .search {
  flex: 1;
  margin: 0 2rem;
}

header .search input {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

header nav a {
  margin-left: 1.2rem;
  text-decoration: none;
  color: #374151;
}
CSS

SCSS例

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;

  .logo {
    font-size: 1.4rem;
    font-weight: bold;
  }

  .search {
    flex: 1;
    margin: 0 2rem;

    input {
      width: 100%;
      padding: 0.6rem 1rem;
      border: 1px solid #d1d5db;
      border-radius: 8px;
    }
  }

  nav {
    a {
      margin-left: 1.2rem;
      text-decoration: none;
      color: #374151;
    }
  }
}
SCSS

深掘り

検索バーは「ECサイトの心臓」です。 余白を広く取り、入力しやすいサイズにすることで、ユーザーが迷わず検索できます。

商品一覧（グリッドで視線を安定させる）

商品一覧の役割

商品一覧は、ユーザーが商品を比較する場所です。 グリッドレイアウトで整列させることで、視線の流れが安定し、商品が見やすくなります。

CSS例

.products {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
CSS

SCSS例

.products {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
SCSS

深掘り

商品一覧は「情報の密度」が高いため、余白をしっかり確保することが重要です。 グリッドの gap を広めに取ることで、商品カードが詰まりすぎず、見やすくなります。

商品カード（画像・価格・CTAの三点セット）

商品カードの役割

商品カードは、ECサイトの中で最も重要なUIパーツです。 画像 → 商品名 → 価格 → CTA（カートに入れる） という順番で並べるのが実務の鉄則です。

CSS例

.product-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.product-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.product-card .price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2563eb;
  margin-bottom: 1rem;
}

.product-card .cta {
  padding: 0.6rem 1rem;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
}
CSS

SCSS例

.product-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-4px);
  }

  img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
  }

  h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }

  .price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 1rem;
  }

  .cta {
    padding: 0.6rem 1rem;
    background: #2563eb;
    color: #fff;
    border-radius: 8px;
  }
}
SCSS

深掘り

商品カードは「画像の大きさ」が命です。 画像が小さいと魅力が伝わらないため、カードの上部を大きく使い、余白を広めに取るのが実務の定番です。

商品詳細ページ（情報を整理して迷わせない）

商品詳細の役割

商品詳細ページは、ユーザーが購入を決める場所です。 画像・説明・価格・レビュー・購入ボタンを整理して配置します。

CSS例

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 3rem 2rem;
}

.product-detail img {
  width: 100%;
  border-radius: 12px;
}

.product-detail .info h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.product-detail .info p {
  color: #4b5563;
  margin-bottom: 1.5rem;
}

.product-detail .info .price {
  font-size: 1.6rem;
  font-weight: bold;
  color: #2563eb;
  margin-bottom: 1.5rem;
}

.product-detail .info .cta {
  padding: 0.8rem 1.6rem;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
}
CSS

SCSS例

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 3rem 2rem;

  img {
    width: 100%;
    border-radius: 12px;
  }

  .info {
    h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }

    p {
      color: #4b5563;
      margin-bottom: 1.5rem;
    }

    .price {
      font-size: 1.6rem;
      font-weight: bold;
      color: #2563eb;
      margin-bottom: 1.5rem;
    }

    .cta {
      padding: 0.8rem 1.6rem;
      background: #2563eb;
      color: #fff;
      border-radius: 10px;
    }
  }
}
SCSS

深掘り

商品詳細ページは「情報の優先順位」が最重要です。 画像 → 商品名 → 説明 → 価格 → CTA という順番で並べることで、ユーザーが迷わず購入できます。

カート・購入導線（ストレスなく購入できる導線）

役割

カートは「購入の最終ステップ」です。 入力フォームはシンプルに、余白を広く取り、エラー表示を分かりやすくすることが重要です。

まとめ

ECサイトは 検索で探す 一覧で比較する カードで魅力を伝える 詳細で購入を決める カートで完了する という流れが鉄板です。

CSSとSCSSで構造を整理することで、 初心者でも迷わずに実務レベルのECサイトを作れるようになります。

スポンサーリンク
タイトルとURLをコピーしました