画面からアトミックデザインに入る
現代のデザインシステムにおける中心的なメンタルモデルであるアトミックデザインは、しばしば原子からページへの線形プロセスとして誤って適用されます。小さな部品を組み立ててコンポーネントライブラリを構築するのに理想的ですが、プロダクトワークは通常、ユーザーエクスペリエンスの観点から始まり、画面上のユーザーのニーズとアクションに焦点を当てます。この「スコープファースト」アプローチは、単にコンポーネントを棚卸しするのではなく、ユーザーが何をしなければならないか、そしてそのアクションが何に影響するかを決定することから始まります。これは、コンポーネント作成前に画面の構造モデルを定義し、その動作のスコープに基づいて要素間の関係を特定するのに役立ちます。例えば、データテーブルでは、フィルターはコントロールが物理的に列ヘッダーに配置されていても、データセット全体に影響します。このアプローチは、ユーザーアクションごとに何が変化するかを定義し、ツールチップのような静的要素からコントロールを区別します。コンポーネントを設計する際には再利用性が重要ですが、プロダクトデザインはビジネスロジックも考慮します。テンプレートレベルは、コンポーネント間の相互接続と共有状態を管理するのに自然な場所であり、個々のコンポーネントの再利用性を損なうことなく、画面のコンテキスト内でそれらが連携して機能することを保証します。従来は「ダム」なレイアウト構造と見なされていたテンプレートは、画面固有のロジックを保持し、独立したコンポーネントがどのように相互作用するかを管理するように拡張できます。これは、テンプレートが画面内でゾーン、接続、共有状態、およびルールを定義し、「プレゼンテーション」コンポーネントの「スマート」ラッパーとして機能できることを意味します。このようなテンプレートは、さまざまなプロダクトコンテキストに適用できる再利用可能な構造であり、コンポーネントセット以上のプロダクトパターンを記述するのに役立ちます。ページレベルでは、テンプレートに実際のコンテンツが投入され、システムをストレステストし、空の状態、データの読み込み、予期しないコンテンツの長さなど、さまざまなシナリオに対応できる構造であることを保証します。この「スコープファースト」手法は、既存のプロダクトのデザインシステムを作成し、動作に焦点を当てることでコンポーネントの境界に関する議論を解決し、類似した画面間でパターンを体系化するのに特に役立ちます。これは、コンポーネントのフラットなリストではなく、ユーザーのアクションとスコープに基づいたプロダクトパターンを文書化するためのより明確な方法を提供します。しかし、このアプローチは普遍的ではありません。ロジックが単一の画面に合わせられ、コンポーネントの汎用性を損なう場合、または従来のコンポーネントの棚卸しで十分な低密度または単純なフローの画面に適用された場合、誤用される可能性があります。最終的に、アトミックデザインは汎用性の高いモデルですが、プロダクトチームは、コンポーネントライブラリを構築する前にユーザーのニーズを理解し、構造モデルを定義するために「スコープファースト」の視点から恩恵を受け、一貫性のある機能的なユーザーエクスペリエンスを保証します。