Sketchでデザインしながらガイドラインを作ろう

はじめまして。UIデザイナーのカミソルです。
わたしはOHAKO.incの受託事業の部署でサービスの体験設計からUIデザインをしています。
今回はSketchのSymbol機能を使って、デザインしながら効率よくガイドラインを作る方法について書きたいと思います！

※この記事はSketch Advent Calendar 2017 19日目の記事です。

なぜデザインしながらガイドライン化したいのか

ガイドラインを作る目的は2つあります。

1.  エンジニアとの連携のため
"カラーの種類"、"テキストスタイルの種類"、"画像として書き出すもの"、"コンポーネント"の4つがはっきり伝わるSketchデータにしたい。

2.  デザイン運用のため
デザインを運用をするとき、誰でも追加や変更がしやすいようにしたい。

「デザインしながら」とつけた理由は、デザインしていたら自然にガイドラインが出来ていた。という形を目指したいからです。
ガイドラインは作り方によって工数がものすごくかかりますし、ガイドライン自体の運用も必要になってしまいます。
限られた時間の中でできるだけユーザーについて考えることやUIデザインに時間をかけたいから、ガイドラインはデザインの副産物的にできる方法があったらいいな・・・。そう思って本気で考えてみました。

前置きはこのくらいにして、具体的な方法について書いていきます！

必要なもの

- Sketch Version 47以上
- プラグイン：Symbol Organizer (必須)
- プラグイン：Rename It (あると便利)

1. カラー、テキスト、画像をライブラリ化して、UIのあるSketchのSymbol Pageにはコンポーネントだけが残るようにする

こうすることでエンジニアさんが知りたい情報を明確に分けます。
今後何度も使えるようにカラーとテキストのライブラリを作ってみました。おまけで色を追加したりテキストスタイルをコピペするだけで簡単にドキュメントができるDocPageを入れています。

このカラーとテキストのライブラリはGithubに置いています。興味のある方はぜひ使ってみてください。次はイメージライブラリを作りたいと思っています...。きっと作る！

2. symbolの命名規則を整える

命名規則はEnduring CSSの概念を参考にしました。
Enduring CSSもAtomic Designと同様、特定のスコープでUIを分割します。

Namespace - クラス名の衝突を防ぐための接頭辞で、コンテキストやモジュールをあらわす。
Module - 視覚的に認識できる個別の機能領域のもっとも大きな区分。
Component - Moduleに含まれる機能性を持つ部品。
ChildNode - Componentに含まれる独立した部品。
variant - Module内の部品のバリエーション、もしくは部品が動的に変化した状態。

※こちらの記事を参考にさせていただきました。

そしてこのスコープを参考にした3パターンの規則がこちら。

① Namespace / Module(or Component) / Size / ChildNode - variant
② Module(or Component) / Size / ChildNode - variant
③ Module / Component / Size / ChildNode - variant

Size以降はあってもなくても構いません。
①②③の例を挙げてみましょう。

① Bars / Search Bar - active
② Button / Large / Icon + Text - inactive
③ Timeline / Post / Large / 2LineText

これで（だいたいが）うまくまとまってきます。

Enduring CSSの概念はAtomic Designと似ていますが、大きな違いは作る順番が逆なこと。
非常にざっくりと言うと、Atomic Designの場合は小さなものから作りますが
Enduring CSSは大きなものから順番に作っていく考え方です。

最後に、実際にこの命名でUIを作ってみます。

こうやって大きなものから順に命名をしていくと、リファレンスする際にとても探しやすいです。

Atomicのようなレベル分けよりも少し考えながら作る必要があるため、時間がかかるのがデメリットですが
誰がみても探しやすいこと、追加・変更の際に迷わないことを重視ししています。

おわりに

以上、デザインしながらガイドラインを作りたかった私が考えた、2つの方法をご紹介しました。

今回ご紹介した方法は、新規立ち上げ時などのデザイン変更が多い時期に特におすすめです。
サービスが回り始めた後、コンポーネントが乱立して誰かが困らないような基盤を作るのもデザイナーにとって非常に重要な作業だと思っています。

まだまだ完璧な方法だとは思っていないので、突っ込みもドンドンお待ちしています！

ありがとうございました。