制作会社アラタナが公開するEC-CUBEのデザイン基礎からカスタマイズノウハウ

弊社は設立当初からEC-CUBEのカスタマイズを行ってきておりまして、

早2年3ヶ月が経とうとしています。

そして、これまで培ってきたEC-CUBEノウハウを詰め込みまくった「カゴラボ3」を7月27日にリリースしました!!



まず、カゴラボ3では管理画面の使いやすさにこだわりました。

デザインはEC-CUBEデフォルトの使いやすさを生かしながら、XHTML化を実施。

その際、グローバルメニューなどを画像からテキストに変更しています。

また、管理画面の幅も若干広くしています。
ダイジェストで変更点をご紹介いたします。

<8/24 以下のリンク切れが発生しておりましたが、修正しました。ご迷惑おかけいたしました。>

1. 管理画面ログイン
   
2. 管理画面のXHTML化～EC-CUBEデフォルトの使いやすさそのままに～
   
3. 休日管理の一元化～定休曜日と営業日設定～
   
4. サイト管理設定の充実化～ポイント有無の設定などが容易に～
   
5. SEO管理の充実化～Google Analytics等のタグも容易に設置可～
   
6. カテゴリ管理の充実化
   
7. 商品管理の改善～1画面で処理できる仕組み～
   
8. 別ウィンドウで商品登録～検索結果保持が可能～
   
9. 規格管理も別ウィンドウで～ハング時にも対応～
   
10. 選んだ規格だけの情報を修正できる在庫管理
    
11. 管理画面から会員登録可能～実店舗の顧客登録にも～
    
12. 管理画面からすぐにほしい機能が買えるカスタムストア
    
13. 充実した携帯サイトデザイン管理
    
14. 携帯サイトでサムネイル表示～resize_image.phpを使わず～
    
15. カートの中でもサムネイル表
    
16. ポイント利用や備考など、PC側並みの機能充実

ログイン画面はこんな感じです。

特別なところは特にありませんが、
全体的な色としては目が疲れないように
カゴラボのメインカラーである藍色を濃くしたものを選びました。

管理画面トップです。

大きなレイアウトの変更はありませんが、XHTML化を実施しています。
画像も極力減らし、グローバルメニューもテキストになっています。

これによりブラウジングがスムーズになるだけでなく、
将来的に多言語対応したくなった場合も言語毎のデータを用意すれば切り替えがしやすくなる工夫も実施しています。

まだ準備段階で完全には実装はしていませんが、
データベース側に管理画面のナビゲーション名や
管理画面のすべてのページ名、URLなどを
データベース側に持たせていますので、
これを多言語用に管理できるようにすれば、
面白いことができるようなりそうです。

細かいところではありますが、デフォルトのEC-CUBEではSHOPマスタのところで定休曜日の設定をし、
定休日の設定は定休日管理でやるようになっています。

カゴラボ3では、休日管理を1ページにまとめました。

また、定休曜日として設定(たとえば日曜日)しているけれども、
この日曜日だけは休みにしたくない、
と言った場合はその日だけ営業日登録することで休み表示されないようにカスタムしています。

ポイントON/OFFなどは2.4系からパラメータ設定で設定すれば可能になりました。
しかしながら、パラメータ設定は非常にたくさんの設定項目があることから、慣れていない方はなかなか変更が大変です。

そこでカゴラボ3ではサイト管理設定から定数のtrue、falseの切り替えが実施できるようカスタム。
これによってポイント以外の他のパラメータであってもON、OFFなどが容易にできる仕組みができました。

デフォルトのEC-CUBEでは、SEO管理で管理できるのはトップ、商品一覧、商品詳細、マイページのメタタグ項目である
Author、Description、Keywordsだけです。
カゴラボ3では、トップページのタイトルを任意に決定できるようにし(入力しない場合は店舗名など)、
こだわりのある店舗様であっても対応できます。

また、上記のメタタグ設定は、サイト全体用に1項目ずつだけ用意し、
その他はカテゴリ管理や商品詳細ページで任意のタイトル、メタタグ柔軟にが出せるようにし、
入力が億劫な店舗様の場合でも適切なメタタグがでるよう調整されています。

このSEO管理は各種トラッキングコード管理も兼ね備えていて、
Google Analyticsやオーバーチュアなどのコードを
貼り付けるだけでよいフォームを用意しました。

カテゴリ説明や任意のタイトルタグ設定、keyword、descriptionが設定できます。
省略した場合はタイトルタグにはカテゴリ名、keyword、descriptionにはサイト全体の設定が反映されます。

公開・非公開だけを変更したい場合は編集からでなく、一覧から状態を1クリックするだけで変更可能にしました。
その他の詳しいことは、これから説明していきます。

商品情報を変更しようとすると、商品マスタ→条件指定して検索→編集→確認→完了→続けて変更しようとおもうと商品マスタにもどって再度検索する必要があり大変でした。
要するに、商品情報を修正する場合に再検索するのが面倒なのです。

そこで、検索結果を維持しながら編集できるようにしよう!と考えた結果、別ウィンドウで編集を開けるようにしました。
別ウィンドウは各商品毎に別個に開きます。

情報を変更すると親ウィンドウである商品マスタが自動的にリロードされ、最新情報が表示されます。
その際にも検索結果は維持されます。

ちなみに、別ウィンドウがややこしいと思われる場合は、デフォルトのページ遷移に戻せるようになっています。

商品に選択している規格の分類数が多くなると、規格変更画面が表示するまでのあいだブラウザが拘束されてしまいます。
こちらも別ウィンドウにすることでメインのブラウザは拘束されません。

規格数が多くなると、表示するまでのあいだブラウザが拘束されてしまいます。

これをどうにか解決できる方法がないかといろいろとアイデアを練っていたところ、規格を変更する場合というのは、ほとんどの場合在庫を変更したり、セールの為に金額変更することが多いことに気が付きました。

そこでカゴラボ3では「在庫管理」というものを規格管理と別にご用意。
規格管理で選択(チェック)したものだけを表示するから、
表示速度も速く、在庫数や価格の変更なども規格管理から変更するよりも
断然楽になりました。

規格がない場合でも在庫変更などはこの画面で実施できるので、
編集から変更するよりもこちらの方がすぐに反映されますので、楽かと思います。

管理画面から顧客情報を登録できるようになっています。
その際、実店舗会員か、WEB会員か選択できるようになっており、
メルマガ管理などで実店舗会員向け、
WEB会員向けが選択できるなどのカスタムを実施しています。

弊社はEC-CUBEのカスタマイズを得意としておりますが、
そのことをすべてのお客様に認識して頂くには様々な課題がありました。
そこで、管理画面に弊社が運営するカスタムストアを呼び出せるようにすることで、
「iTunes Music Store」のように気軽に追加できる機能をご確認いただけるようにしました。

カゴラボ3では管理画面から携帯サイトの管理ができます。
新規ページ作成やヘッダー・フッター設定が可能なので、
セッションが途切れることがなく、柔軟に携帯サイトを充実化できます。

また、ご利用ガイドのテンプレートなども管理画面から編集できます。

ちょっと前まで、EC-CUBEの携帯サイトでサムネイル表示するのは少しコツがいったのですが、
最近では当たり前になってきました。

そのほとんどはresize_image.phpといわれれる画像を縮小するPHPを使う方法だったのですが、
これが意外と負荷になっているんじゃないか?と思われてきました(実証はありません)。

そこで、商品一覧画像のさらに一回り小さな画像を登録できるようにカスタムし、
それを変換無しで表示するようにしています。

HDD容量は多少圧迫しますが、昨今のレンタルサーバーの容量事情を見ていれば気にならない程度でしょう。

細かいところですが、携帯サイトのカートの中でもサムネイル表示できます。
デフォルトでは文字だけのページなので、まずはこういうところから
充実化していくと、携帯サイトもボリュームが出ていい感じです。

デフォルトの携帯サイトではポイントの利用や備考欄などがありません。
これも漏らさず実装し、PCサイトと機能の差がないようにカスタムしています。

如何でしたでしょうか?EC-CUBEって本当にいろんなことできるんですね。
EC-CUBE2.4.1が公開されたのが7月8日で、7月27日にカゴラボ3をリリースしました。
少しずつデバッグなども重ねましたが、大枠は2週間ほどで完成しました。
それもこれもEC-CUBEという素晴らしいベースがあったからこそです。

今回のカゴラボ3というパッケージでは、デフォルトの使いにくいと思われるところを改修していますが、
XTHML化するときに気をつけたのは、
EC-CUBEの日本人好みの管理画面デザインを損なわないようにすることでした。

今回は管理画面に重点を置いてご説明いたしましたが、
いずれフロント画面などもお見せできればと思います。
また、いつの日か汎用的な部分はEC-CUBEにフィードバックできればと思っています。

最後になりましたが、この管理画面を限定的に公開しようと考えています。

見るだけで真似をされてしまうような機能もあることから正直悩んだのですが、
EC-CUBEをもっと使いこなして充実化していきたいとお考えの方々に、
いい刺激やもっと使いやすくするいいアイデアが生まれたならば、
EC-CUBEの将来にとって良いことだということに至りました。

しかし、あまり管理上の問題で沢山の方にお見せすることはできないので、
期間限定、人数限定でお見せしたいと思っています。先着順を考えております。

ご希望の方はお早めにお問合せフォームからご連絡ください。
(現在、定員に達したため、募集を中止しています。別の機会にお願いいたします。)


現在のところどのくらい反応があるかわからないので、様子をみさせて頂き、お返事致します。
返事が来なかった方は・・・ごめんなさい^^;