コンポーネントライブラリの設計

コンポーネントライブラリの設計

はじめに

コンポーネントライブラリは、再利用可能なUIパーツの集合です。ボタン、入力フォーム、カード、モーダルなど、プロダクト全体で繰り返し使われるUI要素を標準化し、一貫性のある体験を効率的に提供します。この章では、Figmaでのコンポーネント設計からコードへの落とし込みまでを学びます。

コンポーネント設計のAtomicDesign

コンポーネントの分類にはAtomic Designの考え方が有効です。

• ◆Atoms（原子）: ボタン、テキスト入力、アイコン、バッジなど最小単位のUI要素
• ◆Molecules（分子）: 検索バー（入力+ボタン）、フォームフィールド（ラベル+入力+エラー）など、原子の組み合わせ
• ◆Organisms（有機体）: ヘッダー、カードリスト、フォームなど、分子と原子で構成される機能単位
• ◆Templates（テンプレート）: ページのレイアウト構造。コンテンツなしのワイヤーフレーム的な構成
• ◆Pages（ページ）: テンプレートに実際のコンテンツを流し込んだ最終形

コンポーネントのAPI設計

コードで実装する際のコンポーネントAPIを適切に設計します。

• ◆Props: コンポーネントが受け取るパラメータ。variant、size、colorScheme、isDisabledなど
• ◆バリアント: 同じコンポーネントの異なる見た目。primary、secondary、outline、ghostなど
• ◆サイズ: sm、md、lgの3段階が基本。状況に応じてxs、xlを追加
• ◆状態: default、hover、active、focus、disabled、loadingなど状態ごとの見た目を定義
• ◆コンポジション: 子要素としてアイコンやテキストを柔軟に配置できる設計にする

Figmaでのコンポーネント構築

Figmaのコンポーネント機能を最大限活用する方法を学びます。

• ◆Auto Layout: 内部要素の配置と余白を自動管理。レスポンシブなコンポーネント設計に不可欠
• ◆Variants: 1つのコンポーネントに複数のバリエーションを持たせる。状態、サイズ、タイプで分類
• ◆Boolean Property: アイコンの表示/非表示など、ON/OFFの切り替えをプロパティで管理
• ◆Text Property: ボタンラベルなどのテキストをインスタンスから簡単に変更可能にする
• ◆Nested Instance: コンポーネント内に別のコンポーネントを配置し、差し替え可能にする

インタラクション設計

UIの動きと状態遷移を設計します。

• ◆ホバーエフェクト: 背景色の変化、影の追加、テキスト色の変化など。transition: 150msが標準
• ◆フォーカスリング: キーボード操作時のフォーカス表示。アクセシビリティ上必須の要素
• ◆アニメーション: 要素の出現・消失にはフェードやスライドを使用。200〜300msが自然な速度
• ◆マイクロインタラクション: ボタンクリック時のリップルエフェクト、トグルの切り替えアニメーションなど
• ◆ローディング状態: スケルトンスクリーン、スピナー、プログレスバーの使い分け

コンポーネントドキュメント

各コンポーネントの使い方をドキュメント化します。

• ◆概要: コンポーネントの目的と用途を簡潔に説明
• ◆バリエーション: 全バリアントの視覚的なカタログ
• ◆使用ガイドライン: いつ使うか、いつ使わないか。DOとDON'Tの具体例
• ◆プロパティ一覧: 各Propの型、デフォルト値、説明を表形式で記載
• ◆アクセシビリティ: キーボード操作、スクリーンリーダー対応、ARIA属性の要件

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆ボタンコンポーネントを5つのバリアント、3つのサイズで設計してみましょう
• ◆Auto Layoutを使ったカードコンポーネントを構築し、コンテンツ量に応じて伸縮することを確認しましょう
• ◆作成したコンポーネントの使用ガイドラインを記述してみましょう

📝まとめ

コンポーネントライブラリの設計は、Atomic Designによる分類、適切なAPI設計、Figma機能の活用、インタラクション定義、ドキュメント化の5つの要素で構成されます。再利用性と柔軟性を両立したコンポーネントを構築することが、デザインシステムの価値を最大化する鍵です。次の章では、デザインとコードの橋渡しであるハンドオフの最適化を学びます。