Zeplin

Zeplin

連携概要

連携により、Zeplinに存在するユーザーの以下のデータがAdminaに連携されます。

・ユーザー名
・メールアドレス
・従業員 または 外部アカウント
・Zeplinの権限(ロール)
・ステータス

また、Zeplin上に退職者アカウントが存在した場合にアラート機能が作動します。
ZeplinのログインからAdminaの連携方法はこちらをご参照ください。
https://support.itmc.i.moneyforward.com/l/ja/article/64d9vmzsuo-zeplin

サービス詳細

デザイナーが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等をご確認下さい。

SaaS一元管理マネーフォワードAdminaと連携可能