ダッシュボードTips第1回 誰が為のダッシュボード(サイズとレイアウト)(Dashboard Size & Layout)

2016/01/22 18:52 Shingo 0 Comments

みなさま、だいぶ遅くなってしまったのですが新年あけましておめでとうございます!
Kaoriです。本年もTableauをよろしくお願いします。

さて、2016年ということでちょっと新しいことを始めようと思い、しばらく連載モノに挑戦してみたいと思います!!
Facebookでどんな内容がいいか募集したところ、ダッシュボードTipsがダントツ1位だったので、記念すべき初の連載はダッシュボードについてのいろいろをみなさんにお届けしたいと思います。

ダッシュボード編は全5回で、以下のようなコンテンツを予定しています。

 第1回 「誰が為のダッシュボード」
 第2回 「人々を導く道標」
 第3回 「行動こそが洞察を促す」
 第4回 「彷徨える色彩は禍の元」
 第5回 「ツールヒントの美学」

タイトルが厨二病なのは趣味ですね!!

5回の連載を通してこんな感じのダッシュボードを作っていきます。


あれ?思ったより普通?(タイトルは厨二なのに・・・)
と思った方、まったくその通りです!
全然普通です。

この連載では、普通だけど使いやすくインサイトを得やすいダッシュボードを目指しつつ、加えてダッシュボードを作る時のちょっとしたテクニックをお伝えできればと思っています。
ここでダッシュボードと言っているのはTableauのダッシュボードのことです。
シートの隣にアイコンがあるアイツです。
一般的なダッシュボードとはちょっと違うかもしれません。
それと、奇抜なチャートのTipsを期待した方、ごめんなさい! 今回はおもしろいチャートを作ったりすることはありません!
でも、簡単なことしかできなかったとしても、人に見てもらえる使いやすいダッシュボードを作ることは可能なんです。
Tableauのダッシュボードをを作れる人というのは、決して高度なテクニックをたくさん知っている人ではないと私は思っています。
作りたいと思った人、誰かにデータを伝えたい、そう思ってる人なんです。そういったことが伝わればいいな~と思ってこの記事を書き始めました。

ということで第1回のお題はずばり、
 「誰が為のダッシュボード」
です。

みなさんはダッシュボードを作るとき、どうやって作っていますか?
いろんな理由でTableauでデータにふれ、ダッシュボードを作ることがあると思います。
すべてのダッシュボードに共通しているのは、それを誰かに見せる、ということじゃないかと思います。
データから得た結果をプレゼンテーションで発表する、
定期的に確認する必要があるダッシュボードしてServerにパブリッシュし、みんなに見てもらう・・・などなど。

インサイトを得るまでの過程はメモ書きみたいなものなので、雑に作ってもいいですが、
いざ共有の場になった時には、見てもらう人や見てもらう人のシチュエーションによってダッシュボードを作っていく必要があります。
 誰が
 いつ
 どこで
 どのように
見るのか?

これを常に念頭に置いて作ることが、良いダッシュボードを作る第1歩です。
全5回を通してこの話しかないのですが、第1回では特にダッシュボードのサイズとレイアウトについて考えてみたいと思います。

みなさんはダッシュボードのサイズ、いくつで設定していますか?
もちろん自動一択!!いつでもどこでもきれいに合わせてくれて便利じゃん!!
むしろほかの使うの?という方にぜひ読んでいただきたい内容です。


サイズを考えるにあたり、2つの例を出して考えていきましょう。

【例1】データから得たインサイトを元に、会議で使用する資料
【例2】それぞれの仕事進捗のKPIをチェックするためのダッシュボード

例1と2で、作るダッシュボードのレイアウトや構成は変えなくてはなりません。
どういうことでしょうか?


【例1】データから得たインサイトを元に、会議で使用する資料
 ・誰に: 部長やチームメンバーなど会議参加者
 ・いつ: 所定の会議中
 ・どこで: 会議室にてプロジェクターで投影して閲覧
 ・どのように: 自分が説明しながら操作も行い、全員同じ画面を見る

このシチュエーションでは、ダッシュボードを作った自分が説明しながら
操作の順序も心得て表示していくため、それほど説明文のようなものは入れなくてもよいです。
その分、ひとつひとつのシートや文字を大きくしてインパクトのあるプレゼンテーション資料を作るように心がけます。
パワポの作り方なんかも共通するところがあるかもしれませんね。
画面は表示できる最大限を使いたいのでダッシュボードのサイズは自動で構いませんが、投影される予定のプロジェクターやモニターの解像度は意識しておくとなおよいです。
たとえばシートを詰めすぎてしまったり、細かいクロス集計やラベルとして表示した文字がつぶれてしまったりといったことがあると、プレゼン中かっこ悪い思いをすることになりますよね。
せっかくデータを使ったインサイトをみなさんに共有するのですし、できるだけスマートに決めたいところです。

