４割はちょっと盛っていました。

1. ECサイトのコンテンツ制作効率を
"４割" 改善した話
・業務負荷軽減
・デザインコンポーネント化
・Vue.js導入
2019/8/5
報告者：パルシステム生活協同組合連合会 奥脇

2. コンテンツ制作がつらみ

3. 何で？
PCサイト SPサイト アプリ

4. ３サイト分の制作！
PCサイト SPサイト アプリ

5. ３サイト分の登録！
PCサイト SPサイト アプリなんとか改善できないか？

6. ECサイト関係者で検討した結果・・・

7. PC/SP/アプリ画面の共通化 !!
【工数削減目標】 ３３％削減（1/3工数減らす）
共通コンテンツ画面

8. どう進める？
① デザインコンポーネント化
② HTML５／CSS３導入
③ Vue.js導入

9. ①デザインコンポーネント化
１）デザインがサイト毎・画面毎でバラバラ
２）モック作成の工数大
（企画チーム・運用チームとの調整）
３）モックからの実装の工数大（取り込み難）
これまでの課題

10. デザインがサイト毎・画面毎でバラバラの例

11. ①デザインコンポーネント化
やる! ・AtomicDesign採用
・デザインの制約を企画チームに丁寧に説明
・企画/デザイン/開発チームの協業のしやす
さの土台を作る

12. どう進める？
① デザインコンポーネント化
② HTML５／CSS３導入
③ Vue.js導入

13. ②HTML5／CSS3導入
古い端末・ブラウザの利用者
問題２： Android4.0以上をサポート
問題１： 古い端末・ブラウザの利用者

14. ②HTML5／CSS3導入
古い端末・ブラウザの利用者
問題２： Android4.0以上をサポート
問題１： 古い端末・ブラウザの利用者
やる‼
・事前告知徹底／ログイン画面でアナウンス
・スマホアプリ（Android）はCrossWalkを導入

15. どう進める？
① デザインコンポーネント化
② HTML５／CSS３導入
③ Vue.js導入

16. 問題１： 古いフレームワークの利用
③Vue.js導入
問題２： Vue.jsは開発チーム未経験

17. 問題: 古いフレームワークの利用
③Vue.js導入
やる!!!
・適用範囲を絞る（一覧画面、詳細画面）
・標準化チームによるサポート体制強化

18. ③Vue.js導入
ちなみにVue.js採用理由
「当時（2017年）のトレンドであり、今後も勢いが増すと思われ
た」というのが一番の理由
・プログレッシブフレームワークで部分的な採用が可能
・単方向データバインディングが望ましい（×Angular）
・TypeScriptを即時採用できないと判断（×Angular）
・JSXを即時採用できないと判断（×React）

19. 2018年5月
プロジェクト始動

20. 開発スケジュール
要
件
定
義
設
計 受け
入れ
製
造
IT
ST
リ
リ
I
ス
2018年
5月 10月 7月 1月
2019年
4月 5月 5/27

21. デザイン面で注意したこと
１）バリエーションを安易に増やさない
２）コーディング方針やルールの可視化・文書化
３）Vueコンポーネント化の粒度や
バリエーションの決定を
開発チームと密に連携

22. 設計・実装面で注意したこと
１）設計書のテンプレ化
２）標準化チーム交えたレビューの徹底
３）不要な機能は廃止し、シンプルに
４）決定事項はちゃんと整理して
見える化（管理面）

23. 設計・実装面で起きた課題
１）設計書の記述レベルがまちまち
２）ITで障害が多く発生
３）Vue.js関連
・「前に戻る」で画面位置が最上部に
・テストコード作成に時間がかかる

24. ついでにレスポンス改善（年末の障害を受けて）
・SQLチューニング
・フロントで発行する
SQL設計の見直し

25. 2019年5月27日
リリース

26. リリース結果・・・
・大きな障害は無し
・問い合わせもほとんど無し
・商品一覧画面で「注文番号」を
表示しないようにしたことで
問合せ発生！！
→ 早急に再表示

27. レスポンス改善の結果・・・
・平均レスポンスが3s→1sと大幅改善
※ただし、Androidは端末性能の低い
ものは逆に遅くなった → 調査中
・DB負荷の高いSQLがほとんどなくなった
・読み込むJSが多すぎる
→ 精査していく

28. コンテンツ制作業務の効率は・・・
【結果】
約４割
作業工数削減
【目標】 ３３％の作業工数削減

29. 反省点・・・
・既存ドキュメントの質が低い
→ IT不具合が多発
・vue.js実装(実装/レビュー/PT)の手順が事前に
定義されていなかった
・既存ユーザが重視している情報を安易に
廃止してしまった

30. 今後どうしていくか？
・テスト品質向上
・ドキュメント整備
・TypeScriptを導入
・共通コンテンツ画面をスマホアプリの
TOP画面に適用（近々リリース予定）

31. まとめ
・業務負荷改善だけでなく保守性向上に繋がった
・Vue.jsは学習効率も良く当会にマッチしていた
・デザインコンポーネント化は当たり前
（もっと早くやっておけば良かった）