デザインシステムの構築 🎨 #01. 何から始める？
デザインシステム
where to start?
デザインシステムはデバイスとプラットフォーム全般に一貫性のある視覚的経験(User Experience)を構築して、デザイン作業も統一できます。
- デザインシステムは体系的で拡張できる。
- デザインシステムは続けていける方法でデザイン構成要素を出力する。
デザインシステムを構築することでプロダクトとブランドの構成要素を管理しながら進化させることができます。
なので少規模のスタートアップから大規模の企業までデザインシステムを構築することをお勧めします。
デザインシステムの利点は数多くの記事から紹介されていますので、ここではデザインシステムを構築するのにはどこから始めたらいいのか語ってみます。
デザイントークン
本論に入る前にまず、デザイントークンの使用原理について理解しなければならないです。
デザイントークンはカラー(色)、アニメーション、間隔(spacing)、書体(fonts)、シャドーなどのデザインに関係のある変数を保存するために使う基本的な要素で大事な概念です。
- デザイントークンはデザインシステムの視覚的なデザイン要素。
- 具体的に視覚的な特徴を保存する存在。
- UI開発のために拡張可能で、一貫的なシステムを維持するためにハードコーティングされた数値[…]の代わりに使用する。
引用 : Saleforce
デザインの原則
良いデザインは原則の有無にかかっています。原則はデザインシステムにアクセスする際に遵守するガイドラインの役割をします。
これは曖昧さを照明し、デザインシステムを構築する際に、適切な意思決定できるようにします。
- デザインの原則はどんなソフトウェアでもアプリケーションのガイドになる。
- クライアント、チームのメンバーを含む様々な利害関係者に製品の主な特徴を定義し、提供する。
- すべての意思決定ができる基本的な目標を明示することで、プロジェクトを統合された形に進めることができる。
デザインシステムが目指すこと
すべてのデザインシステムはあなたが作った全体システムを管理するのに役に立つこの３つの目標を目指すべきてす。
- 理解しやすく、適用しやすい意味の命名規則
- デザイナとエンジニア(開発者)のコラボレーション エンジニアがデザインを一括性を持って活用できるようにデザインシステムはコードで実装しなければならない。
- 全体を修正しなくて済むように トークンから大元の価値とコンセプトは別で管理しましょう。これは今後変更が生じたとき、トークン全体を変えず、一部修正するだけで済む柔軟性を与えます。
始めましょう。
デザインシステムを構築する際、メインになる３つはカラー、空間、タイポグラフィです。この３つの要素を定義することで、あなたのブランドを特別で、認識されやすい、唯一無二な基盤を構築することができると思います。
次はシステム拡張のために必要な他の要素について掲載します。
参考url uxdesign.cc
制作に関するお問い合わせはこちら ➝
カラー、空間、タイポグラフィは体系的なデザインシステムを構築するために必要可決な要素です。なおかつ、この要素たちはブランドを成り立てる重点にある視覚的要素でもあります。
ここではまず、デザインシステムを構築するために何から始めれば良いのかについて記載します。