EC-CUBEでネットショップを始める手順|インストール・初期設定・商品登録まで解説

EC-CUBEでネットショップを始める手順|インストール・初期設定・商品登録まで解説

ネットショップを自分で開設して商品を販売したい方に向けて、選択肢のひとつとして「EC-CUBE」を使った構築方法を解説します。

EC-CUBEは無料で使えるオープンソースのECサイト構築システムです。ただし、サーバーやドメイン、メール、配送方法、決済まわりの設定が必要になるため、運用にはある程度の専門知識も求められます。

この記事では、エックスサーバーを使ってEC-CUBEをインストールし、初期設定、商品登録、配送・支払い設定、テスト購入まで進める流れを、画像を交えながら順番に整理します。

EC-CUBEは自由度が高い一方で、設定や保守の負担もあります。専門的な管理をできるだけ減らして、シンプルに販売ページを作りたい方には「ペライチ」も選択肢として紹介しています。

この記事でわかること

  • EC-CUBEのダウンロード版とクラウド版の違い
  • エックスサーバーを使ってEC-CUBEを始める流れ
  • 独自ドメイン・メールアドレス・SSLまわりの考え方
  • ショップ基本情報、配送方法、支払い方法、商品登録の初期設定
  • 公開前に確認しておきたいテスト購入の流れ
EC-CUBEでネットショップを始める全体の流れ

目次

EC-CUBEのダウンロード版とクラウド版の違い

EC-CUBEには、自分でサーバーへインストールして使う「ダウンロード版」と、クラウド環境で利用する「クラウド版」があります。どちらを選ぶかは、費用を抑えて自分で管理するか、月額費用をかけて管理負担を減らすかで考えると分かりやすいです。

EC-CUBE Type

ダウンロード版とクラウド版の選び方

ダウンロード版は自由度が高い一方で、サーバーや保守・セキュリティ管理が必要です。クラウド版は月額費用がかかりますが、管理負担を抑えやすい選択肢です。

この記事で解説

ダウンロード版

特徴

無料オープンソース

  • 管理方法自分でサーバーへインストール
  • 向いている人自由度を重視したい方
  • 注意点保守・セキュリティ対応が必要

自由にカスタマイズしやすい一方、運用には一定の技術知識が必要です。

管理負担を抑えたい方向け

クラウド版

特徴

月額制クラウド環境

  • 管理方法運営側のクラウド環境を利用
  • 向いている人管理負担を減らしたい方
  • 注意点初期費用・月額費用が必要

サーバー管理やセキュリティ対応の負担を減らしたい場合に検討しやすいです。

※料金や仕様は変更される場合があります。導入前に、必ずEC-CUBE公式サイトで最新情報をご確認ください。

代表岸本

岸本

この記事で紹介しているのは無料のダウンロード版の方のやり方になります。

EC-CUBEを始めるために必要なものと費用の目安

  • レンタルサーバー
  • 独自ドメイン

EC-CUBEをインストールするためには、サーバーと独自ドメインが必要です。それぞれ別途お申し込みいただく形になります。

今回は、安定性や管理画面の分かりやすさ、EC-CUBE簡単インストールに対応している点を踏まえて「エックスサーバー」を使って説明します。

  • 安定性や速度面で実績があり、WordPressやEC-CUBEの運用にも使いやすい
  • 独自ドメインが永久無料で利用できる(サーバー契約の間)
  • 簡単インストール対応
  • 自動バックアップ・無料SSL標準装備
  • コストパフォーマンスの面でも使いやすい:月額990円〜(スタンダードプラン推奨)で大容量・無制限転送量
  • サポートが充実してる(日本語)
代表岸本

岸本

小規模のサイトであれば、始めはスタンダードプランで十分なスペックなので、「スタンダードプラン」で良いでしょう。

エックスサーバーで始める場合、スタンダードプランなら月額990円〜が目安です。契約期間やキャンペーン、ドメイン特典の条件は時期により変わるため、申し込み前に公式サイトで最新情報をご確認ください。

エックスサーバーでプランを見る

HTMLやCSSなどの知識がない方は「ペライチ」も選択肢のひとつ

HTMLやCSS、サーバー管理に不安がある方や、できるだけ短期間で販売ページを用意したい方は、シンプルな構成で販売機能を使える「ペライチ」も検討しやすい選択肢です。

EC-CUBEは豊富なプラグインで機能を拡張できますが、設定や編集の場面で専門的な知識が必要になることがあります。

一方、初心者向けの「ペライチ」は決済や予約などの機能を備えた本格的なホームページが誰でも簡単に作成できるサービスです。

ペライチ

  • 豊富なテンプレートあり。専門知識不要でホームページが作れる
  • 低手数料で様々な決済手段が選べる決済機能
  • ビジネス用途の機能が揃っていて、低価格で使える
  • Googleカレンダーと連携してオンライン管理できる予約機能
  • 決済手数料4.5%〜。月額料金:1,678円~

