フリーランスはZeplinがおすすめ
フリーランスデザイナーとして仕事をするなら、エンジニアやディレクターとのオンラインでのやり取りが欠かせません。
伝わりやすいようにデザイン指示書を作成したり、変更要求を細かくメールでやり取りしても、要求からフィードバックまでの時間がかかりすぎて効率的とはいえなかったりします。
ここで意思疎通のプロセスをもっとスピーディーでスムーズに行うソリューションとして『Zeplin』の導入を考えてみましょう。
Zeplinとは
Zeplinは『Photoshop』や『Skech』といったデザインツールで作成したデザインデータをチーム内で簡単かつ詳細にシェアできるアプリです。
デスクトップ版ではMac・Windowsに対応していてWeb版もあり、同時にシェアするのが1プロジェクトだけの利用なら無料です。
デザインデータはデザインツールのプラグインを通して簡単にZeplin内のプロジェクトとして読み込まれて、チームメンバーはZeplinさえインストールすればデザイナーから招待を受けてプロジェクトに参加できます。
効率よくフィードバックできる
Zeplinプロジェクト内ではデザインツールで作成したUI通りのデザインデータが表示されます。しかも配置された要素のカラー・サイズ・使用されているスタイル・CSSコードなどが自動で読み込まれます。
これらの要素情報は『マウスオーバーするだけ』で画面右側に表示されて、要素間の余白を指定すると距離が何ポイントかという表示も確認できるでしょう。
さらにメンバーであれば誰でもデザインデータ上の指定した位置に『コメント』を加えることができ、変更要求などを簡単にシェアすることができます。
このようにZeplinさえあればデザイン指示書の作成と共有が直感的でスピーディーに行えるので、デザイナーの負担はかなり軽減でき、エンジニアからも素早くフィードバックが得られるでしょう。
Sketchと連携して仕事効率化
デザインツールとしてSketchを使っているなら、Zeplinのインストール時に自動的にプラグインが加えられています。
Sketchでデザインデータを作成したら、Sketch内でZeplinへのエクスポートを選択するだけでZeplinがプロジェクトを作成します。
プロジェクトに招待したメンバーとコメントをやり取りして、デザイナーがSketch上で変更を加えたら変更履歴もプロジェクト内でいつでもチェックできるのでおすすめです。
このようにSketchとZeplinを連携すればデザインプロセスのムダが大幅に削減できるので、かなりの能率アップが望めるでしょう。
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でスタイル共有するというワークフレームが考えられます。
InVisionはWeb上でデザインにコメントを残せてユーザー登録が不要という手軽なデザイン共有ツールです。Web上でリニューアルの方向性を定めてSketchでデザイン修正、フィックスしたデザインをZeplinで共有という流れのワークフレームです。
大規模運用も可能
デザイナー5名に対しエンジニア20名というようなより大規模なチームでもZeplinの運用は可能です。
この場合はInVisionに加えて『Abstract』などのバージョン管理ツールを利用すると効率的に運用できるでしょう。
SketchでUIを作成し、InVisionで要件定義、Zeplinでエンジニアとデザイン共有しつつAbstractでバージョン管理をするという形です。
ソースコードをGithubで共有し、Zeplinと連携できるコミュニケーションツールであるSlackでやり取りを行うことも考えられるでしょう。
まとめ
デザイナーの仕事は要求に対する修正などでやり取りを行うことが欠かせません。
さまざまなツールを適切に活用することで、チームの規模やプロジェクトの性質に合った効率的なデザインを進めていくことができるでしょう。
