2024 年に e コマース ウェブサイトを作成する方法 (簡単ガイド)

経営不振に陥っている実店舗をオンライン ビジネスに変えてみませんか?オンライン ビジネスは、より幅広い視聴者を獲得し、売上を向上させることができます。今日、多くのユーザーは、オンラインで従来のビジネスを拡大したり、デジタル市場で新しい事業を開始したりすることを望んでいます。このガイドでは、売上を伸ばし、顧客とのやり取りを強化する、成功する e コマース Web サイトを作成するための段階的なアプローチを説明します。 Divi と WooCommerce を使用して完全なオンライン ストアを数分で生成する方法、ブランドに合わせてデザインする方法などについて説明します。

なぜ e コマース Web サイトを構築する必要があるのですか?

今日のビジネスの世界では、特に買い物習慣がオンラインに移行しているため、e コマース Web サイトの構築が不可欠になっています。その理由はいくつかあります。構築することが重要である主な理由は次のとおりです。

• リーチの拡大: e コマース サイトを使用すると、企業は地域を超えた顧客にリーチできるようになります。物理的な境界がなく、いつでもどこでも、24 時間年中無休で人々に販売できます。
• 顧客の利便性:人々はオンライン ショッピングの手軽さを気に入っています。携帯電話、タブレット、コンピューターのいずれを使用していても、顧客は都合の良いときに買い物をすることができます。 e コマース サイトを使用すると、購入プロセスがスムーズでアクセスしやすくなります。
• コスト効率: e コマース サイトの運営は、実店舗を運営するよりもコスト効率が高くなります。家賃、光熱費、場合によっては人件費などの諸経費を削減できます。
• データと分析: e コマース Web サイトは、顧客をより深く理解するのに役立つ豊富なデータを提供します。彼らの買い物習慣を追跡し、どの製品のパフォーマンスが最も優れているかを確認し、そのデータをマーケティング戦略と顧客エクスペリエンスを向上させるために使用できます。

ご存知のとおり、eコマース Web サイトを作成する理由を構築してみましょう。

7 つのステップで e コマース Web サイトを構築する方法

適切な手順に従い、適切なツールを使用すれば、WordPress を使用して独自の e コマース Web サイトを簡単に作成できます。初心者でも経験豊富な開発者でも、視覚的に魅力的なオンライン ストアを簡単に立ち上げることができます。その方法は次のとおりです。

1. ドメインとWordPressホスティングを取得する

サイトを構築する前に、ドメイン、ホスティング サービス、WordPress のセットアップなど、いくつかの必需品を準備する必要があります。

それでもホスティング プロバイダーを探している場合は、SiteGround がこれらすべての側面を管理する便利なソリューションを提供します。

ドメイン

ドメイン (またはドメイン名) はサイトの Web アドレス (エレガントテーマ.com など) であり、ブランドを反映し、覚えやすいものを選択することが重要です。理想的には、ドメインは訪問者に e コマース ビジネスのアイデアを提供する必要があります。

ドメイン名を選択したら、信頼できるドメイン レジストラーを検索して登録します。 Namecheap が良い選択肢です。ホスティング用に SiteGround を選択した場合は、SiteGround を通じて割引ドメインを直接取得することもできます。

訪問名格安

ドメインを所有している場合は、ネームサーバーを更新することで、そのドメインをホスティング プロバイダーに簡単に接続できます。

WordPress ホスティング

Web サイトにはオンラインで信頼できるホームが必要で、そこでホスティングが機能します。 WordPress を使用するので、高品質の WordPress ホスティングプロバイダーを選択することが重要です。優れたホストは、速度とセキュリティの面で優れたパフォーマンスを確保しながら、サイトの管理をシンプルにします。

SiteGround では、WordPress ホスティング プランを月額 $3.99から提供しており、予算に優しいオプションを提供しています。 SiteGround を使用した WordPress ホスティングのセットアップは簡単です。

ドメインとホスティングを設定する方法については、以下のビデオをご覧ください。

WordPressをインストールする

SiteGround などの多くの WordPress ホスティング プロバイダーは、セットアップ プロセス中にワンクリックで WordPress をインストールできます。

このオプションが利用できない場合は、ホスティング プロバイダーのダッシュボードにアクセスしてください。 WordPress インストーラーを選択し、表示される手順に従います。インストールが完了すると、ログインの詳細が記載された確認メールが届きます。サイトにアクセスするには、 yourwebsite.com/wp-adminにアクセスし、インストール中に作成した認証情報を使用してログインします。

2.Diviテーマをインストールする

Divi を使用して e コマース Web サイトを構築するのがかつてないほど簡単になりました。この多用途テーマを使用すると、コーディング経験がなくても、見た目が美しく、完全にカスタマイズ可能な Web サイトを作成できます。 Divi は堅牢なデザイン機能でよく知られており、さまざまなタイプの e コマース Web サイトに合わせた幅広い既成レイアウトを提供しています。

Divi は、e コマース Web サイトのすべての点を結びます。

• 視覚的なドラッグ アンド ドロップ インターフェイスを使用してオンライン ストアを簡単に設計およびカスタマイズできるため、コーディングの必要がなくなります。
• Divi は、e コマース専用に 211 の事前にデザインされたレイアウトと 30 のレイアウト パックを提供しており、最小限の労力で商品ページやチェックアウト ページなどを作成できます。
• Divi の WooCommerce モジュールを使用すると、商品を表示、フィルタリング、カスタマイズできます。さらに、ドラッグ アンド ドロップ モジュールを使用して、製品の詳細、レビュー、画像などを表示する独自の製品ページ レイアウトを作成できます。
• Divi 拡張機能のマーケットプレイスにアクセスして、PayPal や Stripe などの複数の支払いゲートウェイを統合できます。

Diviをダウンロードしてインストールします

Divi は、Elegant Themes から年間ライセンスで89 ドル、永久ライセンスで249 ドルで購入できます。購入後、次の手順に従ってテーマをダウンロードし、WordPress サイトにインストールします。

1. [外観] > [テーマ]に移動します。
2. 「新規追加」をクリックし、 「テーマをアップロード」をクリックします。
3. ダウンロードした Divi .zip ファイルを選択し、 「今すぐインストール」をクリックします。
4. インストール後、 「アクティブ化」をクリックして Divi をアクティブなテーマとして設定します。

詳細については、以下のビデオをご覧ください。

セットアップが完了したら、構築を開始する準備が整いました。始める前にさらに詳しく知りたい場合は、Divi Builder の使用に関するチュートリアルをご覧ください。

ディビを始めましょう

3. e コマース Web サイトを構築する

WordPress に Divi テーマをインストールしたら、e コマース サイトを構築できます。心配する必要はありません。Divi Quick Sites はストアを自動的に作成できるため、最初から始める必要はありません。

オンボーディングウィザードの起動

WordPress で Divi テーマを有効にすると、Divi のオンボーディング ウィザードにアクセスできるようになり、セットアップ プロセスが案内されます。ボタンをクリックしてログインし、Divi ライセンスをアクティベートするだけです。

ログインすると、メインの Divi ダッシュボードが表示されます。ここでは、サイトを管理したり、ドキュメントにアクセスしたり、サポートを受けたり、Divi Quick Sites を使用して新しいサイトの構築を開始したりできます。まず、Divi ダッシュボードから「新しいサイトを生成」をクリックするだけです。

Divi AI でクイックサイトを取得

e コマース スターター サイト (または AI) を使用してサイトを生成する

次に、既成のスターター サイトまたは Divi の AI Web サイト ビルダーを使用して、新しい e コマース Web サイトを構築することを選択できます。 Divi は、素晴らしいオンライン ストアのスターター サイト テンプレートを提供しているので、[Web サイト テンプレートを選択] をクリックして開始してください。

画面上に、いくつかのスターター サイト テンプレートが表示されます。オンライン ストア スターター サイトを選択します。テンプレートがブランドの色、フォント、または画像と一致していないと心配しても、心配する必要はありません。これらは後でカスタマイズできます。

Divi Quick Sites では、新しい Web サイトと含めたいページに関する詳細を入力するよう求められます。

1. フォームにサイト名、スローガン、ロゴを入力します。
2. ロゴをアップロードすると、サイトに自動的に追加されます (利用可能な場合)。
3. スターター サイトから必要なページを選択し、必要に応じてカスタム ページを追加してプロセスを開始します。
4. 準備ができたら、「Web サイトを生成して公開」ボタンをクリックします。

注:ショップ ページを選択すると、WooCommerce とオンライン ストア用の事前構築ページ (ショップ、製品テンプレート、チェックアウトなど) が自動的にインストールされます。 e コマース Web サイトを構築しているので、商品のリストと取引を可能にするショップ ページを含めることは不可欠です。

ウェブサイトの詳細を入力すると、Divi Quick Sites は入力内容を使用して 2 分以内にウェブサイトを生成します。ページ、テンプレート、スタイル、ナビゲーション メニューなど、必要な要素がすべて自動的に作成されます。

サイトの準備が完了すると、「サイトの準備ができました!」というメッセージが表示された確認ページが表示されます。

また、作成されたすべてのページとテーマ テンプレートのリストと、新しい Web サイトのカスタマイズを始めるのに役立つチュートリアルやドキュメントへのリンクも表示されます。

ディビを始めましょう

4. 新しいサイトをチェックアウトする

残りのプロセスに進む前に、ライブ サイトを表示して、新しいオンライン ストアのデザインを検討することができます。

ここでは、WooCommerce ページとテンプレートを含む、自動的に生成されるサイトのすべてのページとテンプレートを確認します。

ウェブサイトのページ

WooCommerce ショップ、製品、カート、チェックアウト ページのテンプレート

ディビを始めましょう

5. WooCommerce の設定と製品の追加

WooCommerce は Divi Quick Sites ウェブサイト生成プロセスにすでにインストールされているため、WooCommerce セットアップ ウィザードを使用してプロセスを簡素化できます。

WooCommerce セットアップ ウィザード

WooCommerce をアクティブ化すると、セットアップ ウィザードを開始するよう自動的に求められます。ここでは、WooCommerce がストアの主要な設定手順を案内します。セットアップ ウィザードを開始するには、「WooCommerce」セクションに移動し、「ホーム」を選択します。

セットアップ ウィザードでは、住所や電子メールなど、ストアに関する詳細を入力するよう求められます。

あなたのストアを最もよく表す業界と製品カテゴリを選択してください。

次に、ストアに含める予定の製品の種類を選択します。一部のオプション (メンバーシップ、予約など) では、サイトに追加のプラグインをインストールする必要があります。

注:プラグインには有料バージョンと無料バージョンの両方があります。メンバーシップ、予約などに推奨されるプラグインを探索して、e コマース サイトを強化してください。たとえば、Memberpress や Paid Memberships Pro などのツールは、複数の支払いオプションを備えたサブスクリプションベースのストアを構築するのに役立ちます。さらに、Amelia のようなプラグインを使用すると、訪問者が予約をスケジュールするための予約カレンダーなどの機能を備えた予約サイトを作成できます。

セットアップ ウィザードでは、ストアに関する追加の質問が表示されます。

必要な追加のプラグインを選択します。 Jetpack と MailPoet をチェックして、ニーズに合うかどうかを判断してください。ただし、税金を徴収したり、クレジット カードでの支払いを処理したり、配送を管理したりする予定がある場合は、これらの無料プラグインが有益である可能性があります。

この時点で、WooCommerce の追加設定に焦点を移すことができます。

WooCommerce 設定

eコマース ストアのセットアップは難しい場合がありますが、WooCommerce を使用するとプロセスが簡素化されます。管理できるものは次のとおりです。

• 一般設定:通貨、商品、チェックアウト オプション。
• 商品設定：商品の表示と在庫管理。
• 配送設定:配送方法と送料。
• 支払い設定:お客様の支払いオプション。
• アカウント設定:ユーザー登録とプライバシー管理。
• 電子メール設定:通信設定を保存します。
• 詳細設定:ストアのカスタム構成。

さらに詳しい支援が必要な場合は、WooCommerce 設定ガイドを参照してください。このガイドでは、これらの重要なページに移動するための段階的な手順が説明されています。

製品カテゴリの追加

カテゴリを使用すると、顧客がストア内で商品を見つけやすくなります。たとえば、衣料品を販売している場合は、ハンドバッグ、椅子、テーブルなどのカテゴリを作成するとします。製品を追加する前にこれらを設定することをお勧めします。

カテゴリを作成するには、ダッシュボードで[WooCommerce] > [製品]に移動し、[カテゴリ] をクリックします。これらは WordPress の投稿カテゴリやタグと同様に機能します。カテゴリをストアに追加する前に、カテゴリの必須フィールドをすべて入力してください。

プレースホルダー カテゴリがある場合は、編集または削除できます。カテゴリとタグを選択するときは、顧客にとって最も直感的で理解しやすいものを考慮してください。

WordPress eコマースストアに製品を追加する

商品を個別に追加することも、CSV ファイルを使用して同時にインポートすることもできます。

製品を個別に追加するには、 [製品] > [新規追加]に移動します。

商品名を入力します。

製品の説明を入力し、製品画像をアップロードします。

まず、作成したい製品の種類を選択します。次に、商品の価格を決定し、必要に応じて在庫レベルを調整します。個々の商品の配送詳細を指定することもできます。右側のサイドバーで商品にカテゴリとタグを割り当てることができます。

満足したら、「公開」をクリックします。ストアには好きなだけ商品を追加できます。

WooCommerce で商品在庫を管理し、WooCommerce での配送設定に関する包括的なガイドを確認してください。

支払いと配送の設定

顧客を満足させるには、多様な支払いオプションを提供することが不可欠です。 WooCommerce は、PayPal、Stripe、銀行振込などの複数のゲートウェイをサポートしています。ただし、Divi のビルダーと Woo チェックアウト モジュールを組み合わせると、チェックアウト ページのデザインを完全にカスタマイズできます。

WooCommerce 設定を使用すると、ビジネスに最適な支払い方法を選択できます。好みに応じて、直接銀行振込、代金引換、小切手支払いなどの支払い方法を有効にします。

WooCommerce の柔軟性により、配送オプションは顧客の期待に応えられるように調整されます。ストアの配送詳細を最終的に決定する手順は次のとおりです。

1. WooCommerce > 設定 > 配送に移動します
2. 地理的領域に基づいてゾーンを定義する
3. 定額料金、送料無料、ローカルピックアップなどの特定の配送方法を各ゾーンに割り当てます。

6. e コマース Web サイトのデザインとカスタマイズ

スターター サイトが公開されたので、次はそれをブランドに合わせて調整します。各要素を個別に調整するのに何時間も費やすのではなく、より迅速で効果的な方法を使用してサイトを迅速かつ効率的にカスタマイズできます。

WooCommerce ページのデザイン

WooCommerce はストアに必要なページのセットを提供しており、Divi で簡単にカスタマイズできます。これらには次のものが含まれます。

1. すべての製品が表示されるショップ ページ
2. カートページ。ショッピングカートの内容が表示されます。
3. 顧客が購入を完了できる「チェックアウト」ページ
4. ユーザーアカウントを管理するための「マイアカウント」ページ
5. 製品カテゴリやタグなどの追加ページ

Divi では、Divi Builder を使用して各ページを直接編集したり、テーマ ビルダーを使用してこれらのページのカスタム テンプレートを作成したりできます。

Divi テーマ ビルダーは、サイト全体の製品ページ、カテゴリ ページ、その他のデザイン要素のテンプレートを作成する場合に特に役立ちます。

たとえば、無料の製品ページ テンプレートをブログからダウンロードしてテーマ ビルダーに適用すると、すべての製品に一貫した魅力的なレイアウトを与えることができます。あるいは、商品ページのテンプレートを最初からデザインすることもできます。

追加のサポートについては、カート ページの構築、チェックアウト ページの構成、WooCommerce ページでの Divi の使用に関するガイドを参照してください。

ディビを始めましょう

Divi スターター サイトのテーマ ビルダー テンプレートを編集する

各 Divi スターター サイトには、ヘッダー、フッター、ブログ投稿など、Web サイトの主要セクションのレイアウトを管理するテーマ ビルダー テンプレートが含まれています。サイトを設定した後、 [Divi] > [テーマ ビルダー]にアクセスしてこれらのテンプレートを表示できます。

