社員インタビュー

zeplinでデザインスタイルガイドを作ってみました

22Inc.のUXデザイナー ヨウソウシです。

弊社サービススタンプスのブランディングをより向上できるように、スタイルガイドを作りましょう!という話になったので、どういう風に作っていくか、どのツールを使うか模索しながら制作していく過程を記録してみました。

ツールの選定

ネットで調べてみたら、fractal、storybook、documentCSS…など、世の中に出回っているスタイルガイドジェネレーターはたくさんあります。どれでもターミナルを使ってインストールなどの作業が必要です。ふむふむ、なるほど…若干デザイナーに優しくないですね。

と、思っているその時、frontifyというツールを見つけました。

frontifyを試してみた

f:id:yang22:20190717212135p:plain
https://frontify.com/

ブラウザ上で楽々編集・作成できるツールですが、有料です。無料試用期間は14日あります。その後は29ドル/月になります。海外のサービスなので全て英語です。

ここの記事を参考してざっくり作成してみました。
www.webcreatorbox.com

操作画面はかなりシンプルでわかりやすく、英語ですが問題なく操作できました。色々いじってみて、最後の出来上がりは下記のリンクからご覧ください。
company-146839.frontify.com

UIコンポーネントもcodepenのようにhtml / css / jsが書けるので非常にいいです。

スタイルガイドの作り方はここの記事を参考にしました:
uxmilk.jp

frontifyを使って作成していく中に、結局UIコンポーネントを作成するため、コードを書く必要があるのでコードに慣れていないデザイナーにとってやや大変な作業、、その時、デザイン指示書として利用しているzeplinというツールを思い出しました。

zeplinに移行

f:id:yang22:20190717212325p:plain

https://zeplin.io

sansan社がイベントでこのツールをデザイン指示書として使っていますよという話がありました。これはもしかしたらスタイルガイドとしても使えそうじゃない?と。

Sketch、Adobe XD、Figma、Adobe PhotoshopなどのUI作成ツールと連携できて、ファイルそのままアップするだけで全てのオブジェのサイズ、角丸具合、間隔などのcssコード情報が自動生成されます。

無料で利用可能ですがプロジェクトは1つのみです。コード書けなくて済むのはかなり楽です。速攻zeplinに引っ越しました。

zeplinでスタイルガイドを作る

前提としてはSketch上にスタイルガイドを整えておくことです。画面だけ作ってzeplinにアップしてもただのデザイン指示書になります。

Sketchでスタイルガイドを作成

Sketchの主力機能の「シンボル」「テキストスタイル 」「レイヤースタイル」を使ってデザインスタイルガイドを作っていきます。

シンボル

ボタンやアイコンなど作ってシンボルに登録します。登録しておくと、流用で使い回しがかなり便利になります。

テキストスタイル

見出し、本文、注釈、テキストリンクなど、テキストのカラー・サイズ・フォントの情報をテキストスタイルとして登録します。

レイヤースタイル

テーマカラー・サブカラーなどの色を登録します。色の情報だけではなく、枠線・ドロップシャドウ・半透明なども登録できます。色々な場面で活用できそうです。

zeplinにアップロード

zeplinにアップするにはzeplinのプラグインが必要なのでインストールしました。諸々作成した上で、アートボードを選択してzeplinにアップします。すると、自動的にシンボル(Components)、テキストスタイル(Text Style Catalog)、レイヤースタイル(Color Palette)が全て読み込まれます。これで一瞬でスタイルガイド完成できて最高ですね。

アートボードを選択してzeplinにアップ:
f:id:yang22:20190723221416p:plain

アップしたら自動にスタイルガイドが出てくる:
f:id:yang22:20190717211513p:plain

zeplinをslackと連携

zeplinはslackと連携する機能があります。連携しておくと、何かしらの操作(画面アップロードとか)があるとシステムでslackに通知が飛んできます。画面のプレビュー画像も付いててアップしたらすぐそれに対して議論することも可能で、やり取りはかなり便利です。
f:id:yang22:20190723220934p:plain

zeplin x sketchは最高

sketchでしっかりしたスタイルガイドを作ってしまえば、ワンクリックでzeplinにアップすると瞬時にエンジニアに共有できるスタイルガイドも完成されます。もうこれみたいな最強なコンビはないじゃないかと思うくらい愛用しています。

現在はプロジェクトを進めながらスタイルガイドを作り上げていく段階で、まだまだお見せできるものではないですが、デザイナーとしてzeplinとsketchの連携で本当に楽で最高です。



私たちと一緒に22世紀に残るサービスをつくりませんか?