進化を遂げたCS-CART3のリリースが決定!一足お先に使ってみましたレビュー

cs-cart3deta
つ、、つ、っ遂に!進化を遂げたCS-CART バージョン3 がリリースされますよ(8月末)お待ちかねですな。('A')n

以前から特集させていただいているショッピングカート機能はもちろんの事、960グリッドシステムを採用して直感的な操作が可能となり、ブログやランディングの作成などCMSとしての活用もでき、無料版(フリー)で利用が可能というボリュームでございます。

今回は気になる日本語版の情報と、お願いしたらリリース前のRC版をもらえたので、インストールや触ってみた感想などを書いてみました。
【CS-Cart】 ネットショップを始めるなら、このショッピングカート!

CS-CART3の凄まじい進化

うちのブログで紹介した記事を読んでいる方は、大体どのくらい進化しているのか知っているとは思うのですが、一応おさらいしておきましょう。

nodu002285_thumb
960グリッドシステムを採用したCS-CART ver3が登場!デモや今後の開発について、その2|susi-paku ブログ

ちょうど、半年前くらいの記事ですねー。バージョン3からのデフォルトテンプレートがAppleっぽいデザインに変更となり、全体的にスタイリッシュになったイメージです。

↓ こちらがバージョン2のデフォルトテンプレート

ver2defo

バージョン1の頃よりは見やすくなったけれど、カスタマイズしないとちょっとごちゃごちゃしている感じがするよね。

↓ んでバージョン3のデフォルトテンプレートはこれ

 

ver3defo

インターフェイスはガラッと変わって、必要最低限の内容を魅せるデザインとなりましたね。メガメニューが採用されたのは大きいですな。('A')

以前のデザインは魅せれるレベルになるまで、ある程度作りこまなくてはならなかった(CSSいじったり)ので、Web制作に関わった事がない人にとってはカスタマイズするのは結構しんどかったと思います。(特にショップオーナー)今回のバージョン3では「デフォルトテンプレートをそのまんま利用するだけでいいんじゃね?」という感じで洗練されており、配色変えたり画像を差し替える程度でデザインできるのは大きなメリットでしょう。

slider
http://demo.cs-cart.jp/

既に公式デモページはCS-CART 3 に差し替えられております。トップページのスライドショーも増えており(Ver2にもあったのですがしょぼかった・・・望月さんのアドオンもしくは、htmlブロックでjQuery入れないと正直、見栄えが・・・)そのあたりのアップデートも個人的にはうれしい部分です。

ひとあしお先にVer3を導入して使ってみます。

先日、CS-CARTの中の人(中安さん)にお願いしたらRC版をいただけたので、バージョン3からCS-CARTをいじろうと検討中の人ためにも導入方法からやってみます。('A')

instalgamen

ファイルをサーバーにアップした後、表示されるインストールウィザード画面ですね。ナビゲーションがついてわかりやすくなっております。('A')

dosakankyo

PHPは5.2以上とCS-CART2.2系からはあまり変わっておりませんね。

kihonsettei

基本設定に必要事項を入力。

gaikansettei

外観の設定は、バージョン3用のデフォルトテンプレート1つでした。今後どんどん追加されていくようなので楽しみですね。(フリー版はこのテンプレだけ)

lice

今度からライセンス認証のページが追加されました。フリーもプロ版もライセンス管理しているはずなので入力は必須なのかな。

っと、以上がインストールはここまで

管理者メニューを確認する。

さっそくログインして管理者メニューページに入りましょう。

kanrisya

上段メニューの内容はVer2とほとんど変わっていませんね。Ver2から馴染んだ人にとってはうれしい設計です!では、Ver3から大幅に変更となったブロック管理を確認してみましょう。

nodu000491

↓ Ver2 の時はこのようにブロック幅はカラム指定された中で行う形でした。

izennoblock

↓ Ver3 ではグリッド幅に合わせて横幅をカスタムできるようになっています。

 

blockver3

なんだか、スマホ向けにレスポンシブアドオンとか出てきそうだよね。DW CS6 の可変グリッドのように編集できる感じです。どういうことかと言うと、

960

横幅960px を16等分して各ブロックを好きなグリッド(ボックス)で表示する事ができるわけです。(16でなくても12でも構築できたりします。)以前のバージョンでは幅設定やカラムなどCSS側から値を設定しなくてはならなく、多少な知識も必要だったので意外としんどかったのですが、今回から視覚的に操作する事ができるわけです。

これが今回から追加されたグリッドという仕組みですね。では、軽く追加してみましょう。

glid

グリッドの追加ボタンを押します。

glidhaba

グリッドはどのくらいの横幅にするのか数値で入力する事ができます。分割して表示させたい場合(2カラム)は16を最大値として左カラム4の右カラム12とかにするとわかりやすいね。('A') 以前はデザイナーさんの仕事だった部分がショップオーナー側が操作できるのは大きな進化です。

ブロックの管理
上記説明させていただいたグリッドという表示領域の管理とボックスというコンテンツを表示させる2種類が存在します。まず、グリッドで表示領域を作成したあと

blocknotuika

ブロックの追加という項目が表示されます。(グリッド内じゃないと表示されない)

htmlblock

以前のバージョン使っていた人から「うぉー超わかりやすい!」っという雄叫びが聞こえてきそうな予感のUIです。

ブロックでどのコンテンツを表示させるかボタン一つでわかる仕組みです。多分最も多様するであろうHTMLブロックもここから追加する事ができます。(今後アドオンでエントリーブロック、SNSブロック、とか増えたら使いやすいよね。)

 

スライドショーの追加

今回からトップページのスライド(カルーセル)が追加されたので、それを編集してみましょう。

cs-cart
http://demo.cs-cart.jp/ この部分ね。)

topslide

ブロックのメニューからトップページを選ぶと、トップページのブロック構成が表示されます。ここのメインバナーという箇所がスライド(カルーセル)の場所なので、ブロックオプションを選択します。

maibana

一般項目では表示感覚(スライドする時間)などを選択する事ができます。次にとなりのコンテンツを確認してみましょう。

kontentsu

表示内容が最新となり、登録されたバナーのうち上限3つが切り替わりながら表示されることになっています。既に登録されているバナーを使うのもアレなのでオリジナルのバナーを表示させてみましょう。

 

nodu000492

上段メニューからバナーを選択。

banatuika

ここにキャンペーンのバナーがまとめて格納されています。(ここにオリジナルのバナーを追加します。※すべて画像で作成)

deza

2012年11/10~東京ビッグサイトでデザインフェスタに出るのでついでに告知バナーを作ってみました。
アートイベント デザイン・フェスタ | Art Event Design Festa

では、このバナーの追加をクリック。
dezafes

URLも指定できるのでブログとかLPに飛ぶようにする事も可能だね。バナーに追加されたのを確認して先ほどのブロック編集に戻ります。

blockgamen

コンテンツの項目を開き、表示内容を手動に変更してバナーの追加からオリジナルバナーを選択!

 

hyouji

トップページに表示されましたね。うれしいですな。('A')

まとめ

っというわけで超長くなってしまったCS-CART3のレビューでございました。以前と変わらない項目はそのままで、直感的に操作できるようになったポイントは大きいですね。

公式からの発表もあるように、発売は8月末だそうです。今後は安定版のVer2の開発は終了されていく方向ですが、Ver3と両方ダウンロードできるようになるとのこと。あと、Ver2のモバイルアドオンも完成間近だそうです。('A')っ CS-CART のスマホアドオン(ベータ)がついに登場!洗練されたUIなど、導入してみたレビュー|susi-paku ブログ

基本無料(フリー)で利用できるCS-CART3ですが、本格的に利用したいユーザーさん向けにプロ版がプレオーダー期間として5000円安く販売されるとのこと。8/20~8/28 まで39,800円のところ、34,800円になるそうです。新規検討を考えている方はこの機会に是非だね。

pure
CS-Cart version3 [プロ版 / フリー版] 8月末リリース決定! | CS-Cart.jp開発者ブログ

CS-CART3のリリースによりEC-CUBEさんあたりがどの程度食いつくのか見ものです。今後はECだけでなくCMSの構築など新しい可能性が増して「ライバルはWPです(ドヤッ)」となるアドオンをyukiさん が作ってくれるはずと期待しましょう。(?)('A')ノおしまい