【図解】EC-CUBEのインストールと初期設定までを完全ガイド

自分でネットでお店を作って商品を販売したい！という時に候補の１つに上がるのが「EC-CUBE」です。

EC-CUBEは無料でネット上にお店を作ることができますが、やや専門的な知識も必要になります。

この記事では、初心者の方向けに、EC-CUBEキューブのインストールから初期設定、商品を登録して、販売テストするまでの流れを図解でまとめました。

また、EC-CUBEキューブはやっぱり難しいという方向けには「ペライチ」もおすすめしていますので参考に。

ECキューブの「ダウンロード版（無料）」と「クラウド版（有料）」は何が違う？

ECキューブの「ダウンロード版（無料）」と「クラウド版（有料）」はほぼ同じものですが、違いは「自分で全部やるか（無料だけど手間）」「お金払って楽するか」の違いです。

■ダウンロード版（無料オープンソース）
・本体無料、自分でサーバー用意・インストール・管理する人向け。
・フルカスタマイズ自由、保守・セキュリティは自社対応。
・コスト抑えたい・エンジニアいる人向け。

■クラウド版（ec-cube.co）
・月額制（Standardプラン主流：初期7万円 + 月額約5〜8.5万円、売上連動）。
・サーバー不要、すぐ始められ、保守・セキュリティ運営側任せ。
・管理したくない・手間減らしたい人向け。

機能はほぼ同じ（EC-CUBE4系ベース、カスタマイズ・プラグイン対応）。

ECキューブを始めるために必要なものは？料金はどれくらい？

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

EC-CUBEをインストールするサーバーと独自ドメインが必要になるので、それぞれの申し込みが必要です。

レンタルサーバーは国内シェアNO.1でコスパ抜群、しかも独自ドメインが無料で利用できる「エックスサーバー」を選びました（一番安いプラン）。

• 安心・高速・安定・国内シェアNO.1（SSD完全対応、高性能CPU/メモリ）
• 独自ドメインが永久無料で利用できる（サーバー契約の間）
• 簡単インストール対応
• 自動バックアップ・無料SSL標準装備
• コスパ抜群：月額990円〜（スタンダードプラン推奨）で大容量・無制限転送量
• サポートが充実してる（もちろん日本語）

エックスサーバーで始めるなら、月額990円～（ドメインは永久無料特典）だけで始めることができます。

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

HTMLやCSSなどの知識がない方は「ペライチ」がおすすめ

HTMLやCSSなどが分からない方、サイトの管理なども難しいという方は、シンプルなサイトで販売ができる「ペライチ」推奨です。

EC-CUBEは色々な機能をプラグインで追加することができますが、１つ１つの変更や編集で専門的な知識が必要になる場合があります。

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

決済方法も揃っていますし、運営元は安心の日本国内企業、不明点があればチャットやzoom・セミナーで手厚いサポートが受けられるのがメリット。

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

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

前述したようにEC-CUBEにはサーバーが必要です。

安心・安定・高速でコスパも抜群の実績もあるエックスサーバーを利用します。

• エックスサーバーの申し込み
• 永久無料ドメインの取得
• 独自ドメインの設定
• メールアカウントの設定
• EC-CUBEのインストール

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

まずは公式サイトから申し込みしていきますが、事前にキャンペーン内容や期間を確認しておいてください。

■エックスサーバー
⇒https://www.xserver.ne.jp/

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

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

プランの選択

プラン選択ですがエックスサーバーはどのプランもスペックは大きくは変わりません。違いは容量だけと思ってもOKです。

個人利用でも法人の方でも、小規模～中規模サイトなら「スタンダード」の容量でも十分過ぎるレベルなのでスタンダード一択です（後からプラン変更も可能）。

サーバーIDを決める

サーバーID（初期ドメイン）はアカウント名のようなものなので自由に決めてOKです。

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

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

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

Xserverアカウント情報入力

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

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

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

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

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

メール認証・電話認証（自動音声認証）の入力

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

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

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

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

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

登録したメールアドレスにIDやパスワードが書かれた大事なメールが届きます。大事なメールなので大事に保存しておいて下さい。

■エックスサーバー
⇒https://www.xserver.ne.jp/

永久無料ドメインの取得

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

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

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

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

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

⇒Xserverアカウントへ

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

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

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

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

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

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

