Zeplinを導入してコーディングの効率UP！ディレクター×デザイナーの連携にも使えます！

こんにちは。ロジカルスタジオPR部です！！

コーダーの皆さん、こんなこと思ったことありませんか？。

デザインデータから要素の距離が自動で出ないかな

って、

デザインデータの補足情報を簡単に連携できないかな

って。

他にも、

「アセット書き出し便利だけど全部自動的に書き出してくれないかな」とか、

「カラーコード勝手に出てこないかな」とか、

しかし、この間、こんなお悩みを解決してくれるツールを見つけてしまいました。。

その名も『Zeplin』です。

◆『Zeplin』とは

Zeplinは、マークアップエンジニアとデザイナーの間で連携を円滑にする為のツールです。

デザイナーがPhotoshopやAdobeXD、sketchなどでデザインを作成していく際に、

・コメント機能でデザインチェックと修正のスピード向上

が期待できたり、

マークアップする際には、

・CSSの自動生成

・要素間の距離が簡単に測る

といったこともできるので、コーディングスピードの向上にも繋がります。

◆コーディング必須機能

ここからはコーディングする時に使えるZeplinの機能について見ていきたいと思います。

参考記事：『コーダーのためのZeplin入門』『10年間Webサイト制作の現場にいた僕が今更ながら全力ですすめるアプリ「Zeplin」でできること』

◼︎CSSの自動生成

要素をクリックすると、このようにCSSを自動生成してくれます。

HTML/CSS自動化の時代はすぐそこのような気がしました。

◼︎画像の書き出し

Photoshop側でアセット化しておけば、画像の書き出しを簡単に行うことができます。。！

コチラの下の画像の、ナイフのマークをポチッと押せば、このように選択したレイヤーが表示されます。

そしてDLボタンをポチッと押してあげるという、約2ポチっとで瞬時に画像が書き出せてしまいます。

勿論、『書き出し形式設定』『倍率設定』もどんと来いです。

◼︎フォントやカラーコードが表示される

要素をクリックすれば、フォントやカラーコードが瞬時に表示されます。

もう、カラーピッカーで見るのはやめにしましょう。

◼︎テキストデータがワンクリック

テキストツールでテキストの端から端までいかなくても、ワンクリックでテキストをコピーすることができます。

テキストデータをクリックすると、画像の左端にある「Content」にテキストが表示されるので、

そこをクリックすると「Copied to clipboard」が表示され、コピー完了です！

◼︎デザインデータの更新履歴がわかる

psdデータだとデザインデータの更新が共有できていなければ、古いデザインデータでコーディングしてしまうことになりかねません。

デザインデータの更新履歴の確認機能により、そういったミスを防ぐことができます。

ちなみに僕はそういったことがしっかりとあったので、非常にありがたい機能です。

◼︎デザインカンプをブラウザと重ねられる

デザインカンプを半透明にし、ブラウザと重ねることができます。

これで、デザインカンプと見比べる際に、デザインカンプとの差異チェックが容易になります。

◼︎要素間の距離がわかる

正直、これがマークアップエンジニアにとってZeplinの最大の目玉のような気がします。

要素間の距離が瞬時に出るので、marginやpaddingなどの大きさが、簡単にわかります。

また、要素をクリックして選択すればその要素とカーソルを合わせた要素の距離も測ってくれます。

◆ディレクターとの連携にも使える

Zeplinのもう一つの大きな機能として「コメント機能」というものがあります。

続きはロジカルオフィシャルブログで！！