「業務システムの画面デザインを作るときに参考になるサイトってある？」
「使いやすいUIにするにはどのようなポイントに注意したら良い？」
業務システムは操作性が命。システムの画面デザインが優れていないと、ユーザーが不便に感じてしまうかもしれません。使いやすいシステムを構築するには完成しているデザインやUIを参考にし、開発中の業務システムにうまく取り入れる必要があるでしょう。
そこで本記事ではデザイン・エンジニアリング両面からサービスの設計・開発を行っているFlowzが以下の内容について詳しく解説します。
- 業務システムの画面デザインサンプル7選
- 画面デザインにおける5つのポイント
- 改善すべき画面デザインの特徴
デザインのサンプルを探している方はもちろん、画面を設計する際に意識すべきポイントについても解説するので、ぜひ最後までお読みください！
なおFlowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。お困りごとがある方はぜひお気軽にご相談ください！
目次
業務システムの画面デザインサンプル7選
まずは、業務システムの画面デザインとして参考になるサイトを7つ紹介します。
- formrun
- codebase
- Creative Tim
- Google App
- Microsoft 365
- マネーフォワードクラウド
ひとつずつ見ていきましょう。
Pinterestは、ネット上にある画像や動画をまとめてコレクションできるサービスです。こちらのサイトで「管理画面」などと検索すると、画面デザインのサンプルを一覧で確認できます。
UIをパーツ単位で探したい場合も有用です。例えば「アプリケーション ボタン」と検索すれば、アプリと相性の良いボタンデザインを検索可能。
ピンとくるアイデアが出ないときにPinterestで調べると、参考になるデザインが見つかるかもしれません。
formrun
formrunは、アンケートフォームや問い合わせ窓口などのさまざまなフォームを自分で簡単に作成できるツールです。対顧客用のページでだけでなく、請求書発行申請フォームや勤怠報告フォームなどの社内で利用するフォームも作れます。
あらかじめ用意されたテンプレートを使えるので、一から入力フォームを作る工数を削減できるのがformrunの魅力です。
また「簡単編集」を使えば、画面デザインを自分好みに組み立てられるので、入力フォームなどの簡単なページをサクッと作りたい方は、formrunを活用すると良いでしょう。
codebase
codebaseは、デザインの型が体系的にまとめられたサイトです。デザインの要素が非常に豊富で「ボタン」という要素一つ取っても、サイズや形状、ボタン内のアイコンなど詳細な設定ができます。
codebaseのアイコンやボタンのデザインを利用するには有料プランに入る必要があるものの、デザインを参考にするだけなら無料です。
洗練されたデザインのパターンが揃っているため、初心者でも比較的簡単にデザインのサンプルとして参考にできるのがcodebaseの魅力と言えるでしょう。
Creative Tim
Creative Timは、UIデザインのテンプレートサイトです。数多くのテンプレートが用意されているため、クライアントと画面デザインのイメージをすり合わせる際に使えます。
ログインフォームや請求書の画面など幅広いデザインが用意されているため、業務システムの画面デザインを構築する際に参考になるサイトです。
Google App
Googleがリリースしているアプリにも、画面デザインのヒントが数多く転がっています。例えばアンケートや出欠確認ページなどを作成する「フォーム」を見ると、質問の内容や回答形式を直感的に設定できるようなUIになっているでしょう。
このようにGoogleのアプリにはユーザーが使いやすいような工夫が施されているので、ボタン配置やプルダウンの設定など、細かい部分を参考にできます。
業務システムの画面デザインを作成する際に、Googleアプリの要素を取り入れればユーザーにとって使いやすいUIに近づけられるでしょう。
Microsoft 365
Windowsになじみが深いユーザー向けの業務システムを作成する場合、Microsoft 365を参考にするのがおすすめです。WordやExcel・Teamsなどは広く普及しているため、Microsoftの画面デザインに寄せることでユーザーに取って使い慣れたUIに仕上げられます。
なおGoogleのアプリとはUIデザインが異なる点が多いので、両者の要素が混在しないように注意しましょう。
マネーフォワードクラウド
マネーフォワードクラウドは、日本で最も人気のある会計アプリのひとつ。高頻度で利用する仕訳やレポートの確認などは、最初のページから1クリックで遷移できるようになっています。
会計ツールの画面デザインを決める場合は、マネーフォワードクラウドのUIを確認してみると良いでしょう。フォントのサイズや余白の取り方など、参考にできる部分は多いサービスと言えます。
業務システムの画面デザインにおける5つのポイント
次に業務システムを作成する際にどのようなことを意識すべきかについて、5つのポイントに絞って紹介します。
- 視線誘導を意識する
- 選択肢は絞る
- リキッドレイアウトにする
- ユーザーが気付きやすいような通知にする
- 色は数を絞る
ぜひ参考にしてみてください！
視線誘導を意識する
まず画面をデザインするうえで、ユーザーの視線がどのように動くのかを意識する必要があります。視線の動きを無視して画面デザインを組んでしまうと、直感的に使いにくいUIになってしまう危険性があるからです。
基本的にユーザーの目線は左から右へ、上から下へと動く傾向があるため、優先度の高い要素は左上に置くのが定石。特に視線の動きの代表的なパターンとして、Z型とF型があります。
この導線上に重要な要素を配置すれば、ユーザーに取って見やすい画面デザインになるでしょう。
選択肢は絞る
一つの画面に雑多な選択肢を並べることは、ユーザーに使いにくさを感じさせる原因です。ボタンやプルダウンなどの選択肢は、できる限り絞ったほうが分かりやすくなります。
選択肢を絞りきれない場合は、色や配置を工夫するようにしましょう。例えば優先度が低いボタンは灰色にしたり、優先度の低いプルダウンの要素は下のほうに表示したり…。
重要な選択肢はどれなのかを、ユーザーが直感的に分かるようなデザインにすることが大切です。
リキッドレイアウトにする
近年、PCやスマホ・タブレットなどさまざまなデバイスでシステムを操作されるケースが多く、各デバイスの画面幅に合わせてレイアウトを調整する必要があります。
「PCでは使いやすいけどスマホになると特定の操作ができない」という画面デザインでは、ユーザーに不便さを感じさせてしまうでしょう。
そのためどのデバイスで操作しても、問題なく使えるようなレイアウトに画面デザインを設計する必要があり、このようなレイアウト設定のことを「リキッドレイアウト」と言います。
ユーザーがどのデバイスで業務システムを利用するか分からないのであれば、リキッドレイアウトにしておくことは重要度の高い施策といえるでしょう。
ユーザーが気付きやすいような通知にする
業務システムからの通知は、能動的に確認しなくてもユーザーが気付けるようにすべきです。そのためには、管理画面のトップページにアイコンで分かりやすく配置するのが定石。
例えば通知を意味するバッチに赤色を用いれば、ユーザーの目にとまりやすくなるでしょう。また、バッチの中に数字を入れれば、貯まっている通知の量も一目瞭然です。
このように業務を進めるうえで必要な情報は、迅速にユーザーに届けられる設計にする必要があるでしょう。
色は数を絞る
色を使いすぎると情報の優先度が分かりづらくなるので、配色は絞るのが大切です。基本的にはベースカラー・メインカラー・アクセントカラーの3色を決めると良いでしょう。
その範囲内で色を設定すれば、ユーザーに配色のルールが直感的に伝わりやすくなります。
特に強調したい要素がある場合は、枠やサイズなどを変更する方法も。色だけでなく形やサイズなどの要素も活用すれば、配色を無駄に増やさなくてすむでしょう。
その結果、ユーザーにとって分かりやすいシンプルなデザインに落ち着きます。
UIを改善すべき業務システムの画面デザインとは
最後に、業務システムにおいて改善すべき画面デザインの特徴を3つ紹介します。
- 機能が多すぎる
- ボタンが密集して配置されている
- 複雑な操作を要求される
機能が多すぎる
1枚の画面に多数の機能を詰め込み過ぎると、業務システム自体が使いにくくなってしまいます。
よく使う機能とあまり使わない機能が1枚の画面に混在していると、利便性が著しく低下する原因です。そのため、画面に配置する機能はできる限り絞り込んだほうが良いでしょう。
よく使う機能をすぐに開けるよう、配置をユーザーがカスタマイズできるようにするのも一つの手。機能をたくさん盛り込むことよりユーザビリティを優先して、業務システムの画面を設計するようにしましょう。
ボタンが密集して配置されている
ボタンが密集していることは操作ミスを誘発する原因。ボタン同士の距離を離したほうが操作しやすく、業務を正確かつスピーディーに行える業務システムになるでしょう。
例えば小さなボタンが一ヵ所に集中して配置されているのは、改善すべきポイント。その場合はボタンを要素ごとにまとめるか、サイズを大きくするなどの工夫が必要です。
どのデバイスで操作するのかによって、ボタン同士の最適な距離感は異なります。
ただ、スマホ操作のような画面が小さいデバイスで操作しても、誤操作を起こさないようなボタン配置になっているのが理想です。
複雑な操作を要求される
業務システムはシンプルさが命。業務を行う際に複数の操作が必要なシステムは、純粋に使いづらくなってしまいます。
使いやすい業務システムにするには、手入力ではなくボタンやプルダウンで入力できるようにするなどの一工夫が大切。実際にシステムを操作してみて、より楽な操作感にするにはどうすれば良いかという視点でデザインを見直してみると良いでしょう。
業務システムの画面デザインはユーザー目線で設計しよう！
業務システムの画面デザインを決める際に参考になるサイトやツールは数多くあります。どのようなUIにすべきか迷ったら、他のツールやサイトはどのようなデザインになっているか確認すると良いでしょう。
また優れたUIの特徴はある程度決まっているので、視線誘導やリキッドレイアウトにすることなど、基本に忠実に画面デザインを組むことも大切です。
なおFlowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。UXデザインを自社サービスでも活かしたい方は、ぜひFlowzにご相談ください！
