AI時代到来と言われ、自分たちの仕事がなくなるのではないかとびくびくされている方も多いかと思います。 今後、制作費は圧倒的に圧縮され、費用を投下される部分が、コンサルティングやマネージメントに移行していく中、ワークフローも変化を求められている事は否めません。 Webの世界でも目まぐるしい変化があり、徐々にワークスタイルもワークフローも変わりつつあるのが現状です。 いわゆる「ホームページ」も、CMSを利用する事が当たり前となってきましたが、その上で、最速のワークフローを実現していく事が課題となる事は想像がつきます。 このセッションでは、Web制作に関わる人をターゲットとして、CMSを利用した一つのワークフローを例にとり「これからのWeb」を共有したいと思います。

1. CMSを利用した
Webサイト構築の
次世代ワークフローを考える

2. 自己紹介
1.WHO ARE YOU

3. 江頭 竜二
Catchup, Inc CEO
baserCMS Deveropper
http://ryuring.com
@ryuring

4. 江頭 竜二
CAREER
バーテンダー(1)
銀行員(0.4)
ガソリンスタンドマン(6)
プログラマー(5)
デザイナー(1)
プログラマー(3)
プロデューサー(6)
Catchup, Inc CEO
baserCMS Deveropper
http://ryuring.com
@ryuring

5. システム開発をメインとしたWeb制作会社
10名+αで約30案件を同時進行でこなす
案件レンジ：10万円～700万円
オープンソースCMS「baserCMS」の開発元

6. はじめに
2.INTRODUCTION

7. ご注意
今回のお話しは、決済フローの話ではありません。
ex. 公開承認ワークフロー...

8. WORKFLOW
ワークフローは、リソース（資源）を体系的に組織化
した反復可能な業務活動のパターンである。
ワークフローは、物質の加工、サービスの提供、情報
の処理など、何らかの具体的意図をもって設計される。
ワークフローは、例えば、操作の列、個人またはグ
ループの定まった作業、従業員の組織、複数の機械の
機構などで表現しうる。
出展：ウィキペディア

9. Webサイト構築
ワークフローの変化
3.CHANGE

10. インターネット創生期
（1990年～）

11. 存在する事に意義がある
サイト設計 リリース制作
設計 制作

12. デザインによる差別化
サイト設計 リリースデザイン 制作
設計 制作

13. 成果定義と戦略
与件整理
目標
明確化
戦略策定
サイト
設計
デザイン 制作 リリース
設計 制作コンサル

14. CMSの登場
（2001年～）

15. スピーディな情報発信
与件整理
目標
明確化
戦略策定
サイト
設計
デザイン
開発
データ
投入
設計
制作
コンサル
システム
設計
制作 リリース

16. スマートフォンの台頭
（2011年～）

17. UXによる価値提供と検証・改善
与件整理
目標
明確化
戦略策定
サイト
設計
デザイン
開発
データ
投入
設計
制作
コンサル
制作 リリース
ユーザー
体験
シナリオ
PDCA
運用
システム
設計

18. コンテンツマーケティングによる
潜在顧客の獲得とファンの定着化
与件整理
目標
明確化
戦略策定
コンテンツ
設計
デザイン
開発
データ
投入
設計
制作
コンサル
システム
設計
制作 リリース
ユーザー
体験
シナリオ
PDCA
運用
戦術策定
サイト
設計

19. コンテンツマーケティングによる
潜在顧客の獲得とファンの定着化
与件整理
目標
明確化
戦略策定
コンテンツ
設計
デザイン
開発
データ
投入
設計
制作
コンサル
システム
設計
制作 リリース
ユーザー
体験
シナリオ
PDCA
運用
戦術策定
サイト
設計全体的なワークフローは複雑化し
制作者に求められる役割も
二極化していく事が予想される

20. 制作者に求められる役割
4.ROLE REQUIRED

21. 1. ビジネスに寄り添う
作るだけでなくビジネスを一緒に考える
コンサルティング
ファシリテーション

22. 2. 制作にさらに特化する
最速の制作ワークフローを実現していく
予算圧縮
工期圧縮

23. 最速の制作ワークフローを
実現するためのとりくみ
5. FASTEST WARKFLOW

25. 制作ワークフローとは？
与件整理
目標
明確化
戦略策定
コンテンツ
設計
デザイン
開発
データ
投入
設計
制作
コンサル
システム
設計
制作 リリース
ユーザー
体験
シナリオ
PDCA
運用
戦術策定
サイト
設計

26. 与件整理
目標
明確化
戦略策定
コンテンツ
設計
デザイン
開発
データ
投入
設計
制作
コンサル
システム
設計
制作 リリース
ユーザー
体験
シナリオ
PDCA
運用
戦術策定
サイト
設計
制作ワークフローとは？

27. デザイン
CMS開発
トップ・ベース
HTML制作
従来のCMSを利用した
具体的な制作ワークフロー
結合
データ投入
リリース
テスト
下層ページ
HTML制作

28. デザイン
CMS開発
トップ・ベース
HTML制作
従来のCMSを利用した
具体的な制作ワークフロー
結合
データ投入
リリース
テスト
下層ページ
HTML制作
一番時間のかかる
工程を前倒しにしたい

29. デザイン
CMS開発
トップ・ベース
HTML制作
工期を短縮するための
制作ワークフロー
結合
データ投入
リリース
テスト
下層HTMLコーディング
を無くし、CMSに直接
データを投入する

30. 「CMSにデータを登録する」とは？
HTMLができあがる前に
コンテンツ本体部分を
CMSに登録していく

31. CMSに直接データを投入する際の問題点
デザインやCSSが出来上がっていないので
完成したレイアウトがイメージできない。
ダミーのCSS等でレイアウトを実現できたとしても、
デザイン組み込み後に崩れる可能性がある。

32. コンテンツをコンポーネント化する事で
問題を解決する

33. 画像右寄せ
コンテンツの要素を
ブロックレベルでパターン化する
テキスト二段組
テキスト三段組

34. 画像三段組
コンテンツの要素を
ブロックレベルでパターン化する
画像 ＋ テキスト
三段組

35. キノトロープ生田社長のコンポーネント化の話

36. パターン化されたブロックとして
コンテンツを登録
CMS

37. パターン化されたHTMLを出力
CMS

38. パターン化されたHTMLに合わせて
スタイルセットを準備

39. CMSで出力するコンテンツの本体部分を
全体のデザインと分けて考えて後から結合

40. CMSで出力するコンテンツの本体部分を
全体のデザインと分けて考えて後から結合

41. デザイン
CMS開発
トップ・ベース
HTML制作
工期を短縮するための
制作ワークフロー
結合
データ投入
リリース
テスト
下層HTMLコーディング
を無くし、CMSに直接
データを投入する

42. CMSごとのブロックエディタ

44. Gutenbergプラグイン

46. Panels プラグイン

48. 日本国内で、Webサイトの制作プラットフォームとして、日本人の為
に開発されているCMS。フレームワークにCakePHPを採用する事に
より非常に柔軟性とメンテナンス性が高いのが特徴。
ダウンロード数：約１７万回
搭載サーバー：CPI、ロリポップ、さくらクラウド等

49. サイト全体を俯瞰できるコンテンツ管理機能により
CMS上でサイトマップ制作が可能

51. 2018/3/5
マイナーアップデート
v4.1.0
PHP 7.1系対応
国際化対応

53. デザイン
CMS開発
トップ・ベース
HTML制作
工期を短縮するための
制作ワークフロー
結合
データ投入
リリース
テスト
下層HTMLコーディング
を無くし、CMSに直接
データを投入する

54. さらにこんな取り組みも

56. ピクルスの機能
エクセルのサイトマップをインポート可能
ディレクターがワイヤーフレームを作る感覚でサイトを構築できる
ローカルアプリなので運営者が利用するCMSとしては機能しない
現在、baserCMSで取り込める形式の出力機能が開発されている

58. 設計と制作の融合

59. 設計と制作の融合
設計段階の成果物が
そのまま制作で利用できる事で工期を圧縮

60. 設計と制作の融合
設計段階の成果物が
そのまま制作で利用できる事で工期を圧縮
いかに完成イメージを早く見せて
手戻りをなくす事ができるか

61. 次世代のワークフロー
6. NEXT GENERATION

62. 次世代のワークフロー？

63. ？
次世代のワークフロー？

64. インターネットの恩恵で、
パソコンさえあれば、
誰とも会わずに仕事が完結できるようになり
すごく便利な時代になった。

65. さらに自動化は進み僕らの仕事は無くなってしまう？

66. そんな事はない。
だって、僕らは、「コラボレーション」する事で
新しい何かを生み出す事ができるはず。

67. やっぱり、会って話そう。
会って話す事でよりよいものが作り出せる。

68. まとめ
制作者はコンサルもやるか制作に特化するか
データ投入を早めに開始する事で最速ワークフロー
CMSのブロックエディタを活用しよう
次世代ワークフローは思いつかなかった
会って話そうよ

69. 告知
7. PROMOTION

71. Thanks !
Enjoy Your Community Life !
コミュニティ活動は
みなさんの人生をきっと豊かにするでしょう