※料金や手数料、利用できる機能は変更される場合があります。最新情報は公式サイトでご確認ください。

ペライチは、テンプレートを使ってページを作成しやすく、決済や予約などの機能も用意されています。サーバーやシステム保守を自分で管理する負担を減らしたい方には使いやすい選択肢です。

代表岸本

岸本

サーバーや決済方法など、専門的な管理を自分でしなくて良いので初心者の方におすすめです。

■ペライチ
ペライチの詳細を見る

EC-CUBEをインストールするまでの流れ

ダウンロード版のEC-CUBEを使う場合は、インストール先となるサーバーと独自ドメインを用意します。

この記事では、エックスサーバーの管理画面を使って、申し込みからEC-CUBEのインストールまで進めていきます。

エックスサーバーの申し込み

サーバー契約を行い、EC-CUBEを設置するための環境を用意します。

永久無料ドメインの取得

条件を確認し、ショップ用に使う独自ドメインを取得します。

独自ドメインの設定

取得したドメインをサーバーに追加し、SSL設定も確認します。

メールアカウントの設定

受注メールや問い合わせに使う、独自ドメインのメールアドレスを作成します。

EC-CUBEのインストール

エックスサーバーの簡単インストール機能を使ってEC-CUBEを設置します。

1. エックスサーバーの申し込み

まずは公式サイトから申し込みを進めます。事前にキャンペーン内容や期間をご確認いただいてから申し込まれることをおすすめします。

エックスサーバーは紹介リンクからのご契約で20%割引になります。

※既存のキャンペーンと併用可能

エックスサーバーの紹介リンクはこちら

エックスサーバーの申し込みページになるので、「10日間無料で試してみる」をクリック。

エックスサーバー申し込み手順4

「個人向け」と「法人向けのビジネス」があるので、個人向けのエックスサーバーの「新規お申し込み」を選択。

エックスサーバー申し込み手順1

プランの選択

プランを選択します。小規模〜中規模のサイトであれば、まずはスタンダードプランから検討すると分かりやすいです

個人利用でも法人利用でも、最初の小規模なネットショップであればスタンダードプランで十分なケースが多いです。後から上位プランへ変更できるため、まずは必要以上に大きなプランを選ばなくても問題ありません。

エックスサーバー申し込み手順2

サーバーIDを決める

サーバーID(初期ドメイン)はアカウント名のようなものなので自由に決めて問題ありません。

サーバーid

このサーバーIDは初期ドメインとしても使えるのでこの初期ドメインでサイト作成もできます。

ただ、この初期ドメインはサーバー契約の間だけ使えるもの。つまりサーバーを解約するとこの初期ドメインも使えなくなります

そのため、通常は初期ドメイン(サーバーID)ではなくて自分で取得した「独自ドメイン」を使ってサイト運用します

代表岸本

岸本

サーバーIDは「ログインするためのアカウント名」みたいなものと思って難しく考えずに決めて問題ありません。

Xserverアカウント情報入力

ここからXserverアカウント作成の情報入力になります。

メールアドレス、パスワード、氏名、住所、電話番号など必要事項を入力。

エックスサーバー契約・申し込みの流れ1

必要事項を入力できたら「サービス利用規約」「個人情報の取り扱いについて」に同意するにチェックを入れ、「次へ進む」をクリック。

エックスサーバー契約・申し込みの流れ2

メールの認証画面になるので、入力したメールアドレスに届いた認証番号を入力して「次へ進む」。

エックスサーバー契約・申し込みの流れ3

そのままSMS認証・電話認証へ進むを選択してください。

メール認証・電話認証(自動音声認証)の入力

入力したメールアドレスや電話番号の認証が必要になりますので、まずは、入力したメールアドレスに届いた認証番号を入力。

エックスサーバーメール認証1

規約に同意をして、「SMS・電話認証へ進む」をクリック。

エックスサーバーメール認証2

電話番号を確認し、テキストメッセージ(SMS)もしくは音声認証(自動音声)を選択して受信します。

エックスサーバーメール認証3

受信したSMSの認証番号を入力し、「認証して申し込みを完了する」。

エックスサーバーメール認証4

以上で申し込み登録は完了です。

エックスサーバー申し込み完了1

登録したメールアドレスにIDやパスワードが書かれた重要なメールが届きます。大切な情報が含まれていますので、必ず保存しておいてください

エックスサーバー登録申し込みの流れ7

エックスサーバーは紹介リンクからのご契約で20%割引になります。

※既存のキャンペーンと併用可能

エックスサーバーの紹介リンクはこちら

永久無料ドメインの取得

エックスサーバーの特典としてもらえる「永久無料ドメイン」を受け取る手順としては以下の流れになります。

  1. 契約期間を決めて料金の支払い
  2. 自動更新設定
  3. 永久ドメイン特典の受け取り

永久無料の独自ドメインの取得は「12ヶ月以上の契約」と「自動更新の設定」が条件となります。

契約期間を決めて料金の支払い

エックスサーバーの「Xserverアカウント」を開きます。

Xserverアカウントへ

Xserverアカウントへログイン。

エックスサーバーログイン

ログインしたら上部メニューの「料金支払い」をクリック。

「料金支払い」をクリック

表の左端にチェックを入れ、契約期間を選択し、「支払方法を選択する」ボタンをクリック

表の左端にチェックを入れ、契約期間を選択し、「支払方法を選択する」ボタンをクリック

希望する支払い方法を選択。クレジットカードか後払いサービスPaidy(口座振替か銀行振込)がおすすめです。

希望する支払い方法を選択

支払い方法でクレジットカードを選択した場合はカード番号、有効期限、セキュリティコードを入力し、「確認画面へ進む」をクリック。

(クレジットカードの場合)カード番号、有効期限、セキュリティコードを入力し、「確認画面へ進む」をクリック

そのまま支払い完了です。

支払い完了

自動更新設定

支払い方法でクレジットやPaidyを選択した場合は自動的に自動更新に設定になっていると思いますが、念のため確認しておきます。

エックスサーバーにログイン後、上部メニュー右端のXserverアカウントメニューから「自動更新設定」をクリック。

エックスサーバー自動更新設定1

自動更新設定のページになるので、クレジットやPaidyなどで自動更新の設定になっているか確認します。

エックスサーバー自動更新設定2

※更新サイクルや支払い方法はこのページで変更できます。

永久無料ドメイン特典の受け取り

条件である12ヶ月以上の契約(支払)と自動更新の設定ができていれば永久無料ドメインの特典を受け取ることができます。

左側のメニューから「各種特典のお申し込み」をクリック。

永久無料ドメインの取得方法と手順11

独自ドメイン永久無料特典(プラン特典)の「この特典を使用する」をクリック。

永久無料ドメインの取得方法と手順12

希望するドメインを入力して検索していきます。

永久無料ドメインの取得方法と手順6

ドメイン名は早い者勝ちなので、すでに取得されているドメイン名には×印が付き、取得できないようになっています。その場合はドメイン名に数字等を足してみるか、別のドメイン名を探します。

また、末尾の「.com」とか「.net」等で迷う方も多いと思います。ちなみに個人でよく使われている物を紹介しておきます。

  • .com:Commercialの略で個人でも企業でもよく使われる。
  • .net:Networksの略でこれも個人でも企業でも使えます。
  • .org:Organizationsの略で主に非営利団体という意味合いです。
  • .info:Informationの略で情報通知という意味。
  • .biz:Businessビジネス(商用)の用途。

悩む部分ですが、個人であれば「.com」もしくは「.net」が無難です。

取得したいドメインにチェックを入れて、「選択したドメインの取得申請をする」をクリック。

永久無料ドメインの取得方法と手順7

以上で特典のドメインは取得完了です。

3. 独自ドメインの設定

エックスサーバーの「Xserverアカウント」を開きます。

Xserverアカウントへ

エックスサーバーへログインしたら「サーバーパネル」を開きます。

サーバーパネルから「ドメイン」⇒「ドメイン設定」をクリックし、ドメイン設定ページで「新規追加」。

エックスサーバードメイン追加手順1

ドメイン名の所に取得したドメイン名を入れます(example.comなど)。無料独自SSL、HTTPS転送にチェックを入れて、「追加する」。

エックスサーバードメイン追加手順2

反映待ちとなっているはずなので、数時間待ちます。

エックスサーバードメイン追加手順3

しばらくして、再読み込みしてみて「正常」となっていれば問題ありません。

エックスサーバーでメールアカウントを作成し、転送設定を行う

EC-CUBEでは、受注メールや問い合わせ対応に使うメールアドレスが必要です。フリーメールを送信元にすると、受信側で迷惑メール扱いになったり、メール認証の面で不安定になる場合があります。

そのため、取得した独自ドメインのメールアドレスを作成し、ショップ用メールとして利用するのがおすすめです。

代表岸本

岸本

Gmail使いたいという方もいると思いますが、ドメインで作成するメールからGmailなど普段確認しやすいメールアドレスへ転送設定しておくと、確認漏れを防ぎやすくなります。

エックスサーバーへログインしたらサーバーパネルへ移動し、「メール」⇒「メールアカウント設定」⇒「メールアカウントを追加」を選択。

エックスサーバーメールアカウント作成手順1

登録方式は個別で、EC-CUBEをインストールしたドメインを選択し、そのドメインの前(@の前)に任意の文字列(画像ではinfo)を入力。

