レイアウト

同じ意味や機能を持つ情報や要素が共通した配置になっていると、いちいち細かな記憶や都度の判断に頼らずにやりたいことや欲しいものを自然な期待どおりに見つけることができるため、一貫したルールに沿った配置・ゾーニングとなっていることは重要です。

同一システム内だけでなく同じユーザーが使う関連システムでも、そうした共通性が保たれていると、新たに習得したり、使い分けたりする負担が少なくなります。

基本的なレイアウト

システム全体を通して基本的な画面は、左側のサイドバーと上部のヘッダーからなるナビゲーションバーの領域と、コンテンツ領域で構成されます。コンテンツ領域の右下はその画面での主要な目的達成のアクションのためのポジションになります。

ヘッダー サイドバー コンテンツ
ヘッダー コンテンツ

ログイン画面には専用のレイアウトが用意されています。

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

ABUIでは横幅を12等分したモバイルファーストな可変グリッドシステムが用意されており、柔軟性を持ちつつ一貫性のある配置が可能となっています。

カラム幅3個分 カラム幅9個分 カラム幅6個分 カラム幅4個分 カラム幅12個分

グリッドをベースにしたカラムは、デバイスやビューポートサイズの変更に応じて柔軟にレイアウトを切り替えることができます。異なる複数のデバイス毎にレイアウトを切り替えると言っても、単に画面サイズに合わせて並び方を変えれば十分とは限りません。業務システムの場合はとくに、同じ情報ソースを元にしていても、デバイスが変われば利用シーンや目的も変わってくる場合が多いでしょう。オフィスではキーボードとマウスでの操作に適したUIコントロールも駆使してフルに詳細入力、出先からはスマートフォンで簡易に限定された項目のみ入力と確認、店舗では客に手渡すタブレットで客の閲覧/編集可能な情報のみ参考情報とともに表示するなど、情報の並びや表示非表示の切り替えだけでなく、それぞれのユーザーや目的からユーザー体験をきちんと定義した上で、各デバイスで最適なUIとなるように設計します。

スマートフォン
タブレット縦
タブレット横・PC
ワイドPC
PC大画面