採用ミスマッチはなぜ起こる？企業が陥りやすい原因と改善ポイントを解説
- 働き方
ダッシュボードと聞いて、何を連想しますか？
Webサイトの中で表紙的な役割を果たす、いわばそのWebサイトの顔のようなものですが、みなさんは有効的に活用できているでしょうか。大量の情報を整理し、ハイクオリティーなダッシュボードを設計するのは簡単ではありません。
今回は、Webサイトのダッシュボードの設計で考慮したい14つのポイントと53の実例をご紹介します。
モバイル向けのダッシュボードUIについての記事はコチラ
BIツール向けモバイルダッシュボードを作ろう！設計のポイントとデザイン事例集
Workship MAGAZINE
Webサイト上に漂う大小さまざまな情報のうち、本当に必要とされている情報はごくわずかです。
たとえば、はじめて訪れるウェブサイトを見ているとしましょう。Webサイトにある膨大なコンテンツのなかから、自分が見たいコンテンツをひとつひとつ探していたら、キリがありませんよね。通常は、サイト内のコンテンツはカテゴリーに分けて整理されているものです。そのなかでも、ユーザーがとくに必要であろうというものを、まとめて見やすく表示するのがダッシュボードの役割です。
良く設計されたダッシュボードのメリットは、情報を簡単に把握できることです。
たとえば、数字的なデータの変化を随時アップデートすることで、ユーザーがページを移動する手間を省けます。
ポイントは、どんなに小さなデータの変更でもモニターできるようにすることです。ユーザーインターフェースをデザインするときに大事なことは、イメージの順序を意識することです。要素の関係性を明確にすることで、一層わかりやすくなります。
目次
1. ユーザーを知ろう
Garrett Godsey / dribbble
ダッシュボードはデータがすべてではありません。
一番重要なのは、ユーザーの疑問に対してしっかりと情報を提供できているかです。ただし、思いつく限りすべてのデータを載せれば良いというものではありません。
ユーザーが誰で、何を求めているのかを見極めましょう。そしてユーザーが、あなたのサイトで何を達成しようとしているのかを考えましょう。そこから考えられるリクエストを予想して設計します。
2. データを詰め込みすぎない
Bradley Bussolini / dribbble
載せようとしている情報が、ユーザーにとって必要であるか。これを念頭に置きつつ、ダッシュボードに組みこむ情報を選びましょう。
重要な情報は迷わず画面に載せましょう。重要かどうかわからない場合はスキップすると良いでしょう。必要な情報だけを集めることがポイントです。自分にとって肝心でない情報や、処理されていない、見づらい情報は見たくないですよね。
3. 概要を最初に、そして興味のある人が掘り下げられるように設計する
Serge Tiutyk / dribbble
ダッシュボードを新聞にたとえてみましょう。まず手に取る、表紙を軽く見る、そして何を読みたいか無意識に決めていると思います。それからは、自分が興味のあるページだけを見るのではないでしょうか？ このように、表紙というものは概要をまとめて、ユーザーが何を見たいか簡単に決められるところであるべきです。
良い表紙を作るためには、視覚的なヒエラルキーの採用と、質の高いデザインが必要になります。
4. 視覚化する
Konrad / dribbble
データの視覚化は、ユーザーインターフェースのデザインに欠かせないものです。グラフやチャートなどの視覚的な情報は、ユーザーがその情報をより深く理解するのに役立ちます。
しかし、視覚的情報が多すぎるのは好まれないので、ここでもシンプルを心がけましょう。視覚化することで、データの全体像を示せます。そして、最適な表示方法はデータの種類によります。たとえば、グラフを使うときにも、円グラフの方が棒グラフより適していたり、その逆もありえます。
画像やグラフの使いすぎはかえって混乱を招くので避けましょう。
6. おもしろいアニメーションを追加する
画像に動きをもたせると、ユーザーの注意を引き、より記憶に残りやすくなります。
ですが、派手なアニメーションは使いどころを選ぶ必要があるので注意しましょう。写真やアイコンのような静止画でも、役割を十分に果たしてくれることが多いです。
7. アニメーションはパロメーター的に使う
ダッシュボードにアニメーションを採用するなら、ユーザーにとって心地よい使い方を考えましょう。
特に、「いつ」アニメーションを使うかを考えるべきです。ダッシュボードとは、いわば掲示板のようなもので、さまざまな情報を表示しています。つまり、データソースもいろいろあるわけで、ページを読み込むのには時間がかかってしまいます。
そのギャップを違和感なく埋めることが可能なのがアニメーションです。選択肢は無限大。たとえば、読み込み中のアイコンやメッセージを表示したり、パーセント表示のローディングバーを使えます。
ダッシュボードを最初は空にしておいて、データがアップロードされるごとに埋めていくというアイディアもあります。
8. ナビゲーションは直感的に設計する
Rob Luke / dribbble
ダッシュボードは、ひとつのページというより、複数にわたるページの集まりといえるでしょう。
最初のページは全体の概要で、その先にさらにページがありますよね。大きなWebサイトになるほど、ナビゲーションを怠ればユーザーの混乱を招いてしまいます。
ユーザーの行動パターンとダッシュボード内のヒエラルキーを意識して、ユーザーを混乱させることがないようにしましょう。デザインを決定する前にテストを行うのもおすすめです。
9. ダッシュボードをスッキリきれいに
Sam Thibault / dribbble
良いダッシュボードに共通することは何でしょう？
種類に関係なく共通していえることは、スッキリしていて、使い心地の良さに妥協していないことです。デザインのリサーチを行い、思いつく限り最高のデザインで要素同士をつなぎ合わせましょう。
そうすることで、スッキリと整頓された良いデザインができあがります。
10. 読みやすさにフォーカスしたデザイン
読みやすいフォントを使うと、ユーザーは内容を理解しやすくなります。
簡単に理解できるデザインは、より幅広いユーザーに受け入れてもらえます。
インターフェイスとは、平たくいうと、ユーザーがクリックしたくなるようにモチベーションを与えるための道具のようなものです。上手に活用しましょう。
11. 色使いでより良いUIデザインを演出
Yavick Zaytsev / dribbble
ユーザーが情報を受け取ったり、それを解析するときに、色は大事な役割を果たします。
色彩心理学という、色が人に与える影響の研究があります。データの種類によって最適な色使いがあるので、参考にしてみてください。たとえば、赤、青、黄色は情報の優先度を高めてくれます。
ひとつのWebサイト内では、統一した色使いを心がけましょう。そうすることで、ユーザーの混乱を防ぐことができて、さらにはWebサイトの信頼へと繋がります。
12. ガイドとヘルプをいつでも利用可能にする
ダッシュボードとは本来、それだけで成り立つものであって追加の説明は必要ないものです。
しかし、ときとしてユーザーにメッセージが届かない場合もあります。その原因となってくるのが、デザインの良し悪しです。デザインのクオリティに比例して、メッセージの伝わりやすさが変わってきます。
ユーザーが混乱することがないように、追加の説明は必ずつけましょう。特に、サイトにはじめて来る人へ向けたヘルプ機能をとり入れましょう。
13. ユーザーが知っているデザインにする
あなたのWebサイトやアプリにはじめてアクセスするユーザーにとっては、文章の中身や、アイディアの良さよりも、見かけのインパクトの方が大きな影響を与えます。
ユーザーがよく知ってそうなパターンデザイン、アイコンや言葉遣いのみを使うようにしましょう。ベーシックでオススメなのは、標準化されていて人気のあるパターンを使うことです。
デザイナーの好みを優先しすぎて、ユーザーの混乱を招いてしまっては本末転倒です。
14. ダッシュボードUIのインスピレーション
Sam Thibault / dribbble
ダッシュボードは、データへの簡単なアクセスができるところです。
通常は、統計、解析、スケジュール、メッセージなどのデータが閲覧できます。ダッシュボードとは本来、サイトやアプリ側で管理しているデータへアクセスしたり変更することを、ユーザーが簡単に行うために使われます。いわば、コントロールパネルや管理者パネルみたいなものです。しかし、データの視覚化はその専門家でも難しい作業です。すべてのデザイナーに向いている作業ではないことを覚えておきましょう。
ユーザーに評価されるダッシュボードのほとんどは、色彩に富んでいて、レイアウトが良く直感的に使いやすいものが多いです。デザイナーがあまり力を入れないダッシュボードのインターフェイスですが、ユーザーエクスペリエンスにはとても重要です。そのためのリサーチとプランは必要です。
直感的でユーザーが使いやすい完璧なデザインを目指しましょう。
53のWebダッシュボードアイディアをチェック！
1. Dashboard Design
Jason Kendall / dribbble
2. Dashboard UI Kit
Jan Losert / UI8
ダッシュボードデザインとウェブアプリケーションを、75に及ぶ美しいインターフェースとプロトタイプを集めた最大級のパックです。すべてのデザインに、『GoogleフォントSource Sans Pro』と、『secondary Proxima Nova』それぞれのフォントを使った２つのバージョンがあります。1170pxグリッドシステム(30pxと1580pxのキャンバスサイズ)をベースとしています。
3. Code Exam Dashboard
Mashell / dribbble
4. Administrator: Dashboard Design Pack
Administrator Dashboard Design Pack / Visual Hierarchy
5. Material Dashboard
Machi / dribbble
6. Logged-In Dashboard
Brian Jensen / dribbble
7. Smart Admin Dashboard
Mushfiq / dribbble
8. Dashboard orange UX
Gleb Kuznetsov / dribbble
9. B2B Dashboard
Greg / dribbble
10. Dashboard for Employee fitness app
Vivek / dribbble
Dashboard for Employee fitness app
11. Dashboard
Greg Dlubacz / dribbble
12. Dashboard by Sketch 3
Ron E. / dribbble
13. Fitness Web App: Sessions
Handsome / dribbble
14. FlatLab – Flat & Responsive Admin Template
vectorlab / Behance
15. Website Analytics Dashboard
Danny Amacher / dribbble
16. Dashboard Web App UI: Job Summary
Mason Yarnell / dribbble
17. Desk.com Dashboard
Dave Ruiz /dribbble
18. Element Wave Dashboard Update
Handsome / dribbble
19. I love Dashboards
Unknown / dribbble
20. Panels Dashboard
Cosmin Capitanu / dribbble
21. Home Statistics Dashboard
Derek Bender / dribbble
22. MB Dashboard
David Kovalev / dribbble
23. Some Analytics
Cosmin Capitanu / dribbble
24. iPad UI Design
Jackie Tran / dribbble
25. Dashboard Full 2
Baby / dribbble
26. Vonigo – Dashboard
ueno. /dribbble
27. Dashboard WordPress
Barthelemy Chalvet / dribbble
28. Flat Dashboard
29. Webapp Dashboard
Ben Garrett / dribbble
30. Rolodex Dashboard
Ben Cline / dribbble
31. Droplr Dashboard
Victor Erixon / dribbble
32. Dashboard
Jonathan Moreira / dribbble
33. Health Analytics Dashboard Preview
Andrew Lucas / dribbble
34. A Dasbaord
Nathan Fwamba / dribbble
35. Panels Dashboard
Cosmin Capitanu / dribbble
36. Task Management App
Ludmila Shevchenko / dribbble
37. Dashboard Stats
Meg Taylor / dribbble
38. Product Dashboard, Activity Feed UI/UX
Mason Yarnell / dribbble
39. To-Do Dashboard
Tiberiu Nemu / dribbble
40. Story Book
Cosmin Capitanu / dribbble
41. Tutor App UI
Corey Haggard / dribbble
42. PhotoLytics Dashboard UI
Balraj Chana / dribbble
43. Dashboard
Jeroen Marechal / dribbble
44. Dark Analytics Dashboard
Davide Pacilio / dribbble
45. Xonom
Cosmin Capitanu / dribbble
46. Health app
Jakub Antalik / dribbble
47. Pastel Projects
Cosmin Capitanu / dribbble
48. Aspree
Zulal Ahmad / dribbble
49. Elastica – Dashboard
ueno. / dribbble
50. Accent Dash II
Rovane Durso / dribbble
51. Quartzy – Order Requests
ueno. / dribbble
52. Progress View
Handsome / dribbble
53. Movie App Final
Aaron Sananes / dribbble
ハッとさせられるようなデザインはありましたか？
あなたのダッシュボードをデザインするのに、応用してください！
（翻訳：Juri Ando）
人気のフリーランス・副業求人
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
【リモート可】音楽、エンタメ × ITでイノベーションを！API開発をするサーバーサイドエンジニア募集！
- #土日週末OK
- #急募
職種：バックエンドエンジニア
時給：4,000円 〜
働き方：どちらでも可
エリア：東京都
【週4勤務/リモートワークOK】クリエイター中心の組織で開発を担う、バックエンドエンジニアを募集！
- #急募
- #長期案件
- #フルリモートOK
職種：バックエンドエンジニア
時給：3,000円 〜 3,500円
働き方：どちらでも可
エリア：東京都
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
