WDHA#038 CMS会議 AOMORI で紹介した a-blog cms 2.1を活用したWeb制作のワークフロー のスライドです。

2. 山本 一道 -> @kazumich
1969年生まれ (45歳)
高校2年と中学2年と妻の4人家族
有限会社アップルップルの代表
（私を含め10人のWeb制作会社）

3. 2014年の 全国ツアー

8. テキストで書く時には「a-blog cms」
全部小文字でお願いします
読み方は「エーブログ シーエムエス」
ハッシュタグ
#ablogcms

9. 今日はどんな人が
参加してるの？

10. 職種
デザイナー
マークアップ
プログラマ
ディレクタその他

11. その他
13%
デザイナー
33% 職種
プログラマ
33%
マークアップ
ディレクター
13%
7%
青森

12. HTML・CSS
無理苦手できる得意

13. できる
25%
得意
75%
HTML
CSS
青森

14. PHP
無理苦手できる得意

15. 無理
25%
得意
25%
苦手
17% できる
33%
PHP
青森

16. マークアップエンジニアのための国産CMS
5つの特徴

17. phpの知識が無くても
カスタマイズ可能

18. phpの知識が無くても
カスタマイズ可能

19. phpの知識が無くても
カスタマイズ可能

20. phpの知識が無くても
カスタマイズ可能

21. phpの知識が無くても
カスタマイズ可能

22. phpの知識が無くても
カスタマイズ可能

23. phpの知識が無くても
カスタマイズ可能

24. phpの知識があれば！
カスタマイズも可能
/php/ACMS/User

25. phpの知識があれば！
カスタマイズも可能
https://github.com/appleple/ablogcms-public

26. WYSIWYGを利用しない
記事投稿フォーム

27. WYSIWYGを利用しない
記事投稿フォーム

28. WYSIWYGを利用しない
記事投稿フォーム

29. WYSIWYGを利用しない
記事投稿フォーム
Demo

30. 自由にデザインできる
カスタムフィールド

31. 自由にデザインできる
カスタムフィールド

32. 自由にデザインできる
カスタムフィールド

33. 自由にデザインできる
カスタムフィールド
Demo

34. 静的サイトと同様に作る
事が出来るテンプレート

36. 静的サイトと同様に作る事が出来るテンプレート
index.html
company products news recruit contact

37. 静的サイトと同様に作る事が出来るテンプレート
recruit

38. 静的サイトと同様に作る事が出来るテンプレート
index.html
recruit1.html recruit2.html recruit3.html
recruit

39. 静的サイトと同様に作る事が出来るテンプレート
index.html
recruit1.html recruit2.html recruit3.html
recruit

40. 静的サイトと同様に作る事が出来るテンプレート
一覧ページ
index.html
詳細ページ
recruit1.html
recruit

41. 静的サイトと同様に作る事が出来るテンプレート
一覧ページ
index.html
詳細ページ
entry.html
recruit

42. 静的サイトと同様に作る事が出来るテンプレート
index.html
index.html
entry.html
company products news recruit contact

43. 静的サイトと同様に作る事が出来るテンプレート
index.html
top.html
index.html
entry.html
company products news recruit contact

44. 静的サイトと同様に作る事が出来るテンプレート
top.html
index.html entry.html
company products news recruit contact

45. 静的サイトと同様に作る事が出来るテンプレート
top.html
index.html entry.html
company products news recruit contact

46. 静的サイトと同様に作る事が出来るテンプレート
top.html
index.html entry.html
index.html
entry.html
company products news contact

47. 静的サイトと同様に作る
事が出来るテンプレート
Demo

48. マルチデバイス対応

49. マルチデバイス対応

50. マルチデバイス対応
投稿用 iOSアプリ
も便利です。

51. 5つの特徴
phpの知識が無くてもカスタマイズ可能
WYSIWYGを利用しない記事投稿フォーム
自由にデザインできるカスタムフィールド
静的サイトと同様に作る事が出来るテンプレート
マルチデバイス対応

52. Web制作ワークフローの紹介

53. その前に
2つのWebサイト制作方法

54. 2つのWebサイト制作方法
全体をCMS化部分的にCMS化

55. この部分をCMSで更新可能に

56. どれくらいで出来る？

57. Demo

58. 2つのWebサイト制作方法
全体をCMS化部分的にCMS化

62. 今のWeb制作のワークフロー

63. 一般的なWeb制作のワークフロー
設計デザインマークアップCMS実装登録
直列で順に作業するので時間がかかる
管理画面にアクセスできるのは随分後の方

64. アップルップルのワークフロー

65. アップルップルのワークフロー
設計
CMS実装登録
デザインマークアップ

66. CMSプロトタイピング

67. CMSプロトタイピング
CMSの実装を先に行い、クライア
ントと早いタイミングから完成時
の管理画面や公開側のページ情報
を共有する開発手法
開発に専念してて
困った時だけお手伝い

68. アップルップルのワークフロー
設計
CMS実装登録
デザインマークアップ

69. デザインとCMS実装
の並行作業
制作時間の短縮

70. アップルップルのワークフロー
設計
CMS実装登録
デザインマークアップ

71. CMSプロトタイプを見ながら
デザインができる
用意するカンプに漏れがなく
配置する要素も確実に分かる

72. アップルップルのワークフロー
設計
CMS実装登録
デザインマークアップ

73. 早いタイミングでの
データ登録が可能
クライアントさん自身に
登録してもらう事も可能

74. アップルップルのワークフロー
設計
CMS実装登録
デザインマークアップ

75. アップルップルのワークフロー

77. ソーシャルログイン機能

78. 並列承認機能

79. 復活！カート機能

80. カスタムユニット

81. メディアユニット

82. まとめ

83. CMSプロトタイピング
設計
CMS実装登録
デザインマークアップ

84. HTML+CSSだけで
カスタマイズ可能

85. できそうな気がしませんか？

86. まずは一度使ってみて下さい
ありがとうございました！