BASE(ベイス)を使った EC サイト導入において、BASE オフィシャルパートナーに依頼するメリット

BASEロゴ

実は、BASE オフィシャルパートナーには特典が与えられています。

お客様に好きな有料テンプレートを選んでいただき、立て替えご購入いただきますと、有料テンプレート代がキャッシュバックされます。

ご自身の気に入ったテンプレートを実質無料で手に入れることができるんです。

また、有料機能(500 円)を購入しないと BASE ロゴは消せませんが、BASE パートナーには特典としてこれを無料でお客様に提供できます!

BASE オフィシャルパートナーはウェブ制作業者が担っておりますので、デザイン改修などのニーズにも対応が可能です。

一般ユーザーにおいては大幅なデザインの変更が叶いません。BASE パートナーならそれができるのが強みです。

また、早期の立ち上げが期待できます。BASE ならばご自分でも EC サイトの立ち上げはできるでしょう。

しかし、そこはやはり色々と複雑な設定(料金設定や配送設定等)も必要となります。

ご自分で調べるには時間がかかりますし、ご自分の本業の時間が勿体ないと思いませんか?

我々にお任せいただければ、余計な時間をロスせずに済みますし、その分、本業に注力してください。

WooCommerceでECサイトの構築 – おすすめテーマ「Lightning」

ライトニング無料版
woocommerceアイコン

別のブログでも書きましたが、WooCommerceプラグインは海外製プラグインであるという点のみを除けば、誰もが簡単にECサイトの構築が可能なプラグインであるという点に間違いはありません。

ただし、ワードプレステーマとの相性があります。

相性の良いテーマを選定すれば、誰もが簡単にECサイトの立ち上げが可能なプラグインです。

そして、最も相性の良いプラグインは、ワードプレス公式テーマ(twenty twenty-oneやtwenty seventeen等)です。

これは、WooCommerceプラグイン側で、ワードプレス公式テーマに対してサポートしているからです。

相性の悪いテーマを選ぶと適切に表示されなかったり、動作しない等もあり得ます。

しかし、ワードプレス公式テーマがWooCommerceでECサイトを構築するにおいて最適なテーマかと言うと、そうでもありません。

何故なら、ワードプレス公式テーマは、ブロックやウィジェット等、ワードプレスであらかじめ用意された機能の範囲内でしかデザイン構築ができないからです。

つまり、機能が弱いと言う事です。

そこでおすすめなのが、Vektor社の「Lightning」テーマです。

まず、Vektor社の「Lightning」テーマは、WooCommerceプラグインとの相性が良く、「Lightning」テーマ側でWooCommerceプラグインが出力するデータの最適化が為されています。

そして、おすすめな理由として、Vektor社ホームページでも唄われておりますが、拡張性が抜群なんです。

テーマ自体はシンプルな構成ですが、機能は同時開発の多機能プラグイン(VK All in one Expansion Unit)で強力に拡張が可能なんです。

かつ、「Lightning」テーマは有料版の「Lightning Pro」もありますが、無料版の「Lightning」テーマのままでも、前記拡張プラグインを使えます。勿論、拡張プラグイン自体、無料です。

ExUnitプラグインでは、「PR Block」「画像つき新着記事リスト」「プロフィール」「ボタン」「固定ページ本文」「CTA」「連絡先情報」等、ネットショップを立ち上げるのに便利なウィジェットが多数用意されており、「Lightning」テーマと併せて利用する事によって、コーポレートサイトやお店のホームページ、ブログなど簡単に構築する事ができます。

現在、WooCommerceプラグインでECサイト(ネットショップ)の立ち上げを検討されているのであれば、是非、使ってみてはいかがでしょうか。

Lightning無料版のダウンロードサイト
Vektor WordPress Solutions

Lightning Proの紹介サイト

WooCommerceプラグインと相性の良いテーマを検証してみた

woocommerceアイコン

WooCommerceは海外製プラグインであるという点のみを除けば、誰もが簡単にECサイトの構築が可能なプラグインであるという点に間違いはありません。

これは、実際に使ってみて、間違いなく言えることです。

ただ、ワードプレステーマとの相性がありますので、WooCommerceプラグインの導入を検討しておられる方は注意が必要です。有料テーマの中にはWooCommerceとの互換性が悪く、正常に動作しないテーマもあるからです。

そこで、固定ページに「カテゴリー別商品一覧」ブロックで商品の一覧を表示するページを作成したうえで、いくつかの無料テーマおよび有料テーマの固定フロントページおよび商品個別ページの表示において問題がないかを検証してみました。

〇ワードプレス公式無料テーマ「TWENTY SEVENTEEN」

twentyseventeenテーマ
ワードプレス公式テーマ「TWENTY SEVENTEEN」

まずは、歴代のワードプレス公式テーマの中でもおしゃれなデザインでありました「TWENTY SEVENTEEN」から。

TWENTY SEVENTEENトップページ

上画像は固定フロントページに「カテゴリー別商品一覧」で商品の一覧を出力した状況のスクリーンショット画面です。

各商品のサムネイルやタイトル、キャプション等も正常に表示されております。

次に商品個別ページを検証します。結果は下画像。

商品個別ページにおいても問題なく正常に表示されます。また、商品ギャラリー画像は、WooCommerceプラグイン側にjQueryの「FlexSlider」が組み込まれているのですが、「TWENTY SEVENTEEN」におきましては、この「FlexSlider」も正常に動作しております。

結果、「TWENTY SEVENTEEN」はWooCommerceプラグインとの相性、互換性があります。

〇ワードプレス公式無料テーマ「TWENTY TWENTY-ONE」

Twenty Twenty-oneトップページ
ワードプレス公式テーマ「TWENTY TWENTY-ONE」

ワードプレス公式テーマの中で最新のバージョンです。

上画像は固定フロントページに「カテゴリー別商品一覧」で商品の一覧を出力した状況のスクリーンショット画面です。

各商品のサムネイルやタイトル、キャプション等も正常に表示されております。

次に商品個別ページを検証します。結果は下画像。

こちらも商品個別ページにおいて問題なく正常に表示されます(少し商品タイトルのフォントが大きいけど..)。また、商品ギャラリーの「FlexSlider」も正常に動作しております。

結果、「TWENTY TWENTY-ONE」はWooCommerceプラグインとの相性、互換性があります。

〇リキッドデザイン有料テーマ「LIQUID MAGAZINE」

LIQUID MAGAZINEトップページ

リキッドデザイン社のメディア構築向け有料テーマ「LIQUID MAGAZINE」での検証結果です。

固定フロントページ

固定フロントページは問題ありません。次に商品個別ページです。

個別商品ページ

表示上は問題はありません。しかし、商品ギャラリーの「FlexSlider」が動作しません。ギャラリー自体は閲覧は可能ですが、各サムネイル画像をクリックしてもスライドしません。

結論から言うと、リキッドデザイン社のテーマは「LIQUID MAGAZINE」に限らずWooCommerceプラグイン対応テーマではあります。

それはWooCommerce用テンプレートであるwoocommerce.phpが用意されているからです。

しかし、商品個別ページにおける商品ギャラリーのスライダー機能には対応できていないようです。

〇Vektor無料テーマ「Lightning」

Lightningトップページ

Vektor社の無料テーマ「Lightning」での検証結果です。

固定フロントページは問題ありません。次に商品個別ページです。

「Lightning」の場合、表示および商品ギャラリーの「FlexSlider」も正常に動作しております。WooCommerceプラグインとの相性、互換性が良いことがわかります。

〇OPENCAGE(オープンケージ)有料テーマ「ALBATROSS」

OPENCAGE社の有料テーマ「ALBATROSS」での検証結果です。

上画像のとおり、各商品リストに「・」が表示されてしまっております。特段問題はないのですが、WooCommerceプラグインへの最適化はされておりません。

商品個別ページにおいても表示上の問題が発生します。商品ギャラリーの「FlexSlider」は動作しているので勿体ないです。

結果、「ALBATROSS」テーマはWooCommerceプラグインとの相性にスタイル表示の点において問題が認められました。

〇フィット社有料テーマ「THE THOR」

フィット社の有料テーマ「THE THOR」での検証結果です。

「THE THOR」においても、「ALBATROSS」と同様に各商品リストに「・」が表示されてしまっております。特段問題はないのですが、WooCommerceプラグインへの最適化はされておりません。

さらに「THE THOR」テーマにおきましては、商品個別ページがエラーで表示されません!

WooCommerceプラグインとの互換性がありません。

〇最もWooCommerceプラグインとの相性、互換性が良いのは..

結論から言うと、ワードプレス公式テーマが最も相性が良いテーマと考えます。

何故なら、前記検証結果もさることながら、そもそもが、WooCommerceソースコード内において、ワードプレス公式テーマの場合だけ特別なタグが出力されていたりと、公式テーマに対して特別なサポートがされていると思われるからです。

公式テーマサポート

その他、公式テーマ以外で使えると思われるのがVektor社の無料テーマ「Lightning」です。検証結果において申し分ありません。

以下、Vektor有料版「Lightning Pro」の紹介ページです。

Vektor WordPress Solutions

リキッドデザイン社の「LIQUIDシリーズ」も一応はWooCommerce対応テーマではありますが、「FlexSlider」が動作しないあたり、改良の余地があると思います。

以下、LIQUID PRESSテーマの紹介ページです。

○その他、本格的なECサイトを構築するなら..

お客様を惹きつけ、楽しませるような本格的ECサイトを構築するのなら、WooCommerce専用の有料テーマもあります。

TCDの「EGO」等いかがでしょうか?

以下、TCDの「EGO」紹介ページです。

以上、WooCommerceプラグインと相性の良いワードプレステーマの検証結果でした。

WooCommerce – 配送料の基本的な設定手順を解説

woocommerceアイコン

WooCommerceプラグインでは、消費者が入力した配送先の住所(配送地域)や、あらかじめ商品に設定した大きさ(配送クラス)に基づき、カート内に入れられた商品の配送料金を自動計算し表示してくれます。

設定画面を見ると様々な設定項目があり、複雑に感じられますが、実はそんなに難しくはありません。

ゆうパックを使って発送する場合を例に、配送地域や配送クラスの設定方法を解説します。

1.まずは配送業者の料金体系を知ろう

ゆうパックの料金体系ですが、お届け先エリア(北海道や中四国エリア、九州エリア等)ごとに料金が変わってきます。また、荷物の梱包サイズごとにも料金が設定されています。

以下、ゆうパック都道府県別基本運賃を解説します。

〇お届け先エリア分類(差出地を神奈川とした場合)

・神奈川県(差出地)

・北海道

・東北 関東 信越 北陸 東海(差出地の神奈川を除く)

・近畿

・中国、四国

・九州

・沖縄

以上、料金体系として7つの地域に分類されます。

〇荷物サイズの区別

区別荷物の大きさ(縦・横・高さの合計)
60サイズ60cm以下
80サイズ80cm以下
100サイズ100cm以下
120サイズ120cm以下
140サイズ140cm以下
160サイズ160cm以下
170サイズ170cm以下
備考※重量は一律25kg以下まで

2.WooCommerceの「設定」⇒「配送」設定画面

次に、WooCommerceの「設定」⇒「配送」設定画面を見てみましょう。

Woocommerce配送設定画面

左側管理画面にある「WooCommerce」⇒「設定」⇒「配送」と進んでください。すると上記のような「配送地域」設定画面が出てきます。

基本的な配送料金の設定におきましては、上図赤丸の「配送地域」と「配送クラス」を知っておいてください。

そして「配送地域」がゆうパック料金体系における「お届け先エリア分類」にあたります。また、「配送クラス」が「荷物サイズの区別」に該当します。

3.「配送地域」の設定

ゆうパック都道府県別運賃のお届け先エリア分類を登録します。

配送地域設定内容
配送地域設定が完了したところ

配送地域を追加するには、「配送地域を追加」ボタンを押します。

配送地域設定手順1

下図のような配送地域を入力する画面が出てきますので、地域名、ゾーン地域、配送方法を入力していきます。

配送地域設定手順2

例えば、「東北 関東 信越 北陸 東海」のお届け先エリア分類を作成する場合、地域名はご自分で好きな名称を付けてください。ここでは「東北 関東 信越 北陸 東海」とします。

また、このお届け先エリア分類に該当する都道府県をゾーン地域に追加していきます。ゾーン地域入力欄をクリックすると都道府県名のドロップダウンリストが表示されますので該当する都道府県を一つずつ設定してください。

配送地域設定手順3
地域名とソーン地域の入力が済んだところ

ここで注意したいところですが、発送地が神奈川県の場合、この配送地域には神奈川県は含まないように気を付けてください。

配送方法は「配送方法を追加」ボタンを押して、「定額送料」を選んで追加ボタンを押してください。

配送地域設定手順4
配送地域の設定が完了

一度これで配送地域の設定を終えます。

4.「配送クラス」の設定

次に、ゆうパック都道府県別運賃の荷物サイズの区別を登録します。

配送クラス設定手順1
配送クラス設定画面

配送クラスを追加ボタンを押すと「送料区分」「スラッグ」「説明」の入力欄が現れます。スラッグはご自分の好きな名前を入力してください。

配送クラス設定手順2
入力例
配送クラス設定手順3
配送クラスの入力が完了

5.各配送地域ごとの配送クラス料金を設定する

配送地域画面に戻り、ここでは北海道エリアにおける各配送クラス料金を設定してみましょう。

料金設定手順1

定額送料をクリックします。

料金設定手順2

先に設定した配送クラスが表示されていますので、北海道エリアにおける各配送クラス料金を設定してください。

後は、各エリアごとに同じ作業を繰り返します。

6.最後に、各商品ごとに配送クラスを設定する

最後に、各商品の編集画面で、その商品のサイズに適した配送クラスを設定して完了です。

各商品ごとの配送クラス設定画面

ネットショップ – WooCommerceとベイス(BASE)の比較

woocommerceアイコン

実際にECサイト用プラグイン「WooCommerce」を使ってみた訳ですが、これにより、BASE(ベイス)等の他類似ASPサービスとの違いが見えてきました。

〇使いやすさ

BASEロゴ

ワードプレスのECサイト用プラグインである「WooCommerce」は、基本的に英語仕様でありまして、日本語には対応しておりません。サポートページも英語です。この点においては、国内企業のASPサービスでありますBASE(ベイス)に軍配です。

また、EC機能とホームページの連携におきましても、BASE(ベイス)はBASEのプラットフォームにおいてEC決済会社との連携が簡単にできる仕様となっておりますが、WooCommerceは自分でEC決済会社のアカウントを取得し、EC決済会社のアカウントページでの複雑な設定、および、WooCommerce管理画面での複雑な設定が必要でありまして、どちらの設定手続きにおきましても難解な専門用語が出てきます。

さらに、WooCommerceとの連携が可能なEC決済会社は「Stripe」と「Paypal」となっておりまして、どちらも海外企業。特にStripe社のホームページは日本語に対応しておりません。

逆にBASEは国内のEC決済会社を選択できるなど、使いやすさは抜群ですね。

〇サイトのデザインや機能のカスタム自由度

woocommerceアイコン

テーマのカスタマイズの自由度においてはWordPressに軍配です。

BASE(ベイス)テンプレートもプラットフォーム上のHTMLエディタ機能を使えば改修を加えるのは可能ですが、テンプレートタグは簡易的なループや条件分岐程度までとなっておりまして、Javascriptは埋め込めますが、PHP言語には対応しておりませんのでカスタムの自由度としては劣ります。

〇ランニングコスト

woocommerceアイコン

ランニングコストにおきましては、WooCommerceがコスパは良いです。

WooCommerceと連携可能なEC決済会社は「Stripe」と「Paypal」ですが、

・Stripe決済手数料 注文ごとに金額の3.6%

・Paypal決済手数料 注文ごとに金額の3.6%+40円

以上の手数料となりますが、BASE(ベイス)になりますと、

・BASE決済手数料 注文ごとに金額の3.6%+40円

さらに、

・BASEサービス利用料 注文ごとに金額の3%

つまり、各注文ごとに注文金額の6.6%+40円が手数料として引かれることになります。

〇まとめ

費用対効果イメージ

BASE(ベイス)は使い勝手は良いのですが、その分、手数料が高めです。3%も違いますと、長い目で見るとかなりの差額となりますよね。

例えば、年間100万円の売り上げのあるネットショップですと、年間3万円も手数料を多く払うことになります。

5年間BASEを使い続けると15万円もの差額となります。

従って、長い目で見ると、専門業者に頼むしかないWooCommerceの方がランニングコストにおいては軍配かと思います。

10万円くらいかけてECサイトをWooCommerceで制作しても、BASEと比較すると3年程度で制作にかけたイニシャルコストを回収できる目算となります。

ECサイトの作り方 – 各サービスの特徴と比較(Woocommerce、EC-CUBE、BASE)

eコマースサムネイル

1.ウェブと電子商取引

ECイメージ

単にホームページを持つのとは異なり、ネットショッピングサイトを作るにあたっては、カートや決済といった機能がネックとなります。

このような機能は本来のウェブの役割とは異なるため、ウェブの基本仕様にはECという機能は存在しないわけです。

しかし、現在のウェブ業界においては技術の進歩に伴い、ユーザーイベントに応じた動的変化や、動的にコンテンツ内容を変更可能なコンピューター言語が登場し、決済サービスやPOS等の外部データベースや外部サービスアプリケーションとの連携を可能としております。

そして、このような技術の進歩に伴い、本来のウェブの機能にはなかったEC(electronic commerce、電子商取引)というネックを補う様々なサービスが存在します。

2.ECサイト構築のためのサービス分類

①EC専用CMS(コンテンツ・マネジメント・サービス)

【ワードプレス】

ワードプレスとは何か?サムネイル

ワードプレスはホームページ構築において全世界で最もよく使われている無料・オープンソースのブログシステムソフトウェアです。

今の時代、ウェブページにおいては、動的にページを変更したり、データベースと連携したりといった大規模、高機能なサイト構築にはPHP言語というプログラム言語が欠かせません。

ワードプレスのようなCMSソフトウェアを用いれば、PHP言語を知らなくとも、CMS画面(管理画面)で動的なページの構築が可能です。

また、ワードプレスはオープンソースであるため、大規模かつ難易度の高いウェブ開発も可能となります。よって、ECサイトの開発も可能となるわけです。

しかし、ワードプレスの本来の機能はブログシステムであったことから、EC機能は内在しておりません。

このような場合における、ワードプレスの強みとしてプラグインという機能があります。先のとおり、ワードプレスはオープンソースであるため不足している機能を補いやすく、様々なプラグインが存在します。

そして、ワードプレスにおいて有名なのが「Woocommerce」や「Welcart」というプラグインです。このプラグインをインストールすれば、ワードプレスで構築したウェブサイトのECサイト化が可能となります。

【EC-CUBE】

ウェブサイト構築のためのCMSソフトウェアはワードプレスだけではありません。EC-CUBEもワードプレスのようなウェブサイト構築のためのCMSであり、ECサイト構築に特化した本格的CMSとなります。

②EC専門のASP(Application Service Provider)

アプリケーションサービスプロバイダとは、アプリケーションソフト等のサービスをネットワーク経由で提供するプロバイダのことです。

世の中でよく知られているのは無料ブログサイトではないでしょうか?無料ブログサイトも簡易的なCMSソフトウェアです。会員登録してログインすれば、本格的ウェブサイトとまではいかないまでも簡単なブログサイトならば簡単に構築が可能です。

このようなサービスを提供している事業者をASPと言います。

ECサイト構築においても、無料ブログサイトと同じような簡易CMSを提供している事業者が存在し、また、これらサービスはカートや決済機能をも提供している点で無料ブログサイトとは異なります。

ECサイト専用ASPには「BASE」や「カラーミーショップ」などがあります。

【BASE】

ウェブサイト構築のための管理機能としては簡易的な機能しか有しませんが、カート機能、商品管理、出品、配送、決済といった一連のサービスを管理画面のみでユーザーに提供が可能となり、また、基本的にサイト構築からEC機能までを管理画面で行えるので、ECサイト構築が簡単にできるのが特徴です。

3.各サービスのメリット、デメリット

【ワードプレス】

小規模サイトから大規模まで(エンドユーザから開発者まで)
サイト構築は容易。EC化は難易度高い

ワードプレスは世界中で有名企業サイト等にも用いられており、開発も容易であることから、高機能で規模の大きい、見栄えの良い、本格的サイトの構築に有利です。

元々がブログ構築のためのシステムであり、CMS画面でブロック配置することにより、簡単にウェブサイト構築が容易であることから、規模の小さいウェブサイト制作にも勿論使えます。

また、ワードプレスは公式サイトで情報が公開されており、市販の参考書も多数出版されております。

しかし、ECサイト構築ともなると、ウェブの知識からかけ離れた知識、技術が必要となり、プラグインで機能を補えるとはいっても、簡単に構築するのは難しいと思われます。また、EC専用プラグインの情報も少ないのが実情です。

本格的なサイト構築向けのプラグインであるため、比較的規模の小さなサイトには敷居が少し高いように思います。また、「Woocommerce」プラグインは外国語仕様であるため、インストールや設定には英語の説明が表示されますので使いにくい感じです。

国産ワードプレステーマのTCDシリーズは、このデメリットを補うべく、「Woocommerce」や「Welcart」向けのテーマをリリースしていますので、こちらを使うのが無難かもしれません。

【EC-CUBE】

大規模ECサイト向け(開発者向け)
サイト構築もEC化も難易度高い

EC-CUBEもワードプレスと同じく本格的なウェブ構築CMSであり、かつ、ECサイトに特化したCMSとなります。

しかし、ワードプレスと違うのは、エンドユーザー向けの情報が少ないという点です。EC-CUBEの公式サイトを見るとわかりますが、どちらかというと、開発者向けに特化したサービスのように感じます。

単にウェブを構築するのではなく、EC機能をも持つわけですから、ワードプレスよりも難易度が高いのは当然とも思います。

【BASE】

小規模から中規模ECサイト向け
サイト構築もEC化も容易
比較的シンプルなサイトとなる

BASEは先で紹介したとおり、簡易的なCMS機能を持つ、ECサイト構築専用のASPです。ウェブ構築の機能としては物足りませんが、EC化機能としては、商品管理から出品、販売、売上管理、決済、発送までをワンストップで可能であります。

決済機能もBASEに登録申請するだけで、その日から、クレジットカードや振り込み、コンビニ決済等各種決済が使えるので簡単です。

基本的にCMS管理画面で各種管理やサイト構築を行うのでコーディングは必要なく、操作性もわかりやすいと思います。その反面、ウェブサイトとしては少々物足りなさを感じます。

BASEをはじめASPサービスは、オープンソースではありませんが、BASEの場合、一応コード編集エディタ機能はありますので、基本のテンプレートに改修を加えるのは可能です。

このコードエディタを開くとわかるのですが、BASEのテンプレートはHTML言語、CSS言語を主としたテンプレート構成となっております。PHP言語の埋め込みはできませんので、本格的な動的ページの構築は難しいですが、CMS画面で設定した各種パラメーターを取得する専用タグがいくつか用意されていますので、これらを使えば動的なページの構築も可能です。

なお、コードエディタではJavaScriptの埋め込みは可能です。