Sketchデザインシステムの構築:ヒントとコツ

Sketchデザインシステムの作成は、最初は難しすぎて時間がかかるように思えるかもしれませんが、将来的には本当に報われます。一貫したソリューションを実現し、DesignOpsを改善したい場合には、この方法が必要です。

そこで、Sketchでデザインシステムを構築するプロセスをガイドするための役立つヒントとコツをいくつか用意しました。

デザインシステムとは?

デザインシステムは通常、ユーザーインターフェースの構築方法の一貫性につながるデザイン原則とアセットのセットとして説明されます。デザインシステムを使用する主な利点は、次の3つです。

• 特定の使用状況コンテキストとアプリ ドメインにチューニングします。
• UXデザインパターンとブランドスタイルのガイダンスのインベントリとして機能します。
• 設計プロセスをスピードアップし、一貫性を大幅に向上させます。

デザインシステムに関するすべては、3部構成のブログシリーズのパイロット記事である「優れたデザインシステムを構築するための6つのステップ」 ですでに説明しています。したがって、Sketchでデザインシステムの構築を続行する前に、それを見て主題を深く探求することができます。

Sketchとは?

これは、合理化されたデジタルデザインに最も一般的に使用されるオールインワンベクターグラフィックプラットフォームの1つです。Sketchを使用すると、デジタル製品クリエイターは、アイデアを視覚化し、プレゼンテーションを行い、すばやく簡単にモダンなモバイル デザイン レイアウトや基本的なプロトタイプに変換できます。

​デジタル製品設計プラットフォームは、設計者に一連のUIライブラリ、柔軟なコンポーネント、および絶えずアップグレードされるシンボルを提供します。このようにして、デジタルクリエイターは、コンセプト、デザインバージョン、ユーザーフローを試し、最新のUIとUXのトレンドを制作物に組み込むための力とツールを手に入れることができます。

Sketchの利点は何ですか?

• さまざまなデザインバージョンを簡単に構築して試すことができます。
• 直感的で、基本的なプロトタイピングやユーザーストーリーの表示に最適です。
• 常に更新されるライブラリ、シンボル、およびコンポーネントの配列を提供します。
• リンクオートレイアウト、マジックミラー、Gitスケッチなどの便利なプラグインが含まれています。
• デザイナーがあらゆる種類のベクターグラフィック表現を作成できる直感的なインターフェイスを提供します。
• ​WYSIWYGドラッグ&ドロップApp Builderなどの他のツールと簡単に統合できるため、開発時間と設計の実装を削減し、部門間のチームコラボレーションを向上させることができます。

Sketchの欠点は何ですか?

• コラボレーションやコミュニケーションの余地が少なすぎる。
• 行われた設計の変更を比較することはできません。
• Lacks basic image editing options.
• No free version.

Sketchデザインシステムとは?

Sketchのデザインシステムは、基本的に信頼できる唯一の情報源として機能し、次のプロジェクトに着手するために必要なすべてのリソースを組み合わせて、Sketchデザイン全体の一貫性を維持します。このようなシステムを持つことは、デザイナーとしてのあなたの仕事を本当に容易にし、ブランディング、一般的なデザイン要件、および標準を遵守する際の不一致を減らすのにさらに役立ちます。

Sketchでデザインシステムを構築する方法は?

それでは、Sketchデザインシステムを構築し、色変数を使用して色の基盤を作成する方法を見てみましょう。そこで、ヒントとコツをご紹介します。

カラーパレット

原色として青を使用し、アクセントとして緑を使用している場合、単一の色相以上のものが必要になる可能性が非常に高いです。青いボタンには、通常、少し暗く、色あせて見える可能性のある無効状態であるホバー状態が必要になる可能性が高くなります。ただし、これら 2 つの派生元となる基本色が 1 つあり、それは色変数として存在する必要があります。パレットについて話すとき、次のヒントで2つについて説明します。

続行するには、グレーの色と、アプリとコンポーネント (リストやカードなど) のメインの背景色に同様のアプローチを使用することをお勧めします。Indigo.Designでは、その色を「表面」と名付けました。これは色変数として存在し、アプリ全体を明るいテーマから暗いテーマに簡単に切り替えることができます。もちろん、良好なコントラストを確保するためには、それに応じて灰色を更新する必要があるため、表面を変更するだけでは不十分です。

しかし、ほとんどの場合、それらはパレットも形成するため、次のヒントでは、原色とアクセントカラーとともに、それについてもう少し掘り下げる必要があります。

カラースタイルを使用して、プライマリカラー、アクセントカラー、グレーカラーの派生色を作成し、パレットを形成します。Indigo.Designでのアプローチは、変数の色相にマッピングする500のバリアントを用意し、その下の基本色を暗くして彩度を高める塗りつぶしを追加することで、最大900の暗いバリアントを作成することでした。50まで下がる明るいバリエーションでは、逆に、ベースカラーに追加された塗りつぶしレイヤーの彩度を下げて明るくします。

ここでは、各色合いに必要な結果が得られるまで、これらの塗りつぶしのプロパティを試すことができます。ただし、最終的な目標は、単一の色ではなく、完全な色のパレットを持つことであることに注意してください。最良の部分は、色変数を更新する必要があるときに、すべての色スタイルが一緒に更新され、別のパレットが非常に簡単かつ迅速に提供されることです。言い換えれば、原色に対して一度行い、その後、複製してアクセントカラーをベースとして使用するように切り替えて、2番目のパレットを作成します。

さて、前のヒントの灰色は、それ自体がセクションに値するため、省略しました。私たちが灰色の色合いについて話すとき、2つの相反するアプローチがあります(しゃれを意図しています)そして通常、友好的な議論から、それは痛みを伴う議論に発展します。デザイナーの1つのグループは、グレーの色は他のすべてのパレットと同じように、中央にベースがあり、暗い色調と明るい色調の両方に派生物があるべきだという認識を擁護しています。反対側のグループは、パレットの一方の端にベースを置き、不透明度で遊んでいる残りの色合いを抽出します。ターゲットアプリケーションが1つのモードのみの場合、暗いか明るいかはあまり関係ありません。つまり、ほとんどの場合、どちらのアプローチも問題なく機能します。

ただし、両方の世界に対してSketchデザインシステムを設計している場合は、おそらく不透明度のアプローチを選択する必要があります。これは、黒または黒に近いグレーの色変数を使用し、すべてのバリアントに異なる不透明度を適用することを意味します。たとえば、900 が 87% を使用し、800 が 74% を使用するなど、50 までは 2% しかない場合があります。これを適切に行うと、明るいテーマから暗いテーマへの切り替えは、上に示したように表面と灰色の色の変数を変更するのと同じくらい簡単です。

Sketchデザインシステムでは、カラースタイルのグループを1つだけでなく、2つまたは3つ作成することも検討できます。塗りつぶしの他に、アウトライン/境界線、および塗りつぶしとアウトライン/境界線の組み合わせを追加することもできます。もちろん、このようなアプローチを本当に必要とするコンポーネントが出てくるまで、この決定を延期します。そうしないと、不必要なオーバーヘッドになります。そして最後に、私からの小さな色の秘密–塗りつぶしと境界線に不透明度0%の透明な色を1つ作成します。これにより、要素を視界から外すことができますが、同時に、自動レイアウトを邪魔したくない場合は、要素を所定の位置に保持できます。

タイポグラフィ

タイポグラフィに移ると、Sketchでは「テキストスタイル」という名前で呼ばれていますが、上記のカラースタイルと類似していることに気付くでしょう。さて、ここで私たちが懸念すべき主要なプロパティは、いくつか例を挙げると、見出し、字幕、本文テキストを一意に説明するフォントサイズと太さです。また、テキスト変換付きのボタンにIndigo.Designにあるような内部スタイルがあり、デフォルトのマテリアルにインスパイアされたテーマですべて大文字になっている場合もあります。または、アバターとハイパーリンクに独自の特別なサイズと処理があります。

ここでの目安は、Sketchデザインシステムの一部としてタイポグラフィを含めることで、テキストを意味のあるブロックに整理し、たとえばこのような記事を書くときに、デザインシステムのユーザーが考えていることを何でも実現するためにコンポーネントに十分なオプションを用意することです。下の画像の左側のパネルには、Sketch UI キットにバンドルされている高レベルのテキスト スタイルの配列Indigo.Designあります。

コンポーネントを構築すると、テキストが常に左から右に流れるとは限らないことに気付くでしょう。数字バッジには、その値が常に中央に配置される必要がある特別な場合がありますが、テキスト接尾辞は、接頭辞が反対方向に進むのとは異なり、右から左に流れる場合があります。これらすべてのシナリオを容易にするために、高レベルのテキストスタイルを左揃え、中央揃え、右揃えのグループに分割すると便利です。

色は同様の道をたどり、Sketchデザインシステムのユーザーは、テキストの配置を変更するよりもアバターのイニシャルのテキストに異なる色を求める可能性がはるかに高いという理由だけで、カスタマイズの次のレイヤーと最後のレイヤーである必要があります。さて、アバターのタイポグラフィは、コンポーネントにのみ適用できるため、特殊なケースです。したがって、制約と呼ばれる 1 つのスマートな設計原則を使用したいと思うでしょう。私が初めて読んだのは、ドン・ノーマンの著書「The design of everyday things」でした。アバターの制約は、そのタイポグラフィが中央に配置され、Sketch内のデザインシステムのユーザーが意図せずにエラーを犯すのを防ぐことです。

タイポグラフィについてまとめると、テキストスタイルは色変数を使用できるため、その定義方法であることに言及する必要があります。結局のところ、明日新しいアートディレクターが来てブランドカラーを変更するとしたら、Sketchデザインシステムの更新に1週間も費やしたくありませんよね?カラー変数と、それらを使用するテキストおよびカラースタイルを活用することで、この作業全体を数回のクリックに集約できます。

コンポーネント

最後のヒントは、コンポーネントに関連しています。入札幅を広げるために、Sketchで呼ばれるシンボルという用語を使用します。シンボルは、テキストや色のような単なるスタイルではないものであれば何でもかまいません。ただし、それでもかなり頻繁に使用されており、スタンドアロンで一貫性があり、その定義、つまりSketchスラングのシンボルマスターに接続するメカニズムが必要です。

アイコンセット、影、イラストのコレクションなどの単純なものから始めて、より複雑な構造の例として、アイテムや複数のタイプのセルを持つグリッドを含むリストまで進んでいきます。しかし、なぜこれらがコンポーネントとして提供される必要があるのか、疑問に思うかもしれません。さて、Sketchでアイコンボタンコンポーネントを作成すると、それを広く定義する可能性があります。ただし、特定のコンテキストで使用すると、デフォルトのアイコンを別のアイコンに変更する必要があります。空の状態の図についても同じことが言え、一部のインタラクティブな状態にも適用できる場合があります。たとえば、カードにフォーカスが合っていると、その影が大きくなると、カードがポップになり、コレクションの残りの部分の上に浮かび上がって見えます。

したがって、Sketchデザインシステムでアイコンコレクションをフィードするアイコンコンポーネントを作成することをお勧めします。マテリアルアイコン、フォントawesome、独自のカスタムコレクションなどのサードパーティのセットを使用しているかどうかにかかわらず、デフォルトのサイズを選択するだけです。デザイン・ツー・コード・システムIndigo.Designの場合、24 x 24 で、アイコン グリフを使用してシンボルを作成します。すべてのアイコンを同じシンボルサイズにすることで、ユーザーは「元のサイズでスワップ」チェックボックスにチェックを入れることができます。一方、コンポーネントでシンボルオーバーライドとして使用すると、適用可能なシンボル、つまり他のすべてのアイコンから選択できます。

もう一つ重要なことはネーミングですが、Indigo.Designの例を見てみましょう。設定アイコン「一/Overrides/Material Icons/action/settings」があり、これは奇妙な特殊記号「一」で始まります。その唯一の目的は、Sketchで挿入メニューの下部に押し込み、グリフを直接挿入するのが難しくすることです。

Indigo.Designには、アイコングリフ自体をレンダリングするためのアイコンコンポーネントがあります。そのため、グリフコレクションを所定の場所に保持し、直接挿入するのが難しくなっています。次の部分は「オーバーライド」と読み、行に来るものをシンボルオーバーライドとしてのみ使用する必要があることを示すために使用されます。次に、「マテリアルアイコン」これはアイコンセット名です。シンボル名の最後の 2 つの部分は、オプションのカテゴリ名とアイコン名自体を定義します。カテゴリは、Material from Google やMaterial Extended by Infragistics など、アイコンの大きなファミリーで何らかの組織を作成するのに役立ちます。

シャドウとイラストにも同じ戦略が適用されますが、イラストの場合、常に同じサイズである必要はないという点のみに注意してください。コンポーネントを設計する際にもう 1 つ重要なことは、応答性が高いようにサイズを変更することです。つまり、エリア 36 x 36 で設定アイコンを使用する場合は、ベース サイズから適切にスケーリングする必要があります。

これで、コンポーネントの設計方法について深く掘り下げる準備が整いました。ここでは、コンポーネントの単純で一般的な例としてボタンを定義するものを見てみましょう。ボタンを区別する最初のことは、使用のコンテキストです。CTAには1つのタイプのボタン、他の重要なアクションには別のタイプ、セカンダリアクションにはもう1つのボタン、さらにはリスト上に浮かび、別のリストアイテムの追加などのコンテキストアクションを実行するものが必要になります。これにより、たとえば、封じ込められた、輪郭のある、フラットなボタン、フローティングボタンが必要になるようになります。さて、アイコンだけの超シンプルなボタンが必要な場合は、5番目のバリアントを用意した方がよいでしょう。

これらのボタンに共通するのは、前に説明した色とテキストのスタイルが役割を果たすいくつかのスタイルプロパティがあることです。ただし、特定の条件が満たされる前に、ホバー、フォーカス、ボタンの無効化など、一部のインタラクション状態を考慮したい場合もあります。ボタン内でコンテンツを提供するために使用される要素については、以下のようにスマートレイアウトを使用する便利な方法を考えてください。これにより、前アイコン、ラベル、後アイコンなどの一部を表示および非表示にすることができます。

ボタンのインタラクション状態をどのように設計すべきかという話に移る前に、スマートレイアウトを設定する際に注意すべき点が2つあります。まず、ボタンラベルのテキストは、幅を自動的に設定するように設定する必要があります。次に、レイアウトの個別の要素がピクセルの一部でも重ならないようにし、元のサイズになっていることを確認する必要があります。

これにより、スマートレイアウトが非常にうまく機能するため、何も変更する必要はありません。それらはボタンの見え方によって定義されるべきであり、それらを2つに分割することをお勧めします。まず、ボタンが画面に表示されると、ボタンが有効または無効になる場合があります。したがって、Indigo.Designでは、アウトラインボタンを挿入するかフラットボタンを挿入するかに関係なく、これを表示します。2 つ目は、ボタンが静止しているかどうか、またはボタンがキーボードでフォーカスされたとき、またはマウスでホバーされたときなど、ユーザーの操作によってトリガーされる状態です。

これらはエンドユーザーの視点から見ると真にインタラクティブな状態であるため、代わりに別々のシンボルとして定義することに決めました。これにより、Sketchデザインシステムの設計者は、シンボルオーバーライドパネルからそれらを切り替えることができます。

より複雑な別のSketch設計システムの原子、つまり入力を見てみましょう。Indigo.Designのデフォルトテーマの入力タイプ(線、ボックス、境界線)以外にも、いくつかの特徴的な特性があります。たとえば、ヒントが付属しているかどうか、またはヒントが付属していないかどうかなど、挿入メニューにも表示されています。これは、値だけでなく、ラベルとヒントもプッシュするプレフィックスがあるという事実のために必要です。

そうでない場合は、ヒントにスマートなレイアウトを使用して、一石二鳥にすることができます。ただし、避けられないのは検証状態です。完了または発生しているユーザーインタラクションのある程度を定義するアイドル状態、入力済み状態、フォーカス状態に加えて、フォーム検証のさまざまなシナリオをサポートするための成功、警告、およびエラー状態もあります。

最後に、ボタングループとカードを見てみましょう。多くの点で、より複雑なコンポーネントとパターンを構築するために使用される原則を示しています。ボタン グループは、それぞれ 7 つのボタンの水平コレクションと垂直コレクションを表す 2 つの挿入可能なシンボルとして提供されます。

ボタングループには、ボタンだけでなく、グループ全体の境界線、背景、影のスタイリングにも影響を与える包括的な水平または垂直のスマートレイアウトがあるという事実以外に、特別なことは何もありません。デザインシステムのユーザーが1つ以上のボタンを非表示にし、そのシンボルオーバーライドをシンボルなしに設定した場合、残りのすべてがフローします。真のコンポーネントに期待されるように。

カードは大きく異なるように見えるかもしれませんが、基本的には垂直ボタン グループのアーキテクチャに従います。唯一の本当の違いは、繰り返される要素の集まりではないということです。代わりに、オーバーライドとして構成可能なさまざまなバリアントを持つ個別のコンポーネントとして実現される独自の特別なセクションがあります。

メディアピースは、画像または定型化されたマップをレンダリングできます。ヘッダーはスマートレイアウトを使用して、その要素を削除し、残りの要素が適応できるようにします。アクションには、さまざまなコンテンツと配置のオーバーライドが付属しています。基本的には、特定のシナリオに対して段落の内容が不要であるなどに対応する特定の領域の垂直スタックにすぎません。それを隠すと、他のすべてが適応し、カードのサイズが変わります。

結論として、Sketchには比類のない力が1つあります。そして、これは、色、タイポグラフィ、およびいくつかの基本的なコンポーネントの強力な基盤を確立し、それらを必要なだけより複雑なレイアウト組織に入れ子にする可能性です。このようにして、任意のモードと構成をシンボルオーバーライドパネルで数回クリックするだけで、目的の結果を達成できます。

より複雑なコンポーネントでは、マスターを選択してそのオーバーライドを管理し、制約をもう一度賢く使用し、Sketchデザインシステムのユーザーが特定のシナリオを不可能にする可能性があります。