たとえばこんな感じのダッシュボードを作ったとします。

大きいモニターでさくさく簡単に作ることができました。
(ほかに言いたいところもいろいろあるダッシュボードですが、まあ今は置いておきましょう)
よしよし、いい感じ。と思っていざ会議室のプロジェクターにつないだら・・・



げげ!!小さくなってしまって意図しない形になっています。
地図は字の背景みたいになってしまっているし、線グラフは傾向が縦に圧縮されすぎているし、散布図は外れ値と思っていたものがあんまり外れ値に見えないし、一番最悪なのは、クロス集計表の数字が全部#になってしまっています。。。
いざプレゼンしようとしてこんな画面になってしまったらNOOOO!!!!!って感じになっちゃいますよね。

分析している最中でしたら、いくらでも大きさを自動にして、その場で自分が見やすい形にすればよいのですが、いざ他の人に共有という段階になったら、誰にどうやって見せるのかということを考える必要が出てきます。

画面の解像度が極端に低い中でプレゼンするようなケースでしたら、まずサイズをその大きさに近い大きさに設定しておき、それでしっかり見える形に整えた後、プレゼンの直前に自動に設定する、なんていう方法があります。
今回の例では、表示できる画面が極端に小さく、どうがんばっても4枚のシートを並べるには狭すぎたので1枚のシートごとに見せる形に変更し、なおかつプレゼンで説明に使用する資料ということでストーリーするのもよさそうです。



ストーリーの使いどころやテクニックについてはそれだけでまた記事が書けそうなボリューム感なのでここでは割愛します。


では次の例を見てみます。

【例2】それぞれの仕事進捗のKPIをチェックするためのダッシュボード
 ・誰に: チームメンバー
 ・いつ: 各自好きな時間
 ・どこで: Tableau Server経由で各自のPCまたはスマートフォンのブラウザからアクセス
 ・どのように: 各自が自身の端末から一人で見る

これは例1よりももっと気を遣って作ってあげる必要があります。
このダッシュボードは作った人と使っている人が別にいて、なおかつ見ている環境も様々です。
見方がわからないとしても説明していあげることはできないし、思いもよらない画面から見ている可能性もあります。

こういうダッシュボードを作るときは、ダッシュボードのサイズは結構悩みます。
基本的には、一番小さい画面に合わせることになると思いますが、100人見ている中の10人しかモバイルから閲覧しているということであれば、モバイル画面に合わせる必要があるか?といったことも議論の対象になると思います。
(小さい画面で収めるということは、その分載せられる情報に制限がつくわけですから、90人を犠牲にするのか、10人に我慢してもらうのか、工数を使って両方のためのダッシュボードを用意するのか、といった中から選ぶことになります。)
これは答えがあるようなものではなく、ただ作るときにそれを意識してほしいということと、必要であれば作る人と使う人の間でコミュニケーションを取った方が良いということです。


ちなみに、レイアウトを美しく保つということ以外にもTableau ServerやOnlineを使っている場合にはサイズを固定しているとイメージキャッシュが効くというおまけまでついてきますので、Server/Onlineにパブリッシュしているワークブックを自動で作っていた方はぜひサイズを指定して作ってみてください。



では、ダッシュボードのサイズを意識していただいた上で、ダッシュボードのちょっとしたテクニックをお伝えしておきます。

まず、ダッシュボードにシートを配置する方法は以下の2種類です。
 タイル
 浮動
タイルというのはダッシュボードに枠を作ってはめ込んでいくイメージで、隙間なく詰め込まれていきます。まさしく壁に敷き詰められたタイルですね。
(隙間があるように見えているところも、空白の四角やコンテナが入っています。)
ざっくりレイアウトを作るのに非常に便利です。
その代わりピクセル単位の細かい設定はできませんし、重ねることもできません。

浮動の場合は浮いている状態になります。パワポなどと同じ感じで好きな位置に配置できますし、ピクセル単位で設定できます。
重ねて配置することもできます。
レイヤーの概念を持っているので、小さいものが下にあると隠れてしまいます。(あえて隠すテクニックもありうると思いますが。)

