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

株式会社BlueAI（本社：東京都渋谷区）は、統合業務プラットフォーム「マルナゲ」シリーズの全プロダクトで使用するデザインシステムのドキュメントサイトを、2026年3月より一般公開いたしました。



■デザインシステム： (リンク »)

公開の背景

マルナゲシリーズは、勤怠・顧客管理・請求書・会計など複数のバックオフィスプロダクトを1つのプラットフォームに統合しています。12プロダクトを横断して一貫した操作体験を提供するには、UIコンポーネントの品質と統一性が不可欠です。BlueAIでは1年前からデザインシステムの構築に投資し、全プロダクトが同じコンポーネントライブラリを共有する設計としてきました。

BlueAIでは「隠すより見せた方が強い」という考えのもと、設計思想もUI品質もすべてオープンにすることで、パートナー企業や開発者コミュニティと同じ目線でプロダクトを進化させていく方針です。国内SaaS企業がプロダクトのデザインシステムを外部に全面公開する事例はまだ少なく、業界の透明性向上を目指す取り組みとして今回の一般公開に至りました。

デザインシステムの特徴

1. 70超のUIコンポーネントを完全ドキュメント化


ボタン・テーブル・モーダル・フォーム入力・データ表示など、業務アプリケーションに必要なUIコンポーネントを70種類以上収録。各コンポーネントにはライブプレビュー・Props一覧・コード例・使用ガイドライン（Do's & Don'ts）を掲載しています。

- フォーム＆入力： ボタン、テキスト入力、セレクト、コンボボックス、日付ピッカー、ファイルドロップゾーンなど14種
- データ表示： データテーブル、統計カード、バッジ、タイムライン、スケルトンなど16種
- ナビゲーション： タブ、パンくず、ページネーション、ステッパーなど7種
- オーバーレイ： モーダル、スライドパネル、コマンドパレット、コンテキストメニューなど7種
- フィードバック： トースト、スナックバー、アラート、確認ダイアログなど5種


2. 1,512アイコン × 6ウェイト - BlueAI Icons


アイコンセットとして1,512種類のアイコンを6つのウェイト（Duotone・Regular・Thin・Light・Bold・Fill）で提供。サイト上で検索・プレビュー・SVGダウンロード・インポートコードのコピーが可能です。

3. 日本語・英語バイリンガル対応


全ページを日本語・英語の両言語で閲覧可能。海外の開発者やパートナー企業にもそのままご利用いただけます。

4. デザイン基盤（Foundation）


カラーパレット・タイポグラフィ・スペーシング・グリッドなどのデザイントークンを体系的に定義・公開しています。

今後の展望

デザインシステムは継続的に拡充していきます。新しいコンポーネントの追加、アクセシビリティ対応の強化、GitHub公開、Figmaデザイントークンとの連携を予定しています。


■デザインシステム
(リンク »)

■関連リンク
- コンポーネント一覧: (リンク »)
- カラーパレット: (リンク »)
- アイコン: (リンク »)
- ショーケース: (リンク »)

会社概要

株式会社BlueAIについて
社名 株式会社BlueAI
設立 2024年3月
代表者 平原尚樹
所在地 東京都渋谷区神宮前１丁目５−８ 神宮前タワービルディング１３階


【リンク】
コーポレートサイト (リンク »)
マルナゲサービスサイト (リンク »)
会社note (リンク »)
デザインガイド (リンク »)
ClaudeCode入門ガイド (リンク »)
マルナゲ勤怠（iOS） (リンク »)
マルナゲ勤怠（Android） (リンク »)

【お問い合わせ先】
株式会社BlueAI 広報担当
press@blueai.co.jp

※株式会社BlueAIはIT導入補助金「IT導入支援事業者」 登録ベンダーです


企業プレスリリース詳細へ (リンク »)
PRTIMESトップへ (リンク »)