一般的なウェブサイトはページ単位でデザインを編集していきますが、EC-CUBEを使ってECサイトを構築する場合は「ページ」と「ブロック」という概念を理解しないとデザイン編集ができません。今回はEC-CUBE3でどのようなページが編集でき、どのようなブロックを設置することができるのかご紹介します。
EC-CUBE3で編集できるページ一覧（購入者側）
EC-CUBE３の購入者側ページ（フロント）でデフォルトで編集可能なページを下記にまとめました。この情報は管理画面の「コンテンツ管理」＞「ページ管理」からも確認することができます。また、ここに掲載されているものはデフォルトであって、カスタマイズで新たにページ設定することも可能です。
| 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ページ/お届け先編集 |
[amazonjs asin=”4899774389″ locale=”JP” tmpl=”Small” title=”EC-CUBE 3 店舗運営&デザインカスタマイズガイド”]
EC-CUBE3のブロックとは
上記ページ管理の「TOPページ」から「レイアウト編集」を選ぶと下記のようなレイアウト画面が表示されます。この中に「ロゴ」や「カゴの中」と記載されたグレーのエリアがいくつかありますが、これは「ブロック」と言われるものです。EC-CUBEではこのブロックをページ毎に配置して基本的なレイアウト（型）を決定します。その後、ブロック本体（部品）の中身をどうするのか決定します。
[amazonjs asin=”4883354148″ locale=”JP” tmpl=”Small” title=”ECサイト×ブランディング”]
EC-CUBE3のブロック一覧（デフォルト）
EC-CUBE3が標準で設置しているブロックは以下の通りです。ページと同様、ブロックも自由に追加することができます。ブロックを先に作ってしまえば、あとは各ページに配置するだけです。
| 1 | ギャラリー |
|---|---|
| 2 | フリーエリア |
| 3 | 新着商品 |
| 4 | フッター |
| 5 | ロゴ |
| 6 | ログイン |
| 7 | 新着情報 |
| 8 | 商品検索 |
| 9 | カゴの中 |
| 10 | カテゴリ |
[amazonjs asin=”4844366815″ locale=”JP” tmpl=”Small” title=”ネットで「女性」に売る 数字を上げる文章とデザインの基本原則”]
ページとブロックが理解できても編集は難しい
ご説明したとおり、EC-CUBE3を使ってECサイトを構築するには、
- まず基本となるページレイアウトを決定する
- 各ページに共通して配置する部品（ブロック）を決める
- 共通する部品（ブロック）の中身を決める
- 各ページに部品（ブロック）を配置していく
- 共通部分以外はページ単位で独自にデザインしていく
という流れでデザイン編集していきます。
ウェブ制作の作業レベルでは
- ページ単位のデザインを作成する
- ページ単位でコーディングする
- コーディングしたソースをブロック（部品）に切り分ける
- 切り分けたブロック（部品）をEC-CUBEに実装していく
となります。これは一般的なウェブサイト制作の流れとは異なりますので、デザイン・コーディングが出来るデザイナーであってもEC-CUBEを理解していない場合は対応が困難です。つまり、EC-CUBEでデザインを編集する場合は、必ずEC-CUBEを理解している人員が必要になります。ここがEC-CUBE利用のデメリットでもあります。
今後、皆さまがEC-CUBEを利用してECサイトを構築する場合、まずはEC-CUBEを理解している制作会社に声をかけましょう。デザインにこだわるのであれば、その制作会社にデザインの好みを伝え、最適なデザイナーを探してもらう方がスムーズに進行できます。最初にデザイナーに声をかけてしまうと、作業終盤でEC-CUBEの仕様に合わせてデザインを変更することになり、作業の効率性が落ちる可能性がありますよ。
