Atomic Designの概念を参考にSketch.appのシンボルを効率的に管理する方法

新年明けましておめでとうございます。
2017年も、未来の豊かさにつながる仕組みをデザインする組織として、STANDARDメンバー一同、常に学び、考え、邁進して参ります。本年もどうぞ、よろしくお願いいたします。

Sketchの連載記事を執筆しました

私事ですが、年末にWPJさんでSketchの連載記事を執筆させて頂きました。
吉竹 遼のSketch入門 for UIデザイナー – WPJ

対象はこれからSketchを触ろうと思っている方や、使っているけどもっと色々使い方を知りたい、という方です。今回はこの連載の中から、周りの反応が上々だったテクニックについて、編集さんに許可を頂き増補バージョンとしてお送りします。

Sketchはバージョン41以降シンボルのオーバーライドが可能になり、ますます効率化が進み使いやすくなりましたが、一方でシンボルを作成する機会も多くなり、管理の手間が増えてきました。
そこで、Atomic Designの考えた方を参考にした、修正と管理に強いシンボルの作り方をご紹介します。

Atomic Designとは何か

Atomic Designは主にWebデザインに対する新しい手法として2015年に発表されました。
Atomic Design | Brad Frost

サイトの構成に使用するコンポーネントを最小単位まで分解し、それらを組み合わせることでより大きなコンポーネントやページを作成する、というのが大まかな考え方です。

Atomic designとは、パーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD

Atomic Designでは小さい順に

• Atoms（原子）
  • それ以上の分解が難しい要素。
  • 例：フォントやカラーパレット、単体のボタンなど。
• Molecules（分子）
  • Atomsを組み合わせて作られたコンポーネント。
  • 例：テキストボックス+ボタン=入力フォームなど。
• Organisms（有機体）
  • Moleculesの組み合わせで作られた比較的複雑なUI。
  • 例：ロゴ+複数のボタンのレイアウト=ヘッダなど。
• Templates（テンプレート）
  • Organismsの組み合わせで作られたワイヤーフレーム。
• Pages（ページ）
  • ユーザーが目にするものと変わらない、より具体的な姿となったTemplates。

と各要素が分類されており、Atomsから作り始めることを推奨しています。
この概念を参考に、Sketchのシンボルの管理方法を探っていきます。

Sketchへの応用

とは言え、実務においていきなりAtomic Designを導入するのはハードル高いのではないか？というのが個人的な感想です。エンジニア側との認識合わせとか運用フローを考えないといけないですからね。
UIデザインだけに注目すれば、まずは全体の情報設計を行い、後半にフォントサイズや色といった細部を手がける、という方も多いと思います（というか私がそうです）。
というわけで、Atomic Designの美味しいところだけ拝借した応用テクニックを考えてみました。

コンポーネントの積極シンボル化&レベル制による階層分け

手順は単純で、考え方としては「Atomic Designの逆バージョン」です。
どういうことかと言うと、Sketchで作成したコンポーネントを積極的にシンボル化し、さらに分解できるようであれば追加でシンボル化を行うことで、結果的にAtomic DesignのAtomosやMoleculesに相当するコンポーネントが出来上がる、という作り方です。これなら最初からAtomic Designに則ったフローを導入しなくとも、その恩恵を受けられるようになります。

また、この作り方ではシンボルの命名規則にレベル制を導入します。
※レベルの考え方は下記を参考とさせて頂きました。
Atomic Design を分かったつもりになる

シンボル名に半角スラッシュを入れることで階層化できるSketchの特徴を活かし、命名ルールを

レベル/コンポーネントの種類/コンポーネント名
または、
レベル/コンポーネントの種類/コンポーネントの適用画面_固有名称状態

という構造にします。レベルとコンポーネントはそれぞれ以下のように使い分けます。

レベルの種類

• Lv1……Atomsに相当。それ以上構造を分解できない単体のコンポーネント。
  • アイコンやボタンなど。
• Lv2……Moleculesに相当。アイコンと矩形の組み合わせでできたコンポーネント。
  • 複雑なボタンやナビゲーションバーなど。
• Lv3…… Organismsに相当。Lv1ないしLv2の組み合わせでできたコンポーネント。
  • コンテンツに相当するブロックやリストなど。

コンポーネントの種類（一部）

• icon……アイコン類。主にLv1に使用。
• pic……アイコンよりも大きい画像類。主にLv1に使用。
• txt……テキスト類。主にLv1に使用。
• img……写真類。主にLv1に使用。
• btn……ボタン類。主にLv1、Lv2に使用。
• list……リスト類。主にLv2、Lv3に使用。
• bar……ナビゲーションバーやタブバー。主にLv2、Lv3に使用。
• block……複数レベルでできたブロック。主にLv2、Lv3に使用。

具体的には、以下のようなシンボル名となります。

Lv1/icon/tab_home_active
Lv3/block/detail_comment

得られるメリット

この制作プロセスで得られる主なメリットは2つ。

1つ目は、作成したコンポーネントをどんどんシンボル化していくことで、早期から統一感や一貫性を保てること。Atomic Designで得られるメリットと同等ですね。シンボル化を後工程に持ってきてしまうと一貫性があるかどうか確認に手間がかかるため「何か作ったらとりあえずシンボル化」を手に覚えさせるとよいでしょう。私はキーボードショートカットで「⌃C」に「Create Symbol」を割り当てています。
加えて、アートボードのレイヤーリストにほぼシンボルだけが並ぶ状態となるので、自分以外のメンバーが見ても画面の構造が理解しやすくなります。シンボルを細かく分解することで1コンポーネントあたりのレイヤー数も減るので、厳密にレイヤー名を整理しなくてもある程度耐えられるようにもなりますね（オーバーライドを考慮する必要はありますが）。

2つ目は、レベル制によりコンポーネントの管理の効率化と可視化が得られること。
大量に並んだシンボルを整理整頓するには「Symbol Organizer」というプラグインが必携となりますが、レベルがシンボル名に入ってないとabc順に整理され、どういった並びになっているかが把握しづらくなります。レベルを入れることでコンポーネントのボリュームに応じた整理整頓が可能となり、ひと目で情報を把握できるようになります。

（左：レベルのない状態で整理 / 右：レベルがある状態で整理。コンポーネントが少ないのでそこまで大きな違いは見られませんが……）

ざっくりまとめると
シンボル化 x レベル制 = 効率化！
というわけです。

今回はシンボルの管理方法についてのみ書きましたが、連載ではSketchの基本から実務で使える考え方やテクニックまで学べる構成となっていますので、Sketchについてもっと知りたい！学びたい！という方はぜひご登録のうえ、ご一読頂ければ幸いです。
吉竹 遼のSketch入門 for UIデザイナー – WPJ