自動更新設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

３．独自ドメインの設定

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

⇒Xserverアカウントへ

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

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

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

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

しばらくして、再読み込みしてみて「正常」となっていればOKです。

エックスサーバーでメールアカウント作成と転送

EC-CUBEで受注のメールや、問い合わせのためのメールアドレスが必要なのですが、通常のyahooメールや、Gmailではセキュリティー上の理由から届かないというケースがあります。

そのため、取得したドメインのメールアドレスを取得し、そのメールを利用する必要があります。

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

⇒Xserverアカウントへ

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

登録方式は個別で、EC-CUBEをインストールしたドメインを選択し、そのドメインの前（＠の前）に好きな文字列（画像ではinfo）を入力。

↓好きな文字列@ドメインという形式のメールアドレスを作成。

（例）info@example.comのようなメールアドレスを作成できます。

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

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

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

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

EC-CUBEのインストール

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

⇒Xserverアカウントへ

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

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

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

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

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

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

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

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

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

EC-CUBEキューブの初期設定

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

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

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

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

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

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

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

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

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

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

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

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

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

※表記を全くしない、または嘘の情報を書くと、行政指導、業務停止命令、罰金の可能性があります。

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

送料・配送方法を設定

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

既存の配送方法があれば編集。もし何も設定されてなければ「新規作成」でもOKです。

■入力例のサンプル

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

↓サンプル例

※代引を利用する場合は、代引対応の会社に限定してください。

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

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

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

時間帯指定と送料の設定

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

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

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

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

↓送料設定できたら右下の「登録」。

※自分が利用する予定の配送会社の送料を調べて適用させます。

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

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

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

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

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

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

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

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

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

販売する商品を登録する

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

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

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

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

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

支払い方法設定

「設定」⇒「店舗設定」⇒「支払方法設定」で支払い方法を選ぶことができます。

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

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

ヘッダー画像（スライド）を変更する

画像の用意と圧縮

サンプルではサイトのヘッダー部分にヘッダー画像（スライド画像）が設置されていますので、この画像を自分のお店のものに変更しましょう。

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

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

新規作成⇒カスタムサイズで幅1920px前後、高さ600〜800pxにして作成したらOK。

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

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

■Squoosh（Google公式の圧縮サイト）
⇒https://squoosh.app/

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

形式はJPEGで、クオリティーもそのままでOKです。そのまま右下のダウンロードボタンを押してダウンロードしましょう（ファイル名は英数字で）。

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

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

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

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

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

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

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

ヘッダー画像の入れ替え

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

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

    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></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）を貼り付け。画像１つなら不要な2行は削除でOK。

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

レイアウト設定

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

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

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

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

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

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

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

↓新入荷特集ブロック

↓トピックブロック

↓新着商品ブロック

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

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

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

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

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

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

ブロック名は「おすすめ商品ブロック（変更してもOK）」。ファイル名は「recommend（変更してもOK）」としましょう。

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

<div class="ec-role">
    <div class="ec-customFeatureRole">
        <div class="ec-customFeatureRole__image">
            <img src="{{ asset('ここに画像URL') }}" 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="ここに商品ページのURL">{{ '商品を見る'|trans }}</a>
        </div>
    </div>
</div>

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

・「画像のURL」はヘッダー画像を変更した時と同じ要領で、画像をアップロードし、パス（URL）をコピペしたらOK。
・商品ページのURLは実際に商品の詳細ページを開いて、URLをコピーしたらOKです。

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

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

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

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

テスト運用してみる

商品登録さえしてあれば最低限の運用は可能です。

販売による手数料などもかからないので、まずはテスト購入をしてみることをおすすめします。

実際に商品をカートに入れて決済までしてみましょう。

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

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

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

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

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

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

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

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

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

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

↓発送メールも最初からいい感じにできています。

受注一覧はステータスによって並び替えができるので、誰が未入金か？誰が発送されてないか？を簡単に並び替えてチェックできます！

以上、EC-CUBEのインストールを初期設定、使い方まで簡単に紹介しました。

EC-CUBEはコードの勉強にもなります。WordPressやってた方なら導入は難しくないでしょう。

サーバーはエックスサーバーがコスパ良いです。是非使ってみてください。初心者はペライチも検討を。

■エックスサーバー
⇒https://www.xserver.ne.jp/

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