【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
ダッシュボードと聞いて、何を連想しますか?
Webサイトの中で表紙的な役割を果たす、いわばそのWebサイトの顔のようなものですが、みなさんは有効的に活用できているでしょうか。大量の情報を整理し、ハイクオリティーなダッシュボードを設計するのは簡単ではありません。
今回は、Webサイトのダッシュボードの設計で考慮したい14つのポイントと53の実例をご紹介します。
モバイル向けのダッシュボードUIについての記事はコチラ
BIツール向けモバイルダッシュボードを作ろう!設計のポイントとデザイン事例集
Workship MAGAZINE
Webサイト上に漂う大小さまざまな情報のうち、本当に必要とされている情報はごくわずかです。
たとえば、はじめて訪れるウェブサイトを見ているとしましょう。Webサイトにある膨大なコンテンツのなかから、自分が見たいコンテンツをひとつひとつ探していたら、キリがありませんよね。通常は、サイト内のコンテンツはカテゴリーに分けて整理されているものです。そのなかでも、ユーザーがとくに必要であろうというものを、まとめて見やすく表示するのがダッシュボードの役割です。
良く設計されたダッシュボードのメリットは、情報を簡単に把握できることです。
たとえば、数字的なデータの変化を随時アップデートすることで、ユーザーがページを移動する手間を省けます。
ポイントは、どんなに小さなデータの変更でもモニターできるようにすることです。ユーザーインターフェースをデザインするときに大事なことは、イメージの順序を意識することです。要素の関係性を明確にすることで、一層わかりやすくなります。
目次
Garrett Godsey / dribbble
ダッシュボードはデータがすべてではありません。
一番重要なのは、ユーザーの疑問に対してしっかりと情報を提供できているかです。ただし、思いつく限りすべてのデータを載せれば良いというものではありません。
ユーザーが誰で、何を求めているのかを見極めましょう。そしてユーザーが、あなたのサイトで何を達成しようとしているのかを考えましょう。そこから考えられるリクエストを予想して設計します。
Bradley Bussolini / dribbble
載せようとしている情報が、ユーザーにとって必要であるか。これを念頭に置きつつ、ダッシュボードに組みこむ情報を選びましょう。
重要な情報は迷わず画面に載せましょう。重要かどうかわからない場合はスキップすると良いでしょう。必要な情報だけを集めることがポイントです。自分にとって肝心でない情報や、処理されていない、見づらい情報は見たくないですよね。
Serge Tiutyk / dribbble
ダッシュボードを新聞にたとえてみましょう。まず手に取る、表紙を軽く見る、そして何を読みたいか無意識に決めていると思います。それからは、自分が興味のあるページだけを見るのではないでしょうか? このように、表紙というものは概要をまとめて、ユーザーが何を見たいか簡単に決められるところであるべきです。
良い表紙を作るためには、視覚的なヒエラルキーの採用と、質の高いデザインが必要になります。
Konrad / dribbble
データの視覚化は、ユーザーインターフェースのデザインに欠かせないものです。グラフやチャートなどの視覚的な情報は、ユーザーがその情報をより深く理解するのに役立ちます。
しかし、視覚的情報が多すぎるのは好まれないので、ここでもシンプルを心がけましょう。視覚化することで、データの全体像を示せます。そして、最適な表示方法はデータの種類によります。たとえば、グラフを使うときにも、円グラフの方が棒グラフより適していたり、その逆もありえます。
画像やグラフの使いすぎはかえって混乱を招くので避けましょう。
画像に動きをもたせると、ユーザーの注意を引き、より記憶に残りやすくなります。
ですが、派手なアニメーションは使いどころを選ぶ必要があるので注意しましょう。写真やアイコンのような静止画でも、役割を十分に果たしてくれることが多いです。
ダッシュボードにアニメーションを採用するなら、ユーザーにとって心地よい使い方を考えましょう。
特に、「いつ」アニメーションを使うかを考えるべきです。ダッシュボードとは、いわば掲示板のようなもので、さまざまな情報を表示しています。つまり、データソースもいろいろあるわけで、ページを読み込むのには時間がかかってしまいます。
そのギャップを違和感なく埋めることが可能なのがアニメーションです。選択肢は無限大。たとえば、読み込み中のアイコンやメッセージを表示したり、パーセント表示のローディングバーを使えます。
ダッシュボードを最初は空にしておいて、データがアップロードされるごとに埋めていくというアイディアもあります。
Rob Luke / dribbble
ダッシュボードは、ひとつのページというより、複数にわたるページの集まりといえるでしょう。
最初のページは全体の概要で、その先にさらにページがありますよね。大きなWebサイトになるほど、ナビゲーションを怠ればユーザーの混乱を招いてしまいます。
ユーザーの行動パターンとダッシュボード内のヒエラルキーを意識して、ユーザーを混乱させることがないようにしましょう。デザインを決定する前にテストを行うのもおすすめです。
Sam Thibault / dribbble
良いダッシュボードに共通することは何でしょう?
種類に関係なく共通していえることは、スッキリしていて、使い心地の良さに妥協していないことです。デザインのリサーチを行い、思いつく限り最高のデザインで要素同士をつなぎ合わせましょう。
そうすることで、スッキリと整頓された良いデザインができあがります。
読みやすいフォントを使うと、ユーザーは内容を理解しやすくなります。
簡単に理解できるデザインは、より幅広いユーザーに受け入れてもらえます。
インターフェイスとは、平たくいうと、ユーザーがクリックしたくなるようにモチベーションを与えるための道具のようなものです。上手に活用しましょう。
Yavick Zaytsev / dribbble
ユーザーが情報を受け取ったり、それを解析するときに、色は大事な役割を果たします。
色彩心理学という、色が人に与える影響の研究があります。データの種類によって最適な色使いがあるので、参考にしてみてください。たとえば、赤、青、黄色は情報の優先度を高めてくれます。
ひとつのWebサイト内では、統一した色使いを心がけましょう。そうすることで、ユーザーの混乱を防ぐことができて、さらにはWebサイトの信頼へと繋がります。
ダッシュボードとは本来、それだけで成り立つものであって追加の説明は必要ないものです。
しかし、ときとしてユーザーにメッセージが届かない場合もあります。その原因となってくるのが、デザインの良し悪しです。デザインのクオリティに比例して、メッセージの伝わりやすさが変わってきます。
ユーザーが混乱することがないように、追加の説明は必ずつけましょう。特に、サイトにはじめて来る人へ向けたヘルプ機能をとり入れましょう。
あなたのWebサイトやアプリにはじめてアクセスするユーザーにとっては、文章の中身や、アイディアの良さよりも、見かけのインパクトの方が大きな影響を与えます。
ユーザーがよく知ってそうなパターンデザイン、アイコンや言葉遣いのみを使うようにしましょう。ベーシックでオススメなのは、標準化されていて人気のあるパターンを使うことです。
デザイナーの好みを優先しすぎて、ユーザーの混乱を招いてしまっては本末転倒です。
Sam Thibault / dribbble
ダッシュボードは、データへの簡単なアクセスができるところです。
通常は、統計、解析、スケジュール、メッセージなどのデータが閲覧できます。ダッシュボードとは本来、サイトやアプリ側で管理しているデータへアクセスしたり変更することを、ユーザーが簡単に行うために使われます。いわば、コントロールパネルや管理者パネルみたいなものです。しかし、データの視覚化はその専門家でも難しい作業です。すべてのデザイナーに向いている作業ではないことを覚えておきましょう。
ユーザーに評価されるダッシュボードのほとんどは、色彩に富んでいて、レイアウトが良く直感的に使いやすいものが多いです。デザイナーがあまり力を入れないダッシュボードのインターフェイスですが、ユーザーエクスペリエンスにはとても重要です。そのためのリサーチとプランは必要です。
直感的でユーザーが使いやすい完璧なデザインを目指しましょう。
Jason Kendall / dribbble
Jan Losert / UI8
ダッシュボードデザインとウェブアプリケーションを、75に及ぶ美しいインターフェースとプロトタイプを集めた最大級のパックです。すべてのデザインに、『GoogleフォントSource Sans Pro』と、『secondary Proxima Nova』それぞれのフォントを使った2つのバージョンがあります。1170pxグリッドシステム(30pxと1580pxのキャンバスサイズ)をベースとしています。
Mashell / dribbble
Administrator Dashboard Design Pack / Visual Hierarchy
Machi / dribbble
Brian Jensen / dribbble
Mushfiq / dribbble
Gleb Kuznetsov / dribbble
Greg / dribbble
Vivek / dribbble
Dashboard for Employee fitness app
Greg Dlubacz / dribbble
Ron E. / dribbble
Handsome / dribbble
vectorlab / Behance
Danny Amacher / dribbble
Mason Yarnell / dribbble
Dave Ruiz /dribbble
Handsome / dribbble
Unknown / dribbble
Cosmin Capitanu / dribbble
Derek Bender / dribbble
David Kovalev / dribbble
Cosmin Capitanu / dribbble
Jackie Tran / dribbble
Baby / dribbble
ueno. /dribbble
Barthelemy Chalvet / dribbble
Ben Garrett / dribbble
Ben Cline / dribbble
Victor Erixon / dribbble
Jonathan Moreira / dribbble
Andrew Lucas / dribbble
Nathan Fwamba / dribbble
Cosmin Capitanu / dribbble
Ludmila Shevchenko / dribbble
Meg Taylor / dribbble
Mason Yarnell / dribbble
Tiberiu Nemu / dribbble
Cosmin Capitanu / dribbble
Corey Haggard / dribbble
Balraj Chana / dribbble
Jeroen Marechal / dribbble
Davide Pacilio / dribbble
Cosmin Capitanu / dribbble
Jakub Antalik / dribbble
Cosmin Capitanu / dribbble
Zulal Ahmad / dribbble
ueno. / dribbble
Rovane Durso / dribbble
ueno. / dribbble
Handsome / dribbble
Aaron Sananes / dribbble
ハッとさせられるようなデザインはありましたか?
あなたのダッシュボードをデザインするのに、応用してください!
(翻訳:Juri Ando)