WordPress (ワードプレス) テーマ Flatsome (フラットサム)を使用してネットショップサイトを作る方法

げん

4年前

ウェブサイト作成について
WordPress テーマ Flatsome
準備
Flatsome テーマをカスタマイズ
1. 基本的なカスタマイズ方法の流れ
2. WooCommerce (ウーコマース) プラグインでショップ開設
Flatsomeのライセンスについて
1. 注意点
参考図書
1. ネットショップを作って運営するなら
2. WordPress (ワードプレス) を始めるならこちら

ウェブサイト作成について

今までいくつか個人的にウェブサイトを作成してきた中で、WordPress の Flatsome というテーマを使ってコーディングせずに簡単にネットショップサイトを作成したのでここで作成方法について簡単にまとめておきたいと思います。

ドメイン名を自分で取得して自分でサーバー契約をしてウェブサイトやネットショップを立ち上げるメリットは以下。

自分のサービスやショップのブランドを自分だけが所有できて好きにできる
プラットフォームの規約にビジネスを左右されない
サイトへの流入などトラフィック分析を自分で好きなようにできる

デメリットは全部自分でセットアップからメンテナンス、使用しているツールのアップデートに合わせて更新作業をしなければいけないということですが、そのあたりはさほど手間にはならないと思います。

むしろ、自分が作ったサイトをどうマーケティングしてより多くの人に見てもらうかが重要になります。

今まで作成したネットショップのウェブサイト

Suncord.Bike

妻の自転車パーツ販売ビジネスで、パーツは今は中国国内のタオバオ上で展開しているだけなのですが、海外の人たちからも購入できるようにしたいということでネットショップサイトを作ってみました。ついでに自転車のロゴも作りました。

海外で名前を知っている人もいるからか、検索流入で毎月購入検討者が100人くらいサイトに来て、お問い合わせも月に数回来る状態です。既に欧州と東南アジアのお客さんがサイトを通してパーツを買ってくれました。SEO対策はあまりやっていないので今後に期待。

WordPress を使用

下のような場合だと今世に出ているオープンソースで日々更新がされていて無料使えるCMS (コンテンツ管理システム) だと、やはりWordPress がまだまだ選択肢の一番上として選ばれることが多いです。

コーディングしたくない
コンテンツ管理機能や決済機能など一から付けられない
テーマは具体的な指定がないので、既存のテーマを使ったり、ドラッグアンドドロップでサイトデザインを簡単に作りたい
ブログやウェブメディアなどSEO対策に使えるサイトを手っ取り早く作って公開したい
なるべくはやく、エンジニアじゃない人が管理画面を触ってコンテンツを公開できるようにしたい

などなど。上記サイトもWordPress で作られています。上記ポイント以外の場合で、

特定のCMSプラットフォームの影響を受けたくない
WordPress はPHPで作られており、それ以外の言語を使う必要がある
自分で一から作ったほうが自由度が高くて早く作れる
今後の更新や機能追加を考えると自分でシステムを組んだほうがよい
開発する時間や予算が十分ある

などなどこういう場合は自分で一からウェブサイトやウェブサービスを作成したほうがよいです。

ドメインとサーバー

ドメイン名を登録するなら Gandi.net がおすすめです。なによりユーザーインターフェイスが使いやすい。

日本国内のユーザーがサイトにアクセスすることを想定している場合、サーバーはエックスサーバーやConohaなどのWordPress用高速サーバーにするとよいと思います。

ちなみに、私はサーバーも Gandi.net を使っています。注意点としては Gandi だとデータセンターがフランスかルクセンブルグになりウェブページの読み込み速度に若干影響が出る恐れがあります。でもブログやウェブメディアだと AMP に対応していたり、プラグインのインストールやカスタマイズをむやみやたらに行わず不必要な CSS や JavaScript の読み込みを防げば特に問題はないかなと思います。

Gandi.net

Gandi.net については以前いくつかブログ投稿を書いたのでここで共有しておきます。気になる人は確認してみてください。(以下リンクは別タブで開きます)

WordPress テーマ Flatsome

上で紹介した、自分で作成したネットショップサイトはこちらの Flatsome というネットショップサイト作成に特化したテーマを使って作成しました。今までいろいろ試した中でこれが一番使い勝手がよかったです。

テーマはこちらから購入可能

準備

サイト公開をするための基本的な準備はこちら。

テーマの準備。今回の場合は Flatsome のテーマを購入
サーバーを契約、ドメイン名の取得
サーバーインスタンス上に WordPress をインストール
WordPressの管理画面から Flatsome のテーマをアップロードして適用
WooCommerce やその他セキュリティ関係のプラグインのインストール
テーマ編集ツールからサイトデザインを作成
WooCommerce などのネットショップ関係のプラグインのセットアップ
設定終了後には Google Analytics と Google Search Console の設定を行いましょう

Flatsome テーマをカスタマイズ

Flatsome のテーマ編集ツールを使ったサイトデザイン作成、カスタマイズもかなり簡単に行うことが可能です。

以下自分の今後のメモもかねて書いておきます…

基本的なカスタマイズ方法の流れ

外観 > カスタマイズ > ホームページ設定 > + 新規固定ページを追加からトップページとなる空欄のページを作成する
ページ > Edit with UX Builder をクリックしてウェブページのビジュアルエディターページを開く
Add Elements > Flatsome Studio ボタンをクリックしてデフォルトデザインを使用したり、自分でブロックを組み合わせてページを作成することができる
Flatsome Studio から既存デザインを選ぶ場合は、左側にあるデザインテーマから自分にあうデザインを選んで適用させる
既存のデザインをとりあえず適用させて、自分が好きなようにカスタマイズすることができる
その後のカスタマイズの流れは直感的に行うことが可能

一つ直面した問題として「サイトの通信が完全にhttpsにならない」というものがありました。WordPress セットアップした段階で SSL/TLS証明書が適用されていない場合は、WordPressの設定上の自動リンクが http になっているので、設定からリンクを https にしないといけません。

設定 > 一般設定 > ウェブサイトのURLを https にする

そうしないと画像をアップロードしたときにその画像に割り当てられるリンクが http になり、その画像をアップロードした公開ページにアクセスすると、一部リンクが http で参照されているということでブラウザのアドレスバーに鍵アイコンが表示されません。

WooCommerce (ウーコマース) プラグインでショップ開設

サイトデザインのカスタマイズ後に、WooCommerce (ウーコマース) プラグインでショップ開設のための準備を行うことになります。

WooCommerce の初期設定、住所入力など
配送する地域、配送費を設定
使用する通貨を設定
WooCommerce の決済に使うプラグインをインストールして設定
商品追加ページから販売する商品情報を追加

だいたいこれくらいかと思います。

台湾だとコンビニ決済が結構主流なのでコンビニ決済ができるプラグインがあったりします。その代わり Stripe は台湾では使えないのでクレカ決済に Stripe は使用できません。

あと台湾でも Paypal を決済に使用することができ、受けとったお金は現地の銀行口座に移して現金を受け取ることができます。一番良いのは玉山銀行で外為口座を作ると手数料を低く抑えることができて便利です。

Flatsomeのライセンスについて

ひとつ注意が必要なのは、Flatsomeのライセンスについて。

基本的には$59の regular license を購入して、ウェブサイト一つにつき1ライセンスを使用して使うことになります。2つサイトを作るのであれば2つライセンスが必要。

あと、$3000近くする Extended License というライセンス形態もあります。ライセンスの説明ページを読んでも何が違いかよくわからなかったのですが、FAQやフォーラムも確認したところ「ウェブサイトにエンドユーザーが無料で自由にアクセスできるなら Regular License で十分、もしサイトにアクセスするためにエンドユーザーが料金を支払う必要があるのであれば(有料記事や動画配信など)、Extended License が必要」とのことでした。

なので、Flatsomeを使用してネットショップを作成する場合は通常の Regular License で大丈夫です。詳しくは以下の参考リンクをご確認ください。

参考リンク

注意点

これは Flatsome 特有の問題ではないのですが、 Site Guard というセキュリティプラグインを使用している場合、サイト上で顧客がアカウントを作成してログインしようとすると「エラー: 入力内容を確認の上、もう一度送信してください。」というメッセージが表示されてログインできない問題が発生する可能性があります。