9月10日に参加してきましたので、簡易まとめを作成しました。
公開されているスライドがプレゼン向けの構成なので、そちらを見ながら読むような感覚で見て頂ければと思います。

CSS Nite in OSAKA vol.36 ReportSection 2nd – 「Style Guide 活用のススメ」

via 大月茂樹（ニイハチヨンサン）
スライドURL：https://cssnite.jp/osaka/vol36/CSSNiteOsaka36-ohtsuki.pdf

Agenda

マルチデバイス時代の到来
Webのマルチデバイス対応
StyleGuide活用のススメ

マルチデバイス時代の到来

高校1年生がネット接続に使うデバイスの75％はスマートフォン
「スマートフォンユーザーの80％は毎日スマートフォンでネットを見るt」 form Google”OurMobilePlanet”
Android 端末の「種類」が1年で4倍に（3997→11,868）
デバイスサイズの多様化
新しいデバイスの登場
- 冷蔵庫モニター
- GoogleGrass

Webのマルチデバイス対応

現在のマルチデバイス対応方法は主に３つ
- 専用サイト
- タッチデバイスファースト
- レスポンシブデザイン
制作フローの複雑化
- マルチデバイス対応
- jQuery対応（Parallax/Modal他）
ウォーターフォール型制作フローの限界
- 「デザインだけではイメージがわかない」 – クライアント担当者
- 「実装が必要な動きがデザインに入っていない」 – 制作チーム
- 「動作しない/表示が重いデバイスがある」 – ユーザー
- →最悪の場合、設計まで手戻りする。
鬼門はAndroid
- スマートフォンブラウザ不具合特集
- スマートフォン対応、気をつけたいトラブル
クライアントはデザインカンプ通りにできると思っている
→デザインに合わせるための手戻り・工数増加

HTMLプロトタイピングによる解決

ウォーターフォール型から「アジャイル型」へ
制作フローは
設計→ラフデザイン→「デザイン→制作・開発→検証」→実装→公開
「括弧内」がアジャイル型になる。
デザインは「ラフ程度」に抑える
デザインラフのイメージ
- 使用するフォントパターン
- 配色パターン
- ボタンパターン
- 画像装飾パターン
- ジャンプ率
  などに留める
「検証フェーズ」では「動くもの」を見せる
- プロトタイプやモックアップ
- 動作イメージやデバイス対応などを共有しやすい
- そのままページ制作に移れる
「実装フェーズ」に向けた「StyleGuid」の制作

StyleGuide活用のススメ

ページの構成要素（モジュール、コンポーネント）を集めたもの
- HTML/CSSだけでなく、JavaScriptの実装も含める
- 様々なデバイス・ブラウザでの表示・動作を検証・担保されたものを集めた「生きたドキュメント」
- class値をコピペするだけで、デザインや動作を再現できるもの
StyleGuidの例
- Google HTML/CSS Style Guid
- Twitter Bootstrap
設計思想・効果的なCSSの記述
- OOCSS
- SMACSS
StyleGuideを作成するツール
- StyleDocco
  →サイバーエージェントでの使用例
- Kalei – Style guide
  コマンドライン（黒い画面）を使うのが苦手な人向け
- どちらもMarkDown記法でガイドを作成する
  →Markdown記法とは
理想的なStyleGuideの使い方
- 制作するサイトをベースに作る（ヘッダー・フッターなども含む）
  ・「スタイル通りにならない」トラブル回避
  ・テスト効率のUP
- CSS/JavaScriptは1ファイルで管理する
  ・ファイル結合時のトラブル回避
- モジュール・コンポーネントは可能な限りフォローする
- 独自実装は絶対NG
  ・チームで最もスキルが高い人が一括管理
  ・1ページ専用のものでもStyleGuideに必ず組み込む
検証のポイント
- 実際のコンテンツを入れる
  ・文章の長さ
  ・画像の縦横比
- Androidの検証は念入りに
  ・Adobe Edge Inspect
  ・Ghostlab
  ・Remote TestKit

まとめ

静的デザインカンプの役割
クライアントとのコミュニケーションに活用
「イメージを共有する」ツール
StyleGuideの役割
デザイナー・エンジニアのコミュニケーションに活用
「できる・できない」「簡単・難しい」の共有ツール

次回は10月8日、「撮影スペシャル」だそうです

詳細はこちらをどうぞ→CSS Nite in OSAKA, Vol.37「撮影スペシャル」をテーマに開催! – イベント – CSS Nite in OSAKA

Tag: cssnite

[CSS]CSSNiteinOSAKA vol.36まとめ【StyleGuideのススメ】