デザインシステムとは何か?なぜデザインシステムが重要なのか？
ここ数年、設計システムはデザイナーの間で人気の高い話題になっています。
この記事ではデザインシステムの重要なポイントに添ってデザインシステムのサンプル例と一緒に、まとめてご紹介していきたいと思います。
デザインシステムを整備することは、成長を続けていて、すべてを把握する必要がある企業やチームにとって非常に有益です。
結局のところ、デザインする上で良いUXが不可欠です。デザインシステムは、デザイン負債の削減、デザインプロセスのスピードアップ、さまざまなチーム間での意思疎通にも役立ちます。
以下のそれぞれの項目について，
- グリッド
- 間隔
- エラーと検証
- コード化されたコンポーネント
- 命名規則
- アイコン
- タイポグラフィ
- アクセシビリティ
- 口調と声
- ロゴと色
- 揃え
- 共通のUI要素
- ジェスチャー
- 動き
1.グリッド
グリッドは、ページレイアウトを理解し統一するための必須コンポーネントです。MailChimpがグリッドをどのように扱うかを見てみましょう。これは、デザインシステムのパターンセクションの下にある最初のアイテムです。グリッドサイズ、グリッター、それらを混在させる方法など、さまざまなトピックを網羅しています。
02. 余白スペース
グリッドと同様に、スペーシングも便利なセクションです。Shopifyの設計システム（Polarisと呼ばれている）では、カードなどの要素間の異なるパディングと間隔について詳細に説明します。彼らはスペースとして行の高さについても話します。
03.エラーとバリデーション
これは、GOV.UKのデザインセクションのひとつと全く同じ名前です。問題発生時に適切に処理する方法を最善にする方法について話します。これらの状況で使用するデザインパターンのコードスニペットも含まれています。
04. コード化されたコンポーネント
Zendeskのシステムについて私が愛していることの1つは、CSSコンポーネントとReactコンポーネントの両方の組み込みです。とてもたくさんあります。「リアクションはアバター、タグ、およびタブです。それぞれにインストール手順と使用例があります。これにより、それらを一貫して使いやすくなります。
Predixには、開発者だけでなく、CSSモジュールやUIコンポーネントのためのガイドの大きなライブラリがあります。デベロッパーガイドには、角度とキューをマップに使用することから、多くの要素があります。
05.命名規則
WeWorkのシステムは、命名と構文に深く関わっています。チーム、ファイル、さらにはプログラムまで一貫性を保つことは素晴らしい考えです。
大規模なチームでは、一貫性のある明確な命名を維持するのが複雑になる可能性があります。しかし、あらかじめ定義された規則では、作業がずっと楽になります。
06.図像
以下サンプル例では、アイコンやグラフィックに纏わる項目があります。
簡単な説明と一緒に適切な使い方も表示されています。さらに、していいこととすべきではない11のルールも掲載されています。
その一方で、Pricelineは、より歴史的なアプローチを採用しています。ブランドに使用しているすべてのアイコンをリストアップし、各アイコンは名前とともに個別に表示されています。
スポンサーリンク