ダッシュボードはWebサイトの顔! 管理画面UIを見やすく設計するポイントと53のデザイン事例

Design your way

A design magazine that is showcasing resources for web and graphic designers.

この記事はDesign your wayからの翻訳転載です。配信元または著者とコンテンツ契約を結び配信しています。
Showcase Of Dashboard UI Designs And How To Make Them

ダッシュボードと聞いて、何を連想しますか?

Webサイトの中で表紙的な役割を果たす、いわばそのWebサイトの顔のようなものですが、みなさんは有効的に活用できているでしょうか。大量の情報を整理し、ハイクオリティーなダッシュボードを設計するのは簡単ではありません。

今回は、ダッシュボードの設計で考慮したい14つのポイントと53の実例をご紹介します。

Smartviral - overview and browse
Krzysiek Koziol 

Webサイト上に漂う大小さまざまな情報のうち、本当に必要とされている情報はごくわずかです。

たとえば、はじめて訪れるウェブサイトを見ているとしましょう。Webサイトにある膨大なコンテンツのなかから、自分が見たいコンテンツをひとつひとつ探していたら、キリがありませんよね。通常は、サイト内のコンテンツはカテゴリーに分けて整理されているものです。そのなかでも、ユーザーがとくに必要であろうというものを、まとめて見やすく表示するのがダッシュボードの役割です。

良く設計されたダッシュボードのメリットは、情報を簡単に把握できることです。
たとえば、数字的なデータの変化を随時アップデートすることで、ユーザーがページを移動する手間を省けます。

ポイントは、どんなに小さなデータの変更でもモニターできるようにすることです。ユーザーインターフェースをデザインするときに大事なことは、イメージの順序を意識することです。要素の関係性を明確にすることで、一層わかりやすくなります。

1. ユーザーを知ろう

CodeFights Home
Garrett Godsey / dribbble

ダッシュボードはデータがすべてではありません。

一番重要なのは、ユーザーの疑問に対してしっかりと情報を提供できているかです。ただし、思いつく限りすべてのデータを載せれば良いというものではありません。

ユーザーが誰で、何を求めているのかを見極めましょう。そしてユーザーが、あなたのサイトで何を達成しようとしているのかを考えましょう。そこから考えられるリクエストを予想して設計します。

2. データを詰め込みすぎない

Sales Dashboard
Bradley Bussolini / dribbble

載せようとしている情報が、ユーザーにとって必要であるか。これを念頭に置きつつ、ダッシュボードに組みこむ情報を選びましょう。

重要な情報は迷わず画面に載せましょう。重要かどうかわからない場合はスキップすると良いでしょう。必要な情報だけを集めることがポイントです。自分にとって肝心でない情報や、処理されていない、見づらい情報は見たくないですよね。

3. 概要を最初に、そして興味のある人が掘り下げられるように設計する

Dashboard Concept
Serge Tiutyk / dribbble

ダッシュボードを新聞にたとえてみましょう。まず手に取る、表紙を軽く見る、そして何を読みたいか無意識に決めていると思います。それからは、自分が興味のあるページだけを見るのではないでしょうか? このように、表紙というものは概要をまとめて、ユーザーが何を見たいか簡単に決められるところであるべきです。

良い表紙を作るためには、視覚的なヒエラルキーの採用と、質の高いデザインが必要になります。

4. 視覚化する

Retweet(Dashboard)
Konrad  / dribbble

データの視覚化は、ユーザーインターフェースのデザインに欠かせないものです。グラフやチャートなどの視覚的な情報は、ユーザーがその情報をより深く理解するのに役立ちます。

しかし、視覚的情報が多すぎるのは好まれないので、ここでもシンプルを心がけましょう。視覚化することで、データの全体像を示せます。そして、最適な表示方法はデータの種類によります。たとえば、グラフを使うときにも、円グラフの方が棒グラフより適していたり、その逆もありえます。

画像やグラフの使いすぎはかえって混乱を招くので避けましょう。

6. おもしろいアニメーションを追加する

画像に動きをもたせると、ユーザーの注意を引き、より記憶に残りやすくなります。

ですが、派手なアニメーションは使いどころを選ぶ必要があるので注意しましょう。写真やアイコンのような静止画でも、役割を十分に果たしてくれることが多いです。

7. アニメーションはパロメーター的に使う

ダッシュボードにアニメーションを採用するなら、ユーザーにとって心地よい使い方を考えましょう。

特に、「いつ」アニメーションを使うかを考えるべきです。ダッシュボードとは、いわば掲示板のようなもので、さまざまな情報を表示しています。つまり、データソースもいろいろあるわけで、ページを読み込むのには時間がかかってしまいます。

そのギャップを違和感なく埋めることが可能なのがアニメーションです。選択肢は無限大。たとえば、読み込み中のアイコンやメッセージを表示したり、パーセント表示のローディングバーを使えます。