浮動順は赤丸の部分をドラッグアンドドロップすると変えられます。
上に記載されているシートが上にのっかっています。

自由で緻密なレイアウトができる反面、隣のシートとぶつからないようにするといった設定は自動ではできませんので自分で配置をずらす必要があります。
また、浮動はダッシュボードのサイズが自動になっていると変なところに行ってしまう可能性が高く、自動との相性は悪いです。

タイルか浮動かどちらか一方だけを使う例は少なく、一般的には大きなシートはタイルで配置し、凡例などを浮動にしてシート内に重ねてしまう使い方が多いです。
シートではできないレイアウトも、ダッシュボードでしたらこのように簡単にできちゃいます。

それからついつい見落としがちなこの部分についても解説しておきたいと思います。

下半分にある新しいオブジェクトについてですが、
浮動に切り替えてからシートをドラッグアンドドロップすると最初から浮動でシートを置くことができます。
タイルではめてから浮動に切り替えなくてもここで最初から浮動にできます。
(ちなみにShiftキーを押しながらシートをドラッグアンドドロップするとここで設定しているのと反対の設定でシートをダッシュボードに入れられますよ!)

上半分の水平方向から始まる6つの項目は、シートではないがダッシュボードの中に入れられるものになります。
イメージやテキスト、Webページ、空白はそのままの意味なので解説しませんが、水平方向と垂直方向というのがなんなのかわかりづらいと思いますので解説しておきます。

このふたつは「レイアウト コンテナー」と呼ばれるもので、タイル配置されたシートのレイアウトを適当にいい感じのサイズに変換して配置してくれる便利な箱です。
ただしあくまで適当に、です。

Japan Communityの記事(TIPS : ダッシュボードアクション : シートクリックで別シートが表示)でも垂直コンテナーを使った記事がありましたが、コンテナーは入っているシートの表示状態によって、このチャートならこのくらいスペース必要だよねっ!と適当に判断して
コンテナーが入っているスペースの中で、コンテナー内に入れられたシートのサイズを決めて表示してくれます。
水平か垂直かはシートを縦向きに並べるか横向きに並べるかという違いです。
こういった特徴を持っているので、表示すべき値がない時は最小化しておき、値が出てきたときにスペースを広げてあたかもなかったシートが出現したように見える、というテクニックが使えます。
ただ、こいつの難儀なところは、あくまで自由にやらせてくれないと拗ねちゃうというところです。
たとえば自動で適当に調整した結果だとちょっと見づらいな・・・というときにちょっと自分で手動で広げちゃったりすると、その大きさで固定でいいんだね?わかったよわかったよ、ということでコンテナー君は自動的に広がったり縮んだりしてくれなくなります。
中に入っているチャートによってどのくらい広がるの?とか縮むの?というのはもう完全にコンテナー君の好みに準拠しますので、その辺はうまーく付き合ってあげる必要があります。
ただ、相性がいいシーンではかなりいい仕事してくれます。
コンテナーについてはぜひ公式のオンラインヘルプ(クイック スタート: レイアウト コンテナー)も見てみてください。


ところで完全に余談ですが、みなさんはオンラインヘルプってたくさん見てますか? 私は結構不精なのでオンラインヘルプを全部隅から隅まで読んだりということはしたことがないのですが、時々読み返すと結構面白いこと書いてあるなと思ったりします。
意外と知っている内容を再度読むとそういうことだったんだ~って思う記事があったりします。
私が一番なるほどね~と思った記事は「ページ」の記事だったんですが、なんでアニメーションの機能なのにページっていう名前なんだろうと思っていたら「ビューをページにしてまくっていく機能」なんだということがわかり、あ、つまりアニメーションっていうよりパラパラマンガだなと思ったりしました。
閑話休題。


ということで、ダッシュボードTips第1回はサイズとレイアウトコンテナーについて解説しました。

いろいろ書きましたが、基本は
 相手が見る環境でこのダッシュボードがどのように見えるのか
 自分が意図した形になっているか
ということをしっかり意識することだと思います。

冒頭の画像でお見せしたダッシュボードを入れておきます。今回の記事で紹介した機能をいろいろ使っています。
サイズはこのブログにはめ込むことを前提に設計して、レイアウトコンテナーも使っています。

まだまだ他にも紹介していないポイントがありますが、それはまた次回以降の記事でじっくり解説していきたいと思います。

それではみなさん、See you!


Kaori

0 コメント: