仕様書作成ツール「Zeplin」が気になる
仕様書作成ツールの「Zeplin」というものをつけましたがとでも興味深いです。以下の記事に書いてあるとおりデザインと実装には、深い溝があったりします。
デザイナーがウェブ専門でない場合だと、実装予算に見合わないデザインを作ってきたりします。そこで、デザイナーとコーダー（プログラマー）が相談して仕様を固めてゆくわけですが、それなりに時間を費やします。そんな状況をこのツールは改善してくれるかもしれません。
課題としては、デザインの自由度はどこまで得られるかが気になるところですね。
デザイナーが作ったデザインをエンジニアがコードに落としこむ工程，コミュニケーションコストも大きくなかなか大変ですよね．そんな課題を解決してくれる，ビジュアル仕様書共有ツール Zeplin を使ってみたところ非常に好感触で，アプリ開発がかなり効率化されたように思うので，普及もかねてまとめてみようと想います．
Zeplin は何を解決してくれるのか
これまでアプリ開発の際，デザイナーさんに以下の様なビジュアル仕様書を Google Drive で共有してもらっていました．
自分はデザイナーさんみたいに 1px の細かい差異など分からなかったりするので，このようなビジュアル仕様書を作成してもらえると，正しく実装することができ非常に助かります．しかし，これには例えば以下のような課題がありました．
(1) デザイナーさんのコストが大きい．上図の例はアプリの 1 画面に過ぎませんが，これが 10 枚，20枚… となってくると膨大な時間と労力が必要になります．
(2) 漏れなく記述するのが難しい．コーディングと違い MECE かどうか自動テストすることなどできないので仕方がない面もありますが，サイズや位置などを同定できないケースが発生する度に，デザイナーさんとのコミュニケーションコストがかかってしまいます．
(3) 静的であり柔軟性がない．ビジュアル仕様書に記載されていないけど，実装の都合でこのコンポーネントとこのコンポーネントの間の距離がほしい！といったことはよくありますが，記載されている位置やサイズから自分で割り出さなければなりません．
Zeplin でできること
1. コンポーネントの位置，サイズ，カラーなどの取得
2. デザイン上にコメントを残す
3. カラーとフォントのガイドラインの取得
4. CSS 自動生成
