AstroBlaster
AstroBlaster UI Design System

抜粋版

ABUIは、アストロラボによるブラウザベースのシステム製品のユーザーインターフェースの標準化および開発の効率化のために用意されたデザインライブラリと、その活用のための指針およびガイドラインで構成されるデザインシステムです。

単一の製品のみならず複数の製品が統合的なソリューションとして利用されるときにも高いクオリティで一貫性を保ったユーザー体験が実現できるように、UIのベストプラクティスを提供するものです。

構造や関係性を伝える情報デザイン、直感的に迷わず使えるユーザービリティ、サクサク快適に動作する性能といった、ストレスなく目的を達成できる信頼感をはぐくむ「設計品質」の観点だけでなく、見て/触れて/使って感じる心地良さや満足感をもたらす感性的な品質も含めた「利用品質」の観点からも。根本となる原則や基本ルールから、個別の構成要素であるパーツまで、そしてその間を埋める実践的で具体的なパターンを揃えています。ここではそのごく一部を抜粋して掲載しています。

Guideline

カラースウォッチ

blue
bluegreen
green
greenyellow
yellow
yelloworange
orange
orangered
red
redpurple
purple
purpleblue
gray-darker
gray-dark
gray
gray-light
gray-lighter
gray-subtle
gray-subtler
gray-subtlest

タイポグラフィ

Lato
Spica Neue
Heading3

といっても、大げさに言うほどのことでもない。

Heading4

ご存じのとおり、地球、木星、火星、金星みたいに名前のある大きな星のほかに、

Heading5
望遠鏡でもたまにしか見えない小さなものも、何100倍とある。
Heading6
たとえばそういったものがひとつ、星博士に見つかると、番号で呼ばれることになる。
Body Paragraph

〈小惑星325〉という感じで。ちゃんとしたわけがあって、王子くんお住まいの星は、小惑星B612だと、ぼくは思う。前にも、1909年に、望遠鏡を覗いていたトルコの星博士が、その星を見つけている。それで、世界星博士会議、というところで、見つけたことをきちんと発表したんだけど、身につけている服のせいで、信じてもらえなかった。

Note

おとなの人って、いつもこんな風だ。でも、小惑星B612は運がよくて、そのときのいちばん偉い人が、みんなにヨーロッパ風の服を着ないと死刑だぞ、というおふれを出した。1920年にその人は、お上品な召しもので、発表をやりなおした。すると今度は、どこもだれもがうんうんとうなずいた。こうやって、小惑星B612のことをいちいちいったり、番号の話をしたりするのは、おとなのためなんだ。おとなの人は、数字が大好きだ。この人たちに、新しい友だちができたよといっても、中身のあることはなにひとつきいてこないだろう。

Label
Blockquote

すっごくかんたんなことなんだ。
心でなくちゃ、よく見えない。
かんじんなことは、目では見えないってこと。

サン=テグジュペリ 『LE PETIT PRINCE』より

アイコン

12グリッドシステムとレスポンシブレイアウト

6 6 3 2
12 9 9 6
12 6 6 4
12 6 4 9
12 12 12 12

Pattern

ヘッダー

いろいろな入力

ステッパー
テンキー
カレンダー
タイムピッカー
スライダー

表示内容

cm
  • -3.0
  • -2.0
  • -1.0
  • ±0
  • +1.0
  • +2.0
ワードから絞り込んで選択
ドリルダウンから複数選択
  • 11:青果
  • 61:果汁飲料
  • 1:生鮮・チルド
    2:惣菜・イートイン
    3:冷凍品
    4:加工品
    5:パン・菓子類
    6:飲料
    7:アルコール類
入力の追加
氏名 所属 役職
1

表組

単位:千円(税抜)
前年日付 日付 曜日 関東エリア計
都心ゾーン計
0157:銀座
前年実績 本年計 前年比(%) 前年実績 本年計 前年比(%) 前年実績 本年計 前年比(%)
1/7 1/6 56,240 54,371 96.7 7,030 6,781 96.5 1,004 1,004 1004
1/8 1/7 55,424 56,059 101.1 6,928 6,883 99.4 990 987 99.7
1/9 1/8 54,040 53,267 98.6 6,755 6,755 100.0 965 983 101.9
1/10 1/9 56,496 57,099 101.1 7,062 7,122 100.8 1,009 976 96.7
1/11 1/10 60,664 60,915 100.4 7,583 7,599 100.2 1,083 1,090 100.6
1/12 1/11 64,632 61,355 94.9 8,079 8,104 100.3 1,154 1,075 93.1
1/13 1/12 62,520 63,259 101.2 7,815 7,892 101.0 1,116 1,235 110.6
週計 410,016 406,325 99.1 51,252 50,683 98.9 7,322 7,364 100.6

※本年数値はPOSシステムより集計

ドラッグ&ドロップで並び替え

# Name
1 peach
2 strawberry
3 apple
4 orange
5 watermelon

レコード検索

42 A店舗
51 B店舗
137 C店舗

チャット

じゃあ、5おく100まんの星をどうするの?

2028/09/03 01:02 王子

5おく162まん2731。ちゃんとしてるんだ、わたしは。こまかいんだ。

2028/09/03 01:03 しごとにんげん

2028/09/03 01:03 しごとにんげん

ログイン

Component

テキストフィールド

表示内容

ドロップダウン

スイッチ
ラベル

チェックボックス

ラジオボタン

テキストエリア

ボタン
プログレスバー
タブ
コンテンツ 1
コンテンツ 2
コンテンツ 3

通知