Upload
keisuke-imura
View
2.592
Download
0
Embed Size (px)
DESCRIPTION
2014/3/8 の『現場のプロが教えるWeb制作の最新常識』発売記念イベントのセッションで使用したスライドです。
Citation preview
スタイルガイドを活用した運用に強いCMSサイト制作
井村 圭介
自己紹介
井村 圭介K E I S U K E I M U R A
1987年生まれの27歳。 フリーランスの Webデザイナー/エンジニア。 !
@imura_design
本書では…
・配色のトレンド・スタイルガイド・スマートフォンサイトデザイン・Git・プロジェクト管理ツール・CMS・バックエンド高速化
など書いています。
FUNTERACTIVEさわって、楽しい
photo by yorozu2009
ディレクション・デザイン・マークアップ・バックエンド と、3年ほど様々な角度からCMSサイト制作に関わって
きました。
今、困っていることがあります。
現状のワークフローの問題点
Webサイトの運用による循環
企画
更新作業
公開
ユーザーが見る
Webサイトの運用による循環
企画
更新作業
公開
ユーザーが見る
見積!設計!納期調整!
デザイン!コーディング!プログラム!
Webサイトの運用による循環
企画
更新作業
公開
ユーザーが見る
見積!設計!納期調整!
デザイン!コーディング!プログラム!
CMS
三ヶ月後…
新しくキャンペーンのページをつくりたいのですが、CMSでできますか?
できません。弊社にご依頼ください。
パターン1予算が無い場合
出したい情報があるのに予算が無い。。あきらめよう。
クライアント
え?そんなキャンペーンやってたの知らなかった!じゃーね!
ユーザー
パターン2予算がある場合
早く更新したいのに…イライラ!至急!(次回も予算確保するの大変だなぁ)
クライアント
デザイン考えて、コーディングして…。スマートフォンにも対応しなきゃ。。また徹夜。。
制作者
薄れていくCMSの存在感…
企画
更新作業
公開
ユーザーが見る
見積!設計!納期調整!
デザイン!コーディング!プログラム!
CMS
運用コスト
できることはなるべく運用者にやってもらう
運用コストを下げる策:その1
ようにシステムを作っておく
運用者にあった更新パターンを選択すべし。
CMSの更新パターン
商品スペックのように 「項目が決まっているもの」
カスタムフィールド型
更新しやすさ
自由度
お知らせのように 「数行で完結するもの」
WYSIWYG型
更新しやすさ
自由度
WYSIWYGではなくMarkdownでの更新も。
キャンペーンのように 「レイアウトにパターンを持たせたいもの」
ブロック型
更新しやすさ
自由度
動画を用意しました
http://youtu.be/QMFQf8TtGTk
運営者にあった更新パターンを選択するために…
よくあるワークフロー
デザイン作成
ヒアリング / 設計
コーディング
CMS実装
プレビュー
フィードバック
公開
ワークフローの提案
CMSモックアップ作成
ヒアリング
コーディング /モジュール設計
プレビュー
プレビュー
フィードバック
公開
デザイン作成
Webサイトの運用による循環
企画
更新作業
公開
ユーザーが見る
見積!設計!納期調整!
デザイン!コーディング!プログラム!
CMS
スタイルガイドを作っておく
運用コストを下げる策:その2
スタイルガイド作ってきました
http://funteractive.jp/saishinjoushiki/doc/section-1.html
スタイルガイドを作っておくと ブロックの設計がしやすい!
スタイルガイド、もっと詳しく
サイトで使うカラースキームやパーツをまとめたデザインドキュメント
• デザインルールを保つことができる
• 一貫性のあるUIを提供し、ユーザビリティを損なわない
• 新規コンテンツ作成の際にデザイン・コーディングコストが減る
スタイルガイドを作るメリット
• 初期構築コストがかかる
• スタイルガイドのアップデートコストがかかる
• モジュール設計のスキルが必要
スタイルガイド作成のデメリット
• 初期構築コストがかかる→中~長期的に見ればコスト安
• スタイルガイドのアップデートコストがかかる→KSS、StyleDoccoなどのツールで解決
• モジュール設計のスキルが必要→BEMやSMACSSを学んでみよう FoundationやBootstrapなどの フレームワークを参考にしてみよう
スタイルガイド作成のデメリット
• 数10ページ以上の中~大規模サイト
• 頻繁に更新のあるサイト
スタイルガイドを作ったほうがよいサイト
• 数10ページ以上の中~大規模サイト
• 頻繁に更新のあるサイト
スタイルガイドを作ったほうがよいサイト
→ CMSも入っていることが多い
スタイルガイド生成ツール
KSS
その1
• テンプレートを自作できる
• Ruby製。取り扱いが複雑Ruby on Rails, Sinatraなどのフロントエンドフレームワークが必要
KSSの特徴
• kss-node という、Node.jsでKSSを使えるようにしたパッケージがあります。
• さらにGruntでkss-nodeを動かすgrunt-kss というプラグインが!
KSSを比較的簡単に使う方法
StyleDocco
その2
• テンプレートが用意されている
• Node.js製。動かすのが比較的簡単
• css(scss)ファイルごとにページを生成してくれる
StyleDoccoの特徴
スタイルガイドのデザインのコツ
• 必要なモジュールは何か
• 再利用できるコーディング
• レスポンシブに対応もしくはSP用のスタイルガイドを作る
モジュール設計のポイント
「半年後のWebサイトの姿を想像する」
HTML / CSSのモジュール化
BEM SMACSS
HTMLをモジュール化して別のところで再利用するための、class付けなどのルール。
EmmetやSass3.3でもBEMサポートが取り入れられるなど注目が集まっている。
ヒジョーにざっくり:BEM, SMACSS
デモに使ったツールの紹介
Git
スタートテーマをGitで管理しています。
Bitbucket
無料から使えるリポジトリサービスです。
Bower
npmでインストールできるパッケージ管理ツール。Foundation 5のインストールに使っています。
KSS
Ruby製のスタイルガイド生成ツール。kss-nodeを利用したgrunt-kssで
コンパイルしています。
Foundation 5
レスポンシブ対応のフロントエンドフレームワークです。
Sass / compass
Sass版のFoundation 5にオリジナルの記述を追加しています。
タスクランナー。grunt-kss、grunt-compassなど動かしています。
ブロック型CMSの例として使用しました。
まとめ:Web制作の今について
今日ご紹介した内容は、CMSサイトをうまく運用していくために考えているチャレンジです。
もちろん、このまま実践していただいてもフォークして取り入れていただいても大丈夫です。
ツールの進化もとても速いですが、積極的に試してみて自分のやりたいことに合うものを選んで組み合わせてみてください。
ツールを使うだけに飽きたら自分でツールを作ったり好きなプロジェクトにコミットしてみてください。
CMSのテーマ・プラグインをつくったりGruntのタスクを書いて公開してみたり、BEMについてブログを書いたり…。
ご清聴ありがとうございました m(_ _)m