ECサイトのフロントエンド開発では、デザインと実装のずれ、パフォーマンス劣化、アクセシビリティ対応の手間といった課題が繰り返し発生します。特に複数プロジェクトで同じUIをベースにしながらも見た目を大きく変える必要がある場合、既存のUIライブラリでは思うようにカスタマイズできず、ライブラリに逆らうような実装になってしまうことが少なくありません。
Storefront UIが提供する機能
Storefront UIは、TailwindCSSをベースにしたフレームワーク非依存のUIライブラリおよびデザインシステムです。公式READMEによると、VueとReactの両方に対応したコンポーネント群が提供されており、BaseComponentsと呼ばれるButton、Checkbox、Modalなどの小さく柔軟な基本コンポーネントに加えて、ProductCardやチェックアウトのステップといったeコマース特有の複合的なUIパターンがコピー&ペースト可能な形で用意されています。
また、useDropdownのようなComposablesで複雑なUI操作を抽象化できる点、TailwindのプリセットによってCSS変数へのマッピングやSFUI固有のデフォルト設定が行える点、サードパーティフォントの扱いを簡略化するTypographyパッケージが含まれている点も挙げられています。さらに、Tailwindのプロパティに基づいたピクセルパーフェクトなFigmaファイルが同梱されており、デザイナーとエンジニアの間でのすり合わせに使える構成になっています。README上ではWCAG AA準拠を標準で満たすこと、構築済みの標準的なeコマースページでLighthouseスコア95から100を達成しているという記載もあります。
検討すべき場面
このような構成は、単一のデザインに固定されたUIライブラリでは対応しづらい、複数プロジェクトで同じベースを継承しつつ見た目を大きく変える必要があるケースや、BaseComponentsからBlocksまで段階的に組み立てていきたい開発体制で検討の余地があると考えられます。一方で、フレームワーク非依存を掲げていますが、READMEのリンク先ではVueとReactそれぞれ個別のインストール手順が案内されており、実際にどこまで共通化されているかはドキュメント側の確認が必要です。
READMEだけでは判断できない点
README記載のLighthouseスコアやWCAG AA準拠は、どのページ構成やどのバージョンで検証されたものかの詳細な記載がなく、自社のユースケースでも同様の結果になるかは別途確認が必要です。また、BaseComponentsとBlocksの具体的な数や粒度、Composablesの種類についても、README本文では代表例のみが挙げられており全体像はドキュメントサイト側を参照する必要があります。ローカル実行にはルートディレクトリでの依存解決コマンドの実行が必要で、sharedやtw-plugin-peer-next、typographyといったサブパッケージのビルドが前提になっている点も、導入検討時に把握しておくべき構成上の特徴です。
出典: https://github.com/vuestorefront/storefront-ui/blob/v2-develop/README.md
公式READMEをもとに、AIを執筆・推敲支援に使用しています。実機検証の報告ではありません。