階層
Spaceshipデザインシステムは階層構造で構築されており、それぞれが明確さ、構造、目的を追加します。これらは、最小のビジュアルの決定から最も広範なユーザージャーニーまで、私たちが製品をデザインし、構築し、拡張する方法を導く階層を形成します。
アトミックデザインの原則に従い、私たちは主要なリソースを以下のカテゴリに構造化し、すべてのチームがより使いやすくしました。
ファウンデーション
ビジュアル言語の基本ルール（色、書体、スペーシング、グリッド、モーション、トークン）を定義します。これにより、一貫性のある基盤が得られます。
コンポーネント
基盤ルールを日常のデザイン課題を解決する再利用可能なインターフェース要素として具現化します。
テンプレート
コンポーネントとパターンがどのように連携して機能するかを示し、ページや体験全体のためのすぐに使える構造を提供します。
パターン
実証済みの解決策とベストプラクティスを集約し、すべてのタッチポイントで一貫性、アクセシビリティ、ユーザー中心性を維持します。
ファウンデーション
Spaceshipデザインシステムの基本的なアトムです。すべてのコンポーネントやパターンが構築されるビジュアルおよび構造上のルールを定義します。
カラー
ブランドおよび機能のパレットを定義し、製品全体で調和、アクセシビリティ、柔軟性を確保します。
タイポグラフィ
階層と明確さを確立し、コンテンツを読みやすくスキャンしやすくするタイプランプを設定します。
スペーシング
マージン、パディング、レイアウトリズムのための体系的なスケールを提供し、一貫したインターフェースを維持します。
グリッド
構造と整列を維持しながら、デバイス間で適応するレスポンシブなレイアウトを作成します。
モーション
トランジションやアニメーションを使って注意を引き、状態を伝え、インタラクションを自然に感じさせます。
デザイントークン
基礎的な値をコードに変換し、唯一の信頼できる情報源として機能し、迅速かつ簡単な更新を可能にします。
明確な基盤があれば、障壁が減り、より多くの人が参加でき、ゼロから始めるのではなく実際の課題解決により多くの時間を費やせます。
コンポーネント
これらはSpaceshipデザインシステムの再利用可能な要素です。それぞれが特定のインターフェース課題を解決します（ボタンや入力欄からナビゲーション、フィードバックメッセージまで）。すべてのコンポーネントはアクセシブルでレスポンシブ、さまざまな状況やデバイスに簡単に適応できます。
再利用可能なコンポーネントにより、私たちが構築するすべてのプロダクトはより迅速にリリースされ、全体像とのつながりを感じられます。
テンプレート
テンプレートはビルディングブロックとユーザー体験の橋渡しです。ファウンデーションとコンポーネントを組み合わせてページ全体のコンテキストを作り、システムが実際にどのように機能するかを示します。
プロダクトページテンプレート
ランディングページやプロダクトページ向けの高レベルなページ構造で、デザイナーは主にコンテンツを更新し、各コンテキストに合わせてモジュールを調整します。
共有可能なコンポーネント
比較表や価格カードなど、より複雑で再利用可能な構造は、特定のシナリオに一貫して対応できるよう設計されています。
すぐに使える構造があることで、チームはレイアウトの決定に悩むことなく、実際のユーザーのニーズに集中できます。
パターン
パターンはテストやフィードバック、実際の利用から得た知見を再利用可能で標準化された解決策に変換します。各パターンはユーザーの意図に基づいており、チェックアウトプロセスの簡素化、エラー処理、フォームの案内などに対応します。
実証済みの解決策を定義することで、パターンは私たちの作業に目的を与え、すべての体験が単に機能的であるだけでなく、よく考えられたデザインになることを保証します。