この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:T
更新日時:2026-06-11 07:29:05

タイトル: ECサイト
SEOタイトル: ECサイトの構築方法（Shopify / BASE / 自作 Magento / Headless Commerce 比較）

この記事の要点
  • ECサイト = E コマース（電子商取引）サイトの総称。商品販売・決済・配送までを Web で完結
  • クラウド型（早い・安い）: Shopify / BASE / STORES / Squarespace
  • 自作型（柔軟・コスト効率）: Magento (Adobe Commerce) / WooCommerce / EC-CUBE / Drupal Commerce
  • Headless Commerce（大規模）: Shopify Plus + Next.js / commercetools / Salesforce Commerce Cloud
  • 決済: Stripe / PayPal / Square、配送API: ヤマトB2 / 佐川e飛伝、SEO/Conversion 最適化が売上を左右

ECサイトとは

EC (Electronic Commerce) サイトは、商品・サービスをインターネット上で販売する Web サイトのこと。商品一覧、カート、決済、注文管理、配送追跡といった一連のフローを提供します。

2024 年時点で日本の BtoC EC 市場は 24 兆円規模、年率 +9% で拡大しています。スマホ最適化、配送スピード、決済方法の多様化が成功要因です。

EC プラットフォームの分類

分類代表規模初期費用カスタマイズ性
マーケットプレイス出品型Amazon / 楽天 / Yahoo!個人〜大手低〜無料低（テンプレ）
ASP / SaaS 型Shopify / BASE / STORES個人〜中小無料〜月額数千円中（テーマ + アプリ）
パッケージ・OSS 型EC-CUBE / WooCommerce / Magento中小〜中堅無料〜数十万円高（自前改修可能）
クラウド EC（大規模）Shopify Plus / Salesforce Commerce大規模月額 200万円〜非常に高
Headless Commercecommercetools / Saleor + Next.js大規模・複雑開発費高最高

主要 SaaS 型 EC の比較

サービス月額手数料強み弱み
Shopify$39〜2.4%〜 + Shopify Paymentsテーマ豊富、アプリ充実、海外売上に強い、グロース機能日本語サポートは外資、学習コスト中
BASE無料3% + 40円 + サービス料3%初期費用ゼロ、個人クリエイター向け機能は最小限
STORES無料〜2,980円3.6% / 5%日本市場最適、シンプル大規模拡張に不向き
Squarespace$23〜0%デザイン性、海外配信日本決済の選択肢限定
カラーミーショップ無料〜カードによるGMOグループ、日本特化UI 古め

自作型（OSS / パッケージ）の比較

製品ベース強み難点
Magento (Adobe Commerce)PHP世界標準、機能網羅、多言語対応重い、Adobe ライセンス高い
WooCommerceWordPress (PHP)WP 親和性、プラグイン豊富、無料中規模以降のパフォーマンスチューニング難
EC-CUBEPHP (Symfony)日本特化、消費税・配送と相性◎テンプレ依存度高、開発者人口が世界比で少
Drupal CommercePHP (Drupal)コンテンツ + EC 両立学習コスト高
SaleorPython + GraphQLHeadless 前提、モダン運用知見少

Shopify の最小セットアップ

# 1. Shopify CLI でテーマ開発
npm install -g @shopify/cli @shopify/theme

# 2. ストア作成（ブラウザでアカウント作成後）
shopify theme init my-theme --clone-url https://github.com/Shopify/dawn

# 3. ローカル開発
cd my-theme
shopify theme dev --store=mystore.myshopify.com

# 4. デプロイ
shopify theme push --live

Headless Commerce

大規模 EC では、フロント（Next.js / Nuxt）と EC バックエンド（Shopify Storefront API / commercetools / Saleor GraphQL）を分離する Headless Commerce が主流化しています。

  • 強み: SEO / PageSpeed / モバイル最適化を Next.js でフル制御
  • 強み: 複数チャネル（Web / アプリ / POS / LINE）に同じバックエンドを共有
  • 難点: フロント実装が必要、運用コストが高い、PageBuilder 系の業務効率が落ちる
// Next.js + Shopify Storefront API
import { GraphQLClient } from 'graphql-request';

const client = new GraphQLClient(
  'https://YOUR-STORE.myshopify.com/api/2024-04/graphql.json',
  { headers: { 'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_TOKEN } }
);

export async function getProducts() {
  const query = `{
    products(first: 12) {
      edges { node {
        id title handle priceRange { minVariantPrice { amount currencyCode } }
        images(first: 1) { edges { node { url } } }
      } }
    }
  }`;
  return client.request(query);
}

決済（ペイメント）の選択肢

サービス手数料強み
Stripe3.6%API シンプル、海外対応、サブスク強い
PayPal3.6%〜消費者の信頼、グローバル展開
Square3.25〜POS と統合、店舗 + EC
GMO ペイメントゲートウェイ要見積日本のキャリア決済、コンビニ後払い
SBペイメント要見積日本の主要決済を網羅
Komoju3.6%海外事業者の日本進出向け、コンビニ/PayPay対応

SEO とコンバージョン最適化

  • 商品ページ SEO: title / meta description / 構造化データ (Product schema)、画像 alt
  • PageSpeed: LCP < 2.5s、CLS < 0.1、画像 WebP / lazy load
  • カート離脱対策: ゲスト購入を許可、配送費を早期表示、進捗バー
  • CRO（Conversion Rate Optimization）: A/B テスト、レビュー表示、緊急性訴求（残り◯個）
  • アクセシビリティ: 高齢者・障害者の購買体験

海外展開のポイント

  • 言語: i18n + 機械翻訳 + ネイティブレビュー
  • 通貨・税: 国別表示、VAT / GST 自動計算（Shopify Markets / Avalara）
  • 配送: DHL / FedEx / EMS、関税の事前計算（DDP）
  • 決済: Klarna（北欧/欧州）、Alipay / WeChat Pay（中国）、Pix（ブラジル）
  • 法務: GDPR (EU)、CCPA (米) のプライバシー対応

FAQ

Q: 初心者が EC を始めるなら？
A: Shopify または BASE / STORES。初期費用 0 円〜、決済・配送ラベルまで内蔵。月商 100 万円超えたら EC-CUBE / 自作も検討。

Q: Shopify と Amazon どちらが売れる？
A: 集客力は Amazon が圧勝。Shopify は自社ブランドを育てて顧客データを資産化したい場合に。両方並行運用が一般的。

Q: Headless Commerce は誰向け？
A: 月商 1 億円以上 / ブランド世界観を作り込みたい / アプリ + Web + POS を同じバックエンドで運用したい大手向け。