効果的なデザインフレームワークを構築する方法（無料のSketch UIフレームワークを含む）

デザインの世界にしばらくいる場合は、おそらく次の用語を聞いたことがあるでしょう：デザインフレームワーク、UIフレームワーク、UIキット、またはパターンライブラリ。 これらはすべて同じものを指します。つまり、製品全体で使用され、その設計言語を提供する設計標準、テンプレート、UIパターン、およびコンポーネントのシステムです。

これまでに設計フレームワークを作成したことがない場合、設計フレームワークを開始すると、圧倒されて時間がかかるように感じるかもしれませんが、設計作業がスピードアップし、全体的に効率的になります。

デザインフレームワークが解決する主な問題、なぜそれが必要なのか、そしてそれを構築するときに作成する必要のあるコンポーネントの概要を説明しましょう。 この記事の後半で、無料でダウンロード可能なSketch UIフレームワークを見つけて、独自のデザインフレームワークを作成できます。

デザインフレームワークとは何ですか？

すべてのユーザーインターフェイスデザインは空のアートボードから始まり、すべてのデザイナーは、その空白のキャンバスを完全に機能する製品に変換するために使用するプロセスを持っています。 このプロセスには、作成されたすべての小さなデザインコンポーネントと、色からボタン、およびその間のすべてに至るまで、デザイナーがまとまりのある全体を構築するために実行する手順が含まれます。

多くの場合、この作業は反復的であり、相互に関連するパターンとコンポーネントのシステムを作成することにより、統合してより効率的にすることができます。 言い換えれば、デザインフレームワーク。

設計フレームワークは、次のようないくつかの問題を解決します。

• 製品設計の不整合を排除します。
• 設計チームと製品チーム間のコラボレーション、効率、およびコミュニケーションの向上。
• 設計プロセスの後半で設計を更新することで、イライラが少なくなります。

最初の問題：製品の不整合

一貫性は、優れた設計を優れた設計に変換します。 一貫性により、UX、一般的な使いやすさ、およびユーザーがデジタル製品を使用できる効率が向上します。 小規模なWebサイト、アプリ、または大規模なSaaS製品のいずれであっても、設計の不一致により、製品の外観、感触、信頼性、およびユーザーエクスペリエンスが損なわれます。

矛盾は、チームや設計者が物事を迅速に実行したり、その場で変更を加えたりした場合によく発生します。 設計者は、クライアントや利害関係者が別のことを求めている場合、それらの変更がどのようになるかをすばやく示すことで応答することがあります。 突然、デザインチームは、4つの異なる緑の色合いに気づき、どれが主要なボタンの色であるかは誰にもわかりません。

設計フレームワークは、一貫した標準を確立することによってこの問題を解決します。

2番目の問題：コラボレーションとコミュニケーションのギャップ

多くの場合、開発プロセス中に複数のチームメンバーがプロセスのさまざまな時点で設計に取り組んでいる場合、チームを導くための一連の標準がないと混乱する可能性があります。

設計フレームワークは、コミュニケーションプロセスを合理化し、明確な基準と方向性を提供することにより、コラボレーションと効率を高めます。 どの色またはフォントを使用するのが正しいかを見つけようとして、前後に走り回るのに時間を無駄にすることはもうありません。

3番目の問題：後期の設計変更

120個のアートボードがすでに開発されているデザインファイルで、デザイナーは何回単一の色を変更する必要がありますか？ 200個のコンポーネントの一部であるアイコンを変更する必要があるのは何回ですか？

変更は設計プロセス全体で不可避であり、それが製品の改善方法ですが、多くの場合、設計者が望むよりも遅く発生します。 デザインフレームワークは、オブジェクト指向コンポーネントのシステム上に構築されているため、これらの後期段階の変更の負担を大幅に軽減します。 一度変更すると、デザイン全体に波及します。

デザインフレームワークを作成する方法

デザインフレームワークとは何か、そしてそれが解決する問題がわかったので、それを作成することについて話しましょう（そして、この記事の後半で提供されるSketch UIキットのダウンロードに含まれるもの）。

この記事で使用するデザインフレームワークは、Sketchで「シンボル」と呼ばれるコンポーネントの特定の階層を使用してレイアウトされた単一のSketchファイルです。 これらの記号を使用すると、ワンクリックでファイル全体の変更を簡単に実装できます。 「マスター」コンポーネントの1つの変更である「シンボル」は、他のすべてのインスタンスに即座に反映されます。

デザインフレームワーク階層

うまく機能するデザインフレームワークを作成するには、まず、しっかりとした視覚的な階層を設定します。 最初に、色やタイポグラフィなど、最も遍在するコンポーネントを設計します。 次に、ボタンや入力コンポーネントなどの小さなものに作業を進めます。 家を建てるようなものだと考えてください。最初に基礎を建て、次にプロジェクトの進行に合わせて他の部分を追加します。

色

色は、UIデザインフレームワーク階層で最も重要な要素です。デザイン内のすべてのコンポーネントは色を使用します。 色は人々に強い反応と感情を引き出し、製品の全体的な外観、感触、トーンを設定します。

色をグループに分割することをお勧めします。

1. 原色は主要なブランドカラーであり、通常、プロジェクトの一般的な配色を作成したり、ボタンなどの重要なコンポーネントに使用されます。
2. 二次色は、原色を補完します。多くの場合、原色のさまざまな色合い、彩度、または色合いです。 グレースケールは、タイポグラフィや背景によく使用されます。 5〜8レベルのグレーで十分です。
3. システムフィードバックの色は、設計者が忘れがちな重要なグループです。 これらの色は、アラート、警告、通知などのシステムメッセージを表示します。

グリッド：デザインスペース

色を選択したら、次のステップはグリッドを設定することです。 グリッドは、ページ上の他のすべてのコンポーネントを正しい場所と順序に保ちます。 これが全体的なデザインスペースです。

グリッドには、垂直と水平の2種類があります。

垂直グリッドは最も一般的に使用されるグリッドであり、すべてを水平に揃えます。 Bootstrapや古い960pxグリッドのような多くの人気のあるグリッドシステムがあります。

水平グリッドはそれほど一般的ではありません。 タイポグラフィには水平グリッドが使用されます。 それは段落の垂直リズムを作成し、新聞で一般的に見られます。

修飾子：文体規則

色とグリッドに加えて、デザインフレームワーク階層の上位にあるもう1つのコンポーネントがあります。それはモディファイアです。 これらは自律コンポーネントとして使用することはできません。他のコンポーネントを変更またはスタイル設定するために使用されます。

このグループはプロジェクトにスタイルをもたらし、形や影などの美学を担当するコンポーネントが含まれます。 プロジェクトの後の段階でそれらを個別に変更するのは面倒な場合があります。

修飾子は、後続のすべてのビルディングブロックのパラメーターとして扱います。 長方形、角丸長方形、円の3つの異なる形状からスケッチシンボルを作成します。 これらの図形を使用して、ボタン、入力コンポーネント、フォームフィールドなど、および背景要素を含むUIのすべてのコンポーネントを作成します。

この手法により、デザイナーはUIコンポーネントの外観よりもUXに集中できます。 また、基本形状に戻り、スタイル（コーナー半径など）を変更することも簡単になり、接続されているすべてのものが自動的に更新されます。

タイポグラフィ：コンテンツ

タイポグラフィは、最後の重要なデザインフレームワークコンポーネントです。 これは2つのグループに分けることができます。ヘッダーや段落などの静的ページコピー。 ボタン、ナビゲーション、入力フィールドなどのインタラクティブなコンポーネントコピー。

すべての見出し（H1、H2、H3など）と段落のスタイルとサイズを設計します。 静的ページコピーには、通常、多くのスタイル（色または重量）のバリエーションはありません。 静的なページコピースタイルに関連する唯一のバリエーションは、明るい背景か暗い背景かです。 したがって、静的ページコピーが両方で機能することを確認するために、2セットの色を作成することをお勧めします。

ボタンやシステムフィードバックメッセージなどのインタラクティブコンポーネントに表示されるコピーには、複数のバリエーションがあります。 たとえば、システムフィードバックメッセージは、メッセージの種類（警告、エラー、成功など）に基づいて4つの異なる背景色で表示できます。ボタンのラベルも異なる背景に表示できます。

このグループをデザインフレームワークに含めることは、タイポグラフィについてグローバルに考えるときに役立ちます。 まず、通常のボタンラベルテキストを作成し、次にそのバリエーションを作成します。 これにより、フォントサイズが多すぎないようにすることができます。 フレームワークで新しいUIコンポーネントを作成するときは、適合する既存のタイポグラフィスタイルがあるかどうかを常に確認してください。

アイコン

デザインシステムには、情報アイコンとユーザーインターフェイスアイコンの2つのグループのアイコンがあります。 最初のグループは通常、イラストレーションシステムの一部であり、UIインタラクションコンポーネント（ボタンなど）には使用されません。 2番目のグループ（UIアイコン）は、非常に小さなスペースを占有しながら、ボタン、ラベル、またはテーブルなどのより複雑なコンポーネントに意味を追加します。 UIのアイコンは、「編集」、「コピー」、「ダウンロード」、「削除」などの機能トリガーとしても使用できます。

矢印、「追加」（+）、「閉じる」（x）など、UIの操作に使用される単純なアイコンから始めます。 さまざまなサイズ（12px、16px、24px 32px）でデザインすることをお勧めします。

コンポーネント

ボタン

ボタンは間違いなくUIデザインの最も重要なコンポーネントの1つであり、デザインのトレンドが行き来するにつれて、長年にわたって多くの変更が加えられてきました。

ボタンをデザインするときは、必ず個々の「状態」をデザインしてください。 原則として、ボタンには複数の状態があり、現在の状態（アイドル、ホバー、押された、無効、アクティブなど）を示す視覚的なフィードバックをユーザーに提供します。

これを行うには2つの方法があります。1つは、状態（通常、アクティブ、ホバー、および押された）ごとにボタンの外観を個別に設計することです。 このソリューションは時間がかかる場合がありますが、その後、多くの柔軟性が得られます。 （このメソッドは、以下に含まれる無料のSketch UIフレームワークで使用されました。）

2番目の方法は、最初の状態に基づいてすべての状態を設計することです。 たとえば、各状態の色、彩度、または明るさを変更する1つのスケッチシンボルを作成します。

これを行うには、色相、彩度、またはオーバーレイのいずれかのスケッチブレンディングモードを使用して、ボタンのオーバーレイとしてシンボルを配置します。 彩度を変更するには、通常のボタンの上に色相ブレンディングモードの黒い長方形を使用します。 後でオーバーレイの不透明度を変更すると、ボタンが多かれ少なかれ飽和状態になります。

入力コンポーネント

入力により、ユーザーはアプリケーションと通信してデータをアップロードできます。 入力フィールドなどのコンポーネントをボタンと一緒に使用すると、簡単なWebアプリケーションを作成できます。 ボタンと同様に、さまざまな状態の入力コンポーネントを作成するのが最適です。 設計フレームワークによって異なりますが、少なくとも、空の状態、塗りつぶされた状態、およびエラー状態を作成することを検討してください。

複雑なコンポーネント

この段階では、機能する製品を作成するために必要なすべてのものが揃っているため、設計フレームワークは完全であると見なすことができます。 ただし、カード、テーブル、日付ピッカー、グラフ、フォームなど、UIフレームワーク用のより複雑なUIコンポーネントの作成にもう少し時間を費やす価値がある場合がよくあります。

セクション

この段階で、アプリケーションまたはWebサイトの最も一般的なセクションを作成することにより、設計フレームワークをさらに開発できます。 ナビゲーション、ヘッダー、「会社概要」セクション、ギャラリーなどを設計することで、設計者はプロジェクトの後の段階で時間を節約できます。 製品のさまざまなセクションのいくつかのバリエーションを作成すると、将来のさまざまなプロジェクトに簡単に適応できるようになります。

デザインフレームワークのベストプラクティス

デザインフレームワークを常にテストする

テストは、設計または開発プロセスに含める必要があります。 小さなデザインピースを作成し、それらを「ストレステスト」することで、エラーやコンポーネントの欠落を回避します。 たとえば、最初に作成したコンポーネントを変更すると、最近追加したコンポーネントも変更されるかどうかを確認します。

シンプルなUIコンポーネントを作成する

可能な限り多くの設計ユースケースを考慮しながら、コンポーネントをシンプルに保ちます。これにより、将来、あらゆるスタイルをカバーできるようになります。 シンプルな形状のUIコンポーネントを作成し、プロジェクトに簡単に適応できる柔軟性を維持することをお勧めします。

単一のスタイルに焦点を当てないでください

デザインフレームワークは普遍的である必要があるため、特定のスタイルに焦点を合わせるのではなく、スタイルの作成に使用できるコンポーネントに焦点を合わせます。

独自のデザインフレームワークを作成する

次のプロジェクトでは、最初に時間をかけて設計フレームワークを慎重に構築します。 全体的な設計プロセスが改善され、効率が向上し、製品の設計の一貫性が向上し、使いやすさが向上します。 120のSketchアートボードでわずか数秒でそれらのアイデアが実現されると、時間を節約し、デザインアイデアをより効果的に伝達し、クライアントと利害関係者を幸せにすることができます。

独自のデザインフレームワークを開始する準備はできていますか？

こちらからスケッチファイルをダウンロードしてください。 使用方法の説明が含まれています。

刺激的なデザインシステムとUIフレームワーク

設計フレームワークについてさらに理解するための最良の方法の1つは、大規模で確立された企業がそれらをどの程度使用しているかを調べることです。 これらのタイプの企業をフォローし、そのアプローチについて学びます。

Googleのマテリアルデザイン–現在、世界で最も人気のあるデザインフレームワークの1つです。 Googleが設計プロセス全体を階層化し、コンポーネントの有用な階層を構築する方法を学びます。

IBMの設計言語– IBMは、細部の詳細な説明を含む設計プロセス全体を共有しています。 また、シンプルなアイコンからUIアニメーションライブラリまで、デザイン言語から多くのリソースを共有しています。

Atlassian –もう1つの優れた学習リソース。 彼らの製品スタイルガイドは、勉強するのに最適なデザインシステムです。 彼らは、Web GUIパック、多数のコンポーネントと概念を含むSketchファイルを共有しています。

•••

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

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法