「抽象化レイヤー」を簡単解説！より深い理解でより良いデザインシステムの構築開発を

あなたが独自のデザインシステムを使っていても、サードパーティ製のものを使っていても、各抽象化レイヤーの関係を理解することは重要です。各レイヤーの仕組みがわかれば、問題がどのレイヤーで発生しているのかを明確に切り分けられます。この記事では、デザインシステムにおける抽象化レイヤーがどんな仕組みになっているのか紹介します。

 

 

デザインシステムの４つの構成レイヤー

高レベルの抽象化において、デザインシステムは次の4つに分割できます。

 

• 第一のレイヤー：共有メンタルモデルとしての表現
• 第二のレイヤー：アーティファクトとしての表現
• 第三のレイヤー：実装ツールとしてのデザインシステム
• 第四のレイヤー：実装として表現されるデザインシステム

 

この4つがどのようにできているのか、順番に見ていきましょう。

 

 

第一のレイヤー：共有メンタルモデルとしての表現

デザインシステムは仕様や記述として考えられます。アクセシビリティの実装方法やレスポンシブの実現など、高レベルのコンセプトを含んでいます。共有メンタルモデルはシステムそのものではなく、基盤としてシステムに内蔵されています。

 

 

第二のレイヤー：アーティファクトとしての表現

アーティファクトの集合として、アセットは抽象化の方針を実現するために存在すべきものです。たとえば、もし「初期状態でアクセシビリティを考慮する」方針であれば、その実装方法はよく使われるHTML要素の共有レポジトリを生成し、アクセシビリティ標準に準拠したものを使用する、と言うものになります。再利用可能なライブラリがあれば、作業時間や手間を軽減できます。

 

 

第三のレイヤー：実装ツールとしてのデザインシステム

共有メンタルモデルやアーティファクトには、デザインを閲覧・操作する手段が必要です。各コンポーネントのUIライブラリがこの役割を果たしてくれます。ライブラリは再利用可能な要素やパターンを集めたもので、デザインシステム上で特定の製品を制作する手助けとなります。

 

第四のレイヤー：実装として表現されるデザインシステム

実装こそ、チーム全員が目指しているものです。しかし、なぜこうした抽象化レイヤーを別々に考慮しなければならないのでしょうか？ひとつのシナリオを見ながら考えてみましょう。

あるクライアントが、上手に構築されたデザインシステム上で、プロプライエタリなソフトウェアを使って作業しています。システムは、クライアントが構築しているツールを実装するために順調に動いています。

 

ここでのあなたの役割は、ビジネスのプロセスを理解し、さまざまなビジネスに合うワークフローを作ることです。デザインシステムは文書化され、どんなアーティファクトを使うのかもベンダーにより決まっています。今回紹介した4つのレイヤーのうち、3つはあなたには変えられません。

 

こんな時、あなたは実装レイヤーに機能を追加し、クライアントの要求を満たすワークフローを実装することになります。抽象レイヤーの知識が、こういった場合に役立つでしょう。

 

 

 

抽象化レイヤーの理解でより良いデザインプロセスを

何かに特化した機能を作ることは頻繁に行われており、必要とされています。空調機器のメーカーがねじを作る必要はありませんよね。ねじはそれに特化した別の場所で作られています。こうした分業によって、質の高い製品が実現できています。

 

抽象レイヤーを分割することは、UXにおいて分業と似た価値を提供します。各コンポーネントが論理的に分割されており、必要に応じて機能や柔軟性を加えられます。そうすることで自由度が高まり、最終的にはUXデザインのプロセスに、より高い価値を加えられるのです。

 

 

 

 

 

 

※本記事はDesign Systems and Abstraction Layers: A Model for Better Understanding and Implementationを翻訳・再構成したものです。