フリーランスにはZeplinを導入しよう。仕事効率化のコツは?

フリーランスデザイナーとして仕事をするとき、エンジニアとのやり取りなどもっと効率的にできないかと考えたことはないでしょうか。『Zeplin』を導入してデザイン共有することでストレスフリーなチームワークを進めていきましょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/開発スタイルを経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

フリーランスはZeplinがおすすめ

フリーランスデザイナーとして仕事をするなら、エンジニアやディレクターとのオンラインでのやり取りが欠かせません。

伝わりやすいようにデザイン指示書を作成したり、変更要求を細かくメールでやり取りしても、要求からフィードバックまでの時間がかかりすぎて効率的とはいえなかったりします。

ここで意思疎通のプロセスをもっとスピーディーでスムーズに行うソリューションとして『Zeplin』の導入を考えてみましょう。

Zeplinとは

Zeplinは『Photoshopや『Skech』といったデザインツールで作成したデザインデータをチーム内で簡単かつ詳細にシェアできるアプリです。

デスクトップ版ではMacWindowsに対応していてWeb版もあり、同時にシェアするのが1プロジェクトだけの利用なら無料です。

デザインデータはデザインツールのプラグインを通して簡単にZeplin内のプロジェクトとして読み込まれて、チームメンバーはZeplinさえインストールすればデザイナーから招待を受けてプロジェクトに参加できます。

効率よくフィードバックできる

Zeplinプロジェクト内ではデザインツールで作成したUI通りのデザインデータが表示されます。しかも配置された要素のカラー・サイズ・使用されているスタイル・CSSコードなどが自動で読み込まれます。

これらの要素情報は『マウスオーバーするだけ』で画面右側に表示されて、要素間の余白を指定すると距離が何ポイントかという表示も確認できるでしょう。

さらにメンバーであれば誰でもデザインデータ上の指定した位置に『コメント』を加えることができ、変更要求などを簡単にシェアすることができます。

このようにZeplinさえあればデザイン指示書の作成と共有が直感的でスピーディーに行えるので、デザイナーの負担はかなり軽減でき、エンジニアからも素早くフィードバックが得られるでしょう。

Sketchと連携して仕事効率化

デザインツールとしてSketchを使っているなら、Zeplinのインストール時に自動的にプラグインが加えられています。

Sketchでデザインデータを作成したら、Sketch内でZeplinへのエクスポートを選択するだけでZeplinがプロジェクトを作成します。

プロジェクトに招待したメンバーとコメントをやり取りして、デザイナーがSketch上で変更を加えたら変更履歴もプロジェクト内でいつでもチェックできるのでおすすめです。

このようにSketchZeplinを連携すればデザインプロセスのムダが大幅に削減できるので、かなりの能率アップが望めるでしょう。

Zeplinの使い方ガイド

では実際にZeplinを導入してプロジェクトを始める流れを見てみましょう。

Zeplinの導入手順

Zeplinを導入する際はまず公式サイトにアクセスして「Get started for free」ボタンをクリックしましょう。

ジャンプ先の画面でメールアドレス・ユーザーネーム・パスワードを入力して「Sign up FREE」をクリックすればZeplinアカウントが作成されます。

次にアプリのダウンロード画面が表示されますので、Mac版・Win版あるいはWeb版を選択しましょう。

インストール後、アプリを立ち上げるとログイン画面が表示されますので、サイトで入力したアカウント情報を入力しましょう。

ログインするとプロジェクト作成画面が表示されますので「Create first project」をクリックするとダッシュボード上に作成したプロジェクトが表示されます。

Zeplinの使い方とは

実際にプロジェクトを進めるために、まずはプロジェクトにデザインデータをインポートする必要があります。

Sketchを使っている場合は「Plugins」タブの「Zeplin」から「Export Selected」をクリックすると、選択しているアートボードやオブジェクトがZeplinにエクスポートされます。

ここでZeplinのインポート画面が表示されますので、データを渡したいプロジェクトを選択すると拡大比率の選択画面が表示されます。

適切な拡大比率を選んでインポートすると、Zeplinのダッシュボードにデザインデータのサムネイルが表示されます。

プロジェクトに入るとインポートしたデータの情報が確認でき、データをまとめることで『スタイルガイド』を作成することもできます。

これでプロジェクトの準備は整ったので、メンバーを招待してプロジェクトを進めていきましょう。

Zeplinを活用できるケースとは

デザインの現場ではプロジェクトの性質によってZeplin以外にもさまざまなツールを導入して最適なワークフレームを作っています。

チームによってZeplinの使われ方も異なりますので、具体例を見てみましょう。

小規模リニューアル

Webコンテンツの小規模リニューアルの場合、デザイナー2名とエンジニア3名ほどのチームを考えてみましょう。

まずはSketchでモックアップを作成し、『InVisionでプロトタイプを作り、Zeplinでスタイル共有するというワークフレームが考えられます。

InVisionWeb上でデザインにコメントを残せてユーザー登録が不要という手軽なデザイン共有ツールです。Web上でリニューアルの方向性を定めてSketchでデザイン修正、フィックスしたデザインをZeplinで共有という流れのワークフレームです。

大規模運用も可能

デザイナー5名に対しエンジニア20名というようなより大規模なチームでもZeplinの運用は可能です。

この場合はInVisionに加えて『Abstractなどのバージョン管理ツールを利用すると効率的に運用できるでしょう。

SketchUIを作成し、InVisionで要件定義、Zeplinでエンジニアとデザイン共有しつつAbstractでバージョン管理をするという形です。

ソースコードをGithubで共有し、Zeplinと連携できるコミュニケーションツールであるSlackでやり取りを行うことも考えられるでしょう。

まとめ

デザイナーの仕事は要求に対する修正などでやり取りを行うことが欠かせません。

さまざまなツールを適切に活用することで、チームの規模やプロジェクトの性質に合った効率的なデザインを進めていくことができるでしょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/開発スタイルを経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