エックスサーバーメールアカウント作成手順2

↓任意の文字列@ドメインという形式のメールアドレスを作成。
(例)info@example.comのようなメールアドレスを作成できます。

メールアカウントにログインするためのパスワードを決めます。パスワード生成ボタンで作成でも問題ありません。入力したら「追加する」。

エックスサーバーメールアカウント作成手順3

ついでに転送設定をするので、同じくメールアカウント設定のタブをクリック。

エックスサーバーメール転送設定方法1

作成したメールアドレスの横の「転送」ボタンを押し、転送先のメールアドレスを入力します(Gmail推奨)。

エックスサーバーメールアカウント作成手順4

これで、info@example.com宛に来たメールはGmailに転送されます。

EC-CUBEのインストール

エックスサーバーの「Xserverアカウント」を開きます。

Xserverアカウントへ

エックスサーバーへログインし、サーバーパネル(サーバー管理)へ

サーバーパネルを開いたら「全メニュー表示」をクリック。

EC-CUBEインストールの手順2

メニューの中から、「EC-CUBE簡単インストール」をクリック。

EC-CUBEインストールの手順3

EC-CUBEをインストールするドメインの選択とURLを決めます。これは先程取得した永久無料ドメインで良いでしょう。必要に応じてURLを決めます。

EC-CUBEインストールの手順4

今回はURL例としてドメインの後に「ec」と入れてますが、sampleshopなどショップ名が分かるものなど、好きに変更しても問題ありません。

次に、ショップ名と、メールアドレスを入力(どちらも後から変更可)。

EC-CUBEインストールの手順6

MEMO

登録したメールアドレスはEC-CUBEのシステム全体で自動送信されるメールの送信元・返信先・問い合わせ先として使われます。

後から変更も可能です。

管理画面ログインIDとパスワードを決めます。EC-CUBEのログイン用です。

EC-CUBEインストールの手順7

「自動でデータベースを生成する」を選択して「インストールする」を選択。

EC-CUBEインストールの手順8

以上でEC-CUBEのインストールは完了です。

EC-CUBEの初期設定

今回は小規模のショップを作成していきますが、最低限

ショップの基本情報(店名・連絡先など)を設定

まずはショップの基本情報を入力していきます。

管理画面の左メニューから設定⇒システム⇒基本情報設定から設定できます(まずは必須なのは店名です)。

EC-CUBE初期設定1

メールの欄はエックスサーバーで作成したメール(例:info@example.com)のメールを入力します。

EC-CUBE初期設定3

MEMO

基本情報に登録するメールはエックスサーバーで作成するドメインのメールでないと、注文時のメールなどが届かない場合があります。

なので、最初にやったように取得したドメインでメールアドレスを作成して登録してください。

必要な情報を入力できたら右下の「登録」。

ちなみに、ここで入力した内容はショップページの一番下の「当サイトについて」というページへ飛ぶと見れます。

EC-CUBE初期設定2

↓フッターメニューから「当サイトについて」を開いてみる。

EC-CUBE初期設定4

↓先程入力した内容が反映されています。

MEMO

初期設定では、送料無料条件を設定したり、ポイントの付与するかどうかなども設定できます。

特定商取引法に基づく表記ページを作成・公開

特定商取引法に基づく表記ページは、日本の法律で義務付けられているものです。

ネットショップ(通信販売)をする事業者は、消費者を保護するために必ず公開しなければならない基本情報をまとめた「特定商取引法に基づく表記ページ」が必要です。これは、消費者を騙したりトラブルを防ぐためです。

「誰が売ってるのか」「どこにあるのか」「返品できるのか」など、基本情報を事前に明示して、消費者を安心させる必要があります。

取り扱う商品や販売方法によって必要な表記・許認可・確認事項が異なる場合があります。実際に公開する前に、自社の商品や販売条件に合わせて内容を確認してください。

特定商取引法に基づく表記は、ネットショップ運営で重要な確認項目です。取り扱う商品や販売方法により必要な内容が変わる場合があるため、公開前に公式情報や専門家へ確認してください。

EC-CUBEの管理画面から設定⇒店舗設定⇒特定商取引法設定をクリックすると項目が一覧で出てくるので、各項目を入力して「登録」。

EC-CUBE初期設定6

(例)
販売事業者:山田 太郎
所在地:〒682-XXXX 福岡市中央区XXX-XX-XX
電話番号:090-XXXX-XXXX(平日9:00〜18:00)
メールアドレス:info@xxx.com
運営統括責任者:山田 太郎
商品代金以外に必要な料金:送料800円(全国一律)、代引手数料330円〜、振込手数料お客様負担
支払方法:銀行振込(前払い)、代金引換
商品引渡時期:ご注文確認後3〜7営業日以内に発送
返品・交換:商品到着後8日以内、未開封・未使用に限り可(送料お客様負担)。初期不良は当店負担

