Zeplin（ゼプリン）とは

Webサイトやアプリの制作現場で使われる「デザイン共有ツール」で、デザイナーが作ったデザインデータ（主にFigma、Adobe XD、Sketch など）をエンジニアと共有し、コーディングに必要な情報を自動で読み取ってくれます。

たとえば「このフォントサイズはいくつ？」「余白は何px？」といった細かい確認を、Zeplinがすべて整理して表示してくれるため、確認作業の手間が大幅に減ります。

Web制作初心者でも、デザイナーとスムーズにやり取りできるようになる便利なサービスです。

主な機能・特徴

• コーディングに必要な情報を自動抽出
  アップロードしたデザインからフォントサイズ、色コード、余白の数値、画像書き出しなどを自動で取得できます。初心者が迷いやすい部分を分かりやすく可視化してくれるのが大きな魅力です。
• デザイン全体の構造を整理
  ページを「セクション」ごとにまとめたり、プロジェクト単位で整理できるため、制作チーム内で迷いにくい環境が作れます。
• コードスニペットの表示
  CSSやiOS／Android開発向けのコードを自動で生成。
  Web制作では CSS のコード確認が便利です。
• コメント機能でデザイナーとコミュニケーション
  修正依頼や質問を、Zeplin上で直接コメントできます。
  メールやチャットでやり取りする手間が省けるため、作業がスムーズです。
• ブラウザでもアプリでも利用可能
  Mac／Windowsアプリのほか、ブラウザだけでも利用できます。

活用例

• デザインカンプからコーディングをする時の仕様確認
• デザイナーとエンジニアの橋渡しツールとして
• 外注デザイナー／外部エンジニアとのやり取り
• チームでのプロジェクト管理
• 修正依頼の記録・管理

個人制作でも、デザインをしっかりコーディングしたい場合に役立ちます。

使い方

①アカウント登録

Zeplin公式サイトへアクセスし、「Sign up」または「Get Started」をクリック！
Googleアカウント、メールアドレスなどで登録可能です。

※アプリのインストール（任意）
ブラウザでも使えますが、各種ツールとの連携がしやすいためアプリ版の利用がオススメ。
サイト内の「Download」からMac／Windows版を入手できます。

②プロジェクトを作る

ログイン後、「New Project」をクリックし、新しいプロジェクトフォルダを作成します。
（無料プランは1個まで）

③デザインデータを読み込む

Figma、Adobe XD などからエクスポートし、Zeplinにアップロードします。
Figmaの場合は Figma専用プラグインを使うと簡単です。

④各デザインを確認

アップロードが完了すると、以下の項目が自動表示されます。

• ・文字サイズ、字間
• ・色コード（HEX・RGBなど）
• ・パディング（内側の余白）
• ・マージン（外側の余白）
• ・ボックスの幅・高さ
• ・ボタンや背景の画像書き出し

数値が自動で揃っているので、コーディングミスが減ります。

⑤コードをコピー

右側に CSS のコードが自動生成されます。必要な部分だけコピペ可能です。

⑥コメントでやり取り

修正依頼や質問をデザインに直接書き込めます。チーム作業がとても楽になります。

サービスについて

無料プラン（Free）

個人利用でまず使うのはこのプランです。
プロジェクト数が 1つ に限られますが、以下の機能が使えます。

• デザインのアップロード
• スタイルガイド（色・フォントなど）の確認
• コードスニペットの表示
• コメント機能

有料プラン（Starter）

個人で複数案件を扱うなら Starter にしておくと便利です。

• 複数プロジェクト作成可能
• バージョン管理がより使いやすくなる
• チームでの共同作業がしやすい

利用規約

Zeplinの利用規約は公式サイトに記載されており、主に以下の内容が含まれます。

• ・アップロードしたデザインデータの扱い
• ・プロジェクトの共有ルール
• ・有料プランの支払いポリシー
• ・退会・キャンセルポリシー

個人利用で問題になることは少ないですが、商用利用のデータを扱う場合は念のため確認しておくことを推奨します。

料金形態	Free（無料） / Basic $13.75 / 月 最新版はこちら【公式料金表】
登録・ログイン	必須
利用規約	公式サイト

※掲載内容は変更される場合があります。必ず【公式サイト】で確認後、自己責任でご利用ください。

注意点

※無料プランは「プロジェクト1つまで」という制限が強い

※デザインツール（Figmaなど）側の設定によっては読み込めないことがある

※画像の書き出し設定がデザイナーに依存するため、事前に打ち合わせが必要

※Zeplin上のプレビューと実際のブラウザ表示は必ずしも同じにならない

※ブラウザ版よりアプリ版の方が安定していることがある