【初心者向け】ECサイトの作り方とは？ 構築方法ごとの制作フローを解説

1. ECサイトの作り方とは？

ECサイトを作る時、「独立したECサイトを作る方法」と「他社ショッピングモールに出店する方法」の2種類に分かれます。

独立したECサイトを立ち上げたい場合、ビジネス規模に応じた構築方法を選び、ベンダー、もしくは自社の開発リソースでサイト設計や開発を行います。

Amazonや楽天市場などの他社ショッピングモールに出店する場合、すでに出来上がっているECサイトの枠組みに必要な情報を入れて申請するだけで出店可能です。

今回は、独立した自社ECサイトの作り方にフォーカスして、構築方法や制作フローを一つずつ解説していきます。

【関連記事】
ネットショップの構築方法とは？ サービスごとの特徴や選定ポイントを紹介

2. ビジネス規模に応じてECサイトの作り方を選ぶ

自社ECサイトの構築方法は、大きく分けて以下の5種類があります。

・ASP型（無料・有料）
・オープンソース型
・パッケージ型
・クラウド型
・フルスクラッチ型

構築方法によって、ECサイトの作り方や想定される構築費用は大きく異なります。基本的には、ビジネス規模に応じて適切な構築方法を選ぶ形になるでしょう。

では、それぞれの構築方法の特徴や費用相場などをご紹介していきます。

2-1. 【個人向け】無料ASP、オープンソース型

個人で運営する小規模のECサイトを作る時、無料ASP型、もしくはオープンソース型という構築方法が選ばれます。

ASPとは、「Application Service Provider（アプリケーション・サービス・プロバイダ）」を略したもので、クラウド上のシステムを利用してECサイトを構築します。予め出来上がっているカートシステムや商品管理、決済機能などを利用し、簡易的なECサイトを作ることが可能です。

無料ASPは、Webサイト制作未経験の人でも手軽にECサイトを構築できますが、利用できる機能は最低限のものとなります。

オープンソース型は、外部に公開されたソースコードを基に、自社でECサイトを構築可能です。ソースコードは無償で公開されていますが、HTMLやCSSのコーディング技術やプログラミング言語に関する知識が要求されます。

無料ASP型とオープンソース型なら構築費用がかからないため、ビジネス規模の小さい個人や法人におすすめされるECサイトの作り方です。

2-2. 【EC年商1億円未満】有料ASP型

有料ASPは、無料ASPよりもカスタマイズの自由度や拡張性が高いECサイトの構築方法となります。

最低限のEC機能を備えているのはもちろんのこと、デザインの選択肢が豊富で、無料ASP型よりも優れた在庫管理機能やデータ解析機能が搭載されています。

有料ASP型の初期費用は高くて数万円となり、0円で利用できるサービスもあります。

ただし、初期費用に加えて月額費用「数千円〜数万円」が発生するため、年商1億円未満の法人におすすめされるECサイトの構築方法です。

2-3. 【EC年商1億円以上】パッケージ型、クラウド型

パッケージ型とクラウド型は、クラウド上にあるプラットフォームからパッケージ化されたEC機能をインストールし、ECサイトを作る方法です。

ベンダーに対してECサイトに必要な機能をカスタマイズできるため、ASP型やオープンソース型よりも自由度の高いECサイトを構築できます。

また、ベンダーによる充実したサポート体制の中でECサイトを運用できるため、万が一トラブルがあった場合も速やかに解決可能です。

自由度や拡張性に優れていますが、ベンダーに開発を依頼する必要があります。構築費用は、数十万円〜数百万円が想定されるため、年商1億円以上の法人向けの構築方法とされます。

2-4. 【EC年商数十億円以上】フルスクラッチ

フルスクラッチは、ECサイトのシステムをゼロから構築する方法です。

自社ブランドのイメージとベストマッチするデザインやユーザビリティに配慮したUI/UX設計で、ECサイトを自由自在に構築できます。また、バックエンド業務を効率化させるシステムも実装可能なため、サイト運用後のPDCAを高速化できます。

最も自由度と拡張性の高い構築方法となりますが、多くの開発リソースを割くことになり、時間もコストもかかります。

ECサイトの規模によっては数千万円〜数億円クラスの構築費用が発生するため、年商数十億円の法人向けの構築方法です。

 3. 無料ASPでのECサイトの作り方

無料ASPなら、Webサイト制作に関する専門知識がない人でも手軽にECサイトを作れます。

①無料ASPへの登録
②ECサイトのデザイン選び
③商品登録とサイト公開
④テスト発注

では、それぞれの工程を詳しく見ていきましょう。

3-1. 無料ASPに登録する

無料ASPを提供する事業者のWebサイトから、登録（アカウント作成）をしましょう。

＜代表的な無料ASP＞
・BASE
・STORES

一般的な無料APSでは、ECサイトのURL、運営者のメールアドレス、任意のパスワードの3点を登録します。

完全無料でECサイトを作りたい場合は、独自ドメインではなく、サブドメインで登録する形となります。自社のブランディングを大事にしたい場合は、有料でも独自ドメインを選びましょう。

登録が終わった後は、事業者の氏名や所在地、決済方法などを追加してアカウント情報を完成させます。

3-2. ECサイトのデザインを選ぶ

無料ASPに登録した後は、予め用意されているデザインをテンプレートから選びます。

背景やナビゲーションのデザインに加えて、パーツごとの編集も可能となっています。また、ショップのロゴは、無料APSで作成することも可能です。

ただし、オリジナルの背景やカラーを導入したり、パーツを追加することは基本的にできません。

3-3. 商品登録とサイト公開

無料APS内にある商品登録画面から、商品名や商品の説明文、価格、写真などを追加します。

カラーやサイズ、在庫数なども簡単に追加できるようになっており、難しい操作なく登録できます。ただし、商品を一つずつ登録しなければならないため、時間と手間がかかることを想定しておきましょう。

また、商品の登録数や画像のアップロード数は、有料版よりも制限されているケースが多いです。

3-4. テスト発注を行う

サイトデザイン決めや商品登録が終わった後は、テスト発注を行います。

テスト発注では、ショッピングカートに商品を入れて購入する一連の流れを、さまざまなバリエーションでテストします。この時、運営者は受注処理や在庫管理のやり方も覚えなければなりません。

テスト発注機能が導入されていない無料ASPもあるため、登録前に仕様を良く確認しておきましょう。

無事にテスト発注の工程を終えられた後に、ショップの公開となります。

 4. 有料ASPでのECサイトの作り方

無料ASPの機能だけでは満足できない時に選ばれるのが、有料ASPです。

有料APSでECサイトを作る時も、基本的には無料ASPと同じ制作フローとなります。

①自社ビジネスに合わせて有料APSを選ぶ
②ECサイトの画面デザインを決める
③商品登録を一括で行う
④運営フローの最終チェックをする

無料版よりもEC機能が充実しているため、ビジネスモデルやブランディングを考慮したECサイトを制作しましょう。

4-1. 自社ビジネスに合わせて有料ASPを選ぶ

まずは、自社ビジネスやブランディング、商品イメージに合った有料ASPをインターネットで探しましょう。

有料ASPで搭載可能な機能は、事業者によって大きく異なるため、複数社のサービスを比較して慎重に決めることをおすすめします。

＜代表的な有料ASP＞
・Shopify
・MakeShop
・futureshop

各事業者は、有料ASPで作ったサンプルサイトや導入事例を公開しているため、必ずチェックしてください。

登録したい有料ASPが決まった場合は、事業者のWebサイトにアクセスして登録を完了させましょう。

4-2. ECサイトの画面デザインを決める

有料ASPは、無料版よりもデザインのテンプレートやパーツが豊富に用意されています。

一つの有料ASPに対して、数十種類以上のテンプレートが実装されているケースもあり、より自社ビジネスやコンセプトに沿ったデザインにすることができます。

単純にかっこいいデザインにするだけではなく、売れるデザインに決めることが大事です。

また、大手の事業者であれば、ECサイトのデザインに実績のあるデザイン会社を紹介してくれるケースもあります。自社にWebデザインに精通したリソースがいない場合には、相談してみることも視野に入れておきましょう。

4-3. 商品登録を一括で行う

無料ASPでは、商品を一つずつ登録していましたが、有料APSなら商品のさまざまな項目を一括登録することが可能です。

＜一括登録可能な商品の項目＞
・商品名
・販売価格
・画像
・説明文
・在庫数

一括登録は、CSVファイルのアップロード機能で行います。

登録を反映させた後は、お客様の興味を引く説明文に編集することも忘れないでおきましょう。

4-4. 運営フローの最終チェックをする

商品登録が終わったら、テスト発注機能を使用して運営フローの最終チェックを行います。

この際、お客様側に表示される購入手順の案内や確認メールの内容も細かく確認し、違和感や不便がないかを判断しましょう。
また、有料ASPにはプラグインで追加できる受注管理や在庫管理、データ分析を効率化できる機能があります。

各種機能の使い方を熟知した上で、サイト公開となります。

5. オープンソースでのECサイトの作り方

オープンソースは、「ASPよりも独自要素を取り入れたECサイトを作りたい、でもコストはかけたくない」という場合に選ばれる構築方法です。

APSとは異なり、自社でサーバーを用意してソフトウェアをインストールする必要があります。

①サーバーを構築・レンタルする
②オープンソースソフトをインストールする
③ECサイトの基本設定と商品登録をする
④ECサイトのデザインを作成する
⑤サイトを公開する

では、制作フローを工程ごとに詳しく見ていきましょう。

5-1. サーバーを構築・レンタルする

オープンソースでのECサイト作りは、「自社でサーバーを構築するか」「レンタルサーバーを借りるか」の二択から選ぶことになります。

自社でサーバー構築をする際、専門知識を持ったリソースが必要となり、公開までに時間と手間がかかります。

そのため、小規模〜中規模のECサイト作りでは、レンタルサーバーを借りるのが一般的です。

5-2. オープンソースソフトをインストールする

サーバーを用意した後に、オープンソースを提供する事業者のWebサイトから、最新版バージョンのソフトウェアをダウンロードします。

＜代表的なオープンソース＞
・EC-CUBE
・Magento
・WordPress

ソフトウェアをダウンロードした後は、オープンソースをサーバーにインストールしましょう。

オープンソースによっては、ボタンひとつで簡単にインストールできるクイックインストールも利用可能です。

5-3. ECサイトの基本設定と商品登録をする

オープンソースの管理画面から、メールアドレスやショップ名の登録、データベースで各種設定を行いましょう。

その後、商品情報や画像の登録を一つずつ、もしくはCSVファイルで一括登録します。

商品は販売種別やカテゴリ、タグで区分しておくことで、商品掲載ページの作成や在庫管理を効率化できます。

5-4. ECサイトのデザインを作成する

オープンソースには、ECサイトのデザインテンプレートが予め用意されています。

ASPと異なるのが、自社でECサイトの背景からパーツまでデザインすることができる点です。HTMLやCSSのコーディング技術があれば、イメージ通りのデザインやカラーにできるため、比較的自由度が高いです。

5-5. サイトを公開する

オープンソースは、他社サービスも含めて、さまざまな便利機能が搭載されたプラグインをインストールできます。

顧客側の利便性を高める機能から、データ分析や管理業務を効率化させる機能まで用意されているため、多彩なカスタマイズが可能です。

競合他社と差別化を図れるデザインや各種機能が十分に整ったら、サイト公開をしましょう。

6. パッケージ、クラウド、フルスクラッチでのECサイトの作り方

自由度が高く拡張性に優れ、既存システムともスムーズに連携可能なECサイトを作りたい場合、パッケージ型・クラウド型・フルスクラッチ型が選ばれます。

これらの構築方法に共通するのが、要件定義を行った上で、ECサイト設計・開発に移るという点です。

一般的には以下のような制作フローでECサイトを構築します。

①要件定義をする
②ECサイトの設計・開発を行う
③システムテスト・外部連携テストを行う
④サイトを公開する

では、制作フローの工程を詳しく見ていきましょう。

6-1. 要件定義をする

要件定義とは、プロジェクトが本格的にスタートする前に、「どのようなシステムを組み込むべきか」という要件をまとめることです。

パッケージ型やクラウド型の場合、自社で組み込みたい機能をベンダーに相談します。そして、ベンダー側は適合している部分と乖離している部分を洗い出し、ギャップをどのように埋めるべきかを提案し、要件定義書がまとめます。

フルスクラッチ型では、自社内で開発すべきシステムや予算を決めた上で、システム設計・開発に進みます。

6-2. ECサイトの設計・開発を行う

要件定義でまとめた基本設計に沿って、サイト全体の設計を決めるところから始まります。

パッケージ型やクラウド型の場合、ベンダーにサイト設計・開発を任せることが多いため、担当者が進捗確認などを行います。

サイト全体の設計が決まった後は、工程ごとに作業を細分化し、適切なリソースが割り当てられます。具体的には、ユーザーインターフェースを作成する外部設計から始まり、システムの内部の動作や機能を開発する内部設計へと移る流れです。

システム開発は、外部設計と内部設計にあたる上流工程が終わってから着手するのが一般的です。

要件定義書に沿って独自のEC機能を開発し、まとめてECサイトに実装します。自社や他社の既存システムとスマートに連携できるECサイトを構築できるため、ASPやオープンソースよりも充実した機能が搭載されます。

自社で開発をゼロから行うフルスクラッチの場合、時間もコストもかかる工程となりますが、機能の追加・変更を柔軟に行うことが可能です。

6-3. システムテスト・外部連携テストを行う

ECサイトのシステム開発が終わった後、システム単体、もしくは全体が正常に動作するかどうかのテストを行います。

・単体テスト
・統合テスト
・システムテスト
・運用テスト

個々のプログラムが問題なく稼働するかどうかを確認する単体テストから始まり、複数のプログラムでの稼働を検証する統合テスト、システム全体の動作を確認するシステムテストへと移ります。

最後に、ECサイト全体の機能が正常に機能しているかを検証する運用テストが行われる流れです。

6-4. サイトを公開する

運用テストが終了した後、いよいよサイト公開です。

パッケージ型の場合、一般的には完成したECサイトのシステムを一気に落とし込む一斉移行がベンダー側で行われた後、自社でリリースとなります。

サーバーに大きな負担のかかる大規模なフルスクラッチ型の場合、徐々に機能を公開していく順次移行が選ばれるケースもあります。

パッケージ型・クラウド型・フルスクラッチ型は、制作フローが同じでも、システム設計や開発をベンダー側で行うか、自社で行うかの大きな違いがあります。

7. ECサイトの構築方法を選ぶ際の注意点

ECサイトの構築方法は、どれを選んでも必ずメリットとデメリットがあります。

例えば、初期費用0円で構築できる方法を選んだ場合、カスタマイズ性はどうしても低くなってしまいます。また、ランニングコストも発生するため、毎月の売上で黒字を出せるかどうかも考えなければなりません。

では、ECサイトの構築方法を選ぶ際に注意すべき点を3つご紹介していきます。

7-1. 構築方法ごとのメリット・デメリットを理解する

ECサイトは、高機能でカスタマイズ性が高いほど構築費用が高額になる傾向にあります。

以下は、構築方法ごとのメリットとデメリットを簡潔にまとめた表となりますので、ぜひ参考にしてください。

ECサイトの作り方が最も簡単なのは、無料ASP型です。

小規模なECサイトを運用する場合は無料ASPから利用し、ビジネスの規模に応じて有料ASPやパッケージ型を選択しましょう。

7-2. 3年後の売上を想定した構築方法を選ぶ

ECサイトで長期的に費用を抑えたい場合、3年後の売上を想定した構築方法を選びましょう。

なぜなら、ECサイトを運用し始めた後、一部のプラットフォームでは大幅なシステム変更ができないからです。

例えば、初年度の売上を想定し、必要最低限の機能が備わったASPでサイトを構築したとします。3年後、仮に売上1億円に到達した場合、ASPにある機能だけでは顧客対応や商品管理が追いつかないという問題が発生します。

将来的にシステムリニューアルに大きな費用をかけることなく、ECサイトを運用したい場合には、カスタマイズ性・拡張性が高いクラウドEC型を選びましょう。

7-3. ベンダーのサポート体制を複数社で比較する

ECサイトをパッケージ型やクラウドEC型で構築する場合、ベンダーによってサポート体制が異なることを理解しておかなければなりません。

例えば、アフターメンテナンスサービスのないベンダーの場合、システムにトラブルが生じた場合に自社内で解決しなければなりません。また、サポート窓口がメールやチャットだけではなく、電話にも対応しているかどうかは重要な選定ポイントとなるでしょう。

ベンダーによっては、アフターメンテナンスやサポート窓口に加えて、マーケティングやフルフィルメントまでサポートしてくれるケースもあります。

自社ECサイト運用の経験が浅い場合には、ECに精通したプロフェッショナルのサポートがあるベンダーのサービス利用も検討しましょう。

8. AnyMindがECサイト構築から物流までトータルサポートします！

ECサイトの作り方は、自社のビジネス規模に応じた構築方法を選ぶことから始まります。

・ASP型（無料・有料）
・オープンソース型
・パッケージ型
・クラウド型
・フルスクラッチ型

専門知識なく最も簡単に構築できるのは、予め用意されたテンプレートやパーツを組み合わせるだけでECサイトを作れるASP型ですが、カスタマイズ性が低いことがネックになるでしょう。

オープンソース型やパッケージ型、クラウド型、フルスクラッチ型は、デザインや機能をカスタマイズする際にWebデザインやプログラミング技術が要求されます。コストが高くなるものの、自社で必要な機能を漏れなく搭載することが可能です。

ECサイト作りにお困りの場合は、ECサイト構築から物流に至るまで「AnyMind Group」がトータルサポートいたします。

「AnyMind Group」が提供している「AnyShop」なら、世界最大のECプラットフォーム「Shopify」を利用し、便利なEC機能が搭載されたECサイトを手軽に構築できます。

ぜひこの機会に、「AnyShop」で自社ECサイトを構築してみてはいかがでしょうか？

▶「自社ECサイト構築『AnyShop』ご紹介資料」のダウンロードはこちら