送料・配送方法を設定

設定 → 店舗設定 → 配送方法設定

既存の配送方法があれば編集。もし何も設定されてなければ「新規作成」でも問題ありません。

EC-CUBE配送方法設定2

■入力例のサンプル

  • 配送業者名:ヤマト運輸
  • 配送方法名:ヤマト運輸宅急便
  • 販売種別:販売種別A
  • 取り扱う支払方法:銀行振込 + 代金引換
EC-CUBE配送方法設定3

上の画像は配送方法設定の入力例です。
※代引きを利用する場合は、代引きに対応している配送会社・契約内容かどうかを事前に確認してください。

販売種別は商品ごとに「この商品はこの送料ルールで扱う」というグループ分けをする仕組みです。

標準では販売種別Aと販売種別Bの2つが用意されていますが、追加も可能。

配送方法設定画面で「この配送方法はどの販売種別に対応するか」を選ぶことで、商品の種類によって送料や配送業者を自動で振り分けることができます。

代表岸本

岸本

小規模ショップの場合、全部を販売種別Aに統一すればシンプルに運用できます。

販売種別の利用例はこちら

販売種別の利用例を簡単に解説します。

(例1)

■販売種別A(全国一律800円、ヤマト運輸)
通常の焼き菓子(常温OK、軽い)

■販売種別B(冷蔵便、送料1,200円、佐川急便)。
・冷蔵が必要な食品や加工品

上記のように、別々の配送ルールを分けることができます。

同じカートに販売種別が違う商品が入ると、EC-CUBE標準では同時に注文できない(別カート扱いになる)仕組みになっています。これにより、「常温品と冷蔵品を混ぜて送れない」などのミスを防げます。

(例2)

■販売種別A:大根1kg(小型・軽量)
送料:全国一律800円(ヤマト運輸の普通宅急便)

■販売種別B:大根10kg(大型・重量物)
→ 送料:全国一律2,000円(またはヤマトのクール宅急便、または佐川急便の大型扱い)

上記のように設定すると:

・1kgだけカートに入れた場合 → 販売種別Aの送料(800円)が適用
・10kgだけカートに入れた場合 → 販売種別Bの送料(2,000円)が適用
・両方一緒にカートに入れた場合 → EC-CUBE標準では同時に注文できない(別カート扱いになる)

という感じになるので、「1kg用の安い送料で10kgを送ってしまう」ミスを防げます。

販売種別のそれぞれの設定はどうすればいい?

配送方法を2つ作成する、つまり、同じ業者で別ルールとして扱えば問題ありません。

管理画面から設定⇒店舗設定⇒配送方法設定⇒新規登録を2回行います。

■配送方法1(種別A用:例: 小型・軽量品)配送方法名:ヤマト運輸(小型)

  • 配送業者:ヤマト運輸
  • 販売種別:販売種別A(プルダウンで選択)
  • 送料:全国一律800円(または地域別で設定)
  • その他:配送時間帯指定ONなど必要に応じて

■配送方法2(種別B用:例: 大型・重量品)配送方法名:ヤマト運輸(大型)

  • 配送業者:ヤマト運輸(同じ)
  • 販売種別:販売種別B(プルダウンで選択)
  • 送料:全国一律2,000円(または地域別で高めに設定)
  • その他:必要に応じて

上記設定できたら商品登録時に販売種別を振り分けたら問題ありません。

商品管理⇒商品編集(または新規登録)で種別をわけましょう。

・小型商品(1kgなど):販売種別 → 販売種別A を選択
・大型商品(10kgなど):販売種別 → 販売種別B を選択

■顧客が販売種別Aの商品だけカートに入れた場合
ヤマト運輸(小型)しか選択できず、送料800円が適用される。

■販売種別Bの商品だけカートに入れた場合
ヤマト運輸(大型)しか選択できず、送料2,000円が適用される。

■AとBを混ぜてカートに入れた場合
EC-CUBE標準機能では同時に注文できない(別カート扱いになる)、これにより「安い送料で重い商品を送ってしまう」ミスを防げます。

時間帯指定と送料の設定

同じく配送設定の下の方に時間帯指定を設定できる項目があるので、時間指定で注文受けれる配送会社利用の場合は設定しておくと良いでしょう。

時間帯を入力して「新規追加」していけば時間帯を追加できます。ON・OFFもできるので、表示させるかどうかは後から変更も可能です。

EC-CUBE時間指定設定4

さらに送料を設定する欄があります。

「全国一律に設定」に料金を入れて「各都道府県に適応」、その後、細かい料金の違いがあれば修正すれば問題ありません。

EC-CUBE配送方法設定6

