業務システムに使える
豊富なUIパーツと
UIデザインパターン
最適なUIデザインの
判断ポイントが具体的に
わかるドキュメント
初回導入時および
追加の応用講習で
導入・活用を支援
自社内だけでなく
他社へ提供するシステムへも
件数無制限で利用可能
スマートフォン、タブレット、PC、様々なデバイスで使えるレスポンシブ仕様
柔軟かつ統一的な
レイアウトが実現できる
グリッドデザイン
プロトタイピングに
素早く手軽に活用可能
100点を超える
フォント化された
オリジナルアイコン
社会全体のデジタル化の進展およびスマートフォンやアプリの普及により、システムとの接点が爆発的に増えていくなかで、ユーザーが満足できる体験の提供が重要な意味を持つようになりました。直接消費者に向けられたサービスやアプリはもとより、いち消費者としてそれらに慣れたユーザーが自身の仕事のなかで使用する業務システムにも、同じように優れたユーザー体験（UX）が期待されるようになっています。
しかしながら、従来からの業務システムの企画・開発の現場においては、このようなUXの実現のために重要なユーザーインターフェース（UI）の設計や最適化について不安な声が少なくありません。
アストロラボでは、2012年の創業より業務システムの企画・コンサルティング事業の実績を重ねてきました。このような業務システムのUIデザインについての現場の声の高まりを受け、これまでの事業実績の中で開発・発展させてきたUIデザインライブラリーを今回「AstroBlaster UI Design System」として広く提供することにいたしました。
すばやくプロトタイプを構築し、ユーザーの行動と体験を本番さながらに丁寧に確認することで、より高いレベルの精度でシステムの完成像を要件定義段階で共有することをめざし生まれた「AstroBlaster UI Design System」には、私たちが試行錯誤を重ね蓄積してきた業務システムにおける有用なデザインの知見とリソースが結集されています。
「AstroBlaster UI Design System」は基本的なUIのパーツ集にとどまらず、数多くの実際の業務システム企画設計経験の中で蓄積された、業務システムならではの様々なUIデザインのパターンを備えています。加えて、UIの選択やアレンジの判断に役立つ豊富なドキュメントにより、業務システムのベストプラクティスを手軽に導入し、UIデザインを最適化できるようにしています。
ユーザー体験（UX）を構成するデザインの階層
根底のコンセプトのデザインから、より表層に向かっていくつかの観点でのデザインが積み上げられ、すべてがつながってここちよい体験を実現します。「AstroBlaster UI Design System」は構造デザイン、レイアウト／ナビゲーションデザイン、ビジュアルデザインの層において効果的かつ実践的なライブラリーを提供します。
UIデザインのナレッジと
AstroBlasterUI活用のためのコンテンツ
Guideline
使いやすいUIを作るための
デザイン原則や共通ルール
Pattern
適切なUIを採用するための
判断基準として、よくあるUIのパターンを
目的／用途別に例示
Component
コーディング時に役立つ
ソースコード、マークアップ方法の
参照用ドキュメント
Guideline
使いやすいUIを作るためのデザイン原則や共通ルール
なんとなく見た目の印象だけでUIを決めていくのは実はかえって難しいものです。
その場ごとの調整や例外が増えるとサイト・システム全体の情報デザインとしては破綻してしまいます。全体を通してふるまいや視覚上の手がかりにしっかりと共通性を維持することで、ユーザーが迷うことがなく、使用にともなう学習効率も高くなります。
高頻度・長時間使う業務システムとして、認知的・身体的負担を不用意にかけないという観点も重要です。
“わざわざ”あえて何かさせるような感覚ではなく、“もともと”そうするのを自然と感じ利用されるように、使う人のストーリーと知覚・行為・身体性から導き出した設計により、スムーズな使用体験が実現できます。
UIを決定していくためのガイドラインを根拠となる考え方とともに示しています。
Pattern
適切なUIを採用するための判断基準として
よくあるUIのパターンを目的／用途別に例示
実際に機能するUIをつくるにあたって、GUIDELINEで示すような基本原則だけでは不十分です。
デザインの一般原則という上位概念と、テキスト、グラフィック要素、グリッドといった下位に位置付けられるUIデザインの文法およびCOMPONENTに記載された個別のデザインパーツとの間にあるギャップをちょうど埋めるような中位の位置付けとして、UIパーツの実用的な組み合わせを示した具体的なパターンが必要です。
一般的なWebインターフェースで馴染みのあるもののほか、業務システムならではの様々なUIパターンを豊富に紹介しています。用途や条件に合わせてどのパターンが適切なのか、採用のための判断ポイントも具体的に示しています。
Component
コーディング時に役立つ
ソースコード、マークアップ方法の参照用ドキュメント
個別のUIパーツのインデックスです。PATTERNで示すような各種のパターンを構成する要素でもあり、GUIDELINEで示すデザイン原則に基づいて設計されています。
マークアップエンジニア／フロントエンドエンジニアのコーディング実務のための参照用途に活用できるよう、マークアップ方法、スタイルや用意されたオプションのバリエーションの指定方法など、一揃いで利用できるように、具体的なソースの記述方法も例とともにまとめています。
導入支援講習
「AstroBlaster UI Design System」の導入に当たっては、主に「業務システムにおけるUIデザインの基礎」「AstroBlaster UIライブラリの使用方法」の2つの柱で構成する初回講習を行いスムーズな導入をサポートします。
業務システムにおけるUIデザインの基礎
UIを“デザイナーだけの専門的でセンスが要求される仕事”ではなく、自分ごととして捉えるための考えかたについてお伝えします。デザイン原則やUI史的背景などに加え、企画者のかたには、クライアントやプロジェクトメンバーに自身をもって説明するためのベースとなる理論やトーク、開発者のかたには実装時の論理的な判断ポイントを解説します。
AstroBlaster UIライブラリの使用方法
収録されたUIパーツおよびパターンとそのコーディング方法ついて解説し、AstroBlaster UIを利用したプロトタイピングの勘所を理解できることを目指します。
さらに、部署別や新担当者様向けなど初回導入講習を複数回行ったり、ご要望や組織の習熟度に合わせて独自にカリキュラムを設計する応用講習を提供することが可能です。
- よくある業務システムのケーススタディを掘り下げて、より応用編として展開した内容の講習
- 具体的な業種や課題に即した設計実習を行うワークショップ形式の講習
- ペルソナやジャーニーマップといった、デザイン思考的な視点を業務システムの設計に取り入れるためのワークショップ形式の講習
利用料金
および他サービスとの比較
- UIコンポーネントファイル
- UIデザインのナレッジ
- 具体的な判断のためのガイドつきUIパターン集
- 技術ドキュメント
- 導入講習（ユニットプランではオプション）
- クエスチョンボードの利用（ユニットプランではオプション）
ユニットプラン
50万円／部署／半年
エンタープライズプラン
300万円／会社／年
受託成果物への利用件数無制限
コンサルティングA社
システムのUI設計に関する方法論の講義のみ
100万円〜／回
コンポーネント提供B社
UIコンポーネントファイルと技術ドキュメントのみ
開発者ライセンス
15万円／開発者／年
配布ライセンス
60万円／配布先／年
専任のUIデザイナーを常時雇用
人件費総額
1,500万円〜／年
※金額は税抜です。