デザインシステム: それは何か、なぜ、そしてどのように作成するのか

デザイン システムのトピックは、すでにあらゆる側面から検討されているようです。デザイン システムに関する多くの記事、投稿、レポート、その他の資料が見つかります。 デザインシステムの作成。それにもかかわらず、この用語に出会った人は皆、多くの疑問を抱いています。主なものについて詳しく答えていきます。

• デザインシステムとは何ですか？
• それはなんのためですか？

デザインシステムとは何ですか？

デザイン システムは、ビジュアル コンポーネント、コード ライブラリ、および使用ガイドラインを含む構造です。

初心者のデザイナーは、デザイン システムを単なる UI キット (グラフィカル インターフェイス要素、タイポグラフィ、色を含むドキュメント) として考えてコンセプトを単純化するという間違いを犯します。

デザイン システムは 3 つのレベルで構成されます。

A UIキット デザインシステムが作成される製品のビジュアル言語です。これらは、色、フォント、アイコン、ボタン、箇条書き、トグル スイッチ、スライダー、画像、アニメーションです。要素はさまざまで、デジタル製品の仕様によって異なります。それらはすべて、ユーザーが操作するインターフェイスの目に見える部分を作成するのに役立ちます。

フレームワークは、これらの要素のそれぞれに対して書かれたコード ライブラリと、アニメーション、タグ、ナビゲーション用のラベルのプラグインです。

ガイドライン は、作業プロセスを整理する要素を使用するためのテンプレートとルールのセットです。ガイドラインのおかげで、デザイナーは単純なタスクには関与しませんが、開発者はすぐに関与するようになります。

たとえば、ガイドラインでは、Web サイト上のポップアップ ウィンドウのパラメーター (テキストからのインデント、タイトルと本文の位置とサイズ、ボタンの場所、ポップアップ ウィンドウがどのように表示されるか) を指定しています。さらにテキストを追加します。

デザインシステムの種類

単一の分類はありませんが、専門家はオープンソースとクローズドソースの 2 種類の設計システムを区別しています。

オープンソース システムでは、どの企業でもマテリアルを使用して、ボタンの色、フォント、アイコンを変更してプロジェクトに適合させることができます。たとえば、Ant Design、ヒューマン インターフェイス ガイドライン、マテリアル デザイン システムなどです。

クローズドソースの設計システムは通常、特定の企業または製品用に作成されます。これらは完全に非公開の資料であり、従業員のみがアクセスできるか、部分的に公開されています。

デザインシステムの作り方

設計システムの開発は、アトミック デザインの原則に基づいています。アトミック デザインは、原子、分子、生物、パターン、ページという 5 つのレベルのデザイン要素を含む手法です。

設計システムの構造:

• 原子 最小のコンポーネントは、ボタン、アイコン、入力フィールド、フォントです。
• 分子 2 つのボタン、タイトルと入力行、通知バー、チェックボックス、テキストといういくつかの単純な要素の組み合わせです。
• 生物 サイトヘッダー、認証フォーム、製品カード、通知バナーなどの完全なコンポーネントです。
• テンプレート – コンテンツのないページ レイアウト: メニュー、サイトの外観。
• ページ コンテンツが詰まったページです。

一般的なアルゴリズムは次のようになります。

• 色とフォントを選択し、モジュール式グリッドを設定し、アニメーション、画像、サウンドを選択します。
• 基本的なインターフェイス要素を作成します。
• 要素の組み合わせとレイアウトを設計します。
• ルールとともに要素のリストを作成します。ガイドラインでは、要素が何であるか、どこで使用されるか、どのようなタスクを解決するかを指定します。

通常、デザイン システムはゼロから作成されるのではなく、UI キット、ガイドライン、ブランド ブックなど、すでに開発された資料に基づいて構築されます。

なぜデザインシステムが必要なのでしょうか?

あらゆる IT 製品と同様に、「デザイン システムは何のためにあるのか?」という質問に答えることが重要です。それとも、店の同僚が「だから何だ」と言うのでしょうか？

この質問への答えは、製品の価値を理解するのに役立ちます。その一部は、上で説明したことからすでにわかります。しかし、それを分解してさらに深く見てみましょう。

オートメーション

自動化には最も明白な利点があります。デザイン システムは運用の自動化に役立ち、他の業務に時間を割くことができます。

反復性

変更を継承してデザイン システム要素に自動的に適用できることは、製品チームにとって貴重なツールです。 1 か所に外観上の変更や大きな変更をすばやく加えることができます。このようにして、いつでも製品を強化できます。

一貫性

一貫性とは、同じ機能を実行する製品内のオブジェクトとエンティティが統一性と類似性を目指す必要があることを示しています。

製品で同等の機能を利用すると、ボタンがどのように機能し、表示され、どこに配置されているかを本能的に理解できるため、それらは親しみやすく便利になります。

皆さんがこの記事から何か価値のあることを学べたことを願っています。そして、記事に取り組むことで知識が構築され、さらなる学習の動機が生まれることを改めて確信しました。