簡単なバインダのデザイン方法

Point① 配色の法則

配色を考えるときのツールとして、色相環とカラーパレットを用います。

色相環	カラーパレット
色相を環状に配置したもので、色が体系化されています。色の位置関係で使ったときの効果がイメージできます。	横の並び順で近い色、遠い色を選ぶことで違う効果が得られます。縦には彩度の違う色を表にしています。また、この中の色から選べば合わない使い方にならないようになっています。

２つのケースでバインダの配色を使い分けてみます。

＜類似情報の取り扱い＞

類似する項目を色分けしたい場合、類似色を利用します。
すぐ隣の色では違いが分かりづらいため、二つ隣の色を選択します。

具体例

類似色 表示例	色相環	カラーパレット

＜異なる情報の取り扱い＞

項目の違いを表現したい場合、遠い色相を利用します。
正反対の色を選択すると色が反発し合うためY字対応の色を選択します。

具体例

類似色 表示例	色相環	カラーパレット

参考
・もう配色に迷わない！見やすく・入力しやすいフォームの色使いご紹介

Point② 列幅の整頓

２つのパターンの推奨する列幅（px）の設定をご紹介します。

＜2列の場合＞

＜4列の場合＞

「列属性」を押下して設定画面をひらいて、「列幅」のpxを指定してね。

Point③ 部品の配置

部品の配置について２つ注意することで綺麗な画面を設定できます。

＜テキスト情報の改行＞

特別な意味が無い限り、項目名や日付部品はテキスト改行されないように注意しましょう。
部品の再配置などでフォームを調整します。

＜文字列入力部品のサイズ＞

文字列入力BOXは内容に合わせてサイズを設定し、見やすくしましょう。
サイズは3パターンに絞ると効果的です。

バインダのデザインって奥が深いけど、「配色の法則」「列幅の整頓」「部品の配置」を整えるだけでもすっきりとしたデザインになるよ。是非試してみてね。