1. HOME
  2. ブログ
  3. テクノロジー
  4. EC-CUBEのデザイン編集はページとブロックの理解が必要

Blog

ブログ

テクノロジー

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

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

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

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

1 TOPページ
2 商品一覧ページ
3 商品詳細ページ
4 MYページ
5 MYページ/会員登録内容変更(入力ページ)
6 MYページ/会員登録内容変更(完了ページ)
7 MYページ/お届け先一覧
8 MYページ/お届け先追加
9 MYページ/お気に入り一覧
10 MYページ/購入履歴詳細
11 MYページ/ログイン
12 MYページ/退会手続き(入力ページ)
13 MYページ/退会手続き(完了ページ)
14 当サイトについて
15 現在のカゴの中
16 お問い合わせ(入力ページ)
17 お問い合わせ(完了ページ)
18 会員登録(入力ページ)
19 ご利用規約
20 会員登録(完了ページ)
21 特定商取引に関する法律に基づく表記
22 本会員登録(完了ページ)
23 商品購入
24 商品購入/お届け先の指定
25 商品購入/お届け先の複数指定
26 商品購入/ご注文完了
27 プライバシーポリシー
28 商品購入ログイン
29 非会員購入情報入力
30 商品購入/お届け先の追加
31 商品購入/お届け先の複数指定(お届け先の追加)
32 商品購入/購入エラー
33 ご利用ガイド
34 パスワード再発行(入力ページ)
35 パスワード再発行(完了ページ)
36 パスワード変更(完了ページ)
37 商品購入/配送方法選択
38 商品購入/支払方法選択
39 商品購入/お届け先変更 shopping_shipping_change
40 商品購入/お届け先変更 shopping_shipping_edit_change
41 商品購入/お届け先の複数指定
42 MYページ/お届け先編集
EC-CUBE3のブロックとは

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

EC-CUBE3のブロック一覧(デフォルト)

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

1 ギャラリー
2 フリーエリア
3 新着商品
4 フッター
5 ロゴ
6 ログイン
7 新着情報
8 商品検索
9 カゴの中
10 カテゴリ
ページとブロックが理解できても編集は難しい

ご説明したとおり、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の仕様に合わせてデザインを変更することになり、作業の効率性が落ちる可能性がありますよ。

関連記事