↓送料設定できたら右下の「登録」。
※自分が利用する予定の配送会社の送料を調べて適用させます。

商品によって送料が違う場合

商品によって送料が変わってくる場合があると思います。

例えば、りんご1kgとりんご10kgみたいな、量が違う商品で、送料も別々に設定したい場合ですね。

こういうケースではちょっと前に説明した「販売種別」で分けます。

■販売種別A:生芋1kg(小型・軽量)
→ 送料:全国一律800円(ヤマト運輸の普通宅急便)

■販売種別B:生芋10kg(大型・重量物)
→ 送料:全国一律2,000円(またはヤマトのクール宅急便、または佐川急便の大型扱い)

このように設定すると1kgだけカートに入れた場合は、販売種別Aの送料(800円)が適用され、10kgだけカートに入れた場合は、販売種別Bの送料(2,000円)が適用されます。

両方一緒にカートに入れた場合については、EC-CUBE標準では同時に注文できない(別カート扱いになる)ので、これにより「1kg用の安い送料で10kgを送ってしまう」ミスを防げます。

販売種別の設定についての説明はこちら

販売する商品を登録する

いよいよ販売する商品の登録をしていきます。サンプルがあった方が分かりやすいので、デフォルトで登録されている商品を編集しながら、売りたい商品を登録していく流れで進めます。

管理画面から商品管理⇒商品一覧を見ると、最初に2つの商品が登録されていますので、これを修正していきます。

EC-CUBE商品登録の手順1

サンプル例を書き換えながら、自分の商品情報を入れていきます。必要に応じてカテゴリーを追加、価格なども設定して「登録」。

EC-CUBE商品登録の手順2

同じ容量でもう1つのサンプルも書き換えます。

さらに追加していく時は管理画面の「商品管理」⇒「商品登録」で新規に登録していくことができます。

EC-CUBE商品登録の手順3

支払い方法設定

「設定」⇒「店舗設定」⇒「支払方法設定」から、ショップで利用する支払い方法を確認・変更できます。

利用する支払い方法の順番を変更したり、表示・非表示を切り替えることができます。

EC-CUBE支払い方法設定

MEMO

初期状態では、利用できる支払い方法が限られています。クレジットカード決済やQRコード決済などを導入したい場合は、決済サービスやプラグインの確認が必要です。

Stripe連携用のプラグイン自体は無料で導入できますが、実際の決済には決済サービス所定の手数料がかかります。その他の決済方法を追加する場合は、有料プラグインが必要になることもあります

多彩な支払い方法を簡単に導入したい方はEC-CUBEよりも「ペライチ」が良いでしょう。

サイトの構成・レイアウトを変更する

ヘッダー画像(スライド)を変更する

画像の用意と圧縮

サンプルではサイトのヘッダー部分にスライド画像が設置されていますので、この画像を自分のショップのものに差し替えましょう。

EC-CUBEヘッダー画像

↓ヘッダー画像はこの部分。

画像はPC用は幅1920px前後、高さ600〜800pxくらいですかね。Canvaなどを利用してサイズ決めて、画像アップロードして調整したらすぐにできます。

代表岸本

岸本

用意する画像について、スライドは不要という方は画像1つでも問題ありませんし、良いですし、多くしてスライド利用でも大丈夫です。

新規作成⇒カスタムサイズで幅1920px前後、高さ600〜800pxにして作成したら問題ありません。

EC-CUBEヘッダー画像(スライド)の変更手順4

あとは使いたい画像をアップロードして位置調整したらちょうど良いサイズの画像ができます。

大きなサイズの画像は重く、そのままアップロードして利用するとサイトの表示速度が遅くなるので、圧縮してからアップロードします。

■Squoosh(Google公式の圧縮サイト)
https://squoosh.app/

画面の中央にドラッグ&ドロップするだけで圧縮できます。

EC-CUBEヘッダー画像(スライド)の変更手順2

形式はJPEGで、クオリティーもそのままで問題ありません。そのまま右下のダウンロードボタンを押してダウンロードしましょう(ファイル名は英数字で)。

EC-CUBEヘッダー画像(スライド)の変更手順3

画像のアップロードと設定

出来上がった画像はEC-CUBEへアップロードします。

EC-CUBEの管理画面から「コンテンツ管理」⇒「ファイル管理」と進み、表示されてるフォルダ「assets」を選択。

EC-CUBEヘッダー画像(スライド)の変更手順5

さらに表示されたフォルダから「img」フォルダを選択。

EC-CUBEヘッダー画像(スライド)の変更手順6

imgフォルダの中に「top」というフォルダを新規作成しましょう。

EC-CUBEヘッダー画像(スライド)の変更手順7

このtopフォルダに圧縮した画像ファイルをアップロードします(画像ファイル名は英数字でないとエラーになります)。

