Rabee UIを用いて開発したプロダクト「Formee」をリリースしました
株式会社Rabee
Rabeeが提供中のSvelte × Tailwind CSSのUIコンポーネント集「Rabee UI」を全面的に活用し、プロダクトを開発。自社プロダクトでは初めてのRabee UIの実運用事例です。
[画像1:
https://prcdn.freetls.fastly.net/release_image/97622/18/97622-18-ce51b4e025a9e539f5ebd17ce3bb2ec5-1800x945.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜、以下「Rabee」）は、フォーム作成・公開・管理サービス「Formee」をリリースしました。Formeeは、Rabeeが提供中のSvelte × Tailwind CSSで構築したUIコンポーネント集「Rabee UI」を全面的に用いて開発されています。
「Formee」LPはこちら
Rabee UIとは、2025年3月よりRabeeが開発・運用しているSvelte × Tailwind CSSで構築されたUIコンポーネント集です。一般的なUIライブラリとは異なり、カスタマイズを前提とした「コンポーネントの種」であることが特徴です。
現在、36種類のUIコンポーネントと3種類のサンプルを公開中です。ButtonやInputなどの基本的なコンポーネントに加えて、HeaderやSidebarなどの画面構築に役立つサンプルも提供しています。
■Rabee UIの特徴
・Svelte × Tailwind CSSで柔軟にカスタマイズできる
・コンポーネント単位でコピー＆ペーストして導入できる
・ダークモード・ライトモードに対応
・日本語利用を前提としたデザイン
・コードと一致したFigmaデータも公開中
[画像2:
https://prcdn.freetls.fastly.net/release_image/97622/18/97622-18-1d2fe4af4aa54f5964fd5dd496161f13-2700x1560.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
プロダクトの概要
Formeeは、フォームの作成・公開・回答管理を円滑にするフォーム作成サービスです。9種類の入力項目を自由に組み合わせることができ、要件に応じたフォームを、誰でも手軽に作成することができます。
開発にあたり、全面的にRabee UIを使用しました。自社プロダクトにおけるRabee UIの初の本格的な実運用事例です。
[画像3:
https://prcdn.freetls.fastly.net/release_image/97622/18/97622-18-8141d7953320f0022b94035defdd8898-1800x945.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
開発に至った背景
フォームは、企業活動において採用応募、問い合わせ、イベント申し込み、社内申請などさまざまなシーンで利用されます。Rabeeにおいても複数のフォームサービスを使い分けていましたが、運用フローが煩雑になりやすく、一元管理の必要性を感じていました。
複数のサービスを比較・検討するうちに「理想の要件をすべて満たすサービスを探すより、Rabee UIを活用して自分たちで作ったほうが速い。かつ楽しくなりそう」という考えに至り、Formeeの開発を開始しました。
Formeeの主な機能
Formeeでは以下の機能を実装しました。合計の画面数は、ステータスが異なる画面やモーダルも含めると60画面以上にのぼります。
■主な機能
・フォームの作成・編集・公開・削除
・フォームの下書き保存
・チーム作成
・チームメンバー招待
・回答のステータス管理
・回答へのメモ機能
幅広い機能と多くの画面数を持つFormeeですが、Rabee UIを用いて開発したことで、以下のようなメリットがありました。
要件整理がスピーディーに完了できた
コードと一致したFigmaデータを完備しているRabee UIを用いることで、ワイヤーフレームの段階からほとんど実装と同じレベルのUIデザインを作りながら要件を決められました。
「この体験にはどんなUIが最適か」「MVP段階ではどんな機能までカバーするか」といったすり合わせも、早い段階から具体的に行うことができました。結果として、要件定義～実装のフェーズにおいて、チーム全体の認識のずれを減らすことができました。
画面数が多くてもUIの一貫性を保つことができた
Rabee UIのコンポーネントを組み合わせて画面を構築することで、画面数が多いプロダクトであってもUIに統一感をもたせることができました。また、開発途中で機能を追加するときにも「UIを0から考える」時間はほとんど必要なく、一貫性のあるUIを素早く構築することができました。
実装のコストを大幅に抑えられた
基本的なUIコンポーネントが揃っているRabee UIを使うことで、多くのUIコンポーネントは0から実装する必要がなく、開発のコストを大きく削減できました。かわりに、プロダクトの品質向上に時間を費やすことができました。プロジェクト開始から実装完了まで6週間のスケジュールで、フォームの作成・公開・管理に関わる基本機能を一通り揃えたプロダクトをつくることができました。
[画像4:
https://prcdn.freetls.fastly.net/release_image/97622/18/97622-18-829c76599f8e40210d3efe3691365d76-2700x1560.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
Rabee UIは2025年5月のドキュメントページ公開以後、毎月のアップデートを継続しています。今月も新たに「Form」のサンプルを追加しました。さらに、既存コンポーネントである「Combobox」に改修を加え、選択中のアイテムを表示する例を追加しました。
- Form
https://rabeeui.com/docs/samples/form- Combobox
https://rabeeui.com/docs/components/combobox
[画像5:
https://prcdn.freetls.fastly.net/release_image/97622/18/97622-18-277513c1fa67fe0fe2bf915ee9f234ad-2700x1560.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
今回Formeeの開発を行ったことで、Rabee UIのプロダクト開発の基盤としての有用性を実感したと同時に、いくつかの課題や気付きも得ることができました。
私たちは今後もRabee UIを開発の中心とし、Formeeをはじめとした自社プロダクトの開発・運用を継続していきます。そして、実運用によって得られた知見をRabee UIへ還元することで、プロダクト開発をより大きく加速させるための開発基盤をめざしてまいります。
「Formee」LPはこちら
Rabee UI公式ドキュメントはこちら
株式会社Rabeeは、受託開発・自社開発の豊富なノウハウを活かして、高速かつ高品質なWebプロダクト開発を行う会社です。あなたの思い描く「ほしい」「つくりたい」「届けたい」をともに実現します。
会社名：株式会社Rabee
代表者名：上松勇喜
所在地：東京都渋谷区渋谷３丁目２６−２０ 関電不動産渋谷ビル１０F
設立：2018年8月
事業内容：受託開発・自社サービス開発・運用
https://rabee.jp/
[画像6:
https://prcdn.freetls.fastly.net/release_image/97622/18/97622-18-7db9e97ee3b366e70bbd3f761dfdd99e-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
プレスリリース提供：PR TIMES
記事提供：PRTimes
