Zeplin

15小时前編集 0 0

デザイナーと開発者間の連携をサポートし、デザインのスペックやアセットを簡単に共有できるため、デザインから開発への移行がスムーズ。

保存日時：
2024-11-08
公式サイト
ZeplinZeplin
Zeplin

Zeplinとは？料金、使い方、日本語、無料、Figma、書き出し、ログイン、共有を徹底解説

1. Zeplinとは？

Zeplinは、Zeplin, Inc.が提供する、デザイナーと開発者のためのコラボレーションツールです。「デザインをコードに変換したい」「デザインの仕様を正確に伝えたい」「ハンドオフプロセスを効率化したい」というデザイナーと開発チームの要望に応えてくれます。デザインファイルの共有、スタイルガイドの作成、コード生成、バージョン管理などの機能を提供しています。Webベースで利用でき、Sketch, Figma, Adobe XD, Photoshopなどのデザインツールと連携できます。直感的なインターフェース、自動生成されるスタイルガイド、コメント機能などが特徴です。まるでデザイナーと開発者が、同じ言語で会話しているように、デザインから実装までのプロセスをスムーズにし、より効率的な開発を実現します。

【目次】

2. Zeplinの料金

Zeplinの料金プランは、以下のようになっています (2024年5月現在)。

  • Free:

    • 1プロジェクトまで。
    • 基本的な機能。
  • Team:

    • 月額$8/シート (年払いの場合、$6/シート/月)。
    • 最大12プロジェクト。
    • より多くの機能。
  • Organization:

    • 月額$16/シート (年払いの場合、$12/シート/月)。
    • 無制限のプロジェクト。
    • Teamプランのすべての機能。
    • 高度なセキュリティ & 管理機能。
  • Enterprise:

    • 料金は問い合わせが必要です。
    • Organizationプランのすべての機能。
    • エンタープライズ向けのサポート & カスタマイズ。

料金プランの詳細は、Zeplinの料金ページで確認してください。価格やプラン内容は変更される場合があります。

3. Zeplinの使い方

  1. Zeplinアカウントの作成:

    • Zeplinの公式サイト (https://zeplin.io/) で、アカウントを作成します (無料)。
  2. プロジェクトの作成:

    • ログイン後、[Create Project] (プロジェクトを作成) をクリックし、プロジェクトの種類 (Web, iOS, Android, macOS) を選択します。
  3. デザインツールの連携:

    • Sketch, Figma, Adobe XD, PhotoshopなどのデザインツールとZeplinを連携させます。
    • 各デザインツール用のZeplinプラグインをインストールします。
  4. デザインのインポート:

    • デザインツールでZeplinプラグインを開き、Zeplinにインポートしたいアートボードやコンポーネントを選択します。
    • [Export Selected] (選択したものをエクスポート) などのボタンをクリックして、Zeplinにデザインをインポートします。
  5. デザインの確認 & 共有:

    • Zeplin上で、インポートされたデザインの寸法、色、フォントなどの情報を確認できます。
    • 自動生成されたスタイルガイド (色、タイポグラフィ、コンポーネント) を確認できます。
    • 開発者や他の関係者にZeplinプロジェクトを共有し、デザインの仕様を伝えます。
  6. コメント & コミュニケーション:

    • Zeplin上で、デザインに対してコメントを追加したり、他のユーザーとコミュニケーションを取ったりできます。
  7. コードの生成:

    • Zeplinは、デザインからCSS, Swift, XMLなどのコードを自動生成します。
    • 開発者は、生成されたコードをコピーして、実際の開発に利用できます。

より詳しい使い方については、Zeplinのドキュメントやチュートリアルを参照してください。

4. 日本語対応について

  • ZeplinのWebサイトとインターフェースは、英語で提供されています。日本語には対応していません (2024年5月現在)。
  • ただし、Zeplin上で日本語のテキストを表示・扱うことは可能です。
  • 日本語フォントも利用できます。
  • Zeplinのドキュメントは、英語で提供されています。

5. 無料版について

  • Zeplinには、Freeという無料プランがあります。
  • 無料プランでは、1つのプロジェクトのみ利用できます。
  • デザインのインポート、スタイルガイドの確認、コメントなどの基本的な機能を利用できます。
  • より多くのプロジェクトや高度な機能を利用するには、有料プラン (Team, Organization, Enterprise) へのアップグレードが必要です。

6. Figmaとの連携について

  • Zeplinは、Figmaと強力に連携できます。
  • Figma用のZeplinプラグインをインストールすることで、FigmaのデザインをZeplinに直接インポートできます。
  • Figmaでデザインを変更すると、Zeplinに同期できます。
  • Zeplin上で、Figmaのデザインの寸法、色、フォントなどの情報を確認できます。
  • Zeplinは、FigmaのデザインからCSS, Swift, XMLなどのコードを自動生成します。

7. 書き出し機能について

  • Zeplinは、デザインツールからインポートしたデザインのアセット (画像、アイコンなど) を書き出すことができます。
  • 開発者は、Zeplinから必要なアセットをダウンロードして、実際の開発に利用できます。
  • アセットは、PNG, JPG, SVGなどの形式で書き出すことができます。
  • 解像度 (1x, 2x, 3xなど) を指定して書き出すことができます。

8. ログイン方法について

Zeplinにログインするには、以下の方法があります。

  • メールアドレスとパスワード:

    • ZeplinのWebサイト (https://app.zeplin.io/) で、登録したメールアドレスとパスワードを入力してログインします。
  • Googleアカウント:

    • ZeplinのWebサイトで、[Sign in with Google] (Googleでサインイン) をクリックし、Googleアカウントでログインします。
  • Slackアカウント:

    • ZeplinのWebサイトで、[Sign in with Slack] (Slackでサインイン) をクリックし、Slackアカウントでログインします。
  • シングルサインオン (SSO):

    • OrganizationプランまたはEnterpriseプランを利用している場合は、シングルサインオン (SSO) でログインできます。

9. 共有機能について

  • Zeplinでは、プロジェクトを他のユーザーと共有できます。
  • プロジェクトのメンバーを招待し、それぞれに役割 (Admin, Editor, Developer, Reviewer) を割り当てることができます。
  • 共有リンクを作成し、Zeplinアカウントを持っていないユーザーにもデザインを公開できます。
  • 共有リンクには、パスワードを設定したり、有効期限を設定したりできます。

10. まとめ

Zeplinは、デザイナーと開発者のためのコラボレーションツールであり、デザインから実装までのプロセスを効率化します。無料プランもありますが、機能制限があります。日本語のインターフェースには対応していませんが、日本語の表示・入力は可能です。Figmaなどのデザインツールと連携し、デザインの共有、スタイルガイドの作成、コード生成などができます。

デザインツール連携、Zeplin、Figmaに関する情報をもっと知りたい方は、www.sucoi.jpもおすすめです。役立つ情報が豊富に紹介されています。ぜひチェックしてみてください！

関連ナビゲーション