今回は、ECサイトとWordpressの併用運用をテーマに、事例を含めてご紹介していきたいと思います。
WordPressは予め用意されているテンプレートをベースに、ブログ感覚でサイトの構築や記事更新ができるツールです。SEOに強く、無料でWeb上に配布されているテンプレートを活用してデザインをカスタマイズしたり、プラグインをインストールして機能追加もしやすい特徴があります。
弊社が開発提供しておりますクラウド型ECサイト構築ASPのaishipシリーズでは、Wordpressをオプションにてご用意しており、全体の約25%のEC事業者様にご利用頂いております。もちろん、ASPのCMS内で良質なコンテンツを作成することも可能ですが、Wordpressの運用に慣れている方にとっては使い勝手の良いツールとしてご利用頂いております。
ECサイトのドメインでWordpress運用可能
aishipシリーズでは、ECサイトのドメイン配下にWordpressを設置することが可能です。ECサイトとWordPressを同じドメインでを運営することは、SEOの観点からも有効でありECサイトとの親和性を高めることができます。
さらに、ECサイトとWordpressのレイアウトを揃え、統一感をもって運営することも可能です。
WordPressのレイアウトをECサイトにあわせている事例
ヘッダーやフッター、あるいはサイドメニューをECサイトと共通にしており、統一感のあるテイストで運用されている事例がこちらです。ECサイト同様、Wordpressのテンプレートもレスポンシブレイアウトです。
京都の洋菓子店でもトップブランドの「京都北山マールブランシュ」様
ECサイト:www.malebranche-shop.jp
Wordpress:www.malebranche-shop.jp/contents
ウィッグ通販のリネアストリア様
ECサイト:ilovewig.jp
Wordpress:ilovewig.jp/wigcolumn/
おしゃれなレンタルドレスをセレクトしたHAUTE rent to runway様
ECサイト:shop.hauterenttorunway.jp
Wordpress:shop.hauterenttorunway.jp/recommend/
ECサイトとWordpressのテイストが異なる事例
ECサイトとWordpressサイトは、それぞれで目的が異なる為、必ずしもテイストを揃える必要はありません。WordpressはWordpressとして、各記事のコンテンツ間で回遊しやすい設計にしている事例がこちらです。
カーテン通販のくれない様
ECサイト:www.e-kurenai.com
Wordpress:www.e-kurenai.com/9071blog/
WordPressのレイアウトをECサイトに合わせる方法
ECサイトとWordpressを統一感のあるテイストでレイアウトを構築したい場合は、それぞれの構築方法の特徴を理解し、HTML、CSS、JSの基本を理解できていれば、おおよそはソースのコピー&ペーストにて実現可能かと思います。
手順としましては、まずはaishipシリーズのCMS内でECサイト側のレイアウトを作成します。サイトの要素を機能パーツと呼ばれるパーツ単位で構築し、ヘッダー、フッター、アサイドの各エリアにそれぞれパーツを配置することでレイアウトを作成します。レスポンシブに対応している為、1つの機能パーツを作成するだけで全デバイスに反映され、最適化表示が可能です。
ECサイトのレイアウトが完成すれば、ブラウザ上でソースを開き、レイアウトに該当するソースを選択しコピーします。Wordpressの管理画面内、ヘッダーやフッター、アサイドに該当するファイルを開き、コピーしたソースを適切な位置にペーストします。ペーストしたソースにCSSやJSがあたるように調整していきます。ECサイト内のCSSやJSを読み込ませる為にWordpressのヘッド内にCSSやJSの参照リンクを設置するという方法も有効かと思います。
動作確認し、CSSやJSが効いていない場合は、WordpressのCSSやJSファイルを編集して調整します。なかなかうまく行かない場合は、ベースとなるWordpressのテーマを変更してやり直すのも1つ方法です。
まとめ
いかがでしたでしょうか。クラウド型ECサイト構築ASPのaishipシリーズのCMSも、WordpressのCMSもどちらも自由度が高い為、制約に縛られないオリジナルなサイトの構築を実現しやすいかと思います。ECサイトのコンテンツに加え、Wordpressで良質なコンテンツを作成しインデックス数を増やしていくことは、アクセス数の増加に繋がり、さらにはECの売上繁栄へと繋がっていくでしょう。