詳細検索

デザインシステムの始め方

アバター
著者: McDowallBryan
4分で読めます

デザインシステムの始め方
Englishから翻訳 • 原文を読む

こんにちは、私はブライアンです。3か月ちょっと前にスコットランドから日本に移り、Colorkrewのデザインチームに加わりました!

子供の頃、何時間もレゴで遊んでいました。このシンプルなブロックは、将来のデザイナーである私に大きな喜びをもたらしました。

_

colorful Lego

_

この散らかった山には、少しの想像力があれば無限の可能性が備わっている。

絵を描くこと以外で、それは私が想像できる中で最もやりがいのある趣味でした。シンプルなパーツから複雑な構造を作り、互いにうまく連携させることができるのです。

当然ながら、大人になってUIやウェブアプリケーションのデザインシステムを使ったり構築したりする際には、少し懐かしさを感じることがあります。

デジタル製品を構築するシステム

デザインシステムは、デザイン、コード、ドキュメントを組み合わせたもので、モジュール化されたUIパターンを作成し、何度も再利用しながら、一箇所でメンテナンス・開発を行います。

これがデザイナーの自律性を奪うと感じる人もいて、私も最初は少し躊躇していました。しかし経験を積むにつれて、レゴのように、よくドキュメント化されたシステムが全員に同じ出発点を与え、設計の民主化につながると感じています。エンジニアもプロジェクトマネージャーもプロセスにより深く関わることができます。

設計システムは労力と繰り返しを大幅に減らします。以前は複数の場所でコンポーネントの作成や更新に費やしていた時間を、今では全体のプロセスを振り返り、より良いUXを通じてビジネス目標を達成するなどの大きな課題を解決するために使うことができます。

例えば、シンプルなボタンの設計は一見単純なプロセスに思えますが、この一つのコンポーネントを作るには多くの要素が関わっています。

1. 製品のブランドを考慮することは見た目や使い心地に影響を与える可能性がありますが、視覚的なアクセシビリティや使いやすさとバランスを取る必要があります。2. このコンポーネントを構築する際には、アクセシビリティ、検索エンジン最適化、機能性に関するさらなる考慮事項があります。3. テストは、計画と実行の間にさらなる作業をもたらします。4. 意思決定、実装、使用時期のガイドラインの記録...

_

design systems

_

設計段階でも、ボタンには多くの複雑さがあります。

やがてこの「単純な」コンポーネントは巨大なタスクとなり、間違いなく特定の機能の多くのコンポーネントの一つに過ぎません。このタスクを一度完了させて、その結果を再利用する代わりに利点が明らかです。

指示を忘れるな

また、レゴと同じように、複雑なものを作るときは説明書が重要です!小さなパーツを全体像の一部として理解するために、パターンに詳しくない人には「チェックボックスを使うべきかトグルを使うべきか?」という質問など、パターンに慣れていない人にも役立ちます。

明確なドキュメントを提供し、それを容易に利用できるようにすることで、デザインシステムのユーザーはパターン選定時により自信を持てます。これにより、経験豊富なチームメンバーに頼るボトルネックが減り、結果として彼らの作業負担も軽減されるはずです。

_

Building an entire town starts with one brick

_

町全体を建てるのは一つのレンガから始まる。

コミュニケーションは重要であり、ドキュメント作成を恒久的なリソースとして行うことで、オンボーディング時の摩擦を大幅に減らし、自社プロジェクトの一貫性を思い出させることもできます。既存のデザインシステムを使う場合でも、自分で作る場合でも、戦略を心に留めておく価値があります。

大人になった今、レゴを片付けて足の怪我を多く防いだかもしれませんが、UIを作る作業は子供時代の経験から恩恵を受け、楽しく興味深いものを作りたいという欲求を満たすものです。

Related Articles