いいデザインとは、
かたちではなく、時間。

だいじなのは、UIの造形(かたち)ではなく体験(時間)ではないでしょうか。
だめなUXは、ユーザーの貴重な人生の時間を無駄にする時間ドロボウでもあります。

単により短い時間で目的を達成できるだけではなく、 システムと接している間、ストレスなくこころよくいられること。 楽しく、使い続けたいと感じられる魅力があること。

画面の中だけの話でなく、 使う人とシステムの関係性から、デザインははじまっています。

デザインの観点

ユーザーの体験(エクスペリエンス)を質の高いものとするために、デザインは抽象的で戦略的なコンセプトの観点からはじまります。言うまでもなく、これはサイト(システム)の根幹に関わるもので、デザイナーだけが判断するものではありません。UX(ユーザーエクスペリエンス)はビジネス自体の戦略上の要点なのです。

表層…ビジュアルデザイン:UI要素の視覚的なふるまい 骨格…レイアウト/ナビゲーションデザイン:構造を通じてユーザーのスムーズな動作を担保するインターフェース設計 構造…構造デザイン:コンテンツの伝達、タスクの実行フローのための情報空間の構造的設計 要件…コンテンツデザイン:ニーズと目的を満たす、機能とコンテンツ要素の定義 目的…コンセプトデザイン:ターゲットユーザーのニーズ、サイトの目的の設定

コンセプトのデザインを根底に敷いた上に、より表層に向かっていくつかの観点でのデザインが積み上げられていきます。目的を果たすためのコンテンツ(中身)のデザイン、コンテンツの種類や量、アクセスできる経路や機能を実行するフローをユーザーがイメージしやすくする構造のデザイン、ユーザーがスムーズに操作できるためのデザイン、そしてさいごにいちばんユーザーに近く視覚的に触れる場所にフォルムや色彩、装飾要素といったビジュアルのデザインがあります。これらがすべてつながって、重なっていることで、ここちよい体験を実現しています。

複数の開発元の技術をシームレスにつなげられる、独自デザイン言語とUIライブラリー

アストロラボでは、5年以上に渡る業務システム企画の中で試行錯誤を重ねブラッシュアップを続けてきた独自のデザインラブラリーを使用しています。素早くプロトタイプをコーディングするためのUIパーツのオープンソースのコード集に加え、業務システムでよく使われるさまざまなUIパターン、そしてそれらを活用するための ガイドラインやナレッジを揃えています。これにより複数の企業の技術を統合したソリューションにおいても統一した一貫性のある操作体験を実現することができます。

AstroBlaster UI Design System(抜粋版サンプル)

AstroBlaster UI Design System 利用プラン

業務システムの企画・開発の現場におけるUIの設計や最適化についてのご要望をうけ、このUIライブラリーを利用できるプランもご用意しています。
cssおよびjavascript、テンプレートhtmlファイルで構成されたソースファイルのほか、豊富なドキュメントを提供します。ドキュメントは使いやすいUIを作るためのデザイン原則や共通ルールであるGUIDELINE、適切なUIを採用するための判断基準として、よくあるUIのパターンを目的/用途別に例示しUIの選択やアレンジの判断に役立つPATTERN、コーディング時に役立つソースコードおよびマークアップ方法の参照用のCOMPONENTで構成されており、業務システムのベストプラクティスを手軽に導入しUIデザインを最適化できるようになっています。ソースファイルおよびドキュメントは定期的に機能追加やメンテナンスのアップデートが提供され、サブスクリプション型で常に最新版を利用できます。

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 利用プラン