なぜコンポーネント化するのか？
現代のWeb開発において、UIを「ページ単位」ではなく「コンポーネント（部品）単位」で設計・構築することは常識となっています。これには以下のメリットがあります。
- 一貫性 (Consistency) : 同じボタン、同じ入力フォームを使い回すことで、ユーザーにとって学習コストが低く、迷いのないUIを提供できます。
- 効率性 (Efficiency) : 一度作った部品を再利用することで、開発スピードが格段に向上します。
- 保守性 (Maintainability) : デザインの変更があっても、コンポーネント定義を一箇所修正するだけで全ページに反映されます。
GunjoUI Design System
当ブログ（Writer Suite）では、独自の設計システムである GunjoUI の思想を取り入れています。 GunjoUIは、機能美とアクセシビリティを両立させた、シンプルで堅牢なコンポーネントライブラリです。
設計原則
- Accessible : 誰もが使えること（WAI-ARIA準拠）。
- Predictable : 期待通りに動作すること。
- Beautiful : 使う喜びがあること。
Atomic Design の採用
コンポーネントの粒度を整理するために、 Atomic Design の概念を参考にしています。
- Atoms (原子) : ボタン、入力フォーム、アイコンなど、これ以上分解できない最小単位。
- Molecules (分子) : 入力フォームとラベル、検索ボックスとボタンなど、Atomsを組み合わせた機能単位。
- Organisms (生体) : ヘッダー、フッター、記事カードなど、独立したコンテンツとして成立する単位。
本セクションでは、主に Atoms ** と ** Molecules レベルのコンポーネントの設計ガイドラインを解説します。