- デザイナーはイラレやフォトショを触る人，エンジニアはマークアップする人
- デザイナーとエンジニアはリモート作業
- はじめに
- バージョン管理例
- デザインフレームワーク例
デザイナーが作成したデザインをエンジニアがマークアップする際には下記のような問題が起こります。
1の問題は，バージョン管理システムを導入することで，解決できます。しかし，デザイナーがgitコマンドを使うことは困難であり，また，ビジュアル的な修正は，コミットメッセージとして言語化しにくいという問題があります。ここでは，いくつかのバージョン管理の例を導入難易度レベル順に紹介します。
2の問題は，エンジニアがPhotoshopやIllustratorを立ち上げ，各種プロパティをチェックすることは，大きな負荷になるためです。ここでは，デザインフレームワークをいくつか紹介します。
バージョン管理例
[Dropbox] 導入難易度：★☆☆
何人かのデザイナーにヒアリング調査したところ，Dropboxを使ってバージョン管理をしている方が多数いました。何よりも簡単で自動的にバージョンを管理してくれるからだと思います。ただ，バージョン管理というよりはバックアップのついでと言ったほうが近いかもしれません。バージョン管理のためのUIは優れておらず，前のバージョンとの比較はできません。
[変更箇所をテキストや画像で出力] 導入難易度：★☆☆
変更箇所をテキストで明記したり，変更箇所を画像で出力し，注釈をつけることで，エンジニアに知らせます。導入難易度は低く，確実に修正箇所を指摘する事ができますが，細かい修正毎に作成するのは手間がかかります。
[Pixelapse] 導入難易度：★★☆
Pixelapseはデザイナーのためのバージョン管理システムです。デザインに特化したDropboxといった印象です。保存する度に自動的に新しいバージョンを作ります。前のバージョンとの比較はできません。
[layervault] 導入難易度：★★☆
Layervaultは，Pixelapseと似たツールです。様々な機能がWebページ上で提供されており，16進数で表示されるカラーピッカーやバージョンに対してのコメント機能，また選択した範囲が前のバージョンと比べどれだけ修正されたかを確認できます。
[GitHubで差分確認] 導入難易度：★★★
GitHubでは，画像ファイルの差分を表示することが出来ます。そこで，デザイナーが作業後に成果物を画像として出力し，GitHubにあげることで，エンジニアは差分を簡単に確認できます。ただ，デザイナーがgitを理解し，GitHubを使いこなすことは難しいという導入上の問題点があります。
デザインフレームワーク例
[UIパーツのみ集めたpsdファイルの作成]
このサイトにあるようにUIパーツのみを切り出した状態で一枚のpsdにまとめるとエンジニアにもUIパーツを扱い易く，デザイナーも自分のデザインに統一感があるかをチェックできます。画像のスライスはPhotoshopのGenerator機能を使うことで自動的に行うことが出来ます。
[デザインマニュアル]
デザイナーがデザインマニュアルを作成し，エンジニアが確認しながら作成することで，レイアウト調整のミスを防ぐことができます。具体的には下記のようなプロパティを明示します。
- マージンとパディング
- 通常フォントの定義
- イレギュラーなフォントの定義とどのような場合にそれを使うか
- カラーリングルール
[デフォルトスタイルの作成]
Cookpadでは，独自のデザインフレームワークとその上に定義してあるデフォルトのスタイルを使うことで，デザインの統一やデザイナーとエンジニアの意思疎通を図っています。詳しくはコチラの資料をご覧ください。
おまけ
便利なツールをいくつか紹介します。
CSS Hat: Photoshopで作成中のオブジェクトをCSSとして出力します
CSS 3.0 Maker: CSSのジェネレータ
CSS Border Radius Generator: CSSの角丸ジェネレータ
CSS Button Generator: CSSのボタンジェネレータ
SPECCTR: FireworksやIllustratorデータのオブジェクトを選択することで，そのサイズや別のオブジェクトとのマージン，フォントなどのプロパティを出力します
