再利用可能なUIコンポーネントライブラリの設計と実装

何を作ったのか

複数のインテリアスタイルを紹介するWebサイト向けに、ボタン・カード・モーダル・ナビゲーションなど12種類のUIコンポーネントをゼロから設計しました。各コンポーネントはCSS Custom Propertiesでテーマを切り替えられる構造になっています。

設計で意識したこと

コンポーネントを独立して動作させるため、スタイルのスコープにShadow DOMを採用しました。外部のCSSと干渉しない点がメリットで、複数のページに貼り付けるだけで機能します。アクセシビリティ対応も最初から組み込み、ARIAラベルとキーボードナビゲーションを全コンポーネントに実装しています。

テーマ切り替えの仕組み

ライト・ダーク・ウォームの3テーマをCSS変数で管理し、1行のclass変更でサイト全体の見た目が切り替わります。インテリアスタイルごとに異なるトーンを持つページに対応できる柔軟性が狙いでした。

全コンポーネントはWCAG 2.1 AAレベルのコントラスト比を確保しており、色覚特性のあるユーザーにも配慮しています。GitHubでソースを公開しており、実際にフォークして使ってもらうことを想定した構成です。