WooCommerce日本語解説サイト - WordPressでネットショップを作ろう!

【WooCommerce設定ガイド】 ショップのトップページをデザインしよう[簡易版]

前回までの記事で、WooCommerce(ウーコマース)のショートコードとウィジェットの使い方を解説しました。今回は、それらを使ってHTML・CSSが分からない方でも簡単にショップのトップページをデザインする方法を解説します。

※本記事はあくまでも[簡易版]です。細かい部分までしっかりとデザインするにはHTML・CSSに加えてPHPやjsの知識も場合によっては必要になります。

 

Page Builder by SiteOriginのインストール

Page Builder by SiteOriginというWordPressプラグインを使用してページを作成します。

Page Builder by SiteOriginとは?

自分でHTML・CSSを書くこと無くマウス操作だけでページのレイアウトが作れ、テキストや画像などの様々な要素を配置できるプラグインです。トップページなどのしっかりと作り込みたいページを、誰でも簡単に思い通りにページを作ることができます。

 

インストール方法

「Page Builder by SiteOrigin」本体のインストール

WordPressの管理画面から、「プラグイン」>「新規追加」>”Page Builder by SiteOrigin”で検索し、「今すぐインストール」を押します。インストール完了後、プラグインを有効化します。

Page Builder by SiteOriginのインストール
Page Builder by SiteOriginのインストール

 

追加プラグイン「SiteOrigin Widgets Bundle」のインストール

これはSiteOrigin Widgets Bundleでテキストウィジェットや画像ウィジェットを使用可能にするものです。本体のインストールと同様に、「プラグイン」>「新規追加」>”SiteOrigin Widgets Bundle”で検索し、「今すぐインストール」を押します。インストール完了後、プラグインを有効化します。

SiteOrigin Widgets Bundleのインストール
SiteOrigin Widgets Bundleのインストール

 

これでページを作る準備ができました。

 

Page Builder by SiteOriginの使い方

Page Builder by SiteOriginの操作方法

こちらの解説ページが分かりやすいです。

→ Page Builder by SiteOrigin使い方(Grazioso:使い方ガイド)

HTML・CSSを知らないと2カラム、3カラムのレイアウトを作るのは難しいですが、これなら簡単にページのレイアウトが作れますね。

※説明に使われている画像は、プラグインの過去バージョンの時のもので、現行バージョンとは少しボタンの表示などが違っていますが、操作方法は同じです。

 

ショートコードとウィジェットも使える

Page Builder by SiteOriginの使い方の解説ページの中でも紹介されていますが、作成したRowの中にはウィジェットが使えます。もちろんWooCommerce独自のウィジェットも使えます。また、テキストウィジェットにはショートコードが使えます。

つまり、Page Builder by SiteOriginで作成したレイアウトの中にショートコードやウィジェットを利用して任意の商品リストを表示させることができます。

Page Builder by SiteOrigin(追加プラグインを含む)には画像などを表示するためのウィジェットが用意されていますので、それらとWooCommerceのショートコード、ウィジェットを組み合わせてページを作ります。

 

実際にページを作ってみる

Page Builder by SiteOriginとWooCommerceのショートコード、ウィジェットを使用して実際にトップページを作ってみました。自分ではHTML・CSSは全く書いていません。

※HTML・CSSを書いたから良い/悪いということではなく、それらの知識がない人でもこのくらいのページが作れるということです。ショップを運営していく中で「あれを載せたい」「これは消したい」「表示順を変えたい」という思いが必ず出てきます。自分でページを作ることができれば、そういった思いを素早く反映し、試行錯誤してショップを改善していくことができるようになります。

作成例

[作成例(使用テーマ:storefront)]

(クリックすると実際のサイズの画像を見ることができます)

Page Builder by SiteOriginを使用して作成したショップのトップページの例
Page Builder by SiteOriginを使用して作成したショップのトップページの例

(クリックすると実際のサイズの画像を見ることができます)

[使用要素の解説]

(クリックすると実際のサイズの画像を見ることができます)

作成例の解説
作成例の解説

(クリックすると実際のサイズの画像を見ることができます)

WooCommerceのショートコードとウィジェットの使い分け

WooCommerceのショートコードでもウィジェットでも商品リストを表示することができますが、デザインが異なるので使い分けています。ショートコードは横に広く表示できるところで使います。ウィジェットは元々サイドバーで使用する前提で作られているので縦長の表示に向いています。

 

テキストと画像の使い方

一番上の大きな画像にテキストを重ねている部分は、レイアウトを作っている要素(Row)に背景画像を設定して実現しています。各Rowの右上のスパナのようなアイコンの付いたボタンを押した時の、右側の「Design」をクリックして表示される「Background Image」に任意の画像を設定します。そのRowの中にテキストウィジェットやボタンウィジェットを入れます。上下左右の余白は右側の「Layout」のPaddingの数値で調整します。(※この右側の各項目は、細かく設定するとよりデザインを作りこむことができます。full-widthのパララックスも数クリックで作れたりします。)

 

レスポンシブ対応

今回使用したテーマ:storefrontとPage Builder by SiteOriginはデフォルトでレスポンシブ(スマートフォンやタブレットでの表示最適化)対応しています。このトップページ作成例もレスポンシブになっています。

[スマートフォンでの表示例]
(長過ぎるのでここでは上部のみ表示)

(クリックすると実際のサイズの画像を見ることができます)

トップページ作成例のスマートフォンでの表示例
トップページ作成例のスマートフォンでの表示例

表示確認と修正

上記(リンク先)の画像では「お知らせ&ショップブログ」部分の表示が切れています。その部分は横スクロールできるので見れなくは無いですが、修正が必要です。こういうケースでは使用するウィジェットを変える(投稿をリスト表示できるウィジェットのプラグインを探して差し替える)などして再度表示を確認・修正します。

 

編集画面

最終的な編集画面はこのようになりました。

Page Builder by SiteOriginでの最終的な編集画面
Page Builder by SiteOriginでの最終的な編集画面

(当然のことではありますが)編集画面で作ったレイアウトと実際の表示のレイアウトが同じに構成になっています。ページ作成作業に入る前に、紙などでページ構成のラフを作っておくと、それを編集画面で再現するだけでレイアウトできてしまうのでおすすめです。

 

使用テーマ、プラグインはすべて無料のものを使用

この作成例を作るにあたって、使用したWordPressテーマ・プラグインは全て無料のものです。無料のものだけでもそれなりのショップが作れてしまいますね。ネットショップを始めるには十分かもしれません。

また、ショップの構築に多少予算があるのであれば、有料のテーマやプラグインの使用を検討しても良いと思います。デザイン・機能において優れたものがたくさんあります。(英語のものがほとんどですが、まれに日本語対応を謳っている有料テーマもあります。)例えば、商品を360度回転して見ることができる機能を持ったテーマなんていうのもあります。

 

サイト自体のデザインについて

基本的にサイト全体のデザインは使用するWordPressテーマに大きく依存します。従って、サイトデザインの根幹はテーマ選びでほぼ決まります。ショップのコンセプトや扱う商材に適したテーマを選ぶようにしましょう。テーマによってはショップのトップページ用のレイアウトのパターンをたくさん持っていて、それを選んで画像や文章を差し替えるだけで洗練されたデザインのトップページを作れるものもあります。

海外のサイトになりますが、themeforestではデザイン・機能に優れたWooCommerce用WordPressテーマがたくさん販売されています。 初めて見る人はデザイン・機能のレベルの高さに衝撃を受けるかもしれません。一度覗いてみることをおすすめします。 WooCommerce対応テーマの探し方についてはこちらの記事で解説しています。→ 『【WooCommerce設定ガイド】 対応テーマの探し方とインストール方法 [簡易版]』

 

本記事は「トップページの作り方」として解説していますが、より正確に表現すると「自由度の高い固定ページの作り方」です。TOPページだけでなく、例えば「期間限定キャンペーンで対象のセール品を表示する特設ページ」を作ることもできます。WordPressの通常のエディタに比べてかなり自由にページが作れますので、柔軟な発想でページ作りに取り組んでみてください。

 

WooCommerceサイトのトップページ(固定ページ)の作り方については以上になります。

『【WooCommerce設定ガイド】ショップ構築の7つのステップ』に戻る

関連記事
2コメント
  1. toshi さんのコメント

    こんにちは。大変便利なプラグインで、非常に興味があります。現在、求人や不動産サイトの構築を検討していますが、CSVデータの取り込みなどもできるものでしょうか?ご教授いただけると幸いです。

    1. WPショップラボ管理人 さんのコメント

      コメントありがとうございます。

      WooCommerceには商品データのCSV取り込みができるプラグインがいくつかありますが、無料のものは「バリエーションのある商品」が扱えなかったり、「属性」などの商品に関連するデータが扱えないなどの機能制限がされているものが多いです。また、そもそも機能しないもの、取り込みに失敗するものも多いです。できれば有料のものを利用したほうが良いと思います。
      ちなみに、有料・無料ともに管理画面が日本語対応しているものは無いと思います。(基本的にすべて英語表記だと思ったほうが良いです。)

      また、つい最近WooCommerceのメジャーバージョンアップがリリースされたので、古いプラグインは最新版(WooCommerce 3.x)に対応していない可能性があります。利用される場合は対応するバージョンをしっかり確認することをお勧めします。

コメントをどうぞ

メールアドレスは公開されません。

CAPTCHA