Sketchを使用したデザインガイドライン構築をするときに、気をつけたこと

みなさんの会社に、デザインガイドラインはありますか？

筆者はインドのフィンテック企業であるCpital Floatで働くデザイナーです。 デザインガイドラインのない企業に入社したことをきっかけに、Sketchを使ってデザインガイドラインを作りました。当初は、いくつかの画面がPhotoshopでデザインされているだけでした。

問題は、社内外で扱われているさまざまなプロダクトに、異なるフロントエンドフレームワークが使われていたことです。私は、すべてのプロダクトを統一させるビジュアル・ガイドラインをSketchで作成しようと決めました。

一貫して参照できるスタイルガイドを作成することで、会社のプロダクト全体に統一感を持たせるとともに、今後のロードマップ上で計画されている新しい機能にも対応できるようにする必要がありました。何回かのブレインストーミングを重ねた１ヶ月後、最初のプロトタイプが完成しました。

▲初期のスタイルガイド

シンボルは作成していないものの、Sketchファイルをスターターテンプレートとして使用することに決めました。しかし、この方法を採用してから数週間後、いくつかの問題に直面したのです。プロダクトが徐々に複雑化する中で、多くの矛盾に直面しました。小さなタスクに追われつつ、時間を無駄にしたのです。

デザインガイドラインを作る前にすること

初期プロトタイプで多くの問題や矛盾に直面しましたが、Salesforce, Atlassian, Shopify, IBM、Google Material designなど大企業のデザインガイドラインに刺激を受け、どのように構築するのか、そのプロセスをより深く学ぶことにしました。デザインワークフローについても調べ、Mediumで紹介されている数々の事例からも多くを学びました。

以下、会社における初めてのデザインシステム構築について、そのプロセスと要点をまとめていきます。

ゴール設定

まず、私たちのデザインシステムでは、以下のことを達成しようとしました。

1. プラットフォームに関わらず、全てのプロダクトに適用できる標準化された要素と統一化されたデザインをつくること
2. コード化されたコンポーネントとSketchのシンボルが、視覚的にも構造的にも整合すること
3. 維持が簡単なこと。コンポーネントのアップデートや追加は簡潔にし、デザイナーやディベロッパーを待たせることなく最新のバージョンを提供すること

はじめにルールを決めた

すぐに行動に走る前に、まずは全ての要素を本当の意味で再利用可能にするためにいくつかのルールを定めました。まず、シングルファイルソースではなく、nestedライブラリを使用することに決めました。

そうすることで、カラーやアイコンを異なるSketchファイルに格納することができ、ファイル同士共通でシンボルを参照することができるようになりました。一つのファイルでシンボルをアップデートすると、そのシンボルを参照している他の全てのファイルにもそのアップデートを反映させることができるのです。

その上で、“仕事場の衛生”を保つために、以下のようにパターンとルールを定めました。

1. ファイルとフォルダのストラクチャー
2. ページとアートボードストラクチャー
3. シンボルを使用し、同じ作業を繰り返さないこと

▲ファイルとフォルダのストラクチャー

▲ページとアートボードストラクチャー

Atomic systemの考え方をデザインガイドラインに取り入れた

レベル0：クォークとエレクトロン

全体を通して、要素同士が入れ子状に連結してるアトミック・システム（Atomic system）を採用しました。一番小さなレベルはクォークとエレクトロンです。レイヤーをアトミック・システム状に配置することで、個々のファイルを扱いやすくしました。こうすることで、あらかじめ構築されたデザインエレメントと、再利用しやすさのバランスも担保しやすくなります。

カラーとアイコンは、エレメントの属性という意味で原子レベルよりも小さいクォークとエレクトロンと定義しました。カラーは、バックグラウンドやテキスト、ボーダーなど、どこでも使用することができます。

カラーをエレメントとして扱うことで、アイコン用のファイルにより一貫性を持たせることができます。ここで定められたカラーのルールは、原子レベルのシンボルにて、オーバーライドして使用されることになります。

▲デザインシステム・カラー（ダウンロード）

レベル１：原子

原子はUIデザインにおける各エレメントを指します。原子を定義するのと同時に、これらのエレメントがHTML上でどのように機能するのか、考える必要がありました。

カード、ツールチップ、シャドウ、ディバイダー、ボタン、ロゴ、カーソルはすべて原子にあたります。

デザイナーは、これらのエレメントの様々なバージョンを自由に選ぶことができます。更に、それぞれのバージョンの呼び名は、開発側で使われるものと統一させることでより分かりやすくしました。

原子は、カスタムUIを使用する場合でなければ、オーバーライドとしても使用することができます。

レベル２：分子

この分子レベルで、形が作れるよういなります。本来であれば繰り返し行わなければいけない作業を大幅に削減し、デザインに統一感を持たせてくれるのが分子です。ボタンのテキストを変更したり、エレメンツを削除したり隠したりする作業が楽になり、互換性があるコンテンツを構築することができるのです。

包括的に考える、ということが、分子の考え方の基本です。

レベル３：有機体とページ

３つめのレベルでは、ページ・ヘッダー、テーブル、Play/App ストアのモックアップ、日付ピッカー、キーボードなど、限られたエレメントのみ扱うことになります。というのも、プロジェクト単位で特徴やコンテンツが異なるため、この段階で既に規定されたデザイン要素を提供することが難しいためです。

もちろん、どのプロジェクトもページ内に繰り返して使用されるデザインの構造はあるのですが、個々の要件によって左右されることが少なくありません。そのため、シンボルを使用することが有効となります。

ページやテンプレートはデザインプロセスのアウトプットであり過程ではないため、このレベルはアトミック・システムには入れないことにしました。

さいごに

Sketchライブラリは今日のデザインのあり方を大きく変えることでしょう。今回、初めてのデザインシステムを構築する過程で、以下のようなことも学びました。

1. シンボル内のレイヤーの順序は大切だということ。
2. 検索やシンボルの挿入に Sketch runnerを使用すること。
3. 共通のテキストやレイヤースタイルを生成する際に、SketchStyles Generatorを使用すること。
4. デザイナーとエンジニアを繋ぐツールであるSketch Measureを使用して、最新のデザインをエンジニアに共有する作業を楽にすること。

そんなSketchにも、もちろん欠点や足りない機能はあります。例えば、以下のようなことがあげられるでしょう。

1. 共通テキストとレイヤースタイルは、ファイル外では共有ができない
2. オーバーライドしたシンボルの要素をエクスポートすることが容易ではない
3. ライブラリのバージョンコントロールが存在しない
4. マスクとして使用できるシンボルが作れない

以上、Sketchを使用した会社初のデザインシステム構築について紹介しました。

（翻訳：Mariko Sugita）