EC-CUBEのデザイン編集はページとブロックの理解が必要

一般的なウェブサイトはページ単位でデザインを編集していきますが、EC-CUBEを使ってECサイトを構築する場合は「ページ」と「ブロック」という概念を理解しないとデザイン編集ができません。今回はEC-CUBE3でどのようなページが編集でき、どのようなブロックを設置することができるのかご紹介します。

EC-CUBE3で編集できるページ一覧（購入者側）

EC-CUBE３の購入者側ページ（フロント）でデフォルトで編集可能なページを下記にまとめました。この情報は管理画面の「コンテンツ管理」＞「ページ管理」からも確認することができます。また、ここに掲載されているものはデフォルトであって、カスタマイズで新たにページ設定することも可能です。

EC-CUBE3のブロックとは

上記ページ管理の「TOPページ」から「レイアウト編集」を選ぶと下記のようなレイアウト画面が表示されます。この中に「ロゴ」や「カゴの中」と記載されたグレーのエリアがいくつかありますが、これは「ブロック」と言われるものです。EC-CUBEではこのブロックをページ毎に配置して基本的なレイアウト（型）を決定します。その後、ブロック本体（部品）の中身をどうするのか決定します。

EC-CUBE3のブロック一覧（デフォルト）

EC-CUBE3が標準で設置しているブロックは以下の通りです。ページと同様、ブロックも自由に追加することができます。ブロックを先に作ってしまえば、あとは各ページに配置するだけです。

ページとブロックが理解できても編集は難しい

ご説明したとおり、EC-CUBE3を使ってECサイトを構築するには、

1. まず基本となるページレイアウトを決定する
2. 各ページに共通して配置する部品（ブロック）を決める
3. 共通する部品（ブロック）の中身を決める
4. 各ページに部品（ブロック）を配置していく
5. 共通部分以外はページ単位で独自にデザインしていく

という流れでデザイン編集していきます。

ウェブ制作の作業レベルでは

1. ページ単位のデザインを作成する
2. ページ単位でコーディングする
3. コーディングしたソースをブロック（部品）に切り分ける
4. 切り分けたブロック（部品）をEC-CUBEに実装していく

となります。これは一般的なウェブサイト制作の流れとは異なりますので、デザイン・コーディングが出来るデザイナーであってもEC-CUBEを理解していない場合は対応が困難です。つまり、EC-CUBEでデザインを編集する場合は、必ずEC-CUBEを理解している人員が必要になります。ここがEC-CUBE利用のデメリットでもあります。

今後、皆さまがEC-CUBEを利用してECサイトを構築する場合、まずはEC-CUBEを理解している制作会社に声をかけましょう。デザインにこだわるのであれば、その制作会社にデザインの好みを伝え、最適なデザイナーを探してもらう方がスムーズに進行できます。最初にデザイナーに声をかけてしまうと、作業終盤でEC-CUBEの仕様に合わせてデザインを変更することになり、作業の効率性が落ちる可能性がありますよ。

【PR】京都でEC-CUBEをカスタマイズするなら（株）クーネストにお任せください