
このレクチャーでは、このコースで紹介する 3つのキャンバススペースを有効活用するためのテクニック を、完成形のデモとともにご紹介します。
なぜこの3つに絞ったのか?
理由はシンプルで、私自身が実務で何度も繰り返し使っている“再頻出”のものだからです。確かにYouTubeなどで探すと、多くのテクニックが毎日更新されて出てきます。でも、どれ使っていいか分からなくなります。
その分、ここで紹介するテクニックは使い古されてきた手法である分、安定、安心して使えます。そんな王道テクニックだからこそ、まずここから押さえていただきたいと思って3つに絞りました。
どんなテクニックなのか?手っ取り早く完成形をみていただきたいと思います。
1つ目は「スライサーパネル」です。
通常、スライサーをたくさん配置するとキャンバスが狭くなりますよね。
そこで、ボタンで開閉できるパネルにまとめることで、 必要なときだけ表示して、それ以外はキャンバスを広々使える という工夫です。
完成形を見ると、「あ、これならすっきりしたレポートが作れそう!」と感じてもらえるはずです。
2つ目は「カスタムヒント」です。
ヒント用のサブキャンバスを用意して、カーソルを合わせると補足情報がポップアップするテクニックです。ヒントというのは、このビジュアルにカーソルを合わせた時に出てくるこれです。
このテクニックは、本体のキャンバスには余計なグラフを増やさずに、詳細は必要なときだけ表示できる のが強みです。
例えば、人事データなら「部門別の棒グラフにカーソルを置くと、その部門の上位20名と下位20名の給与が出てくる」――そんな見せ方ができます。
3つ目は「ブックマークで似たグラフを1つにまとめる」方法です。
同じ構造のグラフを複数ページや複数スペースに並べてしまうと、どうしてもごちゃごちゃしますよね。
でも、ブックマークをハック的に使えば、 ボタンの切り替えで、1つのスペースに同じ形式のグラフを表示できる ようになります。
結果として、見た目はシンプルなのに、情報はしっかり盛り込めるレポートになります。
以上、このレクチャーでは、このコースで学ぶ3つのテクニックをざっとご紹介しました。
どのセクションも独立しているので、どこから始めても大丈夫です。
おすすめは、今みなさんの実務で「一番役立ちそう!」と思ったものから受講することです。必要性が高いほど、理解も定着も早くなりますからね。
それでは、気になったセクションから学び始めてください。
キャンバスをスッキリ保ちながら、情報量も見やすさも両立できるテクニックを一緒に身につけていきましょう!
このセクションでは、スライサーパネルの紹介をしたいと思います。
さて、「そもそもスライサーパネルって何?」という方もいると思いますので、まずは完成形を見ていただきましょう。
今、ある程度ビジュアルが出来上がった状態のレポートがあります。
左側の端に 「Open Slicer Panel」 というボタンがありますね。
これをクリックしてみます。すると、ご覧のように、ぎっしりとスライサーが並んだ画面が表示されます。
ここで、適当にスライサーを選んでみましょう。するとどうでしょう、背後に透けて見えるビジュアルが反応していますね。スライサーの条件が適用されているのがわかります。
設定が終わったら、右上の 「Close」 ボタンを押します。
すると、スライサーパネルが閉じ、元のキャンバスが広々と表示されます。
これがスライサーパネルです。
見た目も使い勝手も、なんだか便利そうですよね。実際に、本当に便利なんです。
スライサーパネルのメリットは何でしょうか?
まず1つ目は、このコースのテーマである 「キャンバスの有効活用」 に直結する点です。
スライサーパネルがなければ、これらのスライサーをキャンバス内に配置しなければなりません。その分、ビジュアルが小さくなるか、あるいはいくつかのビジュアルを諦める必要が出てきます。
2つ目は、チームで1つの Power BI レポートを見るときに役立つという点です。
おそらくこのコースを受講している皆さんは、Power BI レポートを「作る側」だと思います。分析の切り口を変えるとき、もちろんスライサーを使うこともあるでしょうし、画面右側にある 「フィルターウィンドウ」 を使うこともあると思います。
たしかに、自分ひとりで作業している場合には、フィルターウィンドウだけで完結させることも可能です。キャンバスをスライサーで埋め尽くす必要もありませんし、私自身もデータを深掘りしたり、簡単な分析をしたりするだけなら、フィルターウィンドウを使うことが多くあります。j実際、フィルターウィンドウの方が、スライサーよりもより柔軟に、より粒度細かくフィルターをかけられます。
ですが、このフィルターウィンドウはチームでレポートを共有するときには不親切です。
レポートを「見るだけ」のメンバーにとっては使い方がわかりにくく、さらに、誰かがフィルターを設定したままウィンドウを閉じてしまうと、「フィルターがかかっている」ことがまったく分からない状態になります。その結果、他のメンバーが歪んだ情報を見てしまう、というリスクがあるのです。
一方で、スライサーパネルなら状況が明確です。
Power BI を作る側でなくても、パネルを開けば「ここで条件を変えられるのね」とすぐに理解できます。Power BI の直感的な操作性を、見る側のユーザーにも体験してもらえるわけです。
スライサーパネルは、キャンバスを有効活用できるし、チームで共有する際にも親切。
デメリットがあるとすれば、「作る側のあなたが一手間かけて作らなければならない」ことぐらいです。
このレクチャーでは、スライサーパネルとは何か、そしてなぜ使うべきなのかをご紹介しました。
次のレクチャーからは、実際にスライサーパネルを一緒に作っていきましょう。
では、このレクチャーから具体的にスライサーパネルを作っていきます。
みなさんぜひ、一緒に手を動かしながら聞いていただきたいと思います。
このレクチャーでは、スライサーパネルを“開く”ためのボタンを作っていきます。完成形をみてみましょう。このクリックすると、パネルが開く。このクリックするボタンです。
ボタンを作る前に、サンプルとなるビジュアルを作っていきます。このレクチャーのダウンロードに「SampleData_for_slicer_panel」というデータを用意しました。そちらをダウンロードしていただき、Power BIに読み込んでいただきたいと思います。ワークシートは「売上データ2000-2005」という1枚しかありません。データの変換は不要です。そうしたら、横棒グラフを作っていただき、そこに売上と製品カテゴリを入れていただきます。そしたら、そのコピーを5つ作ります。残りの5つのY軸を他の項目にします。(入れ替えていく)ここでビジュアルを作る理由は、単にスライサーパネルがうまくいっているか?の反応を見るだけです。ですので、これらのビジュアルはそんなに厳密に作らなくて大丈夫です。ただ、左端は、ここにスライサーパネルのボタンを作るので、少しあけておいていただければと思います。
はい。これで、サンプルデータの読み込みとビジュアル作成は終わりです。
ここからスライサーパネルのオープンボタンに入ります。「Open Slicer Pane」というボタンをキャンバスの左端に配置し、テキストや色、そしてホバー時の反応までを作っていきます。
では、やっていきましょう。
まず、ボタンそのものを作ります。
リボンの[挿入]から[ボタン]>[空白]を選び、キャンバス左端にドラッグして配置します。ここは後でスライサーパネルを起動する部分ですね。細すぎるとクリックしづらいですが、太すぎると、キャンバスのスペースを食ってしまいます。ちょうどよい感じをみつけます。
そうしたら、ボタンを選択したまま、右側の[ビジュアルの書式設定]に移動します。[スタイル]の[テキスト]をオンにして、「Open Slicer Panel」と入力します。フォントサイズは、レポートの他要素とバランスをとりつつ、ひと目で読める大きさに。ここでは16〜20ptくらいにします。
このままだと読みづらいので、今度は、[ボタン]の[回転]にて、テキストの角度を90°に設定します。これで縦書き風の帯ボタンになり、横方向のスペースを節約できます。今回のコーステーマである“キャンバスの有効活用”とも相性がいいレイアウトです。
次に、ボタンの見た目を整えます。書式の[全般][効果]にて、[背景]をオンにして、コース全体の配色と合う色を選びます。私は説明の便宜上、際立つ黒を使いますが、ここはみなさんのお好みに合わせてくださいね。こうすると、中の字が見えにくくなったので、再度[ボタン]の[スタイル]の[テキスト]。フォントの色を白にします。そしてボールドにしておきましょうか。
ここまでで、スライサーパネルのボタンができました。
次はカーソルをホバーした時の反応を作ります。[ボタン]の[スタイル]。[設定の適用先]を現在の[既存]から[ポイントした時]に変えます。これでカーソルがこのボタンにあたった時に、どんな色にするかを選べます。分かりやすように、私はポイントしたらテキストを青にします。
試しにホバーさせるとフォントの色が変わりますので、ああ、何かあるな、とわかりますね。
以上、このレクチャーでは、フィルターパネルを開くためのボタンを作りました。ボタンと言えど、特にアクションは設定していないので、まだ単なる箱ですね。
次のレクチャーでは、フィルターパネルそのものと、それを閉じるためのボタンを作ります。
前のレクチャーでは、スライサーパネルを“開く”ために、こちらの「Open Slicer Panel」ボタンを作りました。このレクチャーでは、開いたら閉じる、ということでパネルを閉じるためのボタンと、パネル本体(スライサーを載せる土台)を作っていきます。
(完成形を見せる)
ここと、ここです。
まずは閉じるボタンを用意します。これは簡単です。前回作った「Open Slicer Panel」ボタンを選択し、コピー&貼り付けで複製します。このオープンボタンと閉じるボタンの間がスライサーパネルの幅になります。実務では、そのつもりで、どのくらいの幅にするかは、どの程度スライサーを乗せるかを考えつつ設定していきましょう。
ここから、既存のビジュアルの上で作業が続きます。こうしてオブジェクトが重なるのはなんか気持ち悪いですが、スライサーパネルができるまでの我慢です。
次に、書式で[ボタン][スタイル]にて、テキストをOpenからCloseに変えます。複製したボタンのテキストを「Close Slicer Panel」に変更し、パネルを開いた時に開ききった先におきます。このくらいでしょうか。はい。ここで注意なのが、[設定の適用先]です。[ポイントした時]と[規定]の両方の時で、OpenをCloseにします。今、片方しか変えていないので、ポイントするとテキストの色も変わりますが、テキストもOpenになっちゃいますよね。ですので、[設定の適用先]を変えて、テキストもCloseに変えておきます。クローズボタンはこれでOKです。
次にパネル本体を作ります。リボンの[挿入]から[図形]→[四角形]を選び、キャンバスの左端から、この時Open のボタンと被ってしまいますが、これでOKです。そして、右端はCloseのボタン端までスペースが埋まるように広げます。
四角形を選択したまま書式設定。[スタイル][フィル]を開き、カラーは白にし、透明度は15〜20%に設定します。これにより、パネル越しに背後のレポートがうっすら見えるようになります。
ユーザーがスライサー操作をした瞬間に、後ろのビジュアルが反応している様子が見えれば、ユーザーもこのスライサーパネルが何をするためのものかハッキリわかりますよね。
罫線はオフ。これでOKです。これでスライサーパネルの本体、土台、スライサーをのせるところができました。
ここでレイヤー順を整えます。レポートの中に入っている各部品の重なり具合を設定します。何が一番上にきて、何が一番下にくるか?です。(完成形を見せる)やりたいこととしては、パネルを開いた時にこうしてスライサーパネルが一番上にくるようにしたいわけです。
[表示]→[選択項目]でウィンドウを開き、オブジェクトの上下関係を確認します。[レイヤーの順序]をみます。
ここで、一番上にくるものが、一番画面一番手前にきます。どれがどのオブジェクトかは、キャンバスでオブジェクトをクリックすると、そのオブジェクトがハイライトされます。今、ついでにオブジェクトの名前を変えておきます。「Openボタン」、「Closeボタン」、そして「パネル土台」としておきましょうか。
フィルターパネルを開いた時に、フィルターパネルが一番手間にくるようにするため、2つのボタンとパネルの土台を一番上にもってきます。
この矢印で移動できます。
そして、この時に、一番上にパネル、2番目にClose。そして3番目にOpenがくるようにします。フィルターパネルが開いた時に、Openボタンは見える必要はありません。それよりも、このスペースもパネルとして使いたいので、パネル土台が覆うようにするために、土台の下にOpenボタンを置きます。
はい。これでいいですね。
以上、このレクチャーでは、閉じるボタンとパネル本体の作成、そしてレイヤーの順番の調整を行いました。
次のレクチャーでは、こうした作ったスライサーパネルに、スライサーを乗せていきます。
前のレクチャーまでで、スライサーパネルの土台ができました。このレクチャーでは、その土台の主役でるスライサーを置いていきます。
まずは、パネルの上に最初のスライサーを置きます。
スライサーを選び、フィールドは例として 製品カテゴリをドラッグ。パネル内の左上に配置し、幅と高さの基準をここで決めます。のちほど複製して並べるので、1つ目のサイズが“型”になります。
6つのヴィジュアルがあるので、6つスライサーを作ろうかなと。これから作るスライサーはデモ目的です。これだけスライサーをパネルを作ると埋められる、というのを見えたいだけです。
スライサーの背景がデフォルトでは白です。スライサーパネルをグレーにする方法もありますが、私はシンプルに単に枠線をオンにしたいと思います。書式、全般、効果、視覚的な境界をオンにします。あと、今回は、スライサーとなる項目は比較的多くありませんので、このままにします。しかし、項目が多い場合では、スライサーパネルでもスペース確保のために、ビジュアル、スライサーの設定、オプション、スタイルで、バーティカルリストから、ドロップダウンにします。
これだとかなりスペースが省略されます。今回は、そんなに遠慮する必要ないので、ctrl + z で元に戻します。
同じスライサーを Ctrl+C/V で複製して、製品サブカテゴリーや、製品名など必要な項目に差し替えていきます。日付用には 日付データである、売上年のスライサーは少し幅をとってもいいですね。
最後の2つはドロップダウンにして、スペースを作って、日付スライサーを入れます。
せっかく、土台をスケスケにして後ろのビジュアル見えるようにしましたが、結局スライサー入れまくったので、あまり見えないですね。まあ、ご愛敬です。
さて、たまにスライサーをクリックしようとして、スライサーパネルの土台をクリックしてしまい、なぜかもうスライサーがクリックできない、ということがあります。そうなったら、どこか別のところをクリックして、アクティベート状態を解除してあげると、また、スライサーが選べるようになります。はい。スライサーの書式はここでの本題でははないのでこの辺にしておきます。
これで、スライサーパネルにスライサーを乗せることはできました。
次のレクチャーにて、これらのボタンを押すと、このスライサーパネルが表示されたり、隠されありの仕組みを作ります。
このレクチャーの最後に、これら、スライサーパネルを一つのグループとしてまとめます。よく、PowerPointでも、複数のオブジェクトを一塊にしてグループ化したりしますよね。あれと同じです。
選択項目のウィンドウを開きます。この「スライサー」というのが、さきほど作ったスライサーです。そして、パネル本体、Close/Openボタンはこれらですね。これらをCtrlボタンを押しながらクリックするか、最初をクリックしてシフトを押しながら最後をクリックするかすると、複数選択ができます。ちなみに、もし、スライサーパネルとは関係ないものがこんな感じで、順番に入ってきていたら、それをクリックして、この矢印のボタンで移動させます。そうしたら右クリックして、グループ化です。
すると御覧のような形でグループにまとめられました。グループ名はスライサーパネルとしておきます。
(選択項目にて、わざとOpenボタンをパネルの上に持ってくる)もし、今みなさんが作っているスライサーパネルが御覧のように、Open Slicer Panelボタンが前面に出てしまっているとき、さきほどのスライサーパネルグループの、レイヤーの順序を確認してみましょう。
上にいくほど手前です。御覧のように、パネル本体。この土台ですね。これよりもOpenボタンが上に来ていたら今見ているようになります。そしたら、クリックして矢印で下に持っていきます。すると直りましたね。
スライサーパネル内の順番でベストなのは、一番上にCloseボタン。これが見えないとクローズできませんから。次にスライサー。その下に土台であるパネル本体。そして最後がOpenボタンです。ですので、Closeボタンの位置を変えておきます。
以上、このレクチャーでは、スライサーの配置、スライサーパネルグループの設定、そして、レイヤーの順序の調整を行いました。
レイヤーの順序は、何が結局ユーザーに見えるのか?を決めるので結構大事です。
さて、スライサーパネルもできたわけですが、今は、パネルが開きっぱなし状態ですよね。
次のレクチャーでは、いよいよ、このスライサーパネルを開いたり、閉じたりできるようにします。
ここまでのレクチャーで、開くボタン・閉じるボタン・パネル本体、そしてスライサーの配置ができました。
このレクチャーでは、ブックマークを使ってスライサーパネルを「開く」「閉じる」という動作を記録します。
まずは、リボンの[表示]タブから [ブックマーク]をクリックして、ウィンドウを開きます。ちなみに、閉じたいと思えば、もう一度クリックします。するとウィンドウの表示がなくなります。こうしたウィンドウが多く開いていると、キャンバスがどんどん狭くなってしまうので、使わない時はオフにしておくと良いです。
ブックマーク機能にて、フィルターパネルが開いているとき、そして閉じているときの状態を保存していきます。ブックマーク機能は、このウィンドウでも説明書きがありますが、要はある画面の状態。多くの場合はフィルターやスライサーをある組み合わせで設定し、その状態を保存するために使います。保存しておいて、いつでも見たい時にすぐそのフィルターやスライサーの組み合わせを再現できるようにするためにあります。
では、まずはサクッとOpenとClose状態をブックマークします。
今の状態はOpenの状態です。ただ、前のレクチャーでスライサーをあれこれいじっていたら、元に戻します。このスライサーがすべてキレイな状態。これがスライサーパネルがOpenの状態です。この状態をブックマークします。
ブックマークの追加とし、ブックマークの名前をOpen Slicer Panelとします。はい。これでOKです。すごくあっけないです、試しに、他のスライサーにチェックをいれ、且つ、他のビジュアルをいじります。この状態で、ブックマークで、Open Slicer Panelをクリックします。すると、もとのなんのフィルターもかけていない状態に戻りました。
次に、スライサーパネルが閉じた状態をブックマークします。これもすごい簡単です。表示で、選択項目のウィンドウを開きます。
スライサーパネルというグループを前のレクチャーで作っています。このグループの横に目玉アイコンがありますね。
これをクリックすると、そのグループは非表示になります。削除ではないです。見せないだけです。クリックすると、表示されて、もう一度クリックすると非表示になります。
はい。では、スライサーパネルを非表示にします。これがスライサーパネルを閉じた状態です。この状態をブックマークしましょう。ブックマークにいきまして、追加。名前はClose Slicer Panelとします。
すると、ブックマークでOpen、Closeとすると、スライサーパネルが開いたり、閉じたりしますね。かなり完成に近づいた感じがします。たまに、Close Slicer Panelを設定した後、Open をクリックしても反応しない場合があります。この場合は、もう一度パネルを開いた状態で右にある点々をクリック。そして更新とやると、パネルを開いた状態を再度、Open Slicer Panelのブックマークに覚えさせることができます。
はい。これでブックマークを押すと、オープン、クローズが切り替わりますね。
ただ、ここでスライサーパネルを作る時に忘れてはいけない設定があります。というのも、今はその設定をしていません。それでも何も問題なさそうですが、今のままだと全然スライサーパネルの意味がないんです。
実際にお見せします。スライサーパネルを表示させ、いくつかスライサーをオンにします。すると、後ろのビジュアルが変わっているのが分かります。はい。この状態で、Closeのブックマークを押します。Closeした途端にスライサーがリセットされてしまっています。さっかくスライサーを使っても、クローズした途端にリセットされてしまうと、意味ないですよね。でも簡単に治せます。
ブックマークのOpen Slicer Panelにいきまして、右側の点々をクリック。ここにデータという項目があります。これをアンチェックします。Close Slicer Panelのブックマークでも同様にデータをアンチェックします。
はい。では同じく、スライサーを適当にクリックした後に、Close Slicer Panelを押します。すると、今度はスライサーの設定はそのままですね。逆もやってみましょう。この状態で、ビジュアルをクリックします。すると、ハイライトされ、クロスフィルターが効いています。この状態で、Open Slicer Panelをクリックします。クロスフィルターはそのままですね。
(表示させつつ)ですので、このデータをアンチェックする、というのはスライサーパネルでは、忘れてはならない設定となります。超重要です。せっかく、こうしたパネル作ったのに、この設定覚えてないと、やりたかったことができません。では、スライサーパネルをオープンにして、一旦スライサーを全部クリアします。
最後に、Close Slicer Panelのブックマークを微調整してこのレクチャーを終わります。先ほどは、説明の便宜上、スライサーパネルをグループまるごと非表示にしました。実はこれだと、開くためのボタンも非表示にしちゃっています。
クローズしてみます。
オープンボタンがありません。これだと一旦閉じたら、もう開けません。設定を更新します。ブックマークで、Close Slicer Panelが選択されている状態にします。そして、一旦スライサーパネルグループを表示します。その上で、オープンボタン以外を非表示にします。
そして、Closeボタンのブックマークの右の点々をクリックします。一番上に更新とあります。これをクリックします。こうすることで、ブックマークの設定を現在のものに上書き更新できます。
はい。これでOKです。Open のブックマークで開き、Closeで閉じると、今度はボタン残っています。これでやりたかった設定でできました。
以上、このレクチャーでは、スライサーパネルの開く、閉じる、それぞれの状態をブックマークしました。
今は、パネルの開閉は、このブックマークウィンドウでの切り替え頼みです。
次のレクチャーでは、これらのOpen、Closeボタンを押すことで、パネルを開閉できるようにします。
このレクチャーでは、ボタンを押すことで、スライサーパネルが開いたり、閉じたるするように設定します。
今は、このようにブックマークをクリックしないと切り替えられないのでした。
これからやるのは、Open/Close各ボタンと、ブックマークのOpen/Closeを紐づけます。
まずは、開くボタンからやっていきます。
「Open Slicer Pane」ボタンを選択します。ボタンが選択されると、ここが「書式設定ボタン」と出ます。これならOKです。非常に近くにあるこのパネルの土台の方をクリックしていると、こんな感じで、視覚化と出ます。これはボタンが選択されていない状態ですので注意です。
Openボタンがクリックされていることを確認します。
[ボタン]>[アクション]をオンにします。展開しまして、[型]を[ブックマーク]そして、[ブックマーク]のところを、Open Slicer Panelを選びます。これにより、このボタンを押すと、Open Slicer Panelのブックマークが起動します。
次に、閉じるボタンにも同様の設定を行います。今はクローズ状態でCloseボタンが見えません。さっそくさきほど作ったボタンを使います。Openボタンの上でホバーさせると、ctrlを押しならクリックとあります。その通りすると、スライサーパネルが開きます。
今度は、CLose Slicer Panelのボタンをクリックします。ここでも、このウィンドウ名が「書式設定ボタン」であることを確認してください。
[アクション]をオン、[型]は ブックマーク、ブックマークには 「Close Slicer Panel」。これでOKです。
ここで、動作確認をしてみましょう。まず、スライサーでいくつか条件を選択し、背後のビジュアルが変わることを確認します。動いてますね。
その状態のまま、さきほど作ったClose Slicer Panelボタンにカーソルをホバーさせます。すると、吹き出しにあるように、ctrlを押しながらクリックしてください、と出ます。では、ctrlを押しながらクリック。するとスライサーパネルが閉じました。スライサー設定はそのまま効いています。リセットされていません。
同様にオープンボタンをもう一度開きます。ctrlを押しながらクリックすると、さきほど設定したスライサーの設定は残ったままパネルが開きました。うまくいっていますね。
以上、このレクチャーでは、ボタンとブックマークの紐づけを行い、ボタンをおせばパネルが開閉できるようにしました。これでスライサーパネルは完成です。
次のレクチャーでは、スライサーパネルを作った時にあると便利な、スライサーの一括リセットボタンを作成します。
ここまでで、このセクションの大本命である、スライサーパネルはできています。
このレクチャーでは、スライサーパネルを作った時、あると親切な、ワンクリックでスライサーを初期状態に戻せるボタンを作ります。
スライサーパネルが用意されると、実務であるあるなので、やたらいろんな項目でスライサー設定されることです。なんせ、スペース気にせずスライサーがあります。スライサーがあると、いろいろ設定してみたくなるのが人情です。
前のレクチャーで設定した通り、パネルを開いたり、閉じたりしてもスライサーの設定は維持されます。元に戻したいな、と思ったら、いちいちスライサーの設定をひとつづつも戻す必要があります。これやればいいんですが、実際地味にメンドクサイです。
こんな時、スライサー設定を一気にクリアにできるボタンあると、ユーザーは煩雑になった条件を一気にクリアできますので、、操作性が格段に向上します。
スライサーパネル、というテーマだけでいえば、やらなくてもいいのですが、実務では非常に喜ばれるポイントですので、ぜひ作ってみていただければと思います。作り方はとっても簡単ですので。
まずは、スライサーが一切選択されていない初期状態をつくります。これは、スライサーパネルを開く前の状態でもそうです。こんな感じでクロスフィルターがかかっている状態もクリアにします。
スライサーパネルを開いて、ここもスライサー設定をすべてオフにします。そしたら、パネルは閉じます。
すべてのスライサーを「未選択」にしたら、この状態でブックマークウィンドウをを開き、新しいブックマークを作成します。名前は、Open, Closeと来たので、Rest Slicersとします。右の点々をクリックします。このとき重要なのは、データオプションをオンであること、です。デフォルトはオンですね。
この上の2つのボタンでは、ここをオフにしました。なぜならここがオンだと、これらのブックマークが設定される度にスライサー設定がオフになってしまうからでした。今度はむしろ、そうなって欲しいわけです。ですので、データはオンにしたいわけです。
次に、キャンバス上にリセット用のボタンを配置します。挿入/ボタンで、まさにリセットというのがありますのでこちらを使います。実務では、こうしたリセットボタンはいつも同じものを使うと良いです。そうすることで、一貫性が生まれ、別のレポートでこれが出てくれば、説明不要でリセットだとユーザーは分かるようになります。
では、 ボタンにアクションを設定しましょう。作成したリセットボタンを選択し、[書式設定ボタン]の表示が出ていることを確認。[ボタン]→[アクション]をオンにします。
型は 「ブックマーク」、対象のブックマークは先ほど作成した 「Reset Slicers」 を選びます。これでリセットボタンの設定ができました。
最後に、動作を確認します。
スライサーで複数の条件を選択してビジュアルを絞り込みます。その状態でリセットボタンを押すと、すべてのスライサーが初期状態に戻るはずです。はい。リセットボタンを押すと、ビジュアルも戻りましたね。さらに、パネルを開いてみると、スライサーもすべてクリアになっています。これで、リセットボタンは完成です。
最後に一工夫で、ユーザーにこのボタンで何ができるか、カーソルをホバーさせるとメモがでるようにします。ボタン、アクション、ツールヒントでテキストに「Ctrl + Click でスライサーをリセットします。」すると、御覧ください。カーソルをホバーさせるとさきほどのメモがでてきました。これでユーザーはこのボタンの役割が分かります。
このリセットボタンは、一見小さな工夫に見えますが、ユーザー体験を大きく変える重要な仕掛けです。
特に複数のスライサーを使って条件を複雑に絞り込むケースでは、「全部やり直したい」 という瞬間が必ずあります。そんなとき、リセットボタンがあるだけで、操作の手間とストレスを大幅に軽減できます。
以上で、スライサーパネルについて説明したかったことはすべて説明できました。
スライサーパネルができることで、ユーザーは数多くのスライサーから詳細なスライスがかけられるようになります。そうなると、Power BI のレポートは、ユーザーにとって単に「データを見る画面」から、「ユーザーが自分でデータを操作して洞察を得られるツール」へと進化します。
このスライサーパネルのテクニックは、どんな業種・どんなレポートでも応用が効く「汎用スキル」です。現場で一度試してみれば、その便利さを必ず実感できるはずです。
ぜひ、日々のレポート運用に組み込み、ユーザーにとって「使いやすい」「分かりやすい」レポートを届けていっていただきたいと思います。
では、このセクションでは Power BI の「ヒント」を紹介します。
まず「ヒントって何?」と思う方もいるかもしれませんが、実は皆さん、必ず一度は目にしたことがあるはずです。ヒントとは、ビジュアルの上にカーソルを合わせたときに表示される、小さな情報ウィンドウのことです。
今見ているのは、ある会社の人事の情報をレポートにしたものです。
たとえば、こちらの棒グラフを見てください。それぞれの項目にカーソルを合わせると、動的にフィルタリングされ、リアルタイムで数値が更新されます。そして、今カーソルを合わせている項目の値が小さなウィンドウで表示されますよね。これが、Power BI に標準で備わっている「ヒント」です。
このヒントは便利ですが、表示内容はそのビジュアルを構成するメジャーの値に限られています。
ですが、このヒントをカスタマイズすると、実務で役立つ「ちょっと便利」どころではない機能に進化させられるんです。
ここで重要なのが、ヒントはサブキャンバスだという考え方です。
今見ている、メインのキャンバスとは別に、もう1つのキャンバスを裏側に用意しておき、必要なときだけ呼び出して表示できる。
だからこそ、情報量を増やしてもメインキャンバスが散らからず、レポート全体を広々とスッキリ使えるわけです。なんか、いつも見ているこのヒントがそんな大それたことできるの?って感じですが、これができるんです。
このセクションでは、この人事データを使った分析レポートを使って、実務にて、サブキャンバス的に使えるヒントの作り方を紹介します。
ここに、各部門の従業員数を棒グラフで表示しているビジュアルがあります。これから、ここにヒントを使って、カーソルを合わせた部門について、その部門の給与上位20人と下位20人をリアルタイムで確認できるようにしようと思います。
普通、それをやろうと思ったら、新しく給与に関するビジュアルを作る必要があります。それをすると当然キャンバスのスペースは少なくなります。
しかし、ヒントをカスタマイズすることで、キャンバス上に新しいビジュアルを追加しなくても、必要な情報をヒントに表示させることができます。こうすれば、メインキャンバスに新たなビジュアルを追加することなく、見た目はスッキリしたまま。それでいて、新たな情報を追加できます。
こうした良いとこどりが、ヒントを使う最大のメリットです。
このセクションでは、御覧の人事データを例に、実際にこのビジュアルに、給料の上位20位、下位20位の従業員を表示させるカスタムヒントを作っていきながら、カスタムヒントの作り方を説明します。
このレクチャーのダウンロードに「SampleData_for_customhint」というファイルを置いています。ぜひ一緒に手を動かしながら受講いただければと思います。ダウンロードしたら、Power BIに取り込んでいただきます。ワークシート「人事データ2025」という一つしかありません。またPower Query Editorでの編集も不要です。
(一旦ビジュアル全部消す)
Power BIにデータが来ましたら、横棒グラフをクリックしました。Y軸に、部署。そしてX軸に従業員IDを入れてください。従業員IDは自動でカウントになるかと思います。ならなかったら、こちらの下向き矢印をクリック。カウントにします。これができたらコピペしていただき、X軸の代わりに職位を入れます。
さらに、横にマップを入れます。マップは場所に勤務地。バブルサイズに従業員IDを入れます。ここもカウントであることを確認してください。できましたら、ページ名を「従業員」とします。
ビジュアルサイズはだいたいでOKです。はい。これで学習のための下準備は完了です。
以上、このレクチャーではヒントとは何か?そして、ヒントがなぜキャンバスのスペースを有効活用する際に役立つかをお伝えしました。
次のレクチャーからは、ヒントの作成をステップごとに進めていきます。まずはヒント専用のサブキャンバスを用意するところから始めます。
このレクチャーでは、ヒント専用のページを作成します。
ヒントはサブキャンバスという表現を私はしています。まさにここでは新たに、ヒント専用のキャンバスを作ります。サブキャンバスのイメージを実感していただけると思います。
それではやっていきましょう。
まず、Power BI レポートの下にある「+」ボタンから、新しいページを追加しましょう。
ここでは、ページ名をシンプルに 「ヒント」 とします。このページに、ヒントに表示するビジュアルを作っていきます。まさにサブキャンバスですね。
次に、このページを非表示に設定します。
ページ見出しを右クリックして「非表示」を選択してください。すると目玉アイコンにスラッシュがついたようなマークが出てきました。
これは、Power BI Desktopだと、ファイルを開いた人はこのページは見れてしまうのであまり意味がないです。ただ、このコースとは範囲外となりますが、Power BI Serviceでは、このページはユーザーからは見れません。
このページはあくまで、カステムヒントの内容を表示するものなので、他のページとは違う、ということを示す意味でもあります。
ページを作ったら、右側の 「ページの書式設定」 の「ページ情報」にいきます。
ここにある 「ツールヒントとして使用を許可」 というスイッチをオンにします。
すると、自動的にキャンバスサイズが小さく変わります。
これはヒント用のサイズでです。(他のページでビジュアルでヒントを出す)御覧ください、いつものヒントってちっこいですよね。このサイズ感を(ヒントページに戻る)ここで示してくれているわけです。今、私たちは、ヒントとして、給料の上位20名と下位20名を出そうとしているわけで、それにはこのスペースでは小さい過ぎます。
サイズは後で変えるとしてその前にしておきたいことがあります。これやると、いよいよサブキャンバスのイメージがつくと思います。
次に、カスタムヒントを適用したいビジュアルにこのヒントページを紐付けます。
今回カスタムヒントをつけたいのは、こちらの「従業員」ページの「部署による従業員IDのカウント」ビジュアルでした。こちらをクリックして書式。全般のヒントという項目を開きます。オプションにて、「ページ」というところがあります。これが今は「自動」です。ここを広げると、「ヒント」とあります。このヒントは(ページのヒントを示す)このヒントページのことです。これをクリックします。
するとどうなるか?ビジュアルにカーソル合わせると、白のブランクのヒントが表示されます。この白のブランクって何か?何が表示されているのかというと、こちらヒントページのこのちっこいキャンバスです。で、さきほど、なぜ、書式、ヒントのページに「ヒント」と出たかというと、(ヒントに戻る)ページ書式のページジュ法にて、「ツールヒントとしてページを使用する」をオンにしたからです。
これで、対象とするビジュアルにカーソルを合わせたとき、別途ページを用意したヒントが表示されるようになりました。ちなみに他のビジュアルは、もとのヒントのままです。あくまで設定をしたこのビジュアルだけがカスタムヒントが出ています。
以上このレクチャーでは、ヒント用のページの設定と、カスタムヒントを出したいビジュアルへの紐づけを行いました。
次のレクチャーでは、こうしたカスタムヒントに、情報を乗せる前に、このカスタムヒントの見た目を整え、ユーザーにとってわかりやすく情報を表示できるようにしていきます。
このレクチャーでは、ヒントのサイズを調整する方法と、背景を整えて見やすくする設定を行います。
デフォルトのままでも機能はしますが、サイズや背景の設定を知っておくことで、実務で状況に合わせて、見栄えの良いヒントに仕立て上げることができます。
Power BIが自動で設定するヒントのキャンバスは、小さいですよね。ヒントがデフォルト示すような情報量であれば、このままいいと思います。ただ、わざわざカスタムヒントにしようとしている我々にとっては、このままでは情報を十分に表示できないので、キャンバスサイズを広げます。
ヒントページにいきます。書式/キャンバスの設定の型、これが今ツールヒントとなっています。ヒント用のちっこいサイズの設定です。これをカスタムにします。するとサイズを自分で設定できます。実務でみなさんが使う時は、ここは適当に数値を変えてみて用途にあったサイズにしていただきたいと思います。単位がpx、ピクセルですが、私自身も全然単位がピンときませんので、適当に数字を入れてみて、どうなるか見るのが良いです。
私は、高さ500ピクセル、幅800ピクセル にしようと思います。この設定をした後に、従業員数ページに戻って、カーソルをビジュアルにホバーさせると...ヒントのサイズがさきほどヒントページで設定したサイズになっていますね。これでカスタムヒントを入れる大きな箱ができました。これくらい大きいと、ヒントはサブキャンバスってイメージつきますね。
次に、ヒントの背景デザインを整えます。ヒントのデフォルト背景は白です。白のままでもOKですが、カスタムヒントにするときは、メインキャンバスの背景とカスタムヒントの背景のコントラストをしっかり付けることで、サブキャンバスが表示されているな、とハッキリしますことができます。
レポート全体の色味が軽めであるならば、ヒントの背景はダークテーマにするのがおすすめです。文字やテーブルの情報がよりくっきり表示されます。
ヒントの背景色を設定します。ヒントページにいきまして、ページの書式設定。キャンバスの背景です。
ここでカラーにて、色を設定します。私は、今回コントラストをつけるという意味で、黒にしたいと思います。黒に設定したぞってことで、従業員ページの対象ビジュアルにホバーさせると....白のままです。
なぜか、またヒントページに戻ります。キャンバス背景の透過性。ここがデフォルトの100%になっているからです。これを0%にします。すると、従業員ページのヒントの背景も黒になりましたね。
はい。こうして、ヒントのサイズを大きくして、背景を変えることで、ユーザーにとって、見やすいヒントの土台ができました。
以上、このレクチャーでは、ヒントのサイズと背景色を整えました。
次のレクチャーでは、このページに具体的なデータを配置していきます。
これまでのレクチャーでカスタムヒントの土台ができました。このレクチャーからは、具体的な情報を土台にのせていきます。
今回は、こちらのヒントに年収の上位と下位20名の名簿を出していきます。
このレクチャーでは、年収上位20人を表示するテーブルを作成します。
ヒントにのせるならでの注意点などおさえていきたいと思います。では、やっていきましょう。
まず、ヒントページにテーブルを追加します。
テーブルビジュアルを選び、キャンバスに配置します。上位と下位20名なので、まずは半分スペースを埋めます。
人事データ2025から以下の項目をドラッグします
従業員名
入社日(階層は消し、入社日に。そして、書式で、ショートバージョンに)
年収(カンマを入れる)
次に、見やすい表にするためにフォーマットを調整します。
年収の列を降順(年収が高い順)にソートします。これで年収の高い人が上から順に並びます。
さらに、列名を編集します
年収(円)の合計、ではなく、単に年収とします。円なのは、わかるでしょうから。
さらに表の最後に合計。この表はリストなので、合計が出てもあまり意味がないです。消しておきます。書式のビジュアル、合計をオフにすることで消せます。
はい。これで一旦、どんな風にヒントが見えるかチェックしてみます。御覧ください。カスタムヒントが表示されてます。さらに、各部署にホバーさせることで、年齢の上位者がその部署で切り替わっています。ただ、みてください。カスタムヒントにはスクロールバーが出ています。これは、ヒント上では操作できません。
操作できないものが出てくるのは、ストレスです。ヒント独自で気をつけないといけないこととして、スクロールバーが出ないように工夫する必要があります。
ヒントページにいきまして、テーブルをクリック。「フィルタ」ウィンドウを開きます。
従業員を基準に、上位 Nフィルタを適用。
20件に設定し、基準値として年収を指定します。
フィルタを適用します。これでスクロールは消えました。もし、スクロールが出てしまう場合は、ビジュアルのサイズを調整するか、キャンバスの設定で高さを足します。
これで、また、従業員ページにて、確認します。スクロールバーは出ないです。そして、ホバーする位置を変えると、その部署でのトップ20名のリストが出てきます。
これで、年収上位20人を表示するテーブルが完成しました。
以上、このレクチャーでは、年収トップ20位のリストをヒントに出しました。次のレクチャーでは、下位20位のリストを用意します。
このレクチャーでは、先ほど作成した給与上位20人のテーブルをコピーして、給与下位20人を表示するテーブルを追加します。
この2つのテーブルを横に並べて表示することで、部門ごとの給与の高低がひと目で比較できるヒントを作り込んでいきます。
まずは、既に作った上位20人のテーブルをコピーします。
上位20人のテーブルを選択し、Ctrl+C → Ctrl+Vで複製します。
コピーしたテーブルを右側にドラッグし、横に並ぶように配置します。
テーブル間に適度な余白をあけて見やすく調整しましょう。
複製したテーブルを下位20人用に設定します。
ビジュアルのフィルタウィンドウを開き、従業員名列の設定を「上」から「下」に変更します。
件数を20件に設定し、基準は引き続き年収のままでの設定とします。
フィルタを適用すると、下位20人が表示されるようになります。
年収列をソートしなおして、小さいもの順になるようにします。
どうやら、下位20位とすると、同じ金額の方がいらっしゃるので、実際は20名以上出ますが、これはこれでOKです。従業員ページで確認すると、各部署で、上位と下位が出ています。下位はスクロールバーが出てないです。これは、全体では下位は同じ金額で同着であったために、リストが20名を超えました。
しかし、ここでは各部署でフィルターされた結果が出ており、そこではダブりがないようです。ただ、人事で、スクロールバーが出てきますが、これだけなのでここでは良しとします。
これで表自体はできました。ここから、トップ20、ボトム20の区別がつくように工夫します。
従業員名の列名を変更します。
上位テーブル → 給与上位20名 従業員名
下位テーブル → 給与下位20名 従業員名
これで、ひと目でどちらのデータかわかるようになります。こうして、ビジュアルのタイトルではなく、項目で内容を示すのは、これまたキャンバスのスペースを有効活用するテクニックです。
これで、上位下位両方のテーブルがヒントに出るようになりました。
次のレクチャーに行く前に、ヒントをみて、スクロールバーが出ていないか?途切れてしまっている部分はないかを確認します。よさそうですね。
これで、やりたかった上位下位20名を出すヒントはできました。
以上、このレクチャーでは、下位20位のテーブルを作成し、項目名を変えることで表の内容を分かりやすくしました。
今、できたヒントを見ると、表は出ていますが、ほぼメインキャンバスと同じようなデザインゆえ、あまりヒントが目立っていないように思えます。せっかくヒントの背景を黒にしましたが、表に埋もれてほとんど、見えていません。
次のレクチャーでは、ヒントが映えてように、デザイン調整を行います。
前のレクチャーで、やりたかったヒント自体はできています。
このレクチャーからは、実務においてヒントをより効果的に使うためのテクニックを紹介します。
このレクチャーではヒントをより見やすく整えるための書式設定と、条件付き書式を使った強調表示を行います。
少し手間はかかりますが、これをやることで情報がぐっと見やすくなり、ユーザーの理解も進みます。
まず、ヒント全体の配色を整えたいと思います。
今回は、ヒントは黒の背景。そして文字は白でにして強調しようと思います。
テーブルの背景色を透明にします。書式、全般の効果、背景にて、透過性を100%にします。
次にビジュアルで、値です。ここに普通のテキストと、代替テキストとあります。これは何かというと、この表で縞々になってますよね。これが普通テキスト、こっちが代替テキストです。背景は黒で白文字で浮かびあがらせたいので、両方ともテキストは白。そして背景は黒にします。だいぶシャープになりました。
同じく、書式のビジュアルにて、列見出し。ここで、このヘッダー部分を調整します。テキストの色は白で、背景を黒にします。
あと、この線がいっぱいあるのがうるさく感じます。グリッドで、水平目盛り線をオフにします。
すると、あとこの青い線が残りますね。これは白にします。同じくグリッドの罫線で、カラーを黒にします。
いい感じです。列見出しのテキストだけ目立つ色にしてヘッダーということを強調します。はい。これでいいですね。
次に、給与列に条件付き書式を適用します。
この設定を使うと、給与の大小を色で直感的に把握できるようになります。
トップ20の方のテーブルにて、年収のところで下向き三角をクリック。条件付き書式、背景を選択します。スタイルの書式はグラデーションにします。そして、とにかく上の値を目立たせたいので、最小値と中間値は、現在の背景と同じ黒にします。要は強調しないと。最大値だけ明るい色にします。はい。これで上位の色がしっかり強調されますね。
これでOKです。ここまで来たら、下位20位のテーブルは簡単です。書式のコピーをします。
はい。並び直して、条件付き書式の設定だけ変えます。再度年齢の下向き矢印をクリック。年収をソートしなおします。今回の設定では、最小値に明るい色が来るようにします。今は、上位20位の書式のままなので、上位が目立つようになっています。はい。これでOKです。
再度、ヒントを確認してみましょう。しっかりとメリハリのある色使いで、さらに上位と下位にハイライトがあたっているので、金額の規模感もパッ見で分かりますね。はい。これでいいですね。
以上、このレクチャーでは、カスタムヒントをより見やすくするための、表の作りこみを行いました。
いよいよ、最後です。次のレクチャーでは、作ったヒントの有効活用と、実務でカスタムヒントを使う時のちょっとした工夫を紹介します。
このレクチャーでは、完成したヒントを他のビジュアルに適用する方法と、ユーザーがその機能に気づき、活用してもらうためのちょっとした工夫を解説します。いよいよこのセクション最後のレクチャーです。
もう、ヒントについての重いパートは過ぎてます。このレクチャーは軽めなのでご安心ください。
さて、こうしてがんばって、ヒントをこのビジュアルのために作りました。
実は簡単な設定で、他のビジュアルにもこのカスタムヒントを出せます。
たとえば、職位と、地域別の従業員数のデータにも適用してみましょう。
ビジュアルを選択
適用したいビジュアルをクリックして選択します。
書式設定からヒントを設定
「書式設定」→「全般」→「ヒント」を開きます
「ページ」を「自動」ではなく、作成したヒントページを指定します
これだけです。
では、確認してみましょう。職位や、マップ上にて、カーソルを合わせると、その地域の給与上位20人・下位20人の情報がリアルタイムで表示されていますね。
ここで実務上の注意は、一回苦労してカスタムヒントを作り、そして他のビジュアルにもこうして簡単に設定できると。そうなると、何が起こるかというと、他のビジュアルにもやたらカスタムヒントをつけたくなります。
私が知っている人は、全部のビジュアルにカスタムヒントを設定したりします。すると、いい加減多すぎな印象がありますし、本当にこのビジュアルにカスタムヒント必要なのだろうか?というケースも出てきます。簡単にできるのと、やるのはまた別の話です。
実務上のニーズに合わせて適宜、カスタムヒントをつけるビジュアルは選びましょう。
そして最後。これも実務であるあるです。
カスタムヒントは便利ですが、ユーザーが存在に気づかなければ宝の持ち腐れです。
Power BIに慣れていないユーザーは、「カーソルを合わせると情報が見られる」という発想をそもそも持っていない場合が多いです。もしくはヒントを知っていても、カスタムじゃなく通常のものしか出ないだろうと思っています。そうですよね。デフォルトがそうですから。
そこでおすすめなのが、レポートの余白にガイドを置く工夫です。
例:テキストボックスを追加して、
「これらビジュアルにはカスタムヒントがあります。カーソルを合わせてみてください。」
と書いておきます。
この注意書きは、シンプルで、小さめのフォントでデザインすることで、邪魔にならない一方で、なかなかこういう注意書きはPower BIでは珍しいので、自然に注意をひけます
この一手間で、ユーザーが「知らなかった機能を使ってみる」。こうしたきっかけを作ることができます。
注意書きはユーザーのリテラシーに合わせて将来的には削除するのもありです。ある程度カスタムヒントが浸透したな、と思えば削除してしまって構いません。
はい。これで、カスタムヒントについてみなさんに伝えたかったことは全部説明できました。
サブキャンバスともいえる、豊富な情報を埋め込めるカスタムヒント。キャンバススペースを有効活用するためにぜひ使ってみていただければと思います。
このセクションでは、Power BI の機能の中でも私が特に重宝している 「ブックマーク」 について取り上げます。
ブックマークは、レポートの状態をそのまま保存し、あとからワンクリックで再現できる機能です。
一見シンプルですが、この機能を使いこなすことで、レポートの見やすさや操作性が劇的に向上します。
さて、ブックマークはそれそのものの機能が役立つ、というよりもいろいろ応用の幅が広いのが特徴です。このコースは、キャンバススペースを有効に使う、ということをテーマにしています。
ですので、このセクションで取り上げるのは、ブックマークを利用して、似た構造の複数のグラフをたった1つのスペースで表示する方法を紹介します。
Power BI でレポートを作っていると、似た構造のグラフを複数見せたい場面って多くないですか?
例えば、今ある会社の売上についてのグラフで、「商品名」「商品カテゴリー」そして「地域別」の3つのグラフがあります。
(折れ線横棒グラフを3つ併記する。但し、切り口は違う)
これらを全部を同じページに詰め込むと、キャンバスがごちゃごちゃして見づらいです。
(実際に別ページにする)
じゃあってことで、地域は次ページにしようか、とページを分けて表示すると、ユーザーがページ間を行ったり来たりしないといけない
でも、私を含めてこういう時って、仕方ないな、と思いつつも3つのグラフを作っていると思います。
この問題を解決するのが、ブックマークです。
これからやるのは、同じスペースに複数のグラフを「切り替えて表示」できるようにします。
何言ってるの?と思う割れるかもしれませんね。具体的に、この一番右側のグラフこのスペースだけを使います。
そして、この上のあたりにボタンを作って、それを押せば、グラフがこれになったり、あれになったりする、こういう設定をこのセクションでは作っていきます。当然、横の2つのスペースは空きます。ですので、他のビジュアルに使うことできます。
こうして、キャンバスをすっきりと保ったまま、情報量を確保できます。
このテクニックで「見やすさ」と「情報の深さ」を両立できるわけです
今回、次のレクチャーで紹介するサンプルデータを使いますが、やることはどんなデータでも同じです。
以上、このレクチャーでは、このセクションでやりたい、ブックマークによるグラフ切り替えの概要をお話しました。
次のレクチャーからは、具体的にブックマークの準備ステップに進んでいきます。
このレクチャーでは、ブックマークを使った切り替え機能を実現するための準備作業をしていきます。
ブックマークを使えば、同じキャンバスのスペースで複数のグラフを切り替えて表示することができます。
このレクチャーでは、そのベースとなる3種類のグラフを作り、切り替えの準備を整えます。
今、三つのグラフ(横棒グラフ)を作っています。
地域別の売上
商品カテゴリー別の売上
商品名別の売上
これらは、どれも横棒グラフで、形もサイズもほぼ同じです。
つまり、「見せたい情報は違うけれど、レイアウトはほぼ一緒」という状態です。
このようなグラフをすべて1ページに並べると、
とにかくスペースをとる
どのグラフに注目すればよいかわかりにくい。なんせ形がほぼ同じななので。
という問題が発生します。
これを解決するために、ブックマークでグラフを切り替える仕組みを作っていきます。
さて、私は説明の便宜上、これら3つを先に作りましたが、念のためもう一度作ります。というのも、切り替えをした時に不自然にならないようにするためには、3つのグラフが、書式設定などすべて同じで、中身だけ違う、という状態を作ることが重要です。
このレクチャーのダウンロードに、今使っているサンプルデータ「SampleData_for_switching_visuals」というエクセルを置いています。ぜひ一緒に手を動かしながら受講いただければと思います。
ダウンロードしたら、Power BIに取り込んでいただきたいと思います。ワークシートは「売上データ2025」という一つしかありません。また、Power Query Editorで加工する必要もありませんので、すぐ取り込んでOKです。
では、一旦作っているビジュアルは削除して、一緒に作っていきましょう。
まずは、1つ目のグラフを作ります。
横棒グラフをクリック。適当な大きさにしますが、同じ大きさで横にもう二つ作りますので、その分のスペースは確保してください。サイズ調整したら、X軸に売上金額、Y軸に商品カテゴリーを入れます。はい。これでOKです。説明しやすいように、書式、全般で、効果で視覚的な境界をオンにしていただければと思います。
一旦、最初のグラフができたら、次にそのグラフをコピーして2回ペーストして横に並べます。Y軸を商品名と、地域に変えます。はい。これで切り口が違う、同じ形式のビジュアルができました。
このような形で、グラフの見た目を統一するために、元となるグラフを作った後に、それをコピペして、残りの2つを作ることが重要です。サイズや位置をそろえることで、切り替えたときに自然に見えるようになります。
ここで大切なのは、
同じスペースに収まるようにサイズを合わせる
切り替えても違和感がないようにレイアウトを統一する
この2つです。これをするためには、オリジナルのビジュアルをコピペして、中身だけ変えるというのが、最もシンプルで間違いのない方法です。
このレクチャーの最後に、このテクニックを使う時に重宝する、背景を入れておきます。挿入/図形で四角形を作ります。これを背景にしたいのですが、今は一番手前にきてしまっているため、この四角をクリックした上で、書式、最背面に移動にします。
グラフの後ろにこの背景がくるように置きます。これは単にデザインではなく、あるとあとで、ビジュアルのサイズ合わせに便利です。デフォルトでは色がドギツイので、シェイプのスタイルで、色をグレイにして透過性を高めておきます。また罫線もオフにします。はい。これでいいです。
以上、このレクチャーでは、3種類のグラフを用意しました。次のレクチャーでは、このセクションの主役であるブックマークの設定に入っていきます。
ここからはいよいよ、ブックマークの作成に入ります。とは、そんな大げさな処理ではないです。Powe BIの作業ってクリックかドラッグですよね。基本。
まず、作業に必要なブックマークと選択項目のウィンドウを開きます。
表示で、ブックマーク、選択項目をクリックしてオンにします。
すると、すると新たなウィンドウが開きました。もし、作業が終わったらもう一度クリックすると、ウィンドウは閉じることができます。
こちらの選択項目というのは、キャンバスにあるオブジェクト。ビジュアルだったり、単なる図形であったり。とにかくすべてのキャンバス上にあるものがここで出ています。今から、特定のグラフを表示したり、非表示したりします。今、このオブジェクト名は変えられます。分かりやすいように変えておきましょう。「~の合計」「金額」はなくても良さそうなので消します。
オブジェクトをクリックすると、どれが該当するか選択項目でハイライトされます。
次に、ブックマークを作成します。ここでは、3つのグラフを表示したり、非表示にしたりします。ですので、ブックマークの「追加」を3回押してブックマークを作ります。デフォルトでは、追加で作った状態でブックマークが記録されますが、あとから更新できるので、気にせず今3つ作ります。
そして、3つのグラフのうち、どれを表示する時のブックマークかが分かるように名前を変えます。さきほど、こちらの選択項目でつけた名前をそのまま使えばわかりやすいですね。「地域別の売上」のブックマークなら「地域別売上」を見せる、といった具合に。では、こちらの選択項目に合わせて、3つのブックマークに名前を変えます。手っ取り早くコピペでいきます。
作成したブックマークごとに、表示・非表示の状態を設定していきます。表示、非表示というのは選択項目のこの目玉アイコン。これでできます。これをクリックすると非表示にできます。ではやっていきましょう。最初のグラフを前のレクチャーで作った背景の上におきます。ちょっと上にスペースを残します。ここに切り替えスイッチをいれますので。
そしたら各ブックマークで、ブックマーク名だけのグラフを残し、あとは非表示にします。そして、ブックマークの右側の点々をクリックで、更新とします。これで、このグラフだけが表示され、他は非表示のブックマークができました。
残り2つも同様に行います。この時、切り替えた時に違和感がないように、グラフをどう配置したかをこの背景との位置関係で覚えておくと良いです。一番手っ取り早いのは、上にのせます。これ確実です。
はい。では、3つのブックマークができました。ブックマーク切り替えてみましょう。対象のグラフだけでて、他のグラフは見えていませんね。これで1つのスペースで3つのグラフを表示させることができますね。
以上、このレクチャーでは、3つのグラフを表示したり、非表示にしたりするブックマーク設定を行いました。
今は、こうしてブックマーク切り替えによってグラフを切り替えています。
次のレクチャーでは、この切り替えのためのボタンを作ります。
前のレクチャーまでで、やりたいことの半分はできました。ブックマークを切り替えれば、グラフを切り替えることができます。でも、これをユーザーにやってって言うのは酷ですね。
ここからは、ブックマークで切り替えるための「ボタン」を作っていきます。
このレクチャーでは、ページ上に3つのボタンを配置します。
まず、グラフの上のスペースに、3つのボタンを横に並べます。
メニューから[挿入]→[ボタン]→[空白]を選択
一つのボタンをコピペします。全部選んで、書式の配置で位置を整えます。
次に、それぞれのボタンに分かりやすいテキストを追加します。書式のボタン、スタイル、テキストをオンにします。そして、各グラフを端的に表すタイトルを入れましょう。どういう項目があったかは、ブックマークを見ながらやるのもいいですね。
地域別のグラフ用には「地域」
カテゴリー別のグラフ用には「カテゴリ」
担当者別のグラフ用には「担当」
こんな感じですかね。
ボタンはデフォルトのままだと少し味気ないので、デザインを調整します。書式のスタイル。フィルで青にしておきます。あと罫線をオフにします。こうした書式は簡単にコピペできます。
はい。これでいいですね。
以上、このレクチャーでは、切り替えボタンの作成を行いました。まだ、これらボタンはクリックしても何もおきません。次のレクチャーでは、ボタンとブックマークの紐づけを行います。
ここまでで、3種類のグラフを用意し、それぞれをブックマークとして保存しました。さらに、ページには3つの切り替えボタンも配置済みです。
このレクチャーでは、ボタンとブックマークを連動させる設定を行い、クリック一つでグラフを切り替えられるようにしていきます。
まず、最初のボタンを選択し、右側の[書式設定]ペインを開きます。
[ボタン]の[アクション]をオンにする
型を[ブックマーク]に変更
対応するブックマークを選択します
例えば、地域別のボタン → 「地域」ブックマークとなります。他も同様に設定します。
設定が完了したら、実際にレポートを操作してみましょう。ボタンの上にカーソルを置くと、「Ctrlを一緒にクリックしてください」って出ますね。
地域別ボタンをクリック → 地域別のグラフが表示
カテゴリー別ボタンをクリック → カテゴリー別のグラフが表示
担当者別ボタンをクリック → 担当者別のグラフが表示
こうした切り替えは、1つのキャンバスの中で切り替えれています。3つのグラフを1つのグラフ分のスペースで、切り替えて表示することで、キャンバススペースを最大限に活用できます。
以上、このレクチャーでは、ボタンとブックマークの紐づけを行いました。
ここまででで、すでにやりたかったことはできています。次のレクチャーでは、このセクションのまとめとして、このテクニックを使うにあたっての補足を見ていきます。
ここまでで、ブックマークを使って、3つのグラフを1つ分のスペースで見せるテクニックはできています。
このレクチャーは、このセクションの締めとして、操作性をさらに高める工夫を2つ紹介します。
1つ目は、 ボタンがホバーされた時の書式設定です。
これ何かというとウェブサイトなんかで、カーソルをボタンにホバーさせると、ボタンの書式が変わったりしますよね。あれです。
Power BIでは、この設定は簡単にできます。
スタイルにて、今、状態が既定となっています。デフォルト状態です。その時の書式は以下の通りです。
それをこのポイントした時に変更します。そして、下記の書式を変更すると、ユーザーがカーソルをホバーした時の書式を変更できます。
いろいろ書式は変えれますが、ここでは単に紹介したいだけですので、フィルで背景を白にしてみます。
はい。これで見てみましょう。はい。こんな感じで、書式が変わりました。せっかくなので、文字をボールドにしてみましょうか。同じく、スタイルのテキスト。状態が「ポイントした時」になっていることを確認します。その上で、文字をボールドにします。
はい。こうした効果。私自身は最初、自分の好みでやっていたところがあります。
ただ、ユーザーさんに聞くと、カーソルホバーでこうした反応があると、このボタンは押せるんだなって分かりやすいって言われました。それまでは、自分が作っているのであまりに自明で、意識していなかったのですが、確かに知らない人とってこればボタンなのかどうかなんて、人によってはそんなに明白ではないのだろうな、って思いました。書式コピーで他のボタンにもこの書式を適用します。
次に2つ目の工夫。
ブックマークにはデフォルトでブックマークを切り替えるたびに、スライサーやフィルターがリセットされる問題があります。
例えば、今スライサーで期間を設定しました。このデータはわざと、2年分のデータしかありません。(データビューを見せる)1年分は完全なブランクです。この年を選ぶと、データがまるっきりありません。この時、ボタンで切り替えるとどうなるか。数値が復活しています。なぜかというと、スライサーがリセットされているからです。今は、このグラフしかありませんが、みなさんが実務で使う時も同様です。他のビジュアルにおいても、スライサーがリセットされます。
特定の期間や条件でデータを絞って見ていた。この条件で、他のグラフを見てみようと思って、ボタンを押したら...その条件が消えてしまった…これはユーザー体験としては良くありません。
これを防ぐには:
ブックマークペインを開く
各ブックマークを右クリック
「データ」のチェックを外す
この設定により、スライサーの状態を保持したままグラフを切り替えられるようになります。
やってみましょう。さきほどと同じくデータがない年にスライサーを合わせます。そして、ボタンを押してグラフを切り替えると....やはりデータ無しです。スライサーが保持されたままいなっていますね。うまくいっています。
以上、このレクチャーでは、ボタンにより、グラフを切り替えるテクニックに関連した、操作性を高める2つの工夫をお伝えしました。
これでこのセクションでお伝えしたいことはすべてお伝えしました。
このセクションでは、キャンバスの一か所に、複数の視点の、別々のビジュアルをまとめて切り替える、テクニックを紹介しました。
似たグラフを何個も並べてキャンバスを窮屈にする代わりに、ボタンひとつで必要な情報を切り替えられるレポートを作れるのが、このテクニックの真価です。
ぜひ、みなさんのレポートでも使ってみていただきたいと思います。レポートの見やすさ、操作性、そしてユーザー満足度がさらにと向上するはずです。
ここまでご受講いただきありがとうございました。
このレクチャーでは、本編への追加コンテンツとして、スライサーパネルと一緒に使いたい動的タイトルを紹介します。
動的タイトルとは、何か?まずはどういったものかを見ていただきたいと思います。
今、御覧の画面は、コースの本編で紹介しましたスライサーパネルの完成形です。
これはこれで便利なんですが、実務でのあるあるとして、スライサーパネルを格納した後に「あれ?」そういえば、今見ているのは、いつの期間のデータだっけ?というのがあります。
そしてスライサーパネルを開いて、期間のスライサーをみて「そうだそうだ」この期間だった、ってなります。
(動的タイトルを適用する)
こういう時、ビジュアルにこういうタイトルがついていたらどうでしょうか?いつの期間のものか分かります。しかも、スライサーパネルを開いて、期間を変えたら、そのように変わるんです。
これがあれば、いちいち期間をパネルを開いて確認する必要ありませんよね。しかも、なによりスマートな感じがします。
この動的タイトルをここでは紹介したいと思います。
エクセルでも使う、簡単なDAXを使います。
まず、新しいメジャーです。
動的、って意味を示すDynamic Titleとして、期間を示す Rangeとします。
そして、今回はカテゴリー別売上を示すので、for category salesとします。この辺は自分が分かりやすい名前をつければ、OKです。
""(ダブルクオテーション)や、&(アンドマーク)を使って、タイトルの本文を作ります。この辺りは、エクセルと一緒です。
DAXメジャー
Dynamic Title Range=
"カテゴリ別売上推移(" &
MIN('Sales'[Date]) & " 〜 " &
MAX('Sales'[Date]) & ")"
""(ダブルクオテーション)や、&(アンドマーク)の使い方はエクセルと一緒です。
ポイント解説
MIN は選択された中で一番古い日付
MAX は選択された中で一番新しい日付
& は文字列をつなぐ記号
これで、“売上推移(2000年〜2005年)”のように期間を動的に表示できます。
はい。これでOKです。
メジャー作っただけだと、タイトルは何も変わりません。もう一つ設定が要ります。
5. グラフに適用
「次に、このメジャーをグラフのタイトルに反映します。
グラフの書式 → タイトル → fx をクリック
“フィールド値” から先ほど作った Dynamic Title を選択
保存
これで準備完了です。」
6. 実演
「では試してみましょう。
スライサーで2000年〜2005年を選ぶと……
タイトルが『カテゴリ別売上推移(2000年〜2005年)』に更新されました!
このメジャーは簡単にコピペして、他のビジュアルにも適用できます。
今度は、販売地域でやってみましょうか。(販売地域で実演する)
この他のビジュアルも同じやり方で、動的タイトルをつけることができます。
ちなみに、やっぱり動的タイトルをやめたいと思ったら、書式で全般。タイトルにいきまして、この消しゴムアイコンでタイトルの条件付き書式を削除します。この時注意なのは、そうするとタイトルはブランクになります。Power BIがビジュアルに作った時につけてくれる、デフォルトのこうしたタイトルは復活しないのでご注意ください。
以上、このレクチャーでは、動的タイトルを紹介しました。単純なDAXで、スライサーパネルととっても相性の良い実務直結テクニックです。
ぜひスライサーパネルと一緒に使っていただければと思います。
Power BI でレポートを作っていると、ついキャンバスが窮屈になりがちです。
「もっと情報を詰め込みたいけど、ごちゃごちゃして見づらい…」
「ページを分けたら、ユーザーが行ったり来たりして大変…」
そんな経験はありませんか?
このコースでは、キャンバススペースを有効に活用するための3つの王道テクニックを、1.5時間に凝縮してお届けします。
学べる3つのテクニック
カスタムヒント(Tooltip)でサブキャンバスを呼び出す
スライサーパネルでキャンバスを広々使う
ブックマークで似たグラフを切り替える
このコースの特徴
各テクニックは独立セクション形式、どこからでも受講OK
確立された方法だけに絞り、実務ですぐ再現できる内容
短時間で「見やすさ」と「情報量」を同時に実現できる
――そして、この説明文もキャンバスと同じく、スペースを無駄に使わず短くまとめました!
ぜひこのコースで、“見やすさ”と“情報量”を両立させる技を身につけてください。
それではコースでお会いしましょう!