Sketchから学ぶコンポーネントデザイン

部品から設計することに慣れる

デザインツールとして Sketch や Figma を推している理由のひとつにシンボルがあります。Adobe CC ライブラリのアセット管理とは異なり、デザインした部品（コンポーネント）を拡張したり組み合わせることができるのが魅力。様々なスクリーンサイズに耐えられるように作るのはもちろん、デザインを運用していくには、部品からしっかりデザインできるのはこれからのツールでは必須です。

コードが書ける人、コードを書く思考が分かる人であれば、部品から作ってレゴブロックのように積み上げるという Atomic Design 的な考え方は当然と思えるでしょう。なので、デザインシステムを作りましょうという考えに至りますが、画面の全体像から徐々にディテールを作るやり方でデザインしていた人には難しかったりします。いきなり部品から作ることに慣れていないですし、マクロ（画面全体）とミクロ（部品）両方を交互に見ながら設計できるツールを使っているとも限りません。

全体からディテールを作るという進め方の弱点は、UI デザインに必須の一貫性を失いがちになりになるところ。また、ひとつひとつの画面の見た目作りになってしまい、全体像を見失うこともあります。

昨年、何度か Sketch セミナーで講師をした理由は、コンポーネントを積み上げて設計をする能力を身につけなければ、デザインシステムどころではないと感じたからです。Sketch が物足りないところはありますが、シンボル機能を通して部品から設計していくことにも慣れますし、そこで学ぶ思考方法は他のツールでも応用がきくと思います。

シンボルの情報設計

設計の仕方次第で、コンポーネントの中にあるテキスト、色、大きさ、画像などあらゆる要素を変更できるシンボルを作ることができます。一貫性のある見た目を保ちながらも、コンテンツや UI の役割に応じてマスターのシンボルを壊すことなくバリエーションを作ることができます。リサイズ機能と組み合わせることで、スクリーンサイズや UI の配置が変わってもデザイナーが意図した見た目を保つことができます。

誰もが最初はするミス。
何でもカスタマイズできるけど、整理がついていない状態。

しかし、ただシンボルを作るだけだと何でも自由にカスタマイズできるだけで、デザインしている web サイトやアプリに最適化されていないものになる場合があります。Sketch では、Override というマスターのシンボルを上書きして使える機能がありますが、たくさん上書きできれば良いわけではないわけです。

そこで、以下の考え方でシンボルをデザインするようにしています。

コンポーネントを見直す

設計次第で何でもカスタマイズできるように作れるシンボルですが、デザイナーが決めたいルールもあって、そこは変えて欲しくないものです。また、ナビゲーションから小さなボタンまでコンポーネントの分類の仕方は自由自在。大きすぎると汎用性がきかないですし、小さすぎると自由すぎるという難点もあります。

複数の画面を通して使うコンポーネントが見つかり、それらが情報のカタマリとして意味を持つのであれば、まずその部品を 2 種類の要素に分けて考えます。いきなり Sketch でシンボル作りを始める前に、各コンポーネントのあり方を見直しておきましょう。

1. 固定値
   デザインのルールとして決めておきたい要素（タイポグラフィ、色、間隔）
2. 変数
   変化する要素又は情報（Override させる部分）

レイヤーを整理する

いよいよ Sketch でシンボル化を始めるわけですが、以下の 5 項目に注意してレイヤー分けをするだけでもシンボルの使い勝手がグッと上がります。あとでファイルを見たときに思い出しやすくなるだけでなく、シンボルのユーザビリティも上がります。

• シンボルで命名したレイヤー名が Override の項目になる
• レイヤーをロックすると Override では非表示になる
• レイヤーの順番が Override で表示される順番になる
• Override や置き換えしたいシンボルは必ず同じ大きさで作る
• まとめておきたい要素をグループ化しておくとリサイズ設定がしやすい

シンボルが整理された状態

ユーザーアイコン、名前、ID が並んでいる UI がある場合、名前と ID をひとつのテキストボックスで作ることは可能です。しかし、名前と ID を Override させたいのであれば、テキストボックスは 2 つにしておくべきです。また、テキストボックスも幅が固定の「Fixed」ではなく、内容に応じて可変する「Auto」にしておくと、テキストボックス同時の間隔を保ったまま内容を変えることができます。

まとめ

Sketch や Figma を使うかどうかは現場のワークフロー次第です。また、今回紹介したような機能は他のツールでも実装されるでしょうし、Sketch より直感的に設計ができるものも出てくると思います。ただ、再利用が可能で柔軟性の高いコンポーネントが揃ったデザインファイルを作るとなると、 Sketch か Figma が『最大手』になります（2018年1月現在）。

たとえ現場で使わなくても、どうやって部品からデザインしていくのかという考え方を養うためにツールを触ってみるだけでもデザイナーとして前進すると思います。ツールの使い勝手はそれぞれ微妙に異なりますが、コンポーネント思考で設計する考え方は他でも使いますし、長く残るスキルになります。