ダッシュボードを最初は空にしておいて、データがアップロードされるごとに埋めていくというアイディアもあります。

8. ナビゲーションは直感的に設計する

Health Dashboard
Rob Luke / dribbble

ダッシュボードは、ひとつのページというより、複数にわたるページの集まりといえるでしょう。

最初のページは全体の概要で、その先にさらにページがありますよね。大きなWebサイトになるほど、ナビゲーションを怠ればユーザーの混乱を招いてしまいます。

ユーザーの行動パターンとダッシュボード内のヒエラルキーを意識して、ユーザーを混乱させることがないようにしましょう。デザインを決定する前にテストを行うのもおすすめです。

9. ダッシュボードをスッキリきれいに

Security Dashboard Exploration
Sam Thibault / dribbble

良いダッシュボードに共通することは何でしょう?

種類に関係なく共通していえることは、スッキリしていて、使い心地の良さに妥協していないことです。デザインのリサーチを行い、思いつく限り最高のデザインで要素同士をつなぎ合わせましょう。

そうすることで、スッキリと整頓された良いデザインができあがります。

10. 読みやすさにフォーカスしたデザイン

読みやすいフォントを使うと、ユーザーは内容を理解しやすくなります。
簡単に理解できるデザインは、より幅広いユーザーに受け入れてもらえます。

インターフェイスとは、平たくいうと、ユーザーがクリックしたくなるようにモチベーションを与えるための道具のようなものです。上手に活用しましょう。

11. 色使いでより良いUIデザインを演出

Product Dashboard and Analysis Design
Yavick Zaytsev / dribbble

ユーザーが情報を受け取ったり、それを解析するときに、色は大事な役割を果たします。

色彩心理学という、色が人に与える影響の研究があります。データの種類によって最適な色使いがあるので、参考にしてみてください。たとえば、赤、青、黄色は情報の優先度を高めてくれます。

ひとつのWebサイト内では、統一した色使いを心がけましょう。そうすることで、ユーザーの混乱を防ぐことができて、さらにはWebサイトの信頼へと繋がります。

12. ガイドとヘルプをいつでも利用可能にする

ダッシュボードとは本来、それだけで成り立つものであって追加の説明は必要ないものです。
しかし、ときとしてユーザーにメッセージが届かない場合もあります。その原因となってくるのが、デザインの良し悪しです。デザインのクオリティに比例して、メッセージの伝わりやすさが変わってきます。

ユーザーが混乱することがないように、追加の説明は必ずつけましょう。特に、サイトにはじめて来る人へ向けたヘルプ機能をとり入れましょう。

13. ユーザーが知っているデザインにする

あなたのWebサイトやアプリにはじめてアクセスするユーザーにとっては、文章の中身や、アイディアの良さよりも、見かけのインパクトの方が大きな影響を与えます。

ユーザーがよく知ってそうなパターンデザイン、アイコンや言葉遣いのみを使うようにしましょう。ベーシックでオススメなのは、標準化されていて人気のあるパターンを使うことです。

デザイナーの好みを優先しすぎて、ユーザーの混乱を招いてしまっては本末転倒です。

14. ダッシュボードUIのインスピレーション

Server Dashboard
Sam Thibault / dribbble

ダッシュボードは、データへの簡単なアクセスができるところです。

通常は、統計、解析、スケジュール、メッセージなどのデータが閲覧できます。ダッシュボードとは本来、サイトやアプリ側で管理しているデータへアクセスしたり変更することを、ユーザーが簡単に行うために使われます。いわば、コントロールパネルや管理者パネルみたいなものです。しかし、データの視覚化はその専門家でも難しい作業です。すべてのデザイナーに向いている作業ではないことを覚えておきましょう。

ユーザーに評価されるダッシュボードのほとんどは、色彩に富んでいて、レイアウトが良く直感的に使いやすいものが多いです。デザイナーがあまり力を入れないダッシュボードのインターフェイスですが、ユーザーエクスペリエンスにはとても重要です。そのためのリサーチとプランは必要です。
直感的でユーザーが使いやすい完璧なデザインを目指しましょう。

53のWebダッシュボードアイディアをチェック!

1. Dashboard Design

Dashboard Design
Jason Kendall / dribbble

Dashboard Design

2. Dashboard UI Kit

Dashboard UI Kit
Jan Losert / UI8

ダッシュボードデザインとウェブアプリケーションを、75に及ぶ美しいインターフェースとプロトタイプを集めた最大級のパックです。すべてのデザインに、『GoogleフォントSource Sans Pro』と、『secondary Proxima Nova』それぞれのフォントを使った2つのバージョンがあります。1170pxグリッドシステム(30pxと1580pxのキャンバスサイズ)をベースとしています。

3. Code Exam Dashboard

Code Exam Dashboard
Mashell / dribbble

4. Administrator: Dashboard Design Pack

Administrator
Administrator Dashboard Design Pack / Visual Hierarchy

5. Material Dashboard

Materical Dashboard
Machi / dribbble

Material Dashboard

6. Logged-In Dashboard

Logged-In Dashboard
Brian Jensen / dribbble

7. Smart Admin Dashboard

Smart Admin Dashboard
Mushfiq / dribbble

Smart Admin Dashboard

8. Dashboard orange UX

Dashboard Orange UX
Gleb Kuznetsov / dribbble

9. B2B Dashboard

B2B Dashboard
Greg / dribbble

B2B Dashboard

10. Dashboard for Employee fitness app

Employee fitness app
Vivek / dribbble

Dashboard for Employee fitness app

11. Dashboard

Dashboard
Greg Dlubacz / dribbble

Dashboard

12. Dashboard by Sketch 3

Recruiting Platform Dashboard
Ron E. / dribbble

Dashboard by Sketch 3

13. Fitness Web App: Sessions

Fitness Web App
Handsome / dribbble

14. FlatLab – Flat & Responsive Admin Template

Flat & Responsive Admin Template
vectorlab / Behance

15. Website Analytics Dashboard

Website Analytics Dashboard
Danny Amacher / dribbble

16. Dashboard Web App UI: Job Summary

Job Summary
Mason Yarnell / dribbble

17. Desk.com Dashboard

Desk.com Dashboard
Dave Ruiz /dribbble

18. Element Wave Dashboard Update

Element Wave Dashboard Update
Handsome / dribbble

19. I love Dashboards

Dashboard

Unknown / dribbble

20. Panels Dashboard

Panels Dashboard
Cosmin Capitanu / dribbble

21. Home Statistics Dashboard

Home Statistics Dashboard
Derek Bender / dribbble

22. MB Dashboard

MB Dashboard
David Kovalev / dribbble

23. Some Analytics

Some Analytics
Cosmin Capitanu / dribbble

24. iPad UI Design

iPad UI Design
Jackie Tran / dribbble

25. Dashboard Full 2

Dashboard Full 2
Baby / dribbble

26. Vonigo – Dashboard

Vonigo - Dashboard
ueno. /dribbble

27. Dashboard WordPress

Dashboard WordPress
Barthelemy Chalvet / dribbble

28. Flat Dashboard

Flat Dashboard

29. Webapp Dashboard

Webapp Dashboard
Ben Garrett / dribbble

30. Rolodex Dashboard

Rolodex Dashbaord
Ben Cline / dribbble

31. Droplr Dashboard

Droplr Dashboard
Victor Erixon / dribbble

32. Dashboard

Admin Dashboard
Jonathan Moreira / dribbble

33. Health Analytics Dashboard Preview

Health Analytics Dashboard Preview
Andrew Lucas / dribbble

34. A Dasbaord

a dashbaord
Nathan Fwamba / dribbble

35. Panels Dashboard

Panels Dashboard
Cosmin Capitanu / dribbble

36. Task Management App

Task Management App
Ludmila Shevchenko / dribbble

37. Dashboard Stats

Dashboard "Stats"
Meg Taylor / dribbble

38. Product Dashboard, Activity Feed UI/UX

Activity Feed UI/UX
Mason Yarnell / dribbble

39. To-Do Dashboard

To-Do Dashboard
Tiberiu Nemu / dribbble

40. Story Book

Story Book
Cosmin Capitanu / dribbble

41. Tutor App UI

Tutor App UI
Corey Haggard / dribbble

42. PhotoLytics Dashboard UI

PhotoLytics Dashboard UI
Balraj Chana / dribbble

43. Dashboard

Dashboard
Jeroen Marechal / dribbble

44. Dark Analytics Dashboard

Freebie PSD: Dark Analytics Dashboard
Davide Pacilio / dribbble

45. Xonom

Xonom
Cosmin Capitanu / dribbble

46. Health app

Health app
Jakub Antalik / dribbble

47. Pastel Projects

Pastel Projects
Cosmin Capitanu / dribbble

48. Aspree

Aspree
Zulal Ahmad / dribbble

49. Elastica – Dashboard

Elastica - Dashboard
ueno. / dribbble

50. Accent Dash II

Accent Dash II
Rovane Durso / dribbble

51. Quartzy – Order Requests

Order Requests
ueno. / dribbble

52. Progress View

Progress View
Handsome / dribbble

53. Movie App Final

Movie App Final
Aaron Sananes / dribbble

ハッとさせられるようなデザインはありましたか?
あなたのダッシュボードをデザインするのに、応用してください!

(翻訳:Juri Ando)

SHARE