2018年版WooCommerce(ウーコマース)初期設定導入方法!日本一丁寧な始め方まとめ!

2019年2月13日


独自ECサイトを立ち上げたい場合、無料で出来る作成サービスは多いですが、誰でも簡単にできる事で競合との差別化が更に必要となってきました。

差別化する為に、WEB制作会社に依頼してデザインや機能を要望すると最低でも30万程はかかってしまいます。
本業が軌道に乗らず、新たな販路としてECサイトに投資する初期投資としては仕方ないですが、これで納得のいくデザインや大した機能を実装できなかったという例は少なくありません。

そこで便利なのが、wordpress(ワードプレス)のWooCommerce(ウーコマース)です。
WooCommerceはwordpressのプラグインとして公開されているので無料でECサイトを作ることができます
しかもECサイトテーマのデザインのクォリティがかなり高く、便利なプラグインも豊富です。

日本には、無料でネットショプを作れるサービスは多いのに、あえてWooCommerceを選ぼうとしているなら、WooCommerce(ウーコマース)が一番適していると思います。
個人的には越境ECに作成には特に適していると思います。

この記事ではそんな魅力たっぷりのWooCommerceの導入方法について詳しく解説していきます♪
また少し前までは日本語対応されていなかったのですが、本記事は2018年8月以降の日本語対応された後の手順となっています。
そして実用的に使えるまで研究した結果を大放出しますので、どうぞご期待ください(^O^)

WooCommerceで使える機能(出来る事)

メリット

  • デザインクォリティが高いテンプレートを使ってオリジナルECショップを作成できる
  • ワードプレス(ブログ)と併用して利用できる
  • 無料カード決済プラグインを利用できる
  • 一括商品登録機能を使える
  • 世界中で利用されている為プラグインが豊富
  • 世界共通なので越境ECを作るのに向いている
  • 会員だけ閲覧可能な会員制ECショップ作成が可能
  • メルマガ機能
  • 日本語化プラグインもある

僕の個人的なメリットとしては無料カード決済機能が使えるという点です。
一昔前まえはカード決済機能を導入するまでに決済画面の改造をしなくてはいけませんでした。
また、簡単に導入できるPayPalがあったのですが、これはあまり日本人は利用者が少なかったため微妙でした。
ただ今はSquareという便利でスピィーディーに導入できるサービスがあるので、試しに独自ECを開きたい人にはランニングコストが抑えられてかなりメリットが大きいのではないでしょうか。

デミリット

  • 日本語の情報が少ない
  • ワードプレスを使っていないと出来ない
  • 導入するまでにやることが多い

やはりどうしても気になるのが日本語の情報が少ないことです。
ECサイトに限らず、プログラムで動くシステムはバグが起こることが多いです。
大きなサービスでは、動作テストする要員も確保されているので、エラーは少ないかと思いますが、小さいWEB制作会社やワードプレスのようなオープンソース(無料公開)のプログラムを利用していると、エラーがでることがたまにあります。
たいていの場合初心者では解決できないような事が多いです。
そういったエラーによってエンドユーザー(ECサイトのお客様)に迷惑がかかった時の為に、事前にトラブル対応マニュアを作っておき、サポートでカバーする必要があります。
また万が一の為にバックアップもできるので、リスク対策をしっかり行って大きな被害を出さないように気をつける必要はあります。

WooCommerceを使ったECサイトを一部紹介

後ほど詳しく説明しますが、WooCommece はWooCommece 専用のデザインテーマをインストールする事ができます。
順序としてはワードプレスをサーバーにインストールして、ウーコマースのプラグインを入れて、ウーコマースのデザインテーマを設定するという流れです。

WooCommece のデザインテーマには無料版と有料版があります。
どんなテーマがあるのか参考の為一部を紹介します♪

無料版

KAKINA

MAXSTORE

どちらも無料版とは思えないくらいカッコいい作りです。デフォルトでスライドショーもついていて、メニューもドロップダウンしています。もちろんレスポンシブ対応ですし、余白なども無駄に余すことなくレイアウトされています。

有料版

eStore Pro Demos  ※1年間で$69

有料版は流石といっていいほど、メニューやバナーが至るところに敷き詰められています。
無料版との違いは豪華に映えるボリューム感でしょう。無料版でも問題ないですが有料版はかなりおすすめです。

WooCommerceテーマ一覧はコチラから

ウーコマースのテーマはちょっとしたアニメーションで画像がバウンドしたりオシャレなデザインが魅力的です。
日本の無料で出来るECサービスなどは余計な余白が多かったり商品を魅せる演出が少ないように感じるため、僕は海外のデザインに魅力を感じます。

WooCommerce初期設定の前にやること

WooCommerce(ウーコマース)のEC機能を使うには、まずワードプレスを持っている必要があります。
ワードプレスをまだ持っていないという方は、まずワードプレスがインストールされた状態まで準備しましょう。
ワードプレスのインストールや管理にはXサーバーが断然オススメです!このブログもXサーバーでワードプレスをインストールして利用していますし、ドメインの証明書発行も無料でできます。ドメインの先頭がhttpsになっているものですが、これになっていないと検索順位に響いたり、サイトの信用度が落ちます。ドメインはお名前.comで取得してサーバーはワードプレスインストールとhttps化が楽々できるエックスサーバーで契約しておけば間違いないでしょう。
期間限定で新規サーバー申し込みでドメインがずっと無料のキャンペーンをやっているようです!私も前回のキャンペーン時に申し込みましたが、エックスサーバー1つで管理できるのでこれは結構嬉しいです!

あとこれは知らなかったのですが、ワードプレスに特化した専用のサーバーもあるようです。
wpXレンタルサーバー

準備ができたら早速、以下の通りセットアップしていきましょう。

WooCommerceをインストール

プラグインのインストール

まずはwordpressのダッシュボードのメニューのプラグインを選択します。
プラグインのページが表示されたら『新規追加』をクリックします。
プラグインを追加の画面が表示されたら、右上のキーワードを入力欄に「woocommerce」と入力します。
すると上部に、WooCommerceのプラグインが表示されますので『今すぐインストール』でインストール開始♪

しばらくするとインストールが完了して『有効化』ボタンが表示されますので、これをクリックしましょう♪

WooCommerceの初期設定

すると以下のような画面が表示されますので、WooCommerceの設定を行っていきましょう♪
これらは後でも変更できるので、まだ決定できない項目は仮で入力して先にすすめましょう!

ショップの設定

ここで必要情報を入力していきます。
例として東京江東区の市役所の住所を入力する場合。
住所例:〒135-8383
東京都江東区 東陽4-11-28 江東区役所

店舗情報(国) → 日本
住所 → 東陽4-11-28
建物名・部屋番号 → 江東区役所
市区町村 → 江東区
都道府県(もしくは州)→ 東京都
郵便番号 → 1358383

どの通貨での支払いを承認しますか? → 日本円
どんな商品の販売を検討してますか? → 私は物理的商品とデジタル商品の両方を販売する予定です。
※ここは特に指定はありませんが、どちらも可能な選択にします。
また、私は個人的に商品やサービスを販売します。にチェック。

『それでは始めましょう』ボタンをクリック。

支払い方法

デフォルトでSquareとPayPalにチェックがついていますが、特に指定がなければこのまま『次へ』をクリックします。
オフライン支払いについてはひとまずチェックせずにすすみます。
ちなみにSquareとはクレジットカード決済機能です。新規導入費やランニングコストは無料で、決済手数料のみでWooCommerceにカード決済機能が利用できるようになります。
ECCUBEだと新規導入費が有料のカード決済サービスしかなかったはずなので、これはとても嬉しいですね。
WooCommerceを使えるか試すには、導入費、維持費無料のカード決済機能はマストで入れたほうがよいでしょう。
EC担当者やエンジニアならなによりも経験になりますし、個人事業主の方ならすぐに販売できるチャネルを手に入れることに繋がります。
カード決済を導入するなら先にアカウントを作って置いた方がよいです。コチラからアカウントを開設しておきましょう。
他にも色々登録したり手順が多いので、素早く登録して忘れないようにまとめてメモ帳に登録情報を保存しておきましょう。

送料

送料を設定する画面です。
配送地域はデフォルトで日本になっているので、ここで配送方法を選択します。
ひとまず無料配送を選択します。
また重量は『kg』、寸法は『cm』になっているのでそのままで、『次へ』をクリックします。

おすすめ

こちらでは2つのプラグインをインストールするか問われます。
両方にチェックがついている事を確認して『次へ』をクリックします。

※僕の場合ひとまず今記事を投稿しているブログにWooCommerceをインストールしたので、どちらもチェックを外しました。
ここで一点注意しないといけないのが、Wordpressには良さそうなプラグインがたくさんあり、全てインストールしたくなりますが闇雲に導入すると表示速度が遅くなったり予期せぬエラーが起こったりします。
また、今回のように「StoreFrontテーマ」をインストールすると、ブログに使用しているワードプレステーマが無効になったりしてしまいますのでインストールの際は注意して行いましょう。

有効化

Jetpackは、便利な機能が揃ってるのですが表示が遅くなるという現象も頻繁におこります。
WooCommerceでショッピングカートを利用する際に、表示速度が遅くなるのは致命的です。
場合によってはサーバー接続エラーとなり、カード決済の際のトラブルに発展する可能性もあります。
その為、まずは導入してみてサイトが遅いなと感じてきたら無効にするようにしましょう。
アクセス解析はGoogleアナリティクスでも可能ですので、ここは安全にサイト運用する事を優先させましょう。

今回はひとまず導入しますので、『Jetpack』に接続をクリックします。

すると、以下の画面で「Jetpack を設定するには WordPress.com アカウントにログインしてください。」と表示されます。
WordPress.com アカウントを既に持っている方は「メールアドレスまたはユーザー名」を入力して『続ける』ボタンをクリックして下さい。
WordPress.com アカウントをいない方について。
WordPress.com アカウントとは、wordpressというWEBツールを提供しているwordpressの総合コミュニティのようなものです。無料で簡単に登録できますので画面右上の「登録」という文字をクリックして登録画面へすすみましょう。

以下のような登録画面が表示されますので、必要項目を入力していきましょう。
新規登録の場合メールアドレス、ユーザー名、パスワードを入力して『アカウント作成』ボタンをクリックしてアカウントを作成してください。

そして、新規作成したアカウントのメールアドレスとパスワードを先程の画面に入力してログインして下さい。

準備完了

ログインが完了すれば以下の画面が表示されて準備完了となります♪
それでは画面左下の『ダッシュボードを表示』ボタンをクリックしてWooCommerceの機能を確認しにいきましょう♪

WooCommerceの使い方

WooCommerceのインストール完了後に確認する事

ここからは新規で「WooCommerce」だけをインストールする方向けに解説します。

ダッシュボードを確認すると、メニューに「WooCommerce」が表示されています。

そしてフロントページのナビメニューに「ショップ」「カート」「支払い」「マイアカウント」が自動的に表示されています。これは、それぞれ固定ページが作成されています。

※運用中のブログに導入してひとまず非表示にしたい場合、ダッシュボードから外観→メニューでメニューから外しましょう。
WooCommerceはあくまでもプラグインなので、通常のワードプレスのテーマにも導入できます。その為メインは会社HPやブログを中心に利用して少しだけ商品を販売するページを作ることもできます。

↓インストール直後のフロントページ

WooCommerceの設定を確認しよう

ダッシュボードメニューのWooCommerceの設定をクリックすると、以下の項目の情報を編集できます。

・一般 – 店舗(会社)住所、基本設定、通貨オプション
・商品 – 一般(ショップページ設定、単位、レビュー)、在庫、ダウンロード商品
・送料 – 配送地域、配送オプション、配送クラス
・決済 – 決済方法
・アカウントとプライバシー – プライバシーポリシー、個人データを保持する
・メール – メール通知、メール送信者オプション
・連携 – Square
・高度 – 固定ページ設定(固定ページ設定、購入手続きエンドポイント、アカウントのエンドポイント)、REST API、Web フック、レガシー API

上記の項目から最低限変更するポイントを解説します。

一般 – 基本設定の変更

「販売を展開する地域」で「特定の国に販売する」を選択。
「特定の国に販売する」で「日本」を選択。
表示中のページ下にある『変更を保存』ボタンをクリック。

その他の項目については必要に応じて後ほど解説します。

WooCommerceの無料外観テーマインストール方法

テーマを追加

ウーコマースのテーマのインストールは、ワードプレスのテーマをインストールする時と同じです。
ダッシュボードのメニュー「外観」→「テーマ」→「新規追加」を選択して以下画像の検索入力欄に『Kakina』と入力してテーマを検索します。

テーマの画像にカーソルをあてると「インストール」ボタンが表示されますのでクリックします。
その後「有効化」ボタンが表示されますのでクリックします。
フロントページを確認すると、テーマが反映されているのを確認できます。

無事インストールできました♪
ですが、いざインストールしてみると。。何か物足りない気がします。
まだコンテンツがないので仕方ありませんね。あと、背景も黒じゃなくて白の方が明るくてよさそうですね。
なので、続いて細かな設定をしていきましょう!

テーマを編集する

分かりにくかったので変更の過程を一部紹介します。

ダッシュボードのメニュー「外観」→「About Kakina」を選択します。
開くと上部にある「Begin installing plugins」をクリックします。

表示されたプラグインを全て選択して、Installを選択して「適用」ボタンをクリック。

インストールしてみるとWarninngが表示されていました。
どうやら関数の一部がうまくいかなかったようです。
ひとまず先に進めて問題ないようでしたらこのまま続行しますので、以下の画像の下にある「Return~」リンクをクリックして前の画面に戻ります。
ちなみにWordpressのバージョンは 4.9.8でした。

続いて、インストールしたプラグインを有効化します。

プラグインが表示されなくなったら完了です。

無料テーマ「Kakina」のカスタマイズ

続いてテーマのカスタマイズを行っていきます。
ちなみにテーマのチュートリアルは動画で公開されていますので

ヘッダーメインメニューを追加

以下の「メニューを新規作成」からメニューを作成します。

メニュー名に「ヘッダーナビメニュー」と入力して「次へ」クリック。

項目を追加を選択して、固定ページから追加したメニューを選択します。
今回「マイアカウント」を「Myページ」として、新たに「お問い合わせ」を作成しました。

ここで「公開」して反映してみようとしたところ、以下のようなエラーが出てしまいました。
「何かうまくいかなかったようです。時間を置いてもう一度お試しください」

これはサーバー側でセキュリティ対策のためWAFを設定している場合起こる現象のようですが、僕の場合まだWAFを設定していませんでした。そこで色々解決策を探してみたのですが、見つからず諦めかけていたところ、しばらくしてからもう一度公開ボタンをクリックすると無事反映できました。
しばらく時間が経ってからという警告文は信用してよさそうです。
実はこの記事を作っている間、何度かエラーが出ました。こまめに更新を繰り返すとあまりエラーは出なかったので、何か変更を加えたら更新するようにすればよさそうです。

サイドメニューを追加

次にサイドメニューを変更していきます。
サイドメニュー変更するには、メニューのページから「メニューの新規作成」をクリックします。

そこで先程のメニュー作成と同じように、メニュー名を入力して項目を追加します。
サイドメニューは商品カテゴリが表示されてることが多いので、商品カテゴリーからカテゴリを追加します。

次にサイドメニューを表示します。
「Search Bar & Social」を選んで「Shop By Category Menu」にて、先程作成した「サイドメニュー」を選択します。

無事サイドメニューが表示されました。

感想

いかがでしたでしょうか?
今回は編集の一部しか紹介しませんでしたが、基本的にテーマにあるチュートリアル動画を見れば大体のことは編集できます。
せっかく無料テーマが色々揃っているので、できるだけ工数が減るように、どのようなショップを作るかによって選ぶテンプレートを変えた方がよいでしょう。

今回エックスサーバーでサブドメインを設定して、WooCommerceのデモサイトを作成しました。
こちらでご確認ください。

デモサイト