EC-CUBEヘッダー画像(スライド)の変更手順8

このtopフォルダに使う分の画像をアップロードできたら、画像パス(URL)をコピーします。

EC-CUBEヘッダー画像(スライド)の変更手順9

ヘッダー画像の入れ替え

EC-CUBEの管理画面から「コンテンツ管理」⇒「ページ管理」と進み、「TOPページ」を選択します。

EC-CUBEヘッダー画像(スライド)の変更手順10

コードが書かれている中から以下の部分を探してください。

    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="/%7B%7B%20asset('assets/img/top/img_hero_pc01.jpg')%20%7D%7D"></div>
            <div class="item slick-slide"><img src="/%7B%7B%20asset('assets/img/top/img_hero_pc02.jpg')%20%7D%7D"></div>
            <div class="item slick-slide"><img src="/%7B%7B%20asset('assets/img/top/img_hero_pc03.jpg')%20%7D%7D"></div>
        </div>
</div>

このimg src=◯◯の後の'assets/img/top/img_hero_pc01.jpg'というのが今表示されている画像のURLです。

assets/img/top/img_hero_pc01.jpg
assets/img/top/img_hero_pc02.jpg
assets/img/top/img_hero_pc03.jpg

という画像URLの部分を削除して先程コピーした画像のパス(URL)を貼り付け。画像1つなら不要な2行は削除で問題ありません。

EC-CUBEヘッダー画像(スライド)の変更手順12

これでヘッダー画像が自分がアップロードしたものになっているはずです。

レイアウト設定

現在のサイトのレイアウトを管理する部分です。

管理画面から「コンテンツ管理」⇒「レイアウト管理」⇒「トップページ用レイアウト」を選択します。

EC-CUBEレイアウトブロックの説明2

ヘッダー・ロゴ・カテゴリナビ(PC)という3つのブロックが並んでいますが、このブロック1つ1つでサイトが構成されています。

EC-CUBEレイアウトブロックの説明3
EC-CUBEレイアウトブロックの説明1

↓実際のトップページを見ると同じ順番で並んでいます。

このブロックを並び変えたり、削除することでコンテンツを入れ替えたり、削除することができます。

不要なブロックは右側(未使用ブロックエリア)へドラッグ&ドロップすれば実際のページでは表示されなくなります。

EC-CUBEレイアウトブロックの説明4

では、同じくトップページ用レイアウトを少し下の方へスクロールしていくと、新入荷商品特集、トピック、新着商品、カテゴリ、新着情報というブロックが並んでいます。

EC-CUBEレイアウトブロックの説明5
EC-CUBEレイアウトブロックの説明6

↓新入荷特集ブロック

EC-CUBEレイアウトブロックの説明7

↓トピックブロック

EC-CUBEレイアウトブロックの説明8

↓新着商品ブロック

と実際のサイトに反映されているわけです。不要なものは未使用ブロックエリアにドラッグ&ドロップして非表示にしておきましょう。

まずは、そのまますぐ使えるブロックとしては「新着商品ブロック」だけなので、これだけ残しておいても良いでしょう(ちょっとサイトが寂しいですが)。

ブロック管理で新規おすすめ商品ブロックを作成する

サンプルサイトのレイアウトではほとんどのブロックがそのまま使いにくい(初期状態のアイスの紹介ブロック)なので、未使用ブロックエリアに移動してしまいました。

すると、トップページがヘッダー画像と新着商品ブロックだけになってしまい、情報量が少なく見えてしまうので、新規でブロックを作成して追加する手順を簡単に紹介していきます。

先程レイアウト設定でブロックを追加したり、減らしたりしてサイト構成を変更しましたが、この1つ1つのブロックは自分で新規作成することもできます。

EC-CUBEブロック管理新規作成手順1

ブロック名は「おすすめ商品ブロック」など分かりやすい名前にします。ファイル名は「recommend」など、英数字で管理しやすい名称にしておきましょう。

EC-CUBEブロック管理新規作成手順3

その下のコードという部分に以下コードをコピペして「登録」

<div class="ec-role">
    <div class="ec-customFeatureRole">
        <div class="ec-customFeatureRole__image">
            <img src="/%7B%7B%20asset('%E3%81%93%E3%81%93%E3%81%AB%E7%94%BB%E5%83%8FURL')%20%7D%7D" alt="" role="presentation">
        </div>
        <div class="ec-customFeatureRole__intro">
            <p class="ec-customFeatureRole__introEnTitle">{{ 'おすすめ商品'|trans }}</p>
            <p class="ec-customFeatureRole__introTitle">{{ '美味しい〇〇をご堪能ください。'|trans }}</p>
            <p class="ec-customFeatureRole__introDescription">{{ '商品説明部分:テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストをご堪能ください。テキストテキストテキストテキストテキスト。
'|trans|nl2br }}</p>
            <a class="ec-blockBtn--top" href="/%E3%81%93%E3%81%93%E3%81%AB%E5%95%86%E5%93%81%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AEURL">{{ '商品を見る'|trans }}</a>
        </div>
    </div>
</div>

上記コードには、画像のURLを入れる部分、商品紹介テキストを入れる所、商品ページのURLを入れる部分の3箇所を自分のものに変更すると、おすすめコンテンツができます。

・「画像のURL」はヘッダー画像を変更した時と同じ要領で、画像をアップロードし、パス(URL)をコピペしたら問題ありません。
・商品ページのURLは実際に商品の詳細ページを開いて、URLをコピーしたら問題ありません。

EC-CUBEブロック管理新規作成手順4

↓画像URLを入れたおすすめコンテンツ。

おすすめ商品ブロックが完成したら、レイアウト設定でこの「おすすめ商品ブロック」をページに入れ込みます。

コンテンツ管理⇒レイアウト管理⇒トップページ用レイアウトを開いて、未使用ブロックの中から、今作成した「おすすめ商品ブロック」をコンテンツにドラッグ&ドロップして「登録」。

EC-CUBEブロック管理新規作成手順5

レイアウト変更したら登録(保存)を忘れずに。

テスト運用してみる

商品登録と基本設定が完了すれば、最低限の注文テストを行える状態になります。

実際の販売前に、必ずテスト購入を行い、注文からメール通知、受注管理までの流れを確認しておくことをおすすめします。

実際に商品をカートに入れて、購入完了までの流れを確認します。

EC-CUBEテスト購入してみる手順1

購入する場合は「新規会員登録する」か「ゲスト購入」が可能です。

EC-CUBEテスト購入してみる手順2

新規会員登録すると、マイページが利用可能になり、以下のような便利機能が使えるようになります。

  • 注文履歴:過去の注文一覧・詳細(注文番号、日時、商品、合計金額、配送状況など)
  • お気に入り一覧:商品をお気に入り登録して、後でまとめて見られる
  • お届け先一覧:複数住所を登録・管理(ギフト送り先などに便利)
  • 退会手続き:いつでも自分から退会可能
  • 注文時、ログインすれば、住所・決済情報が自動入力される
  • ポイントやクーポン(機能を追加する必要あり):登録でポイント付与やクーポン利用が可能

実際に注文してみましょう。

EC-CUBEテスト購入してみる手順3

購入手続きが完了すると、注文完了メッセージが表示されます。

EC-CUBEテスト購入してみる手順4

注文後すぐに、基本設定で登録したメールアドレスに「受注のメール」、それから注文者に送ったメールと同じものが届きますので、確認してみてください。

受注管理でテスト購入の内容を確認し、流れを把握する

注文が入ると、管理画面の受注管理⇒受注一覧で内容を確認できます。

EC-CUBEテスト購入してみる手順5

注文者にチェックを入れてステータスを変更することができます(入金済や返品など)。

EC-CUBEテスト購入してみる手順6

お問い合わせ番号を入れることもできますし、一番右のチェックアイコンをクリックするとステータスを「発送済み」に変更し、発送メールを送信できます。

EC-CUBEテスト購入してみる手順7
EC-CUBEテスト購入してみる手順8
EC-CUBEテスト購入してみる手順9

↓発送メールも初期状態でひな形が用意されています。

受注一覧はステータスによって並び替えができるので、未入金や未発送の注文を一覧で確認・管理するのに役立ちます。

以上、EC-CUBEのインストールから初期設定、基本的な使い方まで一通りご紹介しました。

EC-CUBEは自由度が高く、本格的なネットショップ運営にも対応しやすい一方で、サーバー・ドメイン・メール・配送・決済などの設定を自分で管理する必要があります。まずは小さく試しながら、運用に必要な作業範囲を確認していくことをおすすめします。専門知識に不安がある場合や、できるだけ簡単に販売ページを用意したい場合は、ペライチのようなサービスも選択肢になります。

Support

ネットショップの開設やサーバー設定でお困りの方へ

キャピタルウェブサービス株式会社では、ホームページ制作、サーバー・ドメインまわりの設定、公開後の保守・運用サポートまで対応しています。EC-CUBEの導入前に運用方法を整理したい方や、サーバー設定・ドメイン・メール設定に不安がある方は、お気軽にご相談ください。

  • ネットショップ開設前の構成相談
  • サーバー・ドメイン・メール設定のサポート
  • ホームページ制作や既存サイトとの導線設計
  • 公開後の保守・運用サポート

エックスサーバーは紹介リンクからのご契約で20%割引になります。

※既存のキャンペーンと併用可能

エックスサーバーの紹介リンクはこちら

■ペライチ
https://peraichi.com/

\ 最新情報をチェック /