CSS PreprocessorとIAの親和性

こんにちは、オイルヒーターがないと生きていけないHitoyamです。

このエントリは CSS Preprocessor Advent Calendar 2012 の4日目です。

さて、日頃モックアップやプロトタイプと呼ばれるものを作る時に、CSS Preprocessor ってIA(インフォメーションアーキテクト)にこそ便利なものなのでは? とよく思うので、そのことを書きたいと思います。要するにコードとか技術的なアレとか一切なしです。

CSS Preprocessor を使用するメリットおさらい

先人のブログから引用しておさらい。

  • セレクタの構造をわかりやすくできる
  • 変数を利用して特定値をキーワード化できる
  • ベンダープレフィックスを付与できる
  • 汎用的なスタイルを再利用できる

SassやLESSを導入するメリット | Good thinking より

  • 制作の工数が減る
  • 運用が楽になる
  • クオリティが一定になる

Sass を今すぐ実務で使おうよ! « NAVER Engineers' Blog より

わーメリットいっぱいですね!

CSS Preprocessor がIAと親和性が高い理由

IAのスキルセットのひとつに「データの持っているパターンを整理し、複雑なものをわかりやすくする人」ということがあります。
※そのあたりの詳しいことは @magi1125 さんが公開している『マークアップエンジニアと情報アーキテクチャ』あたりを参考にしていただければ。

現実的には、モジュールやコンポーネント(必要要素パターン、パターンのカバーする範囲、組み合わせの際の構造設計)をフロントエンドエンジニアが行なっている状態も多いのではないでしょうか。

しかし、コンポーネント定義はIAが行うのが理想。かつ、それをデザイナーやフロントエンドエンジニアに伝達し、実装後にそれが維持されているかを確認するところまでが仕事。

CSS Preprocessor の利点を活かせばコンポーネントの構造を定義しやすいし、それ自体が共通言語となるために伝達が容易になります。そんなこんなの理由から、IAのスキルセット・コンポーネント定義、両方と相性がいいと思うのです。

じゃあ具体的にどうするの

CSS Preprocessor そのものを共通ドキュメントにしてしまうとか

内部にコメントたくさん書けるので、SCSSそのものをガイドドキュメント化しちゃうのもありかなーと。ただし大規模プロジェクトだとさすがに難しいですね。小規模プロジェクトなら、ドキュメントのメンテコストを低減することができそうかも?

CSS Preprocessor を導入してモックアップを作ってみるとか

パワポやツールを利用してワイヤーを書くのも便利ですが、CSS Preprocessor の利点を活かしてモックを作ってしまうのも手だと思います。

モックを作る時には紙やツールの上で行う時よりもきちんとしたコンポーネント設計・管理ができていないと破綻しますから、早い時点で綻びに気付くことができます(すくなくとも、フロントエンドエンジニアに「これ無理でしょ」と指摘される前に)

とにかく CSS Preprocessor すてき

上記で挙げたものはあくまでアイディアベースでしかないのですが、わりと現実的に導入しやすいケースではないかと思っています。

エンジニア・デザイナーとの共通言語を手に入れた上に、プロジェクト終盤に予想される手戻りを防ぐことができるなんて、すてき。その分エンジニア・デザイナーはより細部に手がかけられるようになるわけで、すてき。CSS Preprocessor って超すてき。

どう適用・応用していくかはチームごとに違うので、楽しんで導入するといいと思います!

※このエントリは CSS Preprocessor Advent Calendar 2012 に参加しています!

関連してるかもしれないさそるの過去エントリ

当サイト『蠍は留守です』はIE6のCSS対応を廃止しました。
新しいバージョンのブラウザでご覧下さい。

古いブラウザのままご覧になる場合には、ここをクリックしてCSSを切った状態でご覧下さい。