実際の業務で使用するアプリを開発しても、使われなかったら悲しいですよね？業務で利用するアプリを作る上では、「使いやすさ」「わかりやすさ」は重要で、機能のほかにレイアウトが業務に沿ったものになっているかも実は大切な要素となります。そこで、今回は”使いやすい”業務アプリを作るための配色に焦点を当て、「SmartDB」で配色を意識した業務アプリをすばやく作成する方法と便利なカラーセットをご紹介します。
“使いやすい”業務アプリの配色とは
入力フォームを設計するのに「どんな配色だと利用者はわかりやすくて、使いやすいの？」「見栄えのよい配色にしたい！」というお悩みをよくうかがいます。「SmartDB」では、項目ごとに任意の色をカラーパレットやカラーコードから自由に設定できます。 その自由さゆえに配色に悩まれるケースが多いとも言えます。また業務アプリケーション（以下、業務アプリ）を作成する際に一つずつ色を変更する作業が大変で、配色を意識しないレイアウトのままで利用しているという方もいらっしゃるかもしれません。使用する業務を想起させる色になっていることで利用者への浸透を促すことはもちろん、UIの観点からも配色は重要です。たとえば入力フォームで、配色によって必須入力項目とそれ以外の項目が区別できるようにしたり、入力対象者やタイミングなどに応じて項目ごとに配色や配置を意識したりすることで、利用者が迷わず適切なタイミングでデータを入力するよう誘導することができ、誤操作を防ぎます。また利用者が迷わず入力できるようになることで作業効率のアップも期待できます。
しかし、実際に業務アプリのレイアウト検討する立場になると、どんな配色・項目の配置にしたらよいのかと悩まれることが多いのではないでしょうか。そこで今回おすすめするのが、ドリーム・アーツが提供するテンプレートと配色ルールです。テンプレートではドリーム・アーツのデザイナーが定めた配色ルールを採用しており、ボタン一つでキレイに配色された入力フォームの業務アプリを作成することができます。
提案書管理用のアプリを作っていて、入力フォームの項目は決まっているんだけど、配色に困っていて…。「見た目にそんなに時間を掛けても」と思う反面、やっぱり入力しやすく閲覧しやすい、見栄えの良い画面にしたいなあ。
フォームの見た目って、意外と悩むところだよね。特に配色がキマると、グッと見栄えが良くなるんだ！参考にドリーム・アーツが提供する業務アプリテンプレート機能に利用している配色ルールと、テンプレートを使った業務アプリの作成方法を紹介するね！
Cello（チェロ）おすすめの配色ルール
「SmartDB」では、”使いやすい”業務アプリの配色が簡単に設定できるように、デザイナーがカラーコードと配色ルールを定めています。ベースカラーに対して以下の配色になるように設定すると見栄えの良い業務アプリを作成できます。業務アプリ作成時には、使用する業務に合うベースカラーを選んで配色していただくことをオススメしています。
＜カラーコードと配色ルールの表＞
＜例）水色系で配色した入力フォーム＞
「SmartDB」で提供しているテンプレートは配色ルールを利用しているから、「配色に悩みたくない！」という人はテンプレートから業務アプリを作成、修正していく方法がオススメ！作成後に項目の利用者や目的に応じて個別に項目名や背景色を変更して、入力フォームを作ってみると楽になるよ！
（テンプレート一覧）
Cello（チェロ）配色ルールを用いたテンプレートの設定方法
「SmartDB」は業務別でテンプレートが用意されており、配色などがあらかじめ設定されたものを使えます。ここからはテンプレートの設定方法を説明します
- 新規作成時に、「業務テンプレートから作成する」を選択します。
- テンプレート一覧からインポートしたいテンプレートを選択します。
＜テンプレート選択画面＞
テンプレートを使ってみたら、配色ルールが反映されている業務アプリの作成が簡単にできたよ！
たとえば社内の申請カテゴリに合わせて、人事・総務系なら水色、経理系ならオレンジ…とベースカラーを分けてみたりすることで利用者が使用する業務と業務アプリの印象がマッチするよ。フォーム内の入力範囲や入力する人によって色分けすると、ぱっと見てわかりやすくすることもできるよ。会社のコーポレートカラーやブランドイメージを配色のポイントに使ってみるのも、遊び心があってオススメだよ！
Cello（チェロ）今回ご紹介した配色ルールを反映したテンプレートの画面イメージは、「SmartDB」のテンプレート一覧でご覧いただけます。「見た目に悩みたくない！」という方はぜひ参考になさってください。
おまけ
「SmartDB」では、ボタン一つでExcel取り込みからかんたんに業務アプリを作成することもできます。またExcel取り込みをおこなう際に、業務アプリのベースカラーを簡単に設定できます。その設定手順についてご紹介します。
- 「SmartDB」の新規作成から、Excelを取り込む選択をします。
- データベース化したいExcelを取り込み、カラーを選択してフォームを設定します。
＜Excelインポート画面＞
まとめ
業務アプリの「使いやすさ」「わかりやすさ」は配色を意識したレイアウトになっているかに左右されます。ドリーム・アーツおすすめの配色ルールと、テンプレートを活用することで以下のような効果が見込めます。ぜひご活用ください。
- 配色で悩む時間を削減
- 手間なく短時間で配色を意識した業務アプリが完成
「SmartDB」では簡単な画面操作だけで、項目ごとの配色を変更することもできます。業務や項目の目的に応じた配色で便利な業務アプリを作成していきましょう。
3分でわかる「SmartDB」
3分でわかる「SmartDB」
大企業における業務デジタル化の課題について、「SmartDB」がどのように解決できるのかをご紹介する資料です。
詳しくはこちら