グローバル ヘッダー、カスタム本文、またはグローバル フッター セクションの横にある鉛筆アイコンを選択すると、スターター サイトのテンプレートを変更できます。ヘッダーまたはフッターに加えた変更はすべてのテンプレートに適用されます。この動作を確認するには、デフォルトの Web サイト テンプレートの鉛筆アイコンをクリックします。

テンプレートを開いたら、ビジュアル ビルダーのメニュー設定を使用して、ヘッダーの背景色の変更、ロゴの挿入、フォントと色の調整を行うことができます。 Web ページ上で行う場合と同様に、Divi モジュールを追加、削除、スタイル設定することもできます。

テンプレートを使用する利点は、ヘッダー (または他のテーマ ビルダー テンプレート) に対する調整が Web サイト全体に自動的に反映されることです。

グローバルフォントとカラーをカスタマイズする

ブランドに合わせてスターター サイトをパーソナライズするのは簡単です。すべてのページのすべての要素の色やフォントを調整する必要はありません。このサイトには、事前設定されたグローバル カラーとフォントが付属しています。 Divi Builder で要素を編集しているときにこれらのグローバル設定を変更でき、更新はサイト全体に自動的に適用されます。

新しいスターター サイトのホームページでグローバル フォントと色を変更するには、フロント エンドから [ビジュアル ビルダーを有効にする] をクリックします。

カスタマイズするモジュールをクリックします。最初にグローバル フォントを優先するように、ホームページ上のテキスト モジュールをカスタマイズします。ホイール アイコンをクリックして、変更用のタブを開きます。

作成したスターター サイトには、保存したり、ブランド固有のフォントに置き換えたりできる、事前設定されたグローバル フォントが含まれています。 Divi Builder を使用すると、グローバル フォントを簡単にカスタマイズできます。 「デザイン」タブに移動し、「テキスト」セクションまでスクロールして、「フォント」を選択します。

独自のフォントをアップロードしたり、Google フォントを含むライブラリから選択したりすることもできます。

同じテキスト モジュールのグローバル カラーを優先することもできますが、ここではボタン モジュールのグローバル カラーをカスタマイズすることを選択しました。ブランドカラーをカスタマイズするには、グローバルカラー設定を変更する必要があります。グローバル フォントと同様に、既存のグローバル カラーは e コマース スターター サイトから継承されます。

ボタン モジュールのホイール アイコンをクリックして作業を開始します。

「ボタン」セクションまで下にスクロールし、ボタンのテキストの色を調整します。

[保存済み] タブから [グローバル] タブに切り替えて、現在のグローバル カラーを表示します。

変更を加えるには、各色をクリックして希望のオプションを選択します。カスタム カラーの 16 進コードを入力することもできます。この例では、テキストの色を白から黒に変更しました。

同様に、必要に応じてすべての色を変更します。色を追加するには、最後のグローバル カラーの横にあるプラス アイコンをクリックするだけです。

ディビを始めましょう

グローバルプリセットの編集

Divi グローバル プリセットを使用すると、さまざまな Divi モジュール間でスタイルを再利用できます。これらは、ボタン、テキスト モジュール、宣伝文、その他の要素に適用できるスタイル テンプレートと考えてください。ボタンなどのモジュールのグローバル プリセットを作成すると、それをデフォルトのスタイルとして設定したり、サイト上のさまざまなボタンに異なるプリセットを作成したりできます。これにより、ボタン、テキスト、またはその他の頻繁に使用されるモジュールにかかわらず、好みのスタイルを適用する際の一貫性が保証されます。 Divi スターター サイトには、テンプレートで使用されるすべてのモジュールのプリセットが含まれているため、通常は新しいものを作成する必要はありません。ただし、これらの既存のプリセットをブランドのスタイルに合わせて簡単に調整できます。

グローバルフォントとカラーを編集する場合と同様に、フロントエンドから「Enable Visual Builder」をクリックして開始します。

前述したように、各 Divi スターター サイトには独自のプリセットがあります。たとえば、スターター サイトの既存のボタン プリセットを変更するには、モジュールのヘッダーの下にあるプリセット セクションの横にあるドロップダウン矢印をクリックします。私たちの場合は、e コマース スターター サイトの取引セクションのボタンを変更しています。

次に、モジュール プリセット (この例では「Online Store Tertiary Light」など) を見つけます。プリセットの上にマウスを移動してメニューを表示し、鉛筆アイコンをクリックして編集します。

Divi プリセットを変更すると、モジュールのヘッダーが紫から灰色に変わり、デザインの調整が行われていることを示します。

好みのデザイン変更を自由に適用してから、緑色のチェックマークを選択してモジュールを保存します。この場合、ボタンの色をオレンジから黒に変更しました。

確認ダイアログボックスが下部に表示され、プリセットへの変更を続行するかどうかを尋ねられます。 「はい」をクリックして調整を保存します。

モジュールのヘッダーは紫色に戻ります。最後にもう一度緑色の保存ボタンを押して、プリセットを確定します。

ディビを始めましょう

7. プラグインと統合で e コマース サイトを強化する

電子メールのサインアップとソーシャル メディアの共有に重点を置くと、e コマース Web サイトがより多くのトラフィックを引き付け、売上を増やすことができます。 Divi は組み込みの最適化ツールを提供し、ソーシャル メディアや電子メールのサインアップ用に人気の WordPress プラグインとスムーズに連携します。ここでは、始めるのに役立つツールをいくつか紹介します。

電子メールマーケティング

メール リストを増やすことは、視聴者とのつながりを維持し、e コマース ストアの更新情報を知らせるために非常に重要です。 Elegant Themes の Bloom プラグインは、目を引く電子メール オプトイン フォームをデザインするための優れたツールです。プラグインをインストールした後、サイトのスタイルと要件に合わせてフォームをカスタマイズできます。また、Bloom はいくつかの電子メール マーケティング プラットフォームと統合しているため、リストを管理し、コミュニケーションを効率的に自動化できます。

ブルームを手に入れる

社交

Elegant Themes の Monarch プラグインを使用すると、ソーシャル共有ボタンをサイトに簡単に追加できます。アクティブ化したら、これらのボタンをヘッダー、フッター、または投稿内などの目立つ場所に配置するように Monarch を設定します。これにより、訪問者がコンテンツを共有することが促進され、ソーシャル メディア上での e コマース サイトの存在感が高まります。

君主を入手

Divi マーケットプレイスの製品

Divi は、Divi を活用した e コマース Web サイトを強化するために特別に設計されたプラグイン、拡張機能、子テーマの活気に満ちたマーケットプレイスを提供します。これらを購入して、Web サイトに組み込むことができます。

たとえば、Carousel for Divi は、ベストセラー製品やセール中の製品を視覚的に魅力的な方法で表示する人気の拡張ディスプレイです。特定の商品への注目を集め、売上を伸ばすのに最適です。マーケットプレイスから3.19 ドルで購入できます。テストするには、スクリーンショットとライブデモを確認してください。

ディビ マーケットプレイスにアクセス

必須の WordPress プラグイン

すべての WordPress サイトは、特定の必須プラグインから大きな恩恵を受けることができます。 WordPress で使用できる強く推奨されるプラグインの例をいくつか示します。

• SEO プラグイン(Rank Math など)
• バックアップ プラグイン(UpdraftPlus など)
• 画像最適化プラグイン(EWWW Image Optimizer など)
• 速度最適化プラグイン(WP Rocket など)
• セキュリティプラグイン(Solid Security や Sucuri など)
• ソーシャルメディアプラグイン
• マーケティングプラグイン

結論

2024 年、成功する e コマース サイトの立ち上げには、単なる機能以上のものが必要です。それは、顧客にとってシームレスで魅力的なエクスペリエンスを生み出すことです。 Divi は、ブランドのアイデンティティを反映しながら、最高レベルのパフォーマンスを提供する、視覚的に魅力的で使いやすいストアを作成できるようにします。スマート プラグインを統合し、Divi 内の強力なカスタマイズ オプションを活用することで、サイトは単なるストアフロント以上のものになります。

初めての e コマース Web サイトを構築してみませんか? Divi を始めて、e コマース ビジネスを強化しましょう。あなたの e コマース Web サイトにとって価値があると思われるプラグインとツールの厳選されたテーブルを探索できます。