zeplinでデザインスタイルガイドを作ってみました
22Inc.のUXデザイナー ヨウソウシです。
弊社サービススタンプスのブランディングをより向上できるように、スタイルガイドを作りましょう！という話になったので、どういう風に作っていくか、どのツールを使うか模索しながら制作していく過程を記録してみました。
ツールの選定
ネットで調べてみたら、fractal、storybook、documentCSS…など、世の中に出回っているスタイルガイドジェネレーターはたくさんあります。どれでもターミナルを使ってインストールなどの作業が必要です。ふむふむ、なるほど…若干デザイナーに優しくないですね。
と、思っているその時、frontifyというツールを見つけました。
frontifyを試してみた
ブラウザ上で楽々編集・作成できるツールですが、有料です。無料試用期間は14日あります。その後は29ドル/月になります。海外のサービスなので全て英語です。
ここの記事を参考してざっくり作成してみました。 www.webcreatorbox.com
操作画面はかなりシンプルでわかりやすく、英語ですが問題なく操作できました。色々いじってみて、最後の出来上がりは下記のリンクからご覧ください。 company-146839.frontify.com
UIコンポーネントもcodepenのようにhtml / css / jsが書けるので非常にいいです。
スタイルガイドの作り方はここの記事を参考にしました： uxmilk.jp
frontifyを使って作成していく中に、結局UIコンポーネントを作成するため、コードを書く必要があるのでコードに慣れていないデザイナーにとってやや大変な作業、、その時、デザイン指示書として利用しているzeplinというツールを思い出しました。
zeplinに移行
sansan社がイベントでこのツールをデザイン指示書として使っていますよという話がありました。これはもしかしたらスタイルガイドとしても使えそうじゃない？と。
Sketch、Adobe XD、Figma、Adobe PhotoshopなどのUI作成ツールと連携できて、ファイルそのままアップするだけで全てのオブジェのサイズ、角丸具合、間隔などのcssコード情報が自動生成されます。
無料で利用可能ですがプロジェクトは１つのみです。コード書けなくて済むのはかなり楽です。速攻zeplinに引っ越しました。
zeplinでスタイルガイドを作る
前提としてはSketch上にスタイルガイドを整えておくことです。画面だけ作ってzeplinにアップしてもただのデザイン指示書になります。
Sketchでスタイルガイドを作成
Sketchの主力機能の「シンボル」「テキストスタイル 」「レイヤースタイル」を使ってデザインスタイルガイドを作っていきます。
シンボル
ボタンやアイコンなど作ってシンボルに登録します。登録しておくと、流用で使い回しがかなり便利になります。
テキストスタイル
見出し、本文、注釈、テキストリンクなど、テキストのカラー・サイズ・フォントの情報をテキストスタイルとして登録します。
レイヤースタイル
テーマカラー・サブカラーなどの色を登録します。色の情報だけではなく、枠線・ドロップシャドウ・半透明なども登録できます。色々な場面で活用できそうです。
zeplinにアップロード
zeplinにアップするにはzeplinのプラグインが必要なのでインストールしました。諸々作成した上で、アートボードを選択してzeplinにアップします。すると、自動的にシンボル（Components）、テキストスタイル（Text Style Catalog）、レイヤースタイル（Color Palette）が全て読み込まれます。これで一瞬でスタイルガイド完成できて最高ですね。
アートボードを選択してzeplinにアップ：
アップしたら自動にスタイルガイドが出てくる：
zeplinをslackと連携
zeplinはslackと連携する機能があります。連携しておくと、何かしらの操作（画面アップロードとか）があるとシステムでslackに通知が飛んできます。画面のプレビュー画像も付いててアップしたらすぐそれに対して議論することも可能で、やり取りはかなり便利です。
zeplin x sketchは最高
sketchでしっかりしたスタイルガイドを作ってしまえば、ワンクリックでzeplinにアップすると瞬時にエンジニアに共有できるスタイルガイドも完成されます。もうこれみたいな最強なコンビはないじゃないかと思うくらい愛用しています。
現在はプロジェクトを進めながらスタイルガイドを作り上げていく段階で、まだまだお見せできるものではないですが、デザイナーとしてzeplinとsketchの連携で本当に楽で最高です。
