アトミックデザインとスケッチ–ワークフローを改善するためのガイド

SketchとAtomicDesignは、設計者が標準化とより効率的なワークフローを可能にする設計システムを作成するために使用できる強力なツールと方法論のセットです。

設計システム：入門書

設計システムは、再利用可能なコンポーネントとガイドラインのセットであり、製品の作成とライフサイクル中にチームが共通の言語を中心に統合するのに役立ちます。

ほとんどの場合、設計システムはスタイルガイドとコンポーネントライブラリで構成されています。 また、ブランド価値だけでなく、声やトーンなどの要素を含めることもできます。 設計システムを持つことのポイントは、製品またはブランドの信頼できる唯一の情報源として機能する一連の標準を作成することです。

Googleのマテリアルデザインは、構造化されたUIデザインシステムの一例です。 マテリアルデザインは、まとまりのあるAndroidアプリを設計および開発する方法として2014年に導入されました。

もう1つの例は、MailchimpのVoiceandToneです。 それは、自分の声が常に同じであるが、文脈に応じて音色が変化する方法を説明しています。 これを認識することは、コンテンツに力を与え、ブランドに個性を与えるのに役立ちます。

設計システムを作成するために使用できるさまざまな方法がありますが、チームが共通の言語と一連の標準を統一できるフレームワークを選択することをお勧めします。 Atomic Designは、これら2つの目標を達成するフレームワークの優れた例です。

アトミックデザイン：建築設計システム

2013年にBradFrostによって導入された方法論であるAtomicDesignは、すべての設計システムを共存する一連のビルディングブロックとして定義できるという考えに基づいています。

AtomicDesignのコンポーネントの概要は次のとおりです。

• アトム。 設計システムの基本的な構成要素を表します。 例としては、ボタンやテキストスタイルがあります。
• 分子。 ユニットとして一緒に働く原子のグループ。 分子は具体的なUI要素です。 たとえば、ボタンとテキストフィールドをグループ化して、検索フォームを作成できます。
• 生物。 原子と分子が複雑な構造で一緒に働いています。 ナビゲーションバーでグループ化された検索フィールドは、Webサイトのヘッダー生物を形成します。
• テンプレート。 コンテンツ構造を定義するレイアウトにコンポーネントを配置するページレベルのオブジェクト。 たとえば、ヘッダー生物を取得してホームページテンプレートに配置します。
• ページ。 最終製品を表すテンプレートのインスタンス。

「私たちは、これまで以上に多くの画面サイズと機能を備えた、より多くのデバイスでより多くのブラウザを使用して、より多くのコンテキストでより多くのユーザー向けのインターフェースを作成するという任務を負っています。 それは確かに困難な作業です。 ありがたいことに、設計システムが役に立ちます。」—AtomicDesignおよび設計システムの紹介としてのBradFrost。

Atomic Designを使用して設計システムを作成および保守すると、設計者はより効率的に作業し、チーム内でより適切にコミュニケーションをとることができます。 設計システムを作成および保守するためのツールと方法は多数ありますが、多くの場合、最高のツールは私たちが最もよく知っているツールです。

スケッチでアトミックデザインを使用する方法

Atomic Designを使用して設計システムを開発するための優れた（そしてすでに馴染みのある）ツールはSketchです。 これは、原子、分子、および有機体を作成するためのキャンバスを提供します。これは、設計システムのコアを定義するために必要な要素です。

原子の作成

まず、Sketchで、シンボル、レイヤースタイル、テキストスタイルの3種類の原子を作成します。

シンボル。 シンボルは、再利用可能なコンポーネントにすぎません。 これらは、製品全体でインスタンス化できるため、一度定義されます。 たとえば、矢印記号（原子）は、境界線の色やサイズなどのプロパティで定義できます。その後、毎回再作成しなくても、この記号を再利用できます。

レイヤースタイル。 レイヤースタイルは、すべてのレイヤーで一貫性を保つ再利用可能なビジュアルスタイリング要素です。 たとえば、前に定義した矢印の塗りつぶしの色。

テキストスタイル。 レイヤースタイルと同様のテキストスタイルは、同様のテキストオブジェクト間で一貫性を確保する再利用可能な要素です。 たとえば、h1要素のフォントサイズと色を定義します。 これは、GoogleドキュメントやMicrosoftWordのテキストスタイルと同じように機能します。

シンボル、レイヤースタイル、およびテキストスタイルを定義する場合、Sketchは、「/」（スラッシュ）を使用して、シンボルおよびテキストスタイルメニューでそれらを階層カテゴリに分割できます。 命名規則に従い、明確に定義されたマスターカテゴリのセットを使用すると、ファイルが整理された構造になり、混乱や不整合が減少します。

Sketchでシンボル、テキスト、レイヤースタイルの階層カテゴリを作成する方法は次のとおりです。

Atoms /の下で、次の推奨される命名規則を使用してシンボルを表すことができます。

• 資産
• ボタン
• 入力コントロール
• 画像
• ナビゲーション
• 情報

レイヤースタイルをシンボルに変換しないので、セマンティックグループでそれらを識別するだけで十分です。 繰り返しますが、 Atomsを使用します/：

• 塗りつぶし
• ボーダー
• 影
• グラデーション

レイヤースタイルと同様に、 Atoms /でテキストスタイルを作成する方法は次のとおりです。

• 見出し
• 体
• キャプション
• ラベル
• リンク

統一された設計言語は、静的なルールと個々のアトムのセットだけではありません。 進化するエコシステムである必要があります。—視覚言語の構築に関するAirbnb。

分子の作成

アトムは製品の設計ガイドラインの基本的な部分を定義しますが、それ自体が完全に役立つわけではありません。 いくつかの機能を引き出すために、原子を結合して分子を作成します。

ラベル（アトム）を入力ボタン（アトム）と結合して検索関数を作成することは、一般的に使用される分子要素の良い例です。

ここに少し灰色の領域がある可能性があるため、注意が必要です。 コードレベルのボタンはアトムと見なされますが、レイヤースタイルとテキストスタイルのアトムをグループ化しているため、デザインレベルのボタンは分子と見なされます。 混乱を避けるために、コードレベルの要素についてのみ考えることをお勧めします。

Molecules/に分類される主なカテゴリは次のとおりです。

• 情報
• ナビゲーション
• 入力コントロール

分子はインタラクティブな方法で製品の形成を開始するため、上記のカテゴリをさらに定義することをお勧めします。 この場合、パターンライブラリを表すサブカテゴリのセットを定義します。

• ドロップダウンリスト
• トグル
• スライダー
• タブ
• ページ付け
• 進行状況インジケーター
• 日付フィールド
• テキストフィールド
• チェックボックス
• ラジオボタン
• モジュール

生物の作成

生物は原子と分子のグループです。 それらは他の生物の一部である可能性もあります。

原子や分子とは異なり、生物は私たちが設計している製品に抽象的な包含を持っていません。 これらは具体的で再利用可能なコンポーネントであり、特定のアクションで簡単に識別できます。 それらの構造は、原子や分子よりも複雑です。

以前に定義した検索フィールドをナビゲーションバー（分子）やロゴ（原子）などの他のコンポーネントとグループ化すると、生物が作成されます。 例として、ナビゲーションバーやカレンダーがあります。

分子のような生物は、同じカテゴリとサブカテゴリに分類できます。

Organisms/用に作成する主なカテゴリは次のとおりです。

• 情報
• ナビゲーション
• 入力コントロール

分子と同様に、生物のサブカテゴリも作成します。

• ドロップダウンリスト
• トグル
• スライダー
• タブ
• ページ付け
• 進行状況インジケーター
• 日付フィールド

これまで、ほとんどのUIはすでに設計されていたため、設計に必要なときにコンポーネントのインスタンスを呼び出すのと同じくらい簡単になりました。

これらの各コンポーネントは、3つの主要なカテゴリのよく整理されたセットが見つかるSketchツールバーの挿入パネルを使用して直接検索するか、次のようなプラグインを使用して、セマンティックグループで簡単に見つけることができます。スケッチのランナー。

Runner for Sketchは、無限のメニューで検索する代わりに、デザイナーが使用できる一連のキーボードコマンドを提供することにより、デザイナーのワークフローを最適化します。 たとえば、 insertという単語を入力し、 Tabキーを押して、必要なコンポーネントを探すことができます。

アトムを入力すると、ドロップダウンリストにそのカテゴリに分類されるすべての要素が表示されます。 原子と分子が共有カテゴリを持っている場合、原子のみが表示され、すべての分子が無視されます。

まとめ

SketchとAtomicDesignは、設計ワークフローを改善し、効果的な設計システムフレームワークを促進するために一緒に使用できる強力なツールセットです。

Atomic Designは、原子、分子、および有機体の概念をコンポーネントの基盤として使用して、設計者が製品の作成および作成中に共通言語を統一するのに役立ちます。

設計者は、Sketchなどのツールを使用して、より効率的なワークフローと、プロジェクトの最終段階で開発者を含む設計チームの全員が採用する一連の標準を提供するAtomicDesignを実装できます。

Toptal Designブログでさらに読む：

• 効果的なデザインフレームワークを構築する方法
• デザインシステムとパターンを理解する
• スケッチスタイルガイド、ライブラリ、およびUIキットを作成する方法
• スタートアップがスタイルガイドを必要とする理由
• Zeplin Sketchプラグイン–設計とエンジニアリングの間のワークフローブリッジ