2020/9/11 アップデートによりインスタグラムフィードの表示にプラグインが必要になりました。
アップデート情報詳細はこちら。当記事にも一部追記しております。

ついにショッピングカートプラグイン「Woocomerce」に対応した初のTCD WordPressテーマ「EGO.」をリリースしました。従来のECサイト向けテーマ同様、ショッピングカートプラグイン「Welcart」に対応しているバージョンも同時にリリースしています。

弊社では、大手プラットフォームに頼りっぱなしのECサイトでは、独自のブランド力や販売力を育てることは難しいと考えています。サイト運営の自由度が低くなり、独自の工夫がしにくいからです。プラス、プラットフォームにショップを出店し続けるにはそれなりのコストもかかってきます。確かに販売力や手軽さという点において、短いスパンでは自社ECサイトよりいい面もありますが、長期的に見るとひたすらに利益やブランド力を搾取され続けているともいえるわけです。

弊社のテーマ開発において、すべてのサービスを自社でするべきという考えがベースにあります。それは、求人サイトや店舗サイト、今回のようなECサイトでもです。自分で長期的にサイトを育てていくことであらゆるコストを軽減できて、かつ自社のブランド力を高めることができるからです。

「すでに大規模に展開している店舗ならまだしも、うちのような小さな店舗では、どのようにしてECサイトを構築すればいいかわからない」という方にも今回リリースした「EGO.」はおすすめです。

初心者ユーザーから、中級者ユーザーにも幅広くマッチするように構築できるサイトの幅を広げています。シンプルなショッピングサイトから、本格的なECメディアまでユーザーのレベルに合わせて自在に制作できる仕様です。当記事で「EGO.」のさまざまな機能を解説していきます。

2つのバージョンをリリースした
ECサイト向けWordPressテーマ「EGO.」

Woocomerce版 Welcart版

販売ページ

デモサイトでは、あなた色を見つけられるTシャツ専門のECサイトをイメージして制作いたしました。扱う商品はTシャツのみですが、そのカラーリングやデザインのバリエーションを管理できるサイトを表現しています。「Woocommerce」と「Welcart」に対応したバージョンで、それぞれのデモサイトを制作しています。各プラグインの仕様に対応できるようにアレンジしていますが、デザイン面での大きな違いはレビューの評価平均値を表示できる機能の有無ですね。当記事で後ほど解説いたします。

サイトのトップページの設定を変更して規模感を変更しよう

冒頭で述べた通り、「EGO.」は大規模な店舗だけを想定して開発したわけではありません。ECショップを気軽に始めたいという方にもマッチさせられるようにトップページの印象を簡単に変更可能です。

デモサイトは、Woocomerce版と、Welcart版に加えてシンプル版というバージョンも公開しています。こちらで気軽に構築できるECサイトをイメージしていただけたらと思います。ちなみにシンプル版はどちらのバージョンでも再現可能です。※デモサイトではWoocomerce版を活用しています。

その設定方法は簡単で、どちらのバージョンでもまず販売している商品を登録します。これはプラグインの機能になりますが、商品名やSKUや値段、配送方法など諸々をセットアップするということです。

あとは、EGOのテーマオプションの「トップページ」から表示するコンテンツにチェックを入れるだけです。例えばシンプル版なら以下のような感じになります。

シンプル版のトップページなら、赤枠箇所のみの設定で完成します(他は表示しないにチェックします)。プラグインの機能である商品登録さえ済ませれば、サイトのデザインやレイアウトは「EGO.」にお任せください。見出しのテキストや、表示するアイテム数などを設定するのみです。とにかく気軽に始めたいという方は、これだけでECサイトをスタートできます。

自由度の高いトップページコンテンツを使いこなそう

操作に慣れてきてから、任意でヘッダーコンテンツを表示させたり、その他のコンテンツも追加していくといいでしょう。EGOのトップページは、かなり自由度が高く、何通りものバリエーションを生み出せます。

HTMLを入力できるフリースペース(クイックタグ使用可能)に加えて、バナーを組み合わせて自在に導線を制作できる8ブロックコンテンツ、ブログ記事や商品、カスタム投稿「お知らせ」から表示するコンテンツをタブごとに選べるカルーセルスライダーなど。

中でもEGO独自の機能は、8ブロックコンテンツになります。以下のような直感的なUIでセッティングできるので、誰でも簡単にレイアウト可能です。各ブロックのサイズは横長や縦長を含む8種類から選択できます。

8ブロックコンテンツを含む、複数のコンテンツを任意の順番でセットできるだけでなく、各コンテンツの背景色をセットしてグラデーションオーバーレイを施す機能も実装しました。下記のような設定画面で直感的にグラデーションカラーを調整できます。

ハンドルをクリックしてカラーピッカーを展開可能です。

これらの組み合わせてオリジナリティ溢れるページを簡単に作成できます。何よりこれだけ直感的に操作できるので、構築するのが楽しくなりますね。この他にも各ページのウィジェットで表示できるバナー広告についてもテキストの位置やオーバーレイを簡単に設定できます。画像さえあれば瞬時にバナー広告を作ってサイドバーに表示させることができるわけです。

モバイルユーザーに向けて完全に切り分けて設定してみる

前述の通り、トップページを自在に構築できるのですが、EGOではモバイル用のトップページの設定項目を用意いたしました。つまり、PCとモバイルデバイス(スマホなど)で、表示するコンテンツを分けて設定できるということです。

PCより小さな限られた画面内で、表示させるコンテンツの有無や記事数などは検討する価値があります。小さな画面であまりに雑多に表示させてしまうと整理されていない印象を与えてしまうからです。スッキリと見やすいコンテンツボリュームや色使いを意識するといいでしょう。

なお、8ブロックコンテンツやグラデーションオーバーレイ設定画面のプレビューは、以下のようにスマホ画面のサイズ感で再現される仕様です。「設定→実機を見てという確認」という流れを省くことができます。モバイル環境でのコンテンツの見え方をその場で再現できるということです。

8ブロックコンテンツと、グラデーションオーバーレイの色味については、安易に想像しにくいといった思いからこの仕様を採用いたしました。スマートに設定して色々なパターンを試してみてください。セットする画像によってさまざまな工夫ができるはずです。

インスタグラムと連携するフッターエリアを活用してみる

2020/9/11追記:当初は、EGOのテーマの機能として実装していたインスタグラムフィードを表示する機能ですが、Instagram(Facebook)側の仕様変更により、テーマの機能として実装することができなくなりました。

最新版のEGOでは、「Smash Balloon Social Photo Feed」を有効化し、任意のアカウントと紐付けすることで、テーマのスタイルに合わせて表示できる仕様です。ご理解・ご了承いただけますと幸いです。

プラグイン単体での使用方法については、下記の動画でご確認いただけます。

TwitterやFBに比べると、シェア機能がないので拡散性は少し劣りますが、写真をメインに投稿するスタイルは気軽に投稿できるというメリットがあります。また、ハッシュタグや、より気軽な投稿や広告を出せるストーリーズなどの機能を活かして、通常のインスタグラム投稿に流入させることもできます。ECサイトには載せてない商品の写真や、インスタ限定のクーポン情報などの投稿を発信するといいでしょう。

投稿ハードルが低い=更新速度も自ずと早くなると思うので、訪れるたびにフッターに表示されるコンテンツが新しいものに更新されているという状況も作りやすいわけです。そうなると訪問ユーザーを楽しませることにも繋がり、サイトとSNSの連携による効果も期待できます。

フッター部分からインスタグラムへ遷移することもできますし、インスタ側で欲しい商品を見つけてECサイト側に戻ってくることも十分に考えられます。インスタグラムのUIはスマホに特化しているので、スマホユーザーへの効果が特に期待できそうですね。

楽しいショッピングを促すウィッシュリスト機能

EGOには、カジュアルなショッピングを気軽に楽しめる「ウィッシュリスト機能」を搭載しています。いわゆるお気に入り機能です。気になる商品や、後でもう一度確認したい商品などを保存しておけます。商品詳細ページはもちろん、商品一覧の画面からでも気軽にポチポチ追加することができます。追加した商品の数は、ヘッダーのハートマークの隣に表示され、カートの中身とは区別して確認できる仕様です。

この機能は会員登録をしていないユーザーでも利用できるので、偶然流入してきたユーザーにも効果を発揮できます。訪問者に気に入った商品を保存してもらい、比較検討する時間を与えられますね。

サイト内での比較検討だけでなく、購入する前に複数のサイトで検討する方も多いと思います。そういった際に多くの商品の中から、いくつかをピックアップして保存しておける機能は、実用的だということです。

マーケティング機能をパッケージングし、細かな分析が可能なCTA

ここまではトップページのレイアウトや、デザインを組み立てたり、ユーザーのショッピングに楽しさを与える機能を紹介してきました。EGOには他にも、どのページからの流入で、商品の購買やコンバージョンに至っているのかを分析する機能を搭載しています。

まず圧倒的な訴求力をもつセール情報などの告知に最適なモーダルウィンドウ式CTA機能。反面、ユーザーの操作を妨げるので、使い方には節度が必要です。デモサイトのようなテンプレートを使用してテキストや画像を使う他に、フリースペースを使って自由にコンテンツを作成することもできます。ページ単位で表示・非表示を調整したり、一度表示したブラウザでは再表示されないようにして、ユーザーに煩わしさを与えないようにしましょう。

記事下やフッターにCTAを表示させてコンバージョンを促す機能は基本として搭載していますが、EGOでは、固定ページテンプレート「ランディングページ」内にもCTAを設置できるようになりました。以下のようなLP用コンテンツビルダー内のCTAです。

他の箇所のCTAと同様、3種類までテンプレートに沿って登録することができ、任意の箇所に表示させることができます。同時に、各CTAのコンバージョン率を測定可能です。つまり、自分で商品を販売できて、ブログコンテンツを通して商品のストーリーや背景などを訴求可能で、さらにどのランディングページからどういったアクションが多いのかを分析する機能をもテーマ内にパッケージ化しているというわけです。

ECサイト運営とコンテンツマーケティング、そのマーケティングのABテスト分析までを自己所有のサイト内で行えます。単に商品を販売するだけのECサイトとは一味も二味も違う踏み込んだ運営が可能ということです。

ラベルで訴求+商品発見がスムーズになるソート機能

EGOには多くの機能が搭載されていますが、基本的なECサイトとしての機能も充実しています。Woocommerce、Welcartそれぞれのバージョンで多少仕様は異なるものの商品カテゴリーを登録してカテゴライズして表示することが可能です。

アーカイブページでは、人気順や価格順などでソートすることがワンタッチで可能な上に、「NEW」や「SALE」などのラベルを表示させることができます。「MENS」や「LADIES」などと同様に表示させたいカテゴリーを用意して、それらをさらに強調カテゴリーとして設定する仕様です。

例えば、MENS・LIMITED・SALEという三つのカテゴリーを設定している商品でもアーカイブのサムネイル上には、「SALE」のみを強調させてラベルとして表示させることができるわけです。

この機能を活用して、最も訴求するべきカテゴリーをアーカイブページに表示します。購入したい商品が決まっているユーザー以外は、多くの商品の中からスクロールして閲覧するわけですから、ラベルを表示させて売りたい商品を目立たせることは、いうまでもなく基本的な戦略の一つになります。

他にも最近チェックした商品や、商品に紐付けされたアップセル商品(Woocommerce版のみの機能)やおすすめの商品(両バージョン共通)を表示してユーザーにピンポイントで訴求するECサイトに必須の機能も兼ね備えています。

Woocomerce版のレビュースター表示機能

こちらはプラグインとテーマの仕様上、Woocommerce版にのみ実装されている機能になりますが、各商品のレビューを5段階の評価スターとして表示できます。複数のレビューが投稿された場合は、その平均がスターの数として反映される仕様です。

購入者のレビューは、販売している商品の最も信用力の高い指標ともいえます。販売する側ではなく、ユーザー目線の感想やご意見ですからね。なので、購入者に積極的にレビューを書いていただくように、レビューを投稿した方にのみ割引や特別特典などを設けることも有効かもしれません。

EC以外の楽しみや、機能を搭載。
ECサイトのバージョンアップに最適なWordPressテーマ「EGO.」

販売ページ デモサイト

ECサイトを気軽に立ち上げて、シンプルに商品を販売すること以外にも、EGOならではの楽しみがあります。トップページのデザインや、レイアウトを考えてみたり、自在に作成したオリジナルのバナーで下層ページへの導線を組み立てるのも楽しくなるはずです。

トップページをアレンジするだけでも、サイトの印象は大きく変わるでしょう。数多くのECサイトがある中、あなただけの独自性を表現いただけます。

初心者でも手軽にECサイトを作れるだけでなく、少し操作を覚えれば簡単にデザインをアレンジできる上に、コンバージョンを計測する機能で、効果的な導線を分析することだって可能です。幅広いユーザーに満足いただける次世代のECテーマ「EGO.」を活用してオンラインショップの可能性を広げてみてください。