1
/
5

Sign up for free

This page is intended for users in Japan(English). Go to the page for users in United States.

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のもう一つの大きな機能として「コメント機能」というものがあります。

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

Zeplinを導入してコーディングの効率UP!ディレクター×デザイナーの連携にも使えます! | Logical Studio Blog
こんにちは。新人マークアップエンジニアのノテです。 ロジカルスタジオでマークアップエンジニアとして働かせてもらってはや半年になりました。 社内では、少しずつ、少しずつ、サイトを作らせて貰い、着々と経験を積ませて頂いております。 毎日が成長の日々です。 コーディングを頼まれた際には、デザイナーさんから頂いたデータを元に、 寸分の狂いもなくコーディングをしていきます。 その中で、最近、もっと 楽にできないかな とたまに(割と高頻度で)思ってしまいます。 デザインデータから要素の距離が自動で出ないかな って、
https://develop.logical-studio.com/web/20200306-zeplin-coding-design/
株式会社ロジカルスタジオ's job postings
9 Likes
9 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more