|
|
|
|
|
■デザインシステム：https://design.blueai.co.jp
|
|
|
|
|
|
公開の背景 |
|
|
|
マルナゲシリーズは、勤怠・顧客管理・請求書・会計など複数のバックオフィスプロダクトを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デザイントークンとの連携を予定しています。 |
|
|
|
|
|
■デザインシステム |
|
https://design.blueai.co.jp |
|
|
|
■関連リンク |
|
|
|
|
|
|
|
|
|
|
|
会社概要 |
|
|
|
株式会社BlueAIについて |
|
社名 株式会社BlueAI |
|
設立 2024年3月 |
|
代表者 平原尚樹 |
|
所在地 東京都渋谷区神宮前１丁目５−８ 神宮前タワービルディング１３階 |
|
|
|
|
|
【リンク】 |
|
コーポレートサイト https://blueai.co.jp
|
|
マルナゲサービスサイト https://blueai.jp
|
|
会社note https://note.com/blueaiinc
|
|
デザインガイド https://design.blueai.co.jp
|
|
ClaudeCode入門ガイド 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導入支援事業者」 登録ベンダーです |
|
