デザインデータ共有をスムーズにする Zeplin | マネーフォワードAdmina|zplin

web 制作などのデザイナーがSketchなどのツールで作成したデザインカンプをコーダーに共有が出来ます。スタイルガイド、仕様書、アセットを自動生成をすることで、手間を削減。デザインごとにレビューや相談、デザインの更新履歴や履歴に対してのコメントも残すことが出来る機能もあります。また、ブラウザ以外にもWindowsやMacのアプリからご利用いただけます。デザイン開発における円滑なコミュニケーションをサポートします。

Zeplinとは、デザイナーや開発者などのチームメンバーが協力してデザインデータを共有し、デザインから開発までのワークフローをスムーズにするためのプロトタイピングとコラボレーションツールです。デザイナーがデザインツールで作成したデザインファイル（主にSketchやAdobe XDなど）をZeplinにアップロードし、チームメンバーと共有することで、デザイナーと開発者間のコミュニケーションが円滑化されます。アップロードされたデザインデータは、チームメンバーがZeplinを通じてプレビューすることができ、プレビュー画面でデザインの全体像を確認し、詳細な部分に対してコンテキストを得ることができます。また、Zeplinでは、デザインに含まれる各要素（テキスト、画像、ボタンなど）のスペックやスタイルガイド（フォントサイズ、色、余白など）を提供できるため、開発者はこれらの情報を参照してコードを書くのに役立てることができます。さらに、チームメンバーやステークホルダーはZeplin上でデザインに対してコメントやフィードバックを行えるため、デザイナーと開発者の間でアイディアや意見を共有することができます。Zeplinからデザインデータや画像をエクスポートすることも可能であり、開発に必要な素材やアセットを簡単に取得できます。さらに、Zeplinはバージョン管理機能を持っており、デザインの変更履歴を追跡することができ、過去のバージョンに戻すことができるため、デザインの進化を管理するのに便利です。Zeplinの使いやすいインターフェースと便利な機能により、デザイナーと開発者のコラボレーションが強化され、デザインから開発へのワークフローがより効率的に進められます。

Zeplinの機能一覧

・CSSの自動生成
・フォントとカラーコード の表示
・画像書き出し
・テキストデータの簡単コピー

機能詳細

Zeplinとは、デザインデータをチームメンバーに共有し、デザインから開発までのコラボレーションをスムーズに行うためのツールです。デザインから開発までのワークフローを円滑にします。主にWebデザインやアプリデザインのプロジェクトで活用されます。以下はZeplinの主な機能詳細です。

デザインファイルのアップロード: デザイナーは、デザインファイル（主にSketchやAdobe XDなどのデザインツールで作成したファイル）を「Zeplin」にアップロードします。アップロードされたデザインファイルは、プロジェクト内で管理されます。

デザイン共有とプレビュー: デザイナーがアップロードしたデザインは、開発者やステークホルダーと共有することができます。チームメンバーは「Zeplin」を通じてデザインをプレビューできるため、デザイン全体像を把握しやすくなります。

スペックやスタイルガイドの提供: デザインに含まれる各要素（テキスト、画像、ボタンなど）のスペックやスタイルガイド（フォントサイズ、色、余白など）を「Zeplin」上で提供できます。開発者はこれらの情報を参照して、実際のコードに反映させることができます。

コメントとフィードバック: チームメンバーは「Zeplin」上でデザインに対してコメントやフィードバックを行えます。デザイナーや開発者間でのコミュニケーションを効率的に行い、改善や修正が必要な箇所を共有することができます。

エクスポート: デザインデータや画像などを「Zeplin」からエクスポートできます。これにより、開発に必要な素材やアセットを簡単に取得できます。

コードの自動生成: 「Zeplin」は一部のデザインツールと連携しており、デザイン要素からCSSコードなどを自動的に生成する機能もあります。これにより、開発者はデザインとコードをシームレスに連携させることができます。

バージョン管理とプロジェクトの履歴: 「Zeplin」はバージョン管理機能を持ち、変更履歴を追跡することができます。これにより、過去のバージョンに戻すことや、プロジェクトの進捗を管理することができます。

「Zeplin」のこれらの機能により、デザイナーと開発者の間でのコラボレーションが円滑化され、効率的で迅速なデザインから開発までのワークフローが実現されます。

Zeplinの料金プラン

・Free 　$0/月（1project）
・Team　$8/シート/月（12project）
・Organization　$16/シート/月（12シート～、Unlimited project）
・Enterprise 　お問い合わせ
Zeplinの料金については 公式サイトにてお問い合わせください。

使い方

Zeplinはデザインデータをチームメンバーに共有するための簡単で便利なツールです。Zeplinを使ってデザインデータを共有する一般的な手順です。
デザインファイルのアップロード
Zeplinのウェブサイトにアクセスし、アカウントを作成します。 プロジェクトを作成し、デザインファイルをZeplinにアップロードします。 アップロードされたデザインファイルは、プロジェクト内で管理されます。
デザイン共有とプレビュー
デザインがアップロードされると、チームメンバーやステークホルダーに共有するためのリンクが生成されます。 共有されたリンクを開くことで、デザインをプレビューできます。プレビュー画面では、デザインの全体像を確認できます。

スペックやスタイルガイドの提供
デザインに含まれる各要素（テキスト、画像、ボタンなど）のスペックやスタイルガイドをZeplin上で提供します。開発者はこれらの情報を参照して、実際のコードに反映させることができます。

コメントとフィードバック
チームメンバーやステークホルダーはZeplin上でデザインに対してコメントやフィードバックを行えます。Adobe XDなどのデザインに対してコメントやフィードバックを行うことができます。これにより、デザイナーと開発者のコミュニケーションを円滑にし、改善や修正が必要な箇所を共有することができます。 コメントを追加することで、デザイナーや開発者間でのコミュニケーションを効率的に行い、改善や修正が必要な箇所を共有することができます。

エクスポート
ZeplinからAdobe XDなどのデザインデータをエクスポートすることも可能です。この機能を使って、開発に必要なアセットや素材を簡単に取得することができます。

バージョン管理とプロジェクトの履歴
バージョン管理機能を持ち、デザインの変更履歴を追跡することができます。過去のバージョンに戻すことや、プロジェクトの進捗を管理することができます。

以上の手順に従って、デザインデータをZeplinを使って効果的に共有し、デザイナーと開発者の間でスムーズなコラボレーションを行うことができます。
Adobe XDなどのデザイナー向けのデザインツールとZeplinとの連携によってデザインから開発までのワークフローを強化することができます。Adobe XDで作成したデザインファイルをZeplinにインポートすることや、たデザインに含まれる要素のスタイルガイドやスペックを提供可能です。
Zeplinの詳しい使い方は、公式HP等をご確認下さい。

よくある質問

よくある質問をご紹介します。

Zeplinの読み方は？

Zeplin（ゼプリン）は、デザイナーが作成したデザインをコーダーに共有できるアプリケーションです。さまざまなデザインツールに対応しており、各ツールからZeplinにデータを読み込むことができます。

Zeplinの価格はいくらですか？

Zeplinの価格は以下の通りです。STARTERプランは1ユーザーが契約すれば利用でき、月額$19（年間契約なら$17）の料金がかかります。大規模な組織向けにはORGANIZATIONプランも提供されており、デザイナーと開発者ごとに月額$9の料金が適用されます。

FigmaとZeplinの連携方法は？

FigmaとZeplinの連携方法は以下の通りです。
Figma上で対象のアートボードを選択します。
メニューから「Plugins」→「Zeplin」を選択します。
初めてZeplinと連携する場合、Zeplinアカウントの接続を求められます。
接続した後、FigmaとZeplinの連携を許可します。
これにより、FigmaとZeplinがデザインデータを共有し、スムーズに連携できます。

Zeplinで何ができますか？

Zeplinを利用することで、Adobe XD、Photoshop、Figmaなどのデザインデータから、コーディングに必要な情報を素早く取得できます。これにより、作業効率を向上させることができます。

Zeplinで書き出しはどうやって行う？

Zeplinでの書き出し方法は以下の通りです。

画面右上にあるナイフのアイコンを選択します。
書き出したい画像のリストが表示されます。
リストから書き出し形式を選択します。選択できる書き出し形式にはPNG、JPG、WebPなどがあります。
画面右下にある「Download」ボタンを選択して、書き出しを完了します。
これにより、選択した画像が指定した形式でダウンロードされます。

デザインにおけるカンプとは？

デザインにおけるカンプとは、制作物においてデザインやレイアウトを具体的に示すために作成される完成見本のことを指します。ウェブデザインの分野では、「デザインカンプ」や「モックアップ」と呼ばれることもあります。カンプはデザインの構想や外観を視覚的に表現し、制作物の最終的な仕上がりを確認するのに役立ちます。

Zeplinの無料版とは？

Zeplinは、Webブラウザから利用できるだけでなく、WindowsとMac用のアプリも提供されています。無料版のZeplinアプリは公式サイトからダウンロードできます。無料版では1つのプロジェクトを作成できます。また、試用期間や制限は設けられておらず、制約なく利用できます。詳細はZeplinの公式サイトで確認できます。

Zeplinの機能は？

Zeplinはデザイナーと開発者の協力を支援するツールで、デザイン共有、スタイルガイド、レスポンシブデザイン、アセットの書き出し、コメントとフィードバック、プロトタイプ共有などの機能を提供します。これにより、効率的なデザインプロジェクトの進行とコラボレーションが可能です。