初心者Webデザイナーでも可！ECサイトの制作の種類・オススメの方法教えます
フリーランスとしてお仕事を探していると、ECサイト制作の依頼を目にする機会も多いと思います。Web制作の学習を始めて間もないと、難しそうだから無理、と諦めてしまっている方も多いのではないでしょうか。
確かに、ECサイトには色々な要素が絡んでくるので難易度は高めですが、プログラミングスキルがなくても十分に構築できる方法もあります。この記事では、ECサイトを作るためのサービスやツール、プログラミングに自信がなくてもECサイトを作れる方法を解説します。ぜひEC案件にもチャレンジしてみましょう！
ECサイト制作って、難しそうだけど…
ご質問
知り合いからECサイトを作ってほしいとお願いされました。でも、ECサイトって普通のWebサイトと何が違うのか全然わかりません。ショッピングカートやクレジットカード決済ってどうやって組み込むんでしょうか？今までHTMLやCSSをちょっと勉強しただけで、ECサイトをどうやって作ればいいのかさっぱりイメージがつきません。
そもそもHTMLやCSSだけでECサイトを作れるんでしょうか？それとも他に必要な技術があるんでしょうか？
初心者でも簡単に作れる方法を教えてください。
吉田先生の解答
ECサイトの仕組みを理解して、順序を追って進めれば、今のスキルでも十分対応できますよ！
ただ、最初にECサイト制作は「HTMLやCSSだけでは、ECサイトは完成しない」ことを覚えておきましょう。
ECサイトは、ショッピングカートや決済システムといった、サーバー側で動く処理が必要になります。単なるデザインだけでなく、もっと広い技術が必要なんですね。
うぅ……HTMLやCSSも勉強している途中なので、サーバー側で動く仕組みが作れるまでは遠すぎます。初心者には無理ってことですか？
あやのさん
吉田先生
いえいえ、大丈夫ですよ！イチから自分で全てプログラムを書かなくても良い、初心者でも簡単にできる方法もちゃんとあります。
Web制作初心者がECサイトを作るために必要なこと
1. ECサイトの基本の流れを理解する
ECサイトは、商品ページ、ショッピングカート、決済機能、注文確認といったステップで構成されています。事前にこの流れを押さえておけば、プラットフォームの選定や学習・制作がスムーズに進められるはずです。
2. プラットフォームを活用する
初心者に最もオススメなのは、ShopifyやBASEのようなECサイト構築サービスを使うことです。難しいプログラミングの知識がなくても、これらのサービスを使えば簡単に必要な機能を組み込むことができます。
◆ セキュリティ対策もプラットフォームなら簡単
クレジットカード決済を扱うECサイトでは、SSLなどのセキュリティ対策が必要ですが、ShopifyやBASEではこれも簡単に対応できます。最初はこれで十分です。
3. 更に技術を学ぶなら…
将来的に自分でECサイトを構築したいなら、JavaScriptやサーバーサイド言語（PHP、Rubyなど）を学ぶことを検討してみてください。これらの学習を進めると、より自由にカスタマイズが可能になりますし、知識と技術を積み重ねていけばオリジナルシステムの開発などエンジニアとしても活躍できるようになります。
まずは、既存プラットフォームで経験を積んでいきましょう。
そして、後々スキルアップして、もっとカスタマイズ性の高いサイト作成にも挑戦するのがオススメです！
ECサイトの仕組みと技術を簡単に把握しよう
ECサイトでの注文ステップ
ECサイトには、一般的なWebサイトとは異なる一連のステップがあります。まず、ユーザーは商品ページで商品を選び、ショッピングカートに追加します。その後、決済ページで支払い情報を入力し、注文確認ページで注文内容を最終確認します。最後に、注文完了のメッセージが表示され、注文処理が行われるのです。
ご自身でネットショッピングをした時の流れを思い出してみると、良いかもしれません。
ECサイト制作では、この流れをスムーズに行えるように、様々なページや機能を用意します。
ECサイトはHTMLやCSSだけで作れる？必要な技術は？
ECサイトの見た目やデザイン部分は、HTMLやCSSで作成できます。
しかし、欲しい商品を追加していくショッピングカート、お支払いに使う決済システムなどの機能も必要になります。これらの機能の実装には、JavaScriptやPHPなどのバックエンド（サーバーエンド）言語を使用します。
Web制作初心者の方が、実運用レベルのECサイトをイチから構築できるまで学習するには時間が掛かるでしょう。
ですので、次に紹介するECプラットフォームの活用がオススメです。
ECサイトを構築する方法は？
オススメ：ECプラットフォーム（ASP）を使う
ECプラットフォームとは、ECサイトを構築・運用するための基盤となるシステムのことです。あらかじめ商品登録から注文、決済処理に至るまでの一連の流れをサポートできる機能をもたせたシステムと考えてください。なお、ECサイトの決済に関わる諸機能を持つサービスの総称として、“ECカートシステム（ショッピングカートシステム）”と呼ぶ場合もあります。
その中でも特におすすめなのが、ASPカートシステムと呼ばれる、開発済みのソフトウェアをインターネットを介して利用できるサービスです。ASPカートシステムでは、サーバーやソフトウェアを自分で設置・管理する必要がなく、オンライン上で簡単にECサイトを構築・運営できます。さらに商品ページの作成、在庫管理、注文管理、決済機能、顧客対応、デザインカスタマイズ、マーケティングツールなど、ECサイト運営に必要な機能をオールインワンで提供されているので、プログラミング知識が無くても高機能なECサイトを開設できます。
代表的なASPカートシステムには、Shopify、STORES、BASE、Wix Stores、カラーミーショップなどがあります。耳にしたことのある名前が多いのではないでしょうか？そう、実は、ASPカートシステムで作られているECショップが多いのです。
ECプラットフォーム（ASPカートシステム）のメリットとしては、サイト全体をまとめて管理でき、決済やセキュリティ対策も自動で処理してくれること。プログラミングやサーバー保守といった技術がなくても、安全にサイト運営が可能で、初心者にも扱いやすいのが大きな特徴です。小規模から中規模のビジネスやEC初心者に最適で、基本的なECサイト機能を簡単に短期間で使えます。一方で、カスタマイズや大規模なシステム構築には限界があります。
そのほかのECサイト構築方法
一口にECサイト制作や、ネットショップ開設と言っても、その方法は様々です。
ASPカートシステムを利用する以外に、以下のような方法もあります。
- カートシステムを組み込む
- ECモールへの出店
- フルスクラッチ
1. カートシステムを組み込む
カートシステムは、既存のWebサイトにショッピング機能を追加するためのツールです。すでに持っているサイトに、商品をカートに入れて購入できる機能を追加したい場合に使われます。フリーランスのWebデザイナーが依頼されることが多いのは「WordPressにEC機能も付けたい」とかですね。
WordPressのプラグイン「WooCommerce」など、オープンソースのECシステムは、誰でも無料で使えるECサイト構築用のソフトウェアを使うことで実現できます。ユーザーはソースコードにアクセスできるため、自由にカスタマイズが可能です。その他にEC-CUBEなどもありますが、こうしたECシステムを組み込む場合は、自分達でサーバーを用意し、システムの設定や保守を行う必要があります。
2. ECモールへの出店
ECモールの出店とは、Amazonや楽天市場などの大手ECモールに自社の商品を販売する形態です。独自にECサイトを構築するのではなく、既存の大手プラットフォーム上に出店し、モール側に一定の手数料を支払います。メリットは構築コストがほぼなく、モールのシステムや集客力を活用して商品を販売できること。デメリットとしては、手数料の高さ、モール内での価格競争に巻き込まれやすいことが挙げられます。
3. フルスクラッチ
フルスクラッチとは、ゼロからすべてのシステムを自社開発で構築する方法です。完全に自社独自の要件に合わせたサイトを構築することが可能。自社に最適なシステムを構築できますが、開発費用と期間が非常にかかります。また、システムの保守運用も複雑になり、構築には高度な技術力が求められます。
依頼別：オススメのEC制作方法
新規ECサイト開設：メジャーなASP型サービスを使う
ECサイトを新規開設したい、ネットショップがメインのサイトで良い、という場合は、ECプラットフォーム（ASP型）を利用するのがおすすめです。ECサイトに必要な基本機能が揃っているので、プログラミングやサーバーの知識はほぼなくてもECサイトに必要な機能を設定可能。また、サービス運営者がサポートや機能の更新・セキュリティ管理を行ってくれるので、安心感が高いです。
ASP型と呼ばれるECプラットフォーム、国内外を含めると非常に数が多いです。
人気のあるサービスとしてはShopifyやBASEなどがあります。これらのプラットフォームは、商品ページや決済システム、注文管理までの全ての機能を提供しており、難しいプログラミング知識がなくても利用できます。
利用者数が多いので安心感があり、カスタマイズ関連の情報も多いです。
Skillhubでは世界的なシェア率を誇るShopifyをお勧めしています。理由は以下の記事で詳しく紹介しています。
Skillhubブログ
既存サイトにEC機能を追加したい場合
既存のWebサイトにEC機能を追加したい場合は、独自開発を除いて、以下のような方法が代表的です。
- 外部ECサービスのリンク機能を使う
- オープンソースECパッケージを使う
- APIで連携する
1. 外部ECサービスのリンク機能を使う
ASP型ECプラットフォームの中には、埋め込み用のリンクや購入ボタンのコードを簡単に発行できるサービスが多く存在します。例えば、ShopifyやSTORESでは、購入ボタンのコードを生成し、自社サイトに貼り付けるだけで、簡単にEC機能を追加できます。BASEの場合は、商品詳細ページのURLを指定されたiframeタグに入れるだけで機能します。このように、ほとんどの場合、コピペで実装できる手軽さが魅力です。
基本的にリンクを埋め込むような形になりますので、ご注文（注文者情報の入力など）は外部のECプラットフォームに移動して行われます。顧客情報や決済処理は外部サービスで管理されるため、安全性が高いというメリットもあります。一方、購入手続きを進める際にURLが変わることを、デメリットと捉えるケースもあります。
2. オープンソースECパッケージを使う
こちらは、ECサイト構築に必要なソフトウェアのソースコード（ECサイト構築システム）を入手して、自分でサーバーにインストールし設定していく方法です。WordPressなどのCMSの、ECサイト版を利用すると考えるとイメージしやすいかもしれません。
また、既存サイトがWordPressの場合は、プラグインを追加するだけでEC機能を追加できます。オープンソースECの代表格でもあるのが、WordPressプラグインの「WooCommerce」。国産WordPress用ECサイト構築プラグインとしては「Welcart」もあります。これらはプラグインをインストール・有効化して、画面上に必要なことを登録していくだけなので、導入や設定もめちゃくちゃ簡単です。
3. APIで連携する
外部のカートシステムとAPIを使ってデータ連携を行うことで、自社Webサイトにショッピングカートシステムを組み込む事もできます。例えば、Shopifyの場合だと「Storefront API（ストアフロントAPI）」や、ヘッドレスコマース構築に利用できるフレームワークHydrogenなどがあります。
ただし、Shopify Storefront APIなどを使用する場合、ある程度のプログラミング知識（特にJavaScriptやGraphQL）が必要です。APIのリクエストとレスポンスの処理に慣れている必要があります。バックエンドはECプラットフォームに依存するので独自開発とまでは言いませんが、開発領域の技術が必要となってきます。
ECサイトのセキュリティ確保は？
外部ECプラットフォームを使用してECサイトを構築する場合、サービス提供者が大部分を管理してくれています。例えば、Shopifyではホワイトハッカーによる24時間監視体制が整っているなど、安全性の高さも一つの“売り”なんですね。このため、セキュリティに関して、特別な設定を自分で行う必要はほとんどありません。IDやパスワードを推測されにくいものに設定するなど、基本的な対策をしっかり行えば十分。初心者でも安心して運営できます。
しかし、WordPress+WooCommerceのように、自分でECサイトを構築・運営する場合は、セキュリティ対策が必要なケースもあります。ECパッケージによっても違いがあるので、導入時に検討しましょう。以下2つは最低限の対策です。
SSL証明書を導入する
ECサイトでは、顧客の個人情報などを扱うため、暗号化通信はマスト条件。SSL証明書を導入し、サイト全体の通信を暗号化することで、顧客が安心して買い物できる環境を提供しましょう。SSLが有効化されている場合、サイトのURLが「https」になり、ブラウザに鍵マークが表示されます。クレジットカード決済を安全に処理するサービスを使う
クレジットカード決済を自分のサーバーで処理するのは非常にリスクが高いため、専門の決済代行サービスを利用することが一般的です。例えば、StripeやPayPalなどのサービスは、クレジットカード情報を適切に保護し、不正利用のリスクを最小限に抑えてくれるので、自前でセキュリティ対策を行う必要が軽減されます。
Webデザイナーのスキルアップのために
今後のスキルアップのために学ぶべき技術
プログラミングの基礎知識（ JavaScript）
ECサイトを構築する際、今はプログラミング知識がなくても始められますが、今後のスキルアップのためには、基本的なプログラミングの知識を身に付けておくことが非常に役立ちます。学習のスタートにおすすめしたい言語はJavaScriptです。JavaScriptは、Webサイトの動きを作り出すためのフロントエンドプログラミング言語で、ECサイトにも多く使われています。
ですので、まずはJavaScriptでプログラミングの基本的な概念を理解しておくと良いでしょう。
変数: プログラム内でデータを一時的に保存するための箱のようなものです。例えば、商品の価格や在庫数を変数に格納して動的に扱うことが可能です。
配列: 複数のデータをまとめて管理するための構造です。例えば、複数の商品や顧客の情報を扱う際に使用します。
ループ: 同じ処理を繰り返すための仕組みです。商品一覧ページなど、同じようなデータを繰り返し表示する場合に利用します。
基礎がわかると、簡単なコード修正やカスタマイズができるようになります。
また、JavaScriptはカート機能や商品フィルタリング、ポップアップの表示など、ユーザーの操作に応じたインタラクティブな機能を実装する際に役立ちます。
サーバーサイドプログラミング（PHPなど）
ECサイトをより深く理解し、自分で自由に構築・カスタマイズしたい場合は、サーバーサイドのプログラミング言語を学ぶと良いでしょう。PHPやRuby on Railsは、ECサイトのバックエンド部分を支える言語です。これらを学ぶことで、以下のようなことが可能になります。
- 商品データの動的管理：データベースと連携し、商品の追加や在庫管理などの処理を自動化できます。
- カスタム機能の実装：オリジナルの顧客管理システムなどを作成し、柔軟なECサイト運営が可能になります。
PHPは特に、WordPressやEC-CUBEなどのシステムでも使われているため、学んでおくと既存のプラットフォームのカスタマイズにも役立ちます。
最後に
ECサイトを本格的に作る前に、まずはShopifyやBASEなどのプラットフォームを利用して、ECサイト運営の流れを体験してみるのが良いスタートです。これらのプラットフォームは、プログラミング知識がなくても簡単にサイトを立ち上げることができます。
最初から難しい技術を学ぶ必要はありませんが、サイト運営を続ける中で徐々にスキルを高め、より高度なカスタマイズや機能追加に挑戦してみるのも良いでしょう。プログラミングの基礎を学んでいくことで、ECサイトのカスタマイズができるようになり、将来的に独自のECサイトを自分の力で構築する力がついてきます。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
10月20日まで