概要
こんにちは。デザイナーの塚本です。
弊社ではデザインツールとしてSketchを導入しており、個人的にも毎日触っているので今回、Sketch Advent Calendar 2017に参加しました。
デザインの仕事をしているとデザイナーとエンジニアの間でうまくデザインの共有ができていなかったり、そもそも認識の違いがあったり。。。結果、心穏やかではない状況に陥ってしまったという話を聞くことがあります。
その原因のほとんどがおそらくデザイナーからエンジニアに渡す仕様書がうまく機能していないことにあるかと思われます。
この記事ではそういった問題を解消し、より円滑に仕事を進めてデザイナーがエンジニアと仲良くなろう！という視点のもと筆を執るならぬキーボードを叩きたいと思います。
具体的にはZeplinというツールを用いたデザインの共有方法を紹介していきます。
Zeplinとは
まず初めに簡単にZeplinというツールの紹介をします。
ズバリ、仕様書の代わりになるツールです。
SketchファイルをZeplinにインポートするだけで、以下の画像のようにZeplin上で自動的にコンポーネント間の距離やfont-sizeなどの情報が生成され、仕様書ができてしまいます。
Zeplinを導入するメリット
それではZeplinを導入するメリットを挙げていきたいと思います。自動的に仕様書ができてしまうというだけでもメリット爆発ですが、もう少し細かく見ていきたいと思います。
- 前述しましたが、仕様書が自動的に作成されます。結果、仕様の記載漏れというヒューマンエラーを防げる。
- Zeplin上でデザインデータを共有できるので、「Sketchのソフトがないからファイルを開けない」「デザインデータをいちいち画像に書き出して送付する」「デザインデータをダウンロードして開く」といった手間が無くなる。
- デザインデータ上にコメントを追加できる機能があるので、修正が出てきた場合やエンジニア側から疑問点が出てきた場合、デザイナー・エンジニア間でコミュニケーションが取りやすい。メールやチャットでテキストで説明する必要がなくなる。
- 変更履歴が残っているので、どこを変更したかを確認できる。
- 仕様書を作成する時間が極端に削減されるので、より良いデザインやコンテンツ作りに使う時間が生まれる。仕様書作成というフローはあくまで制作側で発生・完結するものなので、ユーザー体験には関わってきませんよね。その時間が削減されるのはデザイナーにとっては嬉しいですね。
このようにデザイナーとしても嬉しい点が多々ありますが、エンジニアとのコミュニケーション効率もかなり上がると思っています。
運用事例
弊社ではZeplinでより円滑に認識を共通化するため、Sketchのアートボード名をサイトマップのパスベースにしています。例えば、商品ページであれば、パス名が/products、アートボード名も/productsといった具合です。
モーダルウィンドウを使う場合はパスが存在しないので、アートボード名としては/products_modalとして現状、対応しています。
レスポンシブデザインの場合、PCとMobileでそれぞれ、pc-/productsやmobile-/productsとしています。
命名規則に関してはまだ改善の余地があるのではないかと考えているので、何かいいアイデアや事例等があれば、ぜひ教えていただければ幸いです。
最後に
Zeplinを用いたデザインの共有方法を紹介しましたが、いかがでしたでしょうか。
これからもどんどん他のツールが誕生・強化されていくことが想定されますが、個人的にはZeplinを用いるのは現状のベストプラクティスだと感じています。
Sketchは導入しているけど、デザイン共有に苦慮している方はZeplinを導入してみてはいかがでしょうか。仕事の効率化はもちろん、デザイナーとエンジニアがもっと仲良くなるでしょう！