バックオフィスAIプラットフォーム「マルナゲ」の全プロダクトで使用するデザインシステムを一般公開ー 70超のUIコンポーネント

株式会社BlueAI（本社：東京都渋谷区）は、統合業務プラットフォーム「マルナゲ」シリーズの全プロダクトで使用するデザインシステムのドキュメントサイトを、2026年3月より一般公開いたしました。[画像1: https://prcdn.freetls.fastly.net/release_image/145886/6/145886-6-4bd0d6df271f8b51f6919db82dcd05ca-1920x1080.jpg?width=536&amp;quality=85%2C75&amp;format=jpeg&amp;auto=webp&amp;fit=bounds&amp;bg-color=fff ]■デザインシステム：https://design.blueai.co.jp公開の背景マルナゲシリーズは、勤怠・顧客管理・請求書・会計など複数のバックオフィスプロダクトを1つのプラットフォームに統合しています。12プロダクトを横断して一貫した操作体験を提供するには、UIコンポーネントの品質と統一性が不可欠です。BlueAIでは1年前からデザインシステムの構築に投資し、全プロダクトが同じコンポーネントライブラリを共有する設計としてきました。BlueAIでは「隠すより見せた方が強い」という考えのもと、設計思想もUI品質もすべてオープンにすることで、パートナー企業や開発者コミュニティと同じ目線でプロダクトを進化させていく方針です。国内SaaS企業がプロダクトのデザインシステムを外部に全面公開する事例はまだ少なく、業界の透明性向上を目指す取り組みとして今回の一般公開に至りました。デザインシステムの特徴1. 70超のUIコンポーネントを完全ドキュメント化[画像2: https://prcdn.freetls.fastly.net/release_image/145886/6/145886-6-5ebd593ae9a432e4071bd252893880d5-1920x1080.jpg?width=536&amp;quality=85%2C75&amp;format=jpeg&amp;auto=webp&amp;fit=bounds&amp;bg-color=fff ]ボタン・テーブル・モーダル・フォーム入力・データ表示など、業務アプリケーションに必要なUIコンポーネントを70種類以上収録。各コンポーネントにはライブプレビュー・Props一覧・コード例・使用ガイドライン（Do's &amp; Don'ts）を掲載しています。- フォーム＆入力： ボタン、テキスト入力、セレクト、コンボボックス、日付ピッカー、ファイルドロップゾーンなど14種- データ表示： データテーブル、統計カード、バッジ、タイムライン、スケルトンなど16種- ナビゲーション： タブ、パンくず、ページネーション、ステッパーなど7種- オーバーレイ： モーダル、スライドパネル、コマンドパレット、コンテキストメニューなど7種- フィードバック： トースト、スナックバー、アラート、確認ダイアログなど5種2. 1,512アイコン × 6ウェイト - BlueAI Icons[画像3: https://prcdn.freetls.fastly.net/release_image/145886/6/145886-6-61baa7947f96e7698d6d5c34ca9913b4-1920x1080.jpg?width=536&amp;quality=85%2C75&amp;format=jpeg&amp;auto=webp&amp;fit=bounds&amp;bg-color=fff ]アイコンセットとして1,512種類のアイコンを6つのウェイト（Duotone・Regular・Thin・Light・Bold・Fill）で提供。サイト上で検索・プレビュー・SVGダウンロード・インポートコードのコピーが可能です。3. 日本語・英語バイリンガル対応[画像4: https://prcdn.freetls.fastly.net/release_image/145886/6/145886-6-4bded0bce96d25c0f5436313df5e250c-1920x1080.jpg?width=536&amp;quality=85%2C75&amp;format=jpeg&amp;auto=webp&amp;fit=bounds&amp;bg-color=fff ]全ページを日本語・英語の両言語で閲覧可能。海外の開発者やパートナー企業にもそのままご利用いただけます。4. デザイン基盤（Foundation）[画像5: https://prcdn.freetls.fastly.net/release_image/145886/6/145886-6-2cf696796c915a03d25d5eef945b73d4-1920x1080.jpg?width=536&amp;quality=85%2C75&amp;format=jpeg&amp;auto=webp&amp;fit=bounds&amp;bg-color=fff ]カラーパレット・タイポグラフィ・スペーシング・グリッドなどのデザイントークンを体系的に定義・公開しています。今後の展望デザインシステムは継続的に拡充していきます。新しいコンポーネントの追加、アクセシビリティ対応の強化、GitHub公開、Figmaデザイントークンとの連携を予定しています。■デザインシステムhttps://design.blueai.co.jp■関連リンク- コンポーネント一覧: https://design.blueai.co.jp/ja/button- カラーパレット: https://design.blueai.co.jp/ja/colors- アイコン: https://design.blueai.co.jp/ja/blueai-icons- ショーケース: https://design.blueai.co.jp/ja/showcase会社概要株式会社BlueAIについて社名 株式会社BlueAI設立 2024年3月代表者 平原尚樹所在地 東京都渋谷区神宮前１丁目５−８ 神宮前タワービルディング１３階【リンク】コーポレートサイト https://blueai.co.jpマルナゲサービスサイト https://blueai.jp会社note https://note.com/blueaiincデザインガイド https://design.blueai.co.jpClaudeCode入門ガイド https://claudecode.blueai.jpマルナゲ勤怠（iOS）https://apps.apple.com/jp/app/id6759944352マルナゲ勤怠（Android）https://play.google.com/store/apps/details?id=jp.blueai.marunage【お問い合わせ先】株式会社BlueAI 広報担当press@blueai.co.jp※株式会社BlueAIはIT導入補助金「IT導入支援事業者」 登録ベンダーです企業プレスリリース詳細へ : https://prtimes.jp/main/html/rd/p/000000006.000145886.htmlPR TIMESトップへ : https://prtimes.jp