階層
Spaceshipデザインシステムは階層構造で構築されており、それぞれが明確さ、構造、目的を追加します。これらは、最小のビジュアルの決定から最も広範なユーザージャーニーまで、私たちが製品をデザインし、構築し、拡張する方法を導く階層を形成します。
Atomic Designの原則に従い、主要なリソースを以下のカテゴリに整理し、すべてのチームがより使いやすいようにしました。
Foundations
視覚言語の中核となるルール、つまり色、書体、余白、グリッド、モーション、トークンを定義します。これらは、一貫した基盤を提供します。
Components
基盤のルールを、日常的なデザイン上の課題を解決する再利用可能なインターフェース要素として具現化します。
Templates
コンポーネントとパターンがコンテキストの中でどのように連携するかを示し、完全なページや体験のためのすぐに使える構造を提供します。
Patterns
実証済みのソリューションとベストプラクティスを捉え、あらゆる接点において私たちの仕事が一貫性、アクセシビリティ、ユーザー中心性を保てるようにします。
Foundations
Spaceship Design Systemの不可欠な原子要素です。すべてのコンポーネントとパターンの土台となる視覚的・構造的ルールを定義します。
Color
製品全体で調和、アクセシビリティ、柔軟性を確保するブランドおよび機能パレットを定義します。
Typography
コンテンツを読みやすく、ざっと確認しやすくするタイプランプによって、階層と明瞭さを確立します。
Spacing
一貫したインターフェースを維持するために、マージン、パディング、レイアウトのリズムに体系的なスケールを提供します。
Grids
構造と整列を維持しながら、デバイス間で適応するレスポンシブなレイアウトを作成します。
Motion
トランジションやアニメーションを用いて注意を導き、状態を伝え、インタラクションを自然に感じられるようにします。
Design Tokens
基盤となる値をコードに変換し、単一の信頼できる情報源として機能しながら、迅速で容易な更新を可能にします。
明確な基盤は、障壁を減らし、包摂性を高め、ゼロから始めるのではなく実際の課題の解決により多くの時間を使えるようにします。
Components
これらはSpaceship Design Systemの再利用可能な要素です。それぞれが、ボタンや入力欄からナビゲーションやフィードバックメッセージまで、特定のインターフェース上の課題を解決します。すべてのコンポーネントはアクセシブルでレスポンシブであり、異なるコンテキストやデバイスにも簡単に適応できます。
再利用可能なコンポーネントにより、私たちが構築するすべての製品をより迅速に提供でき、全体像とのつながりも感じられるようになります。
Templates
テンプレートは、構成要素とユーザー体験をつなぐ橋渡しです。基盤とコンポーネントを完全なページコンテキストに組み合わせ、システムが実際にどのように機能するかを示します。
Product Page Templates
ランディングページや製品ページ向けの高水準なページ構造で、デザイナーは主にコンテンツを更新し、各コンテキストに合わせてモジュールを調整します。
Shareable components
比較表や価格カードのような、より複雑で再利用可能な構造は、製品全体で特定のシナリオに一貫して対応できるよう設計されています。
すぐに使える構造があることで、チームはレイアウトの判断に費やす時間を減らし、実際のユーザーニーズへの対応により集中できます。
Patterns
パターンは、テスト、フィードバック、実際の利用から得た学びを捉え、それを再利用可能で標準化されたソリューションへと変換します。各パターンは、チェックアウトプロセスの簡素化、エラー処理、フォームでのユーザー誘導など、ユーザーの意図に基づいています。
実証済みのソリューションを定義することで、パターンは私たちの仕事に明確な目的を与え、あらゆる体験が単に機能的であるだけでなく、思慮深く設計されたものになるようにします。