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

「SmartDB」のフォームは、項目に使う色を設定するときに カラーパレットだけでなくカラーコードでも自由に設定できます。

しかしその自由度ゆえに
「どんな配色だとわかりやすいの？」「見栄えのよい配色にしたい！」 というお悩みをよくうかがいます。

そこで今回は、ドリーム・アーツがテンプレート作成において採用しているバインダ配色をご紹介します！

今バインダを作っていて入力してほしい項目は決まっているんだけど、配色に困っていて・・・。
「見た目にそんなに時間を掛けても」と思う反面、
やっぱり入力しやすく閲覧しやすい、見栄えの良い画面にしたいなあ。

フォームの見た目って、意外と悩むところだよね。
特に配色がキマると、グッと見栄えが良くなるんだ！
参考に、ドリーム・アーツがバインダテンプレート機能に利用している配色ルールを紹介するね！

テーマカラー別　バインダ配色カラーコード

	水色系	オレンジ系	紫系	青系	赤系	緑系
ベースカラー(濃)	#bde5e0	#f2d798	#cdb0e8	#3a5fe8	#e83a48	#44a515
ベースカラー (淡)	#f2faf9	#fcf9ed	#f9f2ff	#f3f5fa	#faf2f3	#f2faf2
項目名色	#335566	#382d16	#383040	#0d1533	#330d10	#0c1f04

例）水色系で配色したバインダ

設定の仕方

1. テーマカラーをひとつ選びます。
2. 部品編集画面を開き、項目名色に「項目名色」、背景色に「ベースカラー(濃)または(淡)」を設定します。

この配色ルールはドリーム・アーツのデザイナーが設定したものだよ。

例えば社内の申請カテゴリに合わせて、人事・総務系なら水色、経理系ならオレンジ・・・とカラーテーマを分けてみたり、 フォーム内の入力範囲や入力する人によって色分けすると、ぱっと見てわかりやすくなるね。

それから会社のコーポレートカラーを使ってみるのも、遊び心があってオススメだよ！

この通りに設定したら、ほんとうに見栄えが良くなったよ！
これなら入力する人も閲覧する人もわかりやすいね！

今回紹介した配色ルールはバインダテンプレートに利用しているから、
「見た目に悩みたくない！」という人はバインダテンプレートの文字や部品を編集して、バインダを作ってみると楽になるよ！

テンプレート一覧はこちらを見てね。
・バインダテンプレート集