スタイルガイドを活用した運用に強いCMSサイト制作

3,297 views
3,110 views

Published on

2014/3/8 の『現場のプロが教えるWeb制作の最新常識』発売記念イベントのセッションで使用したスライドです。

Published in: Design

スタイルガイドを活用した運用に強いCMSサイト制作

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

×