システム開発でよく構築するのが「管理画面」。
いわゆるエンドユーザーが見るフロントエンドの機能を管理する役目を持っていますが、使いやすいと感じるものはまだまだ多くないかもしれません。
今回は、比較的簡単にHTMLが構築できるBootstrapを利用するテンプレートを中心とした、使いやすい、見やすい管理画面のテンプレートをご紹介したいと思います。
目次
Bootstrap用の管理画面テンプレートで、レスポンシブにも対応しているので、モバイルフレンドリー。
無料で利用ができて、かつグラフや基本的なテーブルのリストなどが使いやすい＆見やすいテンプレートです。
サンプル用の画面にはボタンや見出しの表示サンプルのページもあるので、それを参照しながら構築していけます。
また、テーブルのリストも、DataTables というjQueryのプラグインが使えるため、リストのソート機能などの表示、非表示もtrue または false で切り替えが簡単。
さらに、bootsnipphttps://bootsnipp.com/ も使えば、ログイン画面、カレンダー、チャット画面、お問い合わせフォームなどもデザインが実装できます。
SB Admin 2
https://startbootstrap.com/template-overviews/sb-admin-2/
こちらもBootstrap 4 とあわせて利用する、管理画面テンプレート。
テーブルや、アイコンなどのUIパーツ、お問い合わせフォームのほか、カレンダー、To Do リスト、チャットなどのテンプレートも付いています。また、Google MapとベクターMapの２種類の地図も利用が可能。
全体にシンプルでスッキリとしていながらも、操作しやすいダッシュボードの作りになっているのが魅力です。
Adminatorデモサイト
https://colorlib.com/polygon/adminator/index.html
Bootstrap テンプレートの中でも、地図を利用している珍しいダッシュボードのデザインです。
下記のデモサイトには、駐車場の地図と、利用状況のデータがセットになった形のものがあり、線グラフ、棒グラフは、判例をクリックするだけでデータの表示・非表示も切り替えができるなど、余計なボタンがなくとも操作ができ、デザインもスッキリしているだけでなく、とても使いやすい印象です。
また、駐車場の地図は mapbpx というOpenStreetMapの地図データが使われています。
Google Map以外の地図を利用したい、という方にも参考にもなるのではないでしょうか。
さらに、なお、レスポンシブ対応のレイアウトサンプルも同サイトで公開されているので、デザインテンプレートと組み合わせて使ったり、先にモックを作るといったケースにも活用できそうです。
Dashboards by Keen IO
https://keen.github.io/dashboards/examples/
WordPress風のUIにデザインされた管理画面テンプレート。
先述の３つのテンプレートとは異なり、PSDのテンプレートのため、「いつもデザインはPhotshopで」というPhotshop使いのデザイナーには使いやすいはず。
お好みに応じてアイコンなどのパーツを差し替えすれば、オリジナルのデザインにもできます。
Photoshop CC 14.1 以降のバージョンから画像アセット機能が追加されたので、素材をSVGで書き出したり、パソコンとモバイルで解像度の異なる画像を出し分けするために、複数枚画像の書き出しが必要となる場合でも、アセット機能で設定をしておけば一度で書き出しできるため、画像が多めのサイトであれば、より効率的に作業ができそうです。
Free Admin Template PSD
http://www.freebiesgallery.com/free-admin-template-psd/
いくつかテンプレートをご紹介してきましたが、そもそもなぜ使いやすい管理画面が必要なのでしょうか。
以前は「管理画面なんて、どれも一緒で、デザインも気にしない」という方も多かったですが、昨今では管理画面もレスポンシブで使いやすく、といったリクエストも多くなりました。これは、ビジネスシーンであっても、実際に利用する端末がパソコンだけでなく、モバイルにシフトしてきているという点も大きく影響しているように感じます。
そのため、モバイルなどの小さな画面で見ても見やすく、ボタンがタップがしやすいなどの、操作のしやすさも重要となってきました。
とはいえ、「どうやって使いやすいデザインにすれば良いのやら…」という方も多いはず。
そういった際にもこのテンプレートを利用することで、容易に画面イメージができるほか、オリジナルのデザインを作るという時にも、ここから展開していくイメージを作るサポートをしてくれるのではないでしょうか。
