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

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