Name: ダッシュボードデザインのヒント Tableauにおける情報ボタンのトグルスイッチ (Dashboard Design Tips Information Buttons Toggle Switches in Tableau)
Uploaded: 2024-10-16T18:28:23.000Z
Duration: 19 min 55 s

程度の副詞

Just make sure that you're in the right spot.

ただ、正しい場所にいることを確認してほしい。

This is the spot for dashboard design tips.

ダッシュボード・デザインのヒントはここにある。

I'll be talking about dashboard design, info buttons, and toggle switches.

ダッシュボードのデザイン、インフォメーションボタン、トグルスイッチについてお話しします。

First things first, please make your purchase decisions of any Tableau products and service based on existing features and services.

まず最初に、Tableau製品やサービスの購入は、既存の機能やサービスに基づいて決定してください。

This conversation may go well or not, it may be awesome or awful, it's too early to tell, so please make your purchase decision wisely.

この会話はうまくいくかもしれないし、うまくいかないかもしれない。

With that said, I'd like to say thank you to all of you for attending the session.

とはいえ、セッションに出席してくれた皆さんに感謝したい。

And let's talk a little bit about myself so that we can get to know each other a little bit better.

そして、お互いのことをもう少しよく知るために、自分のことを少し話そう。

僕の名前はケビン、ケビン・ウィー。

If we have any Mandarin speaking people here, it's Huang Kewen in Mandarin.

ここに北京語を話す人がいるとすれば、北京語で黄啓文だ。

And there's several things I'd like to know about myself before we start the session.

そして、セッションを始める前に私自身について知っておきたいことがいくつかある。

First of all, I've been using Tableau for more than five years.

まず、私はTableauを5年以上使っている。

I'm currently the lead BI analyst at Discover Financial Services.

私は現在、Discover Financial ServicesでリードBIアナリストを務めています。

私はTableauのアンバサダーでもあります。

That's just another word to say that when I'm not using Tableau at work, I use Tableau for fun to try to push the limit of the tool to see what it can do that's not commonly available at a moment.

これは、私が仕事でTableauを使っていないときは、Tableauの限界に挑戦するために、遊びでTableauを使っています。

私はTableauのビジョナリーでもある。

That just means that I am very, very passionate in sharing my findings with all of you.

つまり、私は自分の発見を皆さんと分かち合うことに、とてもとても情熱を持っているということだ。

And I try to do that every year in a conference.

そして毎年、大会ではそうするようにしている。

So with that said, let's talk about what you may get out of the conference.

ということで、この会議で得られるかもしれないものについて話そう。

I'll start with the demonstrations of a dashboard that filled with buttons.

まずは、ボタンで埋め尽くされたダッシュボードのデモンストレーションから。

Then we'll talk about how you may find good icon libraries for your own dashboard development.

それから、ダッシュボード開発に適したアイコン・ライブラリの見つけ方についてお話します。

I'll talk about a specific kind of button called icon buttons, and then a specific category of icon buttons called toggle switches.

ここでは、アイコンボタンと呼ばれる特定の種類のボタンと、トグルスイッチと呼ばれるアイコンボタンの特定のカテゴリーについてお話しします。

We'll end the session with giving you all learning resources so that you could use them to create your own business dashboards as well.

セッションの最後には、あなた自身のビジネス・ダッシュボードの作成にも使えるよう、すべての学習リソースをお渡しします。

By the end of the session, you should be able to do the following.

セッションが終わる頃には、以下のことができるようになっているはずだ。

First of all, you should be able to find suitable icon libraries that are readily available to use for you for dashboard development.

まず第一に、ダッシュボード開発にすぐに使える適切なアイコンライブラリを見つけることができるはずだ。

You should be able to create custom-shaped icons with good user interface, or UI for short.

優れたユーザー・インターフェース、略してUIを備えたカスタム形状のアイコンを作成できるはずだ。

These icons, some of them should have good parameter interactivity.

これらのアイコンは、いくつかのパラメータがインタラクティブでなければならない。

Last but not least, you should be able to lease at least three applications of icon buttons in dashboard design.

最後になるが、ダッシュボードのデザインにおけるアイコンボタンの用途を少なくとも3つはリースできるはずだ。

So with that said, please raise your hand if you have explained the same thing about a dashboard or a metric over and over again in the last couple of days.

ということで、ここ2、3日の間にダッシュボードや指標について同じことを何度も説明したことがある人は手を挙げてください。

People just keep asking the same questions about a chart, a metric, a equation.

人々はチャート、指標、方程式について同じ質問をし続ける。

Now raise your hand if you have had too many filters or parameters in a dashboard.

ダッシュボードにフィルターやパラメーターを入れすぎたことがある人は手を挙げてほしい。

People just keep asking for more, but you only have limited real estate in the dashboard, a lot of you.

みんなはもっともっとと要求し続けるが、ダッシュボードの面積は限られている。

How many of you have tried to find good icons on internet, but you always ended up with something that you're not sure whether they're proper or professional, right?

インターネットで良いアイコンを探したことがある人はどれくらいいるだろう。

So today I'll try to help you solve all of these problems.

そこで今日は、これらの問題をすべて解決する手助けをしようと思う。

Before I demo the dashboard, there are two notes I'd like to give to you and myself.

ダッシュボードのデモをする前に、皆さんと私自身に伝えたいことが2つある。

First of all, a well-designed dashboard button should help the target users.

まず第一に、優れたデザインのダッシュボードボタンは、ターゲットユーザーを助けるものでなければならない。

They should be easily used by them, but not bedazzled them.

彼らにとって使いやすいものでなければならない。

They shouldn't spend too much time looking at them.

あまり時間をかけて見るべきじゃない。

And the second thing is, later, I'd like you to pay attention to the buttons.

そして2つ目は、後でボタンに注目してほしい。

このセッションでは、チャートはヒーローではない。

These are the buttons that changes the charts.

これらはチャートを変更するボタンである。

Now let's look at what can actually be done with icon buttons.

では、実際にアイコンボタンで何ができるかを見てみよう。

I have published this dashboard on my Tableau public account, and it's currently publicly accessible to all of you.

私はこのダッシュボードを私のTableau公開アカウントで公開しました。

These are the three icon buttons that I will be demonstrating today.

これが、今日デモンストレーションする3つのアイコンボタンだ。

So what does it do is when you hover your cursor on it, it will spill out an information about a dashboard or a chart.

カーソルを合わせると、ダッシュボードやチャートに関する情報が表示される。

An example of use would be in the chart on the right side here, it has a fancy metric called punctual delivery rate.

例えば、この右側のチャートには、時間厳守の配達率という派手な指標がある。

If you hover your cursor over it, you will read the definition of that metric.

カーソルを合わせると、その指標の定義が表示される。

So this could be useful for all of those indexes, all of those rates in your company.

だからこれは、あなたの会社のすべてのインデックス、すべてのレートに役立つ可能性がある。

The second kind of icon buttons that I'd like to introduce to you is called A-B switch.

2つ目に紹介するのは、A-Bスイッチと呼ばれるアイコンボタンだ。

It lets you switch between setting A and setting B in the same chart when you click it.

これをクリックすると、同じチャート内で設定Aと設定Bを切り替えることができる。

So here it tells you when you click it, it will switch from B to A. And when you click it again, it will switch back.

クリックするとBからAに切り替わり、もう一度クリックすると元に戻る。

An example of this application would be you can switch the X metrics between two different metrics.

このアプリケーションの例としては、Xのメトリクスを2つの異なるメトリクスの間で切り替えることができます。

Currently, the X metrics for this chart is sales per order by category.

現在、このグラフのX指標は、カテゴリー別の注文あたりの売上高である。

When you click the icon, it will switch to profit per order by category.

アイコンをクリックすると、カテゴリー別の注文ごとの利益に切り替わる。

The third kind of button that I'd like to introduce to you is a special kind of A-B switches.

三つ目に紹介するのは、特殊なA-Bスイッチである。

オン・オフスイッチと呼ばれるものだ。

Basically you turn on or turn off a setting of a chart or a dashboard by clicking it like this on and off.

基本的には、このようにクリックすることで、チャートやダッシュボードの設定をオン・オフします。

It's pretty much like the light switch at your home.

家の電気のスイッチと同じようなものだ。

The example that I'm showing you here is sometimes when we compare the existing value with our plan value, like a target, like a forecast, we want to temporarily hide or show that forecast or that compared value.

ここでお見せする例は、目標値や予想値など、既存の値と計画値を比較する際に、一時的に予想値や比較値を非表示にしたり、表示したりしたい場合です。

So with the on off switch, you can accomplish so.

だから、オン・オフスイッチを使えば、そうすることができる。

I know that all of this is very overwhelming with a lot of buttons on the screen, but now let's take a step back.

画面上にたくさんのボタンが並んでいて、とても圧倒されるのはわかるが、ここで一歩引いてみよう。

Let's talk about how do we actually get this icon buttons.

では、実際にこのアイコンボタンをどのように表示させるかについて話そう。

On the screen here, we have two set of icons.

この画面には2つのアイコンがある。

I'd like you to spend about five seconds to think which one set, which set is better for a professional business dashboard.

プロフェッショナルなビジネス・ダッシュボードにはどのセットがいいのか、5秒ほど考えてみてほしい。

一番下と答えた人は何人いますか？

一番上と答えた人は何人いますか？

We're in a good, we're in a good, we're in a good place.

僕らはいいところにいる、いいところにいるんだ。

Oh, by the way, I'm not a graphic designer.

そういえば、僕はグラフィックデザイナーじゃないんだ。

I did not create any of this icons, but I do agree with you that icons on the top are better than the ones on the bottoms.

私はこのアイコンを作ったわけではないが、上部にあるアイコンの方が下部にあるアイコンよりも良いという意見には同意する。

では、何が彼らをより良くしているのか？

According to Google material design, the icons that could be, should be used in a software or in our case, a dashboard, this should be simple in design, they should be easily recognizable.

グーグルのマテリアルデザインによれば、アイコンはソフトウェアや、我々の場合はダッシュボードで使用され、シンプルなデザインで、簡単に認識できるものでなければならない。

That means that when you step at a very far and you can still figure out a small one, what do they mean without the text next to it.

つまり、かなり遠くまで踏み込んでも、小さなものであれば、その横にテキストがなくても意味がわかるということだ。

And amongst the icons, they should have style consistency, meaning that the color should be similar.

そしてアイコンの間では、スタイルの一貫性、つまり色が似ている必要がある。

If they have any line in it, their line weight should be similar, their thickness should be similar.

ラインが入っていれば、ラインの太さも太さも同じであるべきだ。

They should look like they belong in the same family.

同じ家族のように見えるはずだ。

So in the past couple of months, I have gathered about 26 icons that I deem they could be commonly used in dashboard designs.

そこで、ここ数ヶ月の間に、ダッシュボードのデザインによく使われると思われるアイコンを26個ほど集めてみた。

And then by the end of the session, you will get all 26 of them.

そしてセッションが終わるころには、26個すべてを手に入れることになる。

オーケー、では期待していてくれ。

さて、これらのボタンに戻ろう。

彼らは実際に何をしているのか？

これら3つのボタンを比較してみよう。

But actually, they're all coming from the same starting point.

でも、実はみんな出発点は同じなんだ。

All three buttons are actually one worksheet, like each of them is their own worksheet, with one custom shape mark overlap with a transparent shape.

この3つのボタンは、実際には1つのワークシートであり、それぞれが独立したワークシートであるように、1つのカスタム・シェイプ・マークが透明なシェイプと重なっている。

For those who are not familiar with the term, a transparent shape is just a circle PNG file with zero opacity, or 100% transparency.

この用語に馴染みのない方のために説明すると、透明シェイプとは、不透明度ゼロ、または透明度100％の円形PNGファイルのことである。

You can export it and then import it to Tableau.

それをエクスポートし、Tableauにインポートすることができます。

Basically all of them starting with this starting point, they're just two marks overlap with each other with a transparent circle being larger than the actual icon.

基本的に、この起点から始まるすべてのアイコンは、透明な円が実際のアイコンよりも大きく、2つのマークが重なっているだけだ。

And of course, we have some text in the tooltip.

そしてもちろん、ツールチップにはテキストを入れた。

字幕リスト動画再生

ダッシュボードデザインのヒント Tableauにおける情報ボタンのトグルスイッチ (Dashboard Design Tips Information Buttons Toggle Switches in Tableau)

specific

awesome

basically

scale