CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化

2. CSSフレームワークと
CMSプロトタイプを使った
ワークフローの効率率率化
有限会社アップルップル 岩崎浩
2

3. CSSフレームワークとCMSプロトタイプを使ったワークフローの効率率率化
© 2014 appleple inc. All Rights Reserved.
はじめに
3

4. © 2014 appleple inc. All Rights Reserved.
PR協賛はじめに
有限会社アップルップル
Webエンジニア
岩崎 浩
!
http://www.h767676764.com
Facebook:764.iwasaki
4

5. © 2014 appleple inc. All Rights Reserved.
PR協賛
http://www.a-‐‑‒blogcms.jp/
はじめに
5

6. © 2014 appleple inc. All Rights Reserved.
PR協賛はじめに
流流れ
1. 既存のワークフローと問題点
2. アップルップルのワークフロー
3. CSSフレームワークとCMSプロトタイプ
4. メリット、デメリット
6

7. CSSフレームワークとCMSプロトタイプを使ったワークフローの効率率率化
© 2014 appleple inc. All Rights Reserved.
既存のワークフローと
アップルップルのワークフロー
7

8. © 2014 appleple inc. All Rights Reserved.
PR協賛既存のワークフロー
8
デザイン マークアップ CMS実装
コンテンツ
登録
モックアップの作成
設計

9. © 2014 appleple inc. All Rights Reserved.
PR協賛既存のワークフロー
問題点
•静的なモックアップでは動きがわからない
（使うツールによる）
•コンテンツ量量、ボリューム感がわからない
•クライアントに響かない
9

10. © 2014 appleple inc. All Rights Reserved.
PR協賛既存のワークフロー
10
デザイン マークアップ CMS実装
コンテンツ
登録
CMSでデータ登録
設計

11. © 2014 appleple inc. All Rights Reserved.
PR協賛既存のワークフロー
問題点
•コンテンツの投⼊入はコスト
•管理理画⾯面にアクセスできるのはフローの後半
‣実データの登録作業は最後に死ぬ気で頑張ることに
•コンテンツを⼊入れてみたら、思ってたのと違う
•デザイン未確定でのコンテンツ登録は⼿手戻りが怖い
11

12. © 2014 appleple inc. All Rights Reserved.
PR協賛既存のワークフロー
12
デザイン マークアップ CMS実装
コンテンツ
登録
設計

13. © 2014 appleple inc. All Rights Reserved.
PR協賛アップルップルのワークフロー
13
設計 CMS実装
コンテンツ登録
デザイン マークアップ
マークアップエンジニアが
CMS実装を⾏行行える

14. CSSフレームワークとCMSプロトタイプを使ったワークフローの効率率率化
© 2014 appleple inc. All Rights Reserved.
CSSフレームワークと
CMSプロトタイプ
14

15. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
15
2つのポイント
CSSフレームワーク
を使った画⾯面設計
CMSプロトタイプ

16. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
16
設計
CMS実装 コンテンツ登録
CSSフレームワークで
モックアップ作成
モックアップをCMS化

17. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
CSSフレームワークを使った画⾯面設計
•CSSフレームワーク使ってモッ
クアップを作成
•レイアウトのバリエーションを
⽤用意して組み合わせて作成
17

18. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
CMSプロトタイプ
•CMSの実装を先に⾏行行い、クライアントと早いタイミング
から完成時の管理理画⾯面や公開側のページ情報を共有する
開発⽅方法
•デザイン、コーディングのフローとは切切り離離す
18
設計 コンテンツ登録CMS実装

19. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
CMSプロトタイプ
•モックアップをCMS化
•スニペットをCSSフレームワークの記述に修正
•CMSの標準機能で基本的な登録が可能
•設計フェーズで機能要件は確定しているので、デザイン
やマークアップの進捗には影響を受けにくい（細部はや
はりデザイン、マークアップによって調整が発⽣生）
19

20. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
デメリット
•ツールを使ったモックアップ作成より時間がかかる。
•デザイン未確定での画像登録は無謀、サイズに変更更が⼊入
るとアップロードし直しに
‣a-‐‑‒blog cms ver2.1より、後から⼀一括画像リサイズ
が可能に
20

21. © 2014 appleple inc. All Rights Reserved.
PR協賛CSSフレームワークとCMSプロトタイプ
メリット
•デザインとCMS実装の並⾏行行作業
•早い段階からエントリーの登録に着⼿手可能。
‣クライアントにも登録してもらう事も
•ダミーデータではわからないことに気づける
•includeファイルを切切り替えてレイアウト変更更を試す
•ブラウザごとにモックアップと、マークアップ中のサイ
トを切切り離離す
21

22. © 2014 appleple inc. All Rights Reserved.
PR協賛さらに詳しく…
毎⽉月第三⾦金金曜⽇日は
a-‐‑‒blog cmsの⽇日
毎⽉月第三⾦金金曜⽇日（次回は7⽉月18⽇日）にベースキャンプ名古屋に
て、a-‐‑‒blog cmsに興味のある⽅方が集まる勉強会・イベントを開
催しています。来て頂ければさらに詳しくお⾒見見せできます！
22

24. CSSフレームワークとCMSプロトタイプを使ったワークフローの効率率率化
© 2014 appleple inc. All Rights Reserved. 24
ご清聴ありがとうございました。