2024年3月時点で、3万5,000店舗以上のECサイトに導入されていると言われています。
本記事では、EC-CUBEのテンプレートを選ぶ際のポイントや、おすすめのテンプレート、カスタマイズの方法などを詳しくご紹介しています。
「EC-CUBEを使ってネットショップを構築したいが、適切なテンプレートの選び方がわからない」「テンプレートをカスタマイズしてオリジナルのECサイトを作りたい」という方はもちろん、「EC-CUBEのテンプレートを活用したブランドイメージの構築方法を模索している」「テンプレート変更時の注意点やトラブル解決方法を知りたい」という方も、ぜひご一読ください。
EC-CUBEのテンプレートとは？基本を解説
テンプレートとは、あらかじめ「デザインが組み込まれた」WEBサイトの雛形のことです。背景やフレーム、レイアウトなどが含まれており、ECサイトの構築やリニューアルを効率的に行うことができます。
EC-CUBEはアパレル・食品・インテリア家具・雑貨など様々なタイプのテンプレートを揃えており、さらにオリジナルのデザインテンプレートを70種類以上用意し、わずか数分でプロが作成したデザインを自社サイトに導入することができます。
また、デザインテンプレートをそのまま適用しただけでも使うことができるだけでなく、少し手間をかけるだけで、オリジナルのデザインを反映させることも可能です。
EC-CUBEのデザインテンプレートは、EC-CUBE公式サイト上の「オーナーズストア」（https://www.ec-cube.net/products/list.php?category_id=7）で販売しており、無料・有料それぞれから選ぶことができます。
では、EC-CUBEのテンプレートを利用するメリットについて見ていきましょう。
無料のテンプレートやプラグインが豊富に用意されている
パソコン、スマートフォン、モバイルのデザインがセットになったデザインパックも用意されているので、デバイスごとにバラバラになることなく、統一感のあるデザインのECサイトを簡単に作ることができます。
ダウンロードが手軽で、数分で適用できる
ECサイトのデザインを変えるのに必要な作業は、ダウンロードしたテンプレートを管理画面から適用するだけ。数分程度しかかからないので、ECサイトの構築・リニューアルにかかる時間やコストを、圧倒的に減らすことができます。
デザインデータ付きで自由にカスタマイズできる
EC-CUBEのテンプレートは、HTMLやCSSの知識があれば、自由自在にカスタマイズすることが可能。ブロック管理機能があり、用意されたブロックの配置を替えることでレイアウト変更することができるだけでなく、新規にブロックを作成し、容易にデザインの追加・修正を行うことも可能です。
レスポンシブデザインで、さまざまな画面サイズに対応できる
デフォルトのテンプレートでも、さまざまな端末の画面サイズに合わせた表示ができるレスポンシブデザインに対応しています。また、レスポンシブ対応とは別にスマートフォン専用のレイアウト設定も可能。もちろん、一つのHTMLソースで管理・運用ができるので、端末ごとにECサイトを運用する必要はありません。
EC-CUBEテンプレートの選び方｜失敗しないためのポイント
次に、EC-CUBEテンプレートをどのように選ぶか、その方法や注意点についてご紹介します。
前提として、EC-CUBEには有料と無料のデザインテンプレートがありますが、いずれにも共通する注意点は以下の通りになります。
・EC-CUBEのバージョンによって対応できるテンプレートは異なる
・ロゴやバナー、メインビジュアルなどは自社で制作する必要がある
・同じデザインテンプレートを使用しているECサイトとデザインが似てしまう
また、デザインテンプレートを選ぶ際は、以下のポイントを押さえましょう。
ブランドの世界観にあった、買い物がしやすいデザインである
テンプレートを選ぶ際は、ブランドやショップの世界観に合ったデザインを選びましょう。また、欲しい商品が探しやすい画面設計であることや、それぞれのユーザーに最適な商品をおすすめできる機能も必要です。
また、目的のページへ到達するための導線や操作方法が、直感的でわかりやすいデザインのテンプレートを選ぶことで、ECサイトに訪問した顧客が快適に買い物ができるようにしましょう。
カスタマイズしやすく、オリジナリティを打ち出しやすい
同じデザインテンプレートを使用したECサイトは、どうしても似た雰囲気になってしまうので、自社ブランドならではのオリジナリティを打ち出すことが必要となります。そのために、ソースコードが編集ができるなど、なるべくカスタマイズしやすいテンプレートを選ぶとよいでしょう。
EC-CUBEのテンプレートの場合、デザインや機能を選択するだけである程度のカスタマイズはできますが、プログラミングなどの知識があればさらに高度なカスタマイズが可能になります。そうしたスキルがある場合は、カスタマイズの自由度の高いテンプレートを選びましょう。
既存のユーザーが多く、導入事例を参考にできること
既存のユーザーが多く、インターネット上にノウハウが蓄積されているデザインテンプレートを選ぶと、さまざまな情報を集めやすくなります。
EC-CUBEには、ユーザが交流するための開発コミュニティがあり、エンジニアだけでなく、ショップ運営スタッフ、デザイナーなど、EC構築・運営に関わる多くの人が数多く参加しています。
カスタマイズ方法やセキュリティ、各種トラブル解決などの情報を、同じデザインテンプレートを利用している関係者から集めることできるでしょう。
EC-CUBEのおすすめテンプレート【無料・有料】
それではここで、EC-CUBEの無料・有料それぞれのおすすめテンプレートをご紹介いたします。あくまで一例となるので、テンプレートを選ぶ際は、自社のニーズに合ったものをお選びください。
無料テンプレート
デザインテンプレート・シンプルバージョン（2.11系）
「最初はコストをかけず、とにかくECサイトを立ち上げたい」という方や、「実験的に手をつけてみたい」とお考えの方におすすめのテンプレート。
CSSファイルの書き換えのみでデザインを大きく変更することができる、シンプルなデザインのテンプレートです。
HTMLメールマガジンテンプレート No.L0084
HTML形式のメールマガジンテンプレート。様々な業種のECサイトで利用できるレイアウトで、商品もたくさん掲載できます。
デザインデータと、HTMLソースをすべて提供されるので、一から作る必要がなく、商品画像や色味、テキストを編集するだけなので、簡単にメルマガを作ることができます。
有料テンプレート
EC-CUBEデザインテンプレート No.P3003（3.0.16）
アパレル・雑貨・インテリア系のECサイトに最適なテンプレート。バナーイメージが大きく、エフェクト効果でスタイリッシュに演出可能。ブランディングサイトとしても使いやすい仕様です。
PC・スマホ・タブレットなどデバイスに依存しないレスポンシブル対応になっており、ユーザビリティの高さも魅力。
EC-CUBEデザインテンプレート No.P3002（3.0.16）
女性をターゲットにした、アパレル・雑貨・インテリア系のECサイトに最適のテンプレート。
バナーを多く配置できるレイアウトで、商品点数が多いサイトに向き。トップページでは商品アピールを重視し、下層ページにはサイドカテゴリを設置し、お客様を誘導しやすい作りになっています。PC、スマートフォンサイトに適したレスポンシブデザインです。
EC-CUBEレスポンシブWebデザインテンプレート No.JSG4201
幅広い業種で利用できる、非常に汎用性の高いデザインが魅力のテンプレート。EC-CUBEバージョン4.2系および4.3系に対応（4.0系・4.1系には対応していません）しており、さらに、専用のプラグインを導入すれば、トップページのスライド画像や新入荷商品特集などのコンテンツを、HTMLの知識がなくても直感的な操作で管理画面から簡単に編集・管理が可能に。
ユーザーにとって魅力的で使いやすいECサイトを、迅速かつ簡単に構築できるテンプレートと言えます。
EC-CUBEテンプレートをカスタマイズする方法
ここでは最新版のEC-CUBE4をベースに、テンプレートのページやブロックの編集、デザインのカスタマイズ方法などについて解説していきます。
なおEC-CUBE4では、プラグインを使うことでデフォルトにはない機能を追加することも可能です。具体的にはデザインテンプレート以外に、以下のようなプラグインが用意され、それぞれオーナーズストアで公開されています。
・決済
・集客
・販売促進
・顧客管理
・物流在庫管理
・SNS機能
それではEC-CUBE4のテンプレートのカスタマイズ方法について、具体的に見ていきましょう。
まず、EC-CUBE4で編集できるテンプレートは、以下のようなものがあります。
・ページ
・ブロック
・レイアウト
・メール
「ページ」の編集方法
管理画面メニューの「コンテンツ管理」>「ページ管理」から商品詳細ページを選択し、表示されているコードを編集することで、商品詳細ページをカスタマイズできます。
またページ編集画面では、レイアウトの選択やメタタグの設定も同時に行うことが可能です。
ページを追加するには、「ページ管理」ページの上にある「新規作成」ボタンを押して、ファイル名・ページ名・URLを指定。新規作成したページはページ管理画面から削除することができます。
「ブロック」の編集方法
「レイアウト管理」画面で、ブロックの設置場所や順序を自由に変えることが可能です。編集方法は基本的に「ページ」と同じで、管理画面で新しく追加・削除することもできます。
「レイアウト」の編集方法
「レイアウト」はページごとに作成可能で、商品詳細ページのレイアウトを変更してサイドバーにメニューなどのリンクを表示することができます。レイアウトを変更するには、管理画面の「コンテンツ管理」>「レイアウト管理」から行うことができます。
「メール」の編集方法
EC-CUBE4では、デフォルトで下記のメールテンプレートが用意されており、それぞれ編集することができます。
・注文受付メール
・会員仮登録メール
・会員本登録メール
・会員退会メール
・問合受付メール
・パスワードリセット
・パスワードリマインダー
・出荷通知メール
管理画面メニューの「設定」から「店舗設定」のメニューを開いて「メール設定」を選び、編集します（テキストメールとHTMLメールの両方を編集することが可能）。
なお、無料で使える「メールマガジンプラグイン」を使えば、メルマガの編集も可能になります。
次に、EC-CUBE4の「デザイン」をカスタマイズする方法をご説明します。カスタマイズ方法は、次の3つになります。
1.既存の(style.css)CSSを編集する
2.新規でCSSファイルを作成する
3.管理画面からデザインを修正する
なお、3の場合はテキストエディタからも再編集可能で、再度CSS管理画面にアクセスすれば途中から編集することもできます。
最後に、EC-CUBE4のカスタマイズする際の注意点をいくつかご紹介します。
フォルトテンプレートのHTML構造はできるたけ変更しない
デフォルトのHTML構造を大きく変えると、不具合が発生する可能性があります。
FTPツールでアップロードする場合はキャッシュを削除
FTPツールでサーバーにファイルをアップロードする場合、「コンテンツ管理」の「キャッシュ管理」画面にある「キャッシュ削除」ボタンを押下し、キャッシュの削除をしてから変更を反映するのを忘れず行なってください。
プラグインは必ず「有効化」する
プラグインは「インストール」しただけでは動作しないので、インストール後に、プラグイン一覧画面で「有効化」する必要があります。
また、プラグインによって色々な初期設定等をしなければならないものもあります。プラグインの販売説明ページや付属マニュアルなどを参考に、事前に十分に作業手順を確認する必要があります。
まとめ
ECサイトを構築しても、デザインや機能が適切でなければサイトの役目を十分に発揮することができません。しかし、プログラミングやデザインの知識がなく困っている
企業も多いのではないでしょうか？そこでおすすめなのがテンプレートの利用です。
ただし選定の際は、「どの程度カスタマイズが必要となるか」「サポートが充実しているか」などが、テーマを選ぶ際のポイントになります。
もし自社のスタッフではテンプレートの選定やカスタマイズが難しいようでしたら、サポートしてくれる制作会社にアウトソーシングする方法も検討してみましょう。
ルビー・グループでは、これまでEC-CUBEにて多くのオンラインストアを制作・運営しており、 柔軟なカスタマイズ対応だけでなく、サイト開設後の運用やバージョンアップにおいても安定的にサポートをさせていただきます。
EC-CUBEに関するご質問などあれば、ぜひお問い合わせください。
この記事を書いた人
ルビー・グループ コーポレートサイトチーム
各分野の現場で活躍しているプロが集まって結成されたチームです。
開発、マーケティング、ささげ、物流など、ECサイトに関するお役立ち情報を随時更新していきます！
Post
Share
LINE
Hatena
Pocket
feedly
