EC-CUBE次期バージョン 3.nの最新機能の代表例をご紹介します。

1. EC-CUBE3.n 最新機能紹介

2. アジェンダ：最新機能紹介（代表的なところ）
・デザインカスタマイズがかなりやりやすくなる件
・管理画面がかなり使いやすくなる件
・出荷作業がかなりやりやすくなる件
・プラグインがかなり買いやすくなる件

3. デザインカスタマイズが
かなりやりやすくなる件

4. デザインカスタマイズがかなりやりやすくなる件
1. スタイルガイド
2. コードエディタ

5. 1.スタイルガイド

6. スタイルガイドとは？
スタイルガイドは、あらかじめデザインされた要素やグラフィッ
ク、ルールなどを集約したもの。
EC-CUBE 3.0.xではbootstrap（CSSフレームワーク）自体を拡
張しており、再利用性が低いことや、規約が整備されていない等、
理解しにくいなどの課題がありました。
今回のスタイルガイドは、その課題を解消し、EC-CUBEでのデ
ザインカスタマイズをより簡単に行えるよう設計しました。

7. EC-CUBE スタイルガイド
• HTML/CSSのパーツ集
• ECサイト特有のデザイン・パーツを整理
• コピペしてそのまま使える
• EC-CUBEに限らず単独でも利用可能

8. EC-CUBE スタイルガイド例：ボタン
<div class="ec-inlineBtn">住所検索</div>
<div class="ec-inlineBtn--primary">もっと見る</div>
<div class="ec-inlineBtn--action">カートに入れる</div>
<div class="ec-inlineBtn--cancel">キャンセル</div>

9. EC-CUBE スタイルガイド例：テキスト(太字)
<p class="ec-font-bold">この季節にぴったりな商品をご用意しました</p>

10. EC-CUBE スタイルガイド例：フォントサイズ
<div class="ec-font-size-1">さわやかな日差しが過ごしやすい季節</div>
<div class="ec-font-size-2">さわやかな日差しが過ごしやすい季節</div>
<div class="ec-font-size-3">さわやかな日差しが過ごしやすい季節</div>
<div class="ec-font-size-4">さわやかな日差しが過ごしやすい季節</div>
<div class="ec-font-size-5">さわやかな日差しが過ごしやすい季節</div>
<div class="ec-font-size-6">さわやかな日差しが過ごしやすい季節</div>

11. コンポーネント設計
コンポーネント設計及び CSS の記述方針については FLOCSS を採用して
います。
• FLOCSS
• https://github.com/hiloki/flocss
• コンポーネント要素に関しては .ec-xxx 接頭辞を採用
• プロジェクト要素に関しては .ec-xxxRole 接頭辞、接尾辞を採用
• ユーティリティに関しては使用しない

12. スタイルガイド：DEMO
http://eccube3-styleguide-dev.herokuapp.com/

13. 2.コードエディタ

14. コードエディタとは？
HTMLエディターではHTMLタグ挿入補助
（スニペット）機能やHTMLコードの構文
チェック機能などを備えています。

15. ページ管理機能 HTML入力画面比較（3.0と3.n）
EC-CUBE3.0 EC-CUBE3.n

16. 管理画面が
かなり使いやすくなる件

17. 3.nで管理画面のUIを全面刷新
• PCファースト
• 利用者層をPCメインに想定（3.0はスマホで使うことも想定）
• 情報整理・統一
• 表示や操作感のばらつきを統一
• 1画面内の情報量増加
• チュートリアル機能を追加
• 一括処理機能を追加
• ホームのブロック化 など

18. デザインガイド（デザインを全て1から設計しなおし）

19. デザインガイド（画面構成要素の再設計）

20. デザインガイド（カラーバリエーションの再設計）

21. デザインガイド（アイコンの統一・再設計）

22. EC-CUBE3.n 新管理画面DEMO
https://projects.invisionapp.com/share/9GD2X7SA8
• PCファースト
• 利用者層をPCメインに想定（3.0はスマホで使うことも想定）
• 情報整理・統一
• 表示や操作感のばらつきを統一
• 1画面内の情報量増加
• チュートリアル機能を追加
• 一括処理機能を追加
• ホームのブロック化 など

23. 出荷作業が
かなりやりやすくなる件

24. 出荷作業とは
商品が売れてから発送するまでの業務。
ショップ運営で最も行う頻度の高い作業。
⇒大きく改善したい

25. 出荷管理機能の特徴
・配送処理の「一括処理」に対応
⇒ステータス変更、メール送付
・受注ごとではなく「配送ごと」の処理が可能
⇒1受注で複数配送する場合でも一覧画面で対応可能
⇒CSV出力も出荷処理専用のピッキングリストに

26. 出荷管理：DEMO
https://projects.invisionapp.com/share/9GD2X7SA8/

27. プラグインの購入が
かなりやりやすくなる件

28. EC-CUBE本体とオーナーズストアが連携
EC-CUBE内でプラグインの検索からインストールまで
シームレスに行えるようにする。
・ユーザーの利便性向上
・プラグイン制作者のビジネス機会創出
※プラグインの安定性向上・競合しにくい仕組み等
EC-CUBE本体側での改善もあり、よりプラグイン自体
を簡単・安心に使っていただける状態になります。

29. オーナーズストア連携：DEMO

30. まとめ

31. 機能としても大幅改善！
よりオリジナルのサイトを作りやすく。
さらに、運用コストも大幅に削減。
・デザインカスタマイズがかなりやりやすく
・管理画面がかなり使いやすく
・出荷作業がかなりやりやすく
・プラグインがかなり買いやすく 等
EC-CUBE次期バージョン3.nでは、
その他、多くの改善・機能追加を実施する意欲的なバージョン！

32. Thanks
＃eccube