簡単なバインダのデザイン方法
はじめに
このページでは簡単なバインダのデザイン方法を紹介します。
フォームの見栄えの調整って大変だよね。ここではフォームがキレイに見えるちょっとしたコツを紹介するよ。
＜本記事の設定で完成する画面イメージ＞
※クリックでイメージを拡大できます。
このような入力画面の設定方法をご紹介します。
前提となる推奨バインダ設定
レイアウトブロック属性を下記のとおり設定してください
管理者モードでフォーム定義編集画面を開き、該当ブロックの「レイアウトブロック属性の編集」で設定するよ。
枠は「表示する」、表示幅は「部品配置連動」に設定してね。
枠は「表示する」、表示幅は「部品配置連動」に設定してね。
バインダをキレイにする３つのポイント
※各項目をクリックすると該当箇所へスクロールします。
Point① 配色の法則
配色を考えるときのツールとして、色相環とカラーパレットを用います。
| 色相環 | カラーパレット |
|---|---|
 |
 |
| 色相を環状に配置したもので、色が体系化されています。色の位置関係で使ったときの効果がイメージできます。 | 横の並び順で近い色、遠い色を選ぶことで違う効果が得られます。縦には彩度の違う色を表にしています。また、この中の色から選べば合わない使い方にならないようになっています。 |
２つのケースでバインダの配色を使い分けてみます。
＜類似情報の取り扱い＞
類似する項目を色分けしたい場合、類似色を利用します。
すぐ隣の色では違いが分かりづらいため、二つ隣の色を選択します。
具体例
| 類似色 表示例 | 色相環 | カラーパレット |
|---|---|---|
 |
 |
  |
＜異なる情報の取り扱い＞
項目の違いを表現したい場合、遠い色相を利用します。
正反対の色を選択すると色が反発し合うためY字対応の色を選択します。
具体例
| 類似色 表示例 | 色相環 | カラーパレット |
|---|---|---|
 |
 |
 |
Point② 列幅の整頓
２つのパターンの推奨する列幅（px）の設定をご紹介します。
＜2列の場合＞
＜4列の場合＞
列幅の設定方法
「列属性」を押下して設定画面をひらいて、「列幅」のpxを指定してね。
Point③ 部品の配置
部品の配置について２つ注意することで綺麗な画面を設定できます。
＜テキスト情報の改行＞
特別な意味が無い限り、項目名や日付部品はテキスト改行されないように注意しましょう。
部品の再配置などでフォームを調整します。
＜文字列入力部品のサイズ＞
文字列入力BOXは内容に合わせてサイズを設定し、見やすくしましょう。
サイズは3パターンに絞ると効果的です。
バインダのデザインって奥が深いけど、「配色の法則」「列幅の整頓」「部品の配置」を整えるだけでもすっきりとしたデザインになるよ。是非試してみてね。
