EC サイトで「カートに入れる」と「今すぐ購入」を分けるべき理由と実装

はじめに

EC サイトを作るとき、商品ページに「購入ボタン」を置こうとして、
「カートに追加するのか、直接購入なのか」で迷ったことはありませんか？

これは UX 設計上で明確に分けるべき概念です。
混同すると、ユーザーが「あれ、買ってしまった？カートに入れただけ？」と混乱します。

完成イメージ

実際のアプリでは、作品詳細に「今すぐレンタル」と「カートへ追加」の 2 ボタンを配置しています：

「カートへ追加」を押すとサイドドロワーが開きます：

「今すぐレンタル」を押すと直接決済画面へ遷移します：

2つのボタンが解決する問題

ユーザーの2種類の購買行動

行動A：まとめて購入したい

「この映画とあの映画と、もう1本。3本まとめてレンタルしたい」

→ カートに追加 → カートページで確認 → まとめて決済

行動B：今すぐこれだけ買いたい

「この映画が気に入った。すぐ見たい」

→ 商品ページから直接決済画面へ → 即座に完了

この2つを同じボタンで処理しようとすると、どちらかの UX が犠牲になります。

ボタンの役割の違い

ボタン	役割	画面遷移先
カートに入れる	商品をカートに追加する	カートドロワー or カートページ
今すぐ購入	直接決済フローへ進む	決済画面（チェックアウト）

Vue 3 での実装例

<!-- FilmDetailModal.vue -->
<template>
  <div class="film-actions">
    <!-- カートに入れる: カートへ追加してドロワーを開く -->
    <button
      class="btn btn-outline-primary"
      @click="addToCart"
      :disabled="isInCart"
    >
      <i class="bi bi-cart-plus" />
      {{ isInCart ? 'カートに追加済み' : 'カートに入れる' }}
    </button>

    <!-- 今すぐ購入: 直接チェックアウトへ -->
    <button
      class="btn btn-primary"
      @click="buyNow"
    >
      <i class="bi bi-lightning-fill" />
      今すぐ購入
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useCartStore } from '@/stores/cartStore'
import { useRouter } from 'vue-router'

interface Props {
  filmId: number
  title: string
  rentalRate: number
}
const props = defineProps<Props>()
const cartStore = useCartStore()
const router = useRouter()

const isInCart = computed(() =>
  cartStore.items.some(item => item.filmId === props.filmId)
)

// カートに入れる
function addToCart() {
  cartStore.addItem({
    filmId: props.filmId,
    title: props.title,
    rentalRate: props.rentalRate,
  })
  cartStore.openDrawer()  // サイドドロワーを開いてカートを見せる
}

// 今すぐ購入: このアイテムだけでチェックアウトへ
function buyNow() {
  router.push({
    path: '/checkout',
    query: {
      mode: 'buy-now',
      filmId: props.filmId,
    },
  })
}
</script>

チェックアウト画面での「今すぐ購入」モードの処理

/checkout?mode=buy-now&filmId=123 でアクセスされた場合、
カートの内容ではなく、指定された商品だけを決済対象にします。

// CheckoutView.vue
import { useRoute } from 'vue-router'
import { useCartStore } from '@/stores/cartStore'
import { ref, onMounted } from 'vue'

const route = useRoute()
const cartStore = useCartStore()

// 決済対象アイテム
const checkoutItems = ref([])

onMounted(async () => {
  if (route.query.mode === 'buy-now' && route.query.filmId) {
    // 今すぐ購入: このアイテムだけ
    const film = await fetchFilm(Number(route.query.filmId))
    checkoutItems.value = [film]
  } else {
    // 通常フロー: カートの内容
    checkoutItems.value = cartStore.items
  }
})

カートドロワー UI

「カートに入れる」を押したとき、画面を遷移させずにサイドからドロワーが開くのが良い UX です。
ユーザーが「カート確認→買い物続行」か「カート確認→決済へ」を選べるようになります。

<!-- CartDrawer.vue -->
<template>
  <Transition name="slide-right">
    <div v-if="cartStore.isDrawerOpen" class="cart-drawer">
      <div class="cart-drawer-header">
        <h5>カート ({{ cartStore.totalItems }}件)</h5>
        <button @click="cartStore.closeDrawer()">✕</button>
      </div>
      
      <div class="cart-drawer-body">
        <CartItem
          v-for="item in cartStore.items"
          :key="item.filmId"
          :item="item"
        />
      </div>

      <div class="cart-drawer-footer">
        <div class="total">合計: ¥{{ cartStore.totalAmount }}</div>
        <RouterLink to="/checkout" @click="cartStore.closeDrawer()">
          <button class="btn btn-primary w-100">
            レジに進む
          </button>
        </RouterLink>
      </div>
    </div>
  </Transition>
  
  <!-- オーバーレイ -->
  <div
    v-if="cartStore.isDrawerOpen"
    class="cart-overlay"
    @click="cartStore.closeDrawer()"
  />
</template>

よくある間違い

❌「カートに入れる」ボタンを押したらすぐ決済ページへ遷移させる

カートの概念がない設計になります。
「複数商品をまとめて買いたい」ユーザーが困ります。

❌「今すぐ購入」がカートに入れてから決済ページに遷移させる

カートが汚染されます。
「今すぐ購入」後にカートを開くと、買い終わった商品が残ってしまいます。

❌ ボタンが1つで「カートに入れる or 購入」を切り替えるデザイン

ユーザーが自分の意図を選ぶ手順が増えます。2つのボタンを別々に配置する方が直感的です。

まとめ

	カートに入れる	今すぐ購入
目的	複数商品をまとめて購入する準備	1商品をすぐに購入
遷移先	カートドロワー / カートページ	決済画面（チェックアウト）
カートへの影響	カートに追加する	カートには追加しない
処理後の行動	引き続き商品を探せる	決済完了まで決済フローに集中

Amazon や楽天が「カートに追加」と「今すぐ買う」を分けているのには、こういった UX 設計の根拠があります。

このアプリでの実装

このDVDレンタルアプリでは、Vue Router や Pinia ではなく、emit イベントと currentPage ref によって実現しています。

作品詳細の CTAボタン（実際のコード）

<!-- FilmDetailView.vue -->
<div class="cta-row">
  <!-- レンタル区分のセクションかどうかで文言を変える -->
  <template v-if="isRentalSection">
    <button class="btn-primary" @click="emit('direct-checkout', film)">今すぐレンタル(決済)</button>
    <button v-if="isAuthenticated" class="btn-secondary" @click="emit('add-to-cart', film)">カートへ追加</button>
  </template>
  <template v-else>
    <button class="btn-primary" @click="emit('direct-checkout', film)">今すぐ購入する(決済)</button>
    <button v-if="isAuthenticated" class="btn-secondary" @click="emit('add-to-cart', film)">カートへ追加</button>
  </template>

  <button class="btn-secondary" @click="emit('add-watch-later', film)">お気に入りに追加</button>
</div>

emit の型定義：

const emit = defineEmits<{
  (e: 'back'): void
  (e: 'direct-checkout', film: PublicFilmSummary): void
  (e: 'add-to-cart', film: PublicFilmSummary): void
  (e: 'add-watch-later', film: PublicFilmSummary): void
}>()

App.vue でのハンドリング（実際のコード）

// App.vue（emit受け取り側）

// カートに入れる：useCart composable 経由でlocalStorageに保存
function handleAddToCart(film: PublicFilmSummary) {
  const added = addToCart(film)
  if (added) {
    cartToastMessage.value = `「${film.title}」をカートに追加しました`
    cartToastTimer = setTimeout(() => { cartToastMessage.value = '' }, 2000)
  }
}

// 今すぐ購入：currentPage を切り替えて決済画面へ遷移
const handleDirectCheckout = (film: PublicFilmSummary) => {
  selectedFilm.value = film
  currentPage.value = 'checkout'
}

カートはルーターやグローバルストアを使わず、useCart composable がシングルトンとして localStorage の永続化を担当。
画面遷移も currentPage という Union Literal 型の ref を書き換えるだけで完結します。