Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」をリリースしました

カスタマイズを前提とした「UIコンポーネントの種」を提供。プロダクトの要件に合わせてカスタマイズできるUIコンポーネントによって、品質とスピードを両立した開発を実現します。

受託開発事業・自社サービス事業を展開する株式会社Rabee（本社：東京都渋谷区、代表取締役社長：上松 勇喜、以下「Rabee」）は、SvelteとTailwind CSSを利用したUIコンポーネント集「Rabee UI（読み：ラビーユーアイ）」のコードをリリースしました。

[画像1: https://prcdn.freetls.fastly.net/release_image/97622/9/97622-9-01285e0eb98e1475fab6837bf02aa10b-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

今回リリースしたコンポーネントは、以下から確認できます。

「Rabee UI」Storybook
https://rabeeui.com/docs

■ Rabee UIとは
Rabee UIとは、Svelteプロジェクト用に設計されたUIコンポーネント集です。公式ドキュメントページから必要なコードを自分のプロジェクトにコピーするだけで使いはじめられます。

「Rabee UI」LP
https://rabeeui.com

■ Rabee UIコンポーネントの特徴
Rabee UIは、ただのUIコンポーネント集ではなく、デザインと実装の連携によってプロダクト開発を加速させるツールです。たとえば、管理画面やLPの制作など、品質の高いUIをスピーディーに開発したいシーンで大きな効果を発揮します。
Svelte × Tailwind CSSで柔軟にカスタマイズ可能
Tailwind CSSを採用しているため、既存のクラスを組み合わせるだけでデザインを柔軟に調整できます。また、Tailwindの設定ファイルを上書きすることで、プロジェクト全体のデザイントークンを一括で変更することもできます。
ダークモード・ライトモードに対応
すべてのコンポーネントがダークモード・ライトモードの切り替えに対応しています。プロダクト立ち上げの段階から、コストをかけずにダークモードを提供することが可能です。
日本語利用を前提としたデザイン
UIコンポーネントのサイズや余白は、日本語で使ったときに美しく見えるよう調整されています。他言語をベースとしたコンポーネントと比較して、導入や細かなカスタマイズがよりスムーズです。
コードと一致したFigmaファイルも公開中
実際のコードと同じ仕様を再現できるFigmaファイルを公開しています。FigmaのVariables機能を活用しており、デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスに繋がります。

■ Rabee UIで公開中のコンポーネント
今回のリリースでは、10種類のフォーム（Input）関連コンポーネントを公開しました。コンポーネントは今後も拡充していく予定です。

「Rabee UI」Storybook
https://rabeeui.com/docs
- Badge
- Button
- Checkbox
- Input
- InputFile
- Label
- Radio
- Switch
- Table
- Textarea

[画像2: https://prcdn.freetls.fastly.net/release_image/97622/9/97622-9-16769d3fe72c7d920ac6c155fd3680fe-1830x1099.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]「Rabee UI」Storybook
[画像3: https://prcdn.freetls.fastly.net/release_image/97622/9/97622-9-ff7f7a30c95a680c3a5e0c7a29548cd7-1200x630.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]Rabee UIコンポーネントのイメージ画像

また、Figma Communityでは、今後追加予定のコンポーネントのデザインも先行公開しています。

「Rabee UI」Figma
https://www.figma.com/community/file/1479376628733075423

■ Rabee UIが受託開発にもたらすメリット
Rabeeは、自社サービス開発・受託開発をどちらも手がけるWeb制作会社です。
受託開発においては、企業向けSaaSから小学生が利用するモバイルアプリまで、多種多様なタイプのプロダクトを開発してきました。その中で、以下のような課題が明確になってきました。

■ 従来のプロダクト開発における課題
1. 似たようなUIコンポーネントを何度も開発している
2. プロジェクト間のルールの不統一
3. 「ホバー時」「クリック時」「エラー時」などのQAコストが膨大


こうした課題に対して、Rabee UIの導入はたくさんのメリットをもたらします。
1. デザインシステムをスピーディーに構築できる
Rabee UIは、AI時代のプロダクト開発を前提とした、プロジェクトごとにカスタマイズ可能な「UIコンポーネントの種」として機能します。これにより、新しいプロジェクトでも、すぐにデザインシステムを構築、納品することが可能です。
- スピーディーにデザインシステムを構築・納品できる
- デザイン規則のドキュメントを迅速に制作できる
- Tailwind CSSを用いたカスタマイズによって、ブランドらしさも表現できる

2. 新規機能・画面の追加も迅速に対応できる
基本的なUIコンポーネントが一通り揃うため、新しい画面を追加する際も、既存のコンポーネントを活用して迅速な実装が可能です。
- コンポーネントの再利用によって開発工数を削減できる
- 一貫性のあるUIを制作できる
- レスポンシブ対応を自動化できる

3. 一定以上の品質を担保できる
基本的なQAが完了しているコンポーネントをベースにして開発することで、一定以上の品質を担保しながらスピーディーにプロダクトを作ることができます。
- テスト済みのコンポーネントによって安定した動作を担保できる
- QAコストを削減できる

■ Rabee UIの最新情報はこちら
Rabee UIに関する最新情報は、以下で公開しています。

Rabee UI LP：
https://rabeeui.com

Rabee UI Storybook：
https://rabeeui.com/docs

Rabee UI Figma：
https://www.figma.com/community/file/1479376628733075423

Rabee UI Discordコミュニティ：
https://discord.com/invite/VjtgZ4dkQa

運営について会社名：株式会社Rabee
代表者名：上松勇喜
所在地：東京都渋谷区渋谷３丁目２６−２０　関電不動産渋谷ビル１０F
設立：2018年8月
事業内容：受託開発・自社サービス開発・運用
https://rabee.jp/


[画像4: https://prcdn.freetls.fastly.net/release_image/97622/9/97622-9-06edd08c05811b76bbc3b3c808355130-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
株式会社Rabeeは、受託開発と自社サービス開発のノウハウを活かし、効率的なWeb開発を実現するクリエイティブカンパニーです。