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