山本 一道 -> @kazumich 
1969年生まれ (45歳) 
高校2年と中学2年と妻の4人家族 
有限会社アップルップルの代表 
(私を含め10人のWeb制作会社)
2014年の        全国ツアー
テキストで書く時には「a-blog cms」 
全部小文字でお願いします 
読み方は「エーブログ シーエムエス」 
ハッシュタグ 
#ablogcms
今日はどんな人が 
参加してるの?
職種 
デザイナー 
マークアップ 
プログラマ 
ディレクタその他
その他 
13% 
デザイナー 
33% 職種 
プログラマ 
33% 
マークアップ 
ディレクター 
13% 
7% 
青森
HTML・CSS 
無理苦手できる得意
できる 
25% 
得意 
75% 
HTML 
CSS 
青森
PHP 
無理苦手できる得意
無理 
25% 
得意 
25% 
苦手 
17% できる 
33% 
PHP 
青森
マークアップエンジニアのための国産CMS 
5つの特徴
phpの知識が無くても 
カスタマイズ可能
phpの知識が無くても 
カスタマイズ可能
phpの知識が無くても 
カスタマイズ可能
phpの知識が無くても 
カスタマイズ可能
phpの知識が無くても 
カスタマイズ可能
phpの知識が無くても 
カスタマイズ可能
phpの知識が無くても 
カスタマイズ可能
phpの知識があれば! 
カスタマイズも可能 
/php/ACMS/User
phpの知識があれば! 
カスタマイズも可能 
https://github.com/appleple/ablogcms-public
WYSIWYGを利用しない 
記事投稿フォーム
WYSIWYGを利用しない 
記事投稿フォーム
WYSIWYGを利用しない 
記事投稿フォーム
WYSIWYGを利用しない 
記事投稿フォーム 
Demo
自由にデザインできる 
カスタムフィールド
自由にデザインできる 
カスタムフィールド
自由にデザインできる 
カスタムフィールド
自由にデザインできる 
カスタムフィールド 
Demo
静的サイトと同様に作る 
事が出来るテンプレート
静的サイトと同様に作る事が出来るテンプレート 
index.html 
company products news recruit contact
静的サイトと同様に作る事が出来るテンプレート 
recruit
静的サイトと同様に作る事が出来るテンプレート 
index.html 
recruit1.html recruit2.html recruit3.html 
recruit
静的サイトと同様に作る事が出来るテンプレート 
index.html 
recruit1.html recruit2.html recruit3.html 
recruit
静的サイトと同様に作る事が出来るテンプレート 
一覧ページ 
index.html 
詳細ページ 
recruit1.html 
recruit
静的サイトと同様に作る事が出来るテンプレート 
一覧ページ 
index.html 
詳細ページ 
entry.html 
recruit
静的サイトと同様に作る事が出来るテンプレート 
index.html 
index.html 
entry.html 
company products news recruit contact
静的サイトと同様に作る事が出来るテンプレート 
index.html 
top.html 
index.html 
entry.html 
company products news recruit contact
静的サイトと同様に作る事が出来るテンプレート 
top.html 
index.html entry.html 
company products news recruit contact
静的サイトと同様に作る事が出来るテンプレート 
top.html 
index.html entry.html 
company products news recruit contact
静的サイトと同様に作る事が出来るテンプレート 
top.html 
index.html entry.html 
index.html 
entry.html 
company products news contact
静的サイトと同様に作る 
事が出来るテンプレート 
Demo
マルチデバイス対応
マルチデバイス対応
マルチデバイス対応 
投稿用 iOSアプリ 
も便利です。
5つの特徴 
phpの知識が無くてもカスタマイズ可能 
WYSIWYGを利用しない記事投稿フォーム 
自由にデザインできるカスタムフィールド 
静的サイトと同様に作る事が出来るテンプレート 
マルチデバイス対応
Web制作ワークフローの紹介
その前に 
2つのWebサイト制作方法
2つのWebサイト制作方法 
全体をCMS化部分的にCMS化
この部分をCMSで更新可能に
どれくらいで出来る?
Demo
2つのWebサイト制作方法 
全体をCMS化部分的にCMS化
今のWeb制作のワークフロー
一般的なWeb制作のワークフロー 
設計デザインマークアップCMS実装登録 
直列で順に作業するので時間がかかる 
管理画面にアクセスできるのは随分後の方
アップルップルのワークフロー
アップルップルのワークフロー 
設計 
CMS実装登録 
デザインマークアップ
CMSプロトタイピング
CMSプロトタイピング 
CMSの実装を先に行い、クライア 
ントと早いタイミングから完成時 
の管理画面や公開側のページ情報 
を共有する開発手法 
開発に専念してて 
困った時だけお手伝い
アップルップルのワークフロー 
設計 
CMS実装登録 
デザインマークアップ
デザインとCMS実装 
の並行作業 
制作時間の短縮
アップルップルのワークフロー 
設計 
CMS実装登録 
デザインマークアップ
CMSプロトタイプを見ながら 
デザインができる 
用意するカンプに漏れがなく 
配置する要素も確実に分かる
アップルップルのワークフロー 
設計 
CMS実装登録 
デザインマークアップ
早いタイミングでの 
データ登録が可能 
クライアントさん自身に 
登録してもらう事も可能
アップルップルのワークフロー 
設計 
CMS実装登録 
デザインマークアップ
アップルップルのワークフロー
ソーシャルログイン機能
並列承認機能
復活!カート機能
カスタムユニット
メディアユニット
まとめ
CMSプロトタイピング 
設計 
CMS実装登録 
デザインマークアップ
HTML+CSSだけで 
カスタマイズ可能
できそうな気がしませんか?
まずは一度使ってみて下さい 
ありがとうございました!

WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー