Layout container を使って映えるダッシュボードを作成しよう！

「Layout container」を使えば、最新のQlikビジュアライゼーションでカスタマイズ性が高く、細やかなデザインの画面が作れます！

本記事では、「Layout container」の使い方、実際に使ってみてどのように変わるか、どういったメリットがあるかを画像を交えながらご紹介します。

より詳しく知りたい方はQlik JapanチャンネルのYouTube動画をご確認ください。
映えるダッシュボードを作ってますか？～ Qlik で作成する驚くほど美しいデータ分析～

※本記事は「2024年11月時点の Qlik Sense SaaS」で作成しています。

「Layout container」オブジェクト内ではグリッド線を意識せず、オブジェクトを自由に配置できる機能で、オブジェクトを重ねたり、条件分けで表示/非表示の制御ができます。
「Qlik Dashboard bundle」に2023年12月に追加されたビジュアライゼーションの機能で、Qlik Sense Client-Managed版はFebruary 2024に新機能として追加されました。

以前の新機能記事、メーカー作成の動画でも紹介しています。
February 2024がリリースされました！
Qlik Tips: レイアウト コンテナでダッシュボードをブラッシュアップ

動画を見られた方はイメージはついたかと思いますが、実際に使ってみないとわからないという方もいると思うので実際に使ってみましょう。

まず、アプリを開いて、シート編集画面を開きます。
カスタムオブジェクト> Qlik Dashboard bundle>「Layout container」

「Layout container」をシートにドラッグ＆ドロップします。
ドロップすると、コンテナ上に配置するチャートを選択できるようになります。

比較してみると差がわかりやすいと思うので、試しに「Layout container」を使う場合、使わない場合で見比べたいと思います。

左側：シート内に「Layout container」を追加、コンテナ内にKPI、棒チャートを追加
右側：シート内にKPI、棒チャートを追加

画像の左側をみていただくと、「Layout container」の中に二つのチャートを追加しています。
画像の左側は、グリッド線を気にせずチャートを配置、さらにチャート同士を重ねることが可能となっています。
※枠外にはみ出した部分についてはシート上からは見えなくなります。

　・チャートがフレームアウトするのは避けたいので枠からはみ出さないようにしたい
　・グリッド線があったほうが配置しやすい

といった方はプレゼンテーションメニューのスタイル指定で[チャートを内部に保つ]、[グリッド線を表示]のオン/オフの切り替えができます。

また、グリッドの「行の数」「列の数」の指定もできます。

最後に大きな機能として、[条件の表示]機能があります。
これを使うと、チャートの表示/非表示が行えるようになります。
初めて利用されるエンドユーザーは、どうやって分析するのか、どんなときに使えるのかがわからないことが多いですよね。
そんなときに、アプリの利用方法を説明した動画を用意して利用者に周知することもあるかと思います。

そんなときは、[条件の表示]機能を使って、ボタンをクリックすることで利用方法の動画の表示/非表示を切り替えられるようにしておくと便利です。

▼「How to」ボタンをクリックした場合に利用方法の動画を表示
※「How to」ボタンは手作りのもので、「How to」という特定の機能があるわけではありません。

また、ユーザーの操作を誘導するために導線設計を行いたい場合もあるかと思います。
例えば、以下のように手作りのメニューを作成することで、ユーザーが直感的に操作できるようにすることができます。

▼手づくりのメニューの表示/非表示の制御

たくさんのシートを作成していると、閲覧されていないシートがあったり、新しく作成したシートが見られていなかったりするかもしれません。

上の例では、シートを階層的に整理してメニューにシート遷移のボタンを配置することで、ユーザーが必要な情報にすぐにアクセスできるように工夫しています。
また、新しく作成されたシートは特定の色やアイコンで強調表示することで、すぐに見つけられるように工夫することもできます。
メニュー画面の作成は一例ですが、[条件の表示]機能を使って、こういった使い方もできます。

メニューのような画面をどのように作っているかというと、「ボタン」と「テキストと画像」を重ねて作成しています。

「Menu」、「Close」ボタンをクリックすると変数の値が切り替わるようになっており、変数の値が「0(非表示)」の時は、メニュー画面を非表示、「1(表示)」の時はメニュー画面を表示する作りにしています。
▼初期画面/「Close」ボタンがクリックされた時の画面：「vMenu = 0(非表示)」

▼「Menu」ボタンがクリックされた時の画面：「vMenu = 1(表示)」

Qlik Sense SaaSでは、2024/11に標準チャートに「ナビゲーションメニュー」が追加されました。
シート間の遷移のみであれば、標準チャートの[ナビゲーションメニュー]を利用してみてください。

実際に既存のアプリの画面を使うとどのように変わるのか、魅力度がアップするのか見ていきたいと思います。

今回は食品小売りのサンプルデータを使ったサンプルアプリのダッシュボードを、「Layout container」を使って改修しました。

▼元のダッシュボード画面

▼「Layout container」を使ったダッシュボード画面

同じ検索条件とチャートを使っていても、「Layout container」を使うことで空白部分を有効に利用することができます。
元の画面ではフレームアウトしていたゲージの凡例も、チャートを重ねて一部のチャートの横幅を広くすることで、きれいに表示できました。

また、今回「Layout container」を使ったDashboard画面では、食品の画像を背景に設定しています。
もし、元のDashboard画面に背景を設定すると、背景が見えなくなったり、チャートとチャートの間の色の変化が気になることがあるかと思います。そこで、「Layout container」の背景を半透明（70%）に設定することで、背景の存在感を出しつつ、チャートも見やすい状態を維持しています。

企業やプロジェクトのブランドカラーやロゴがある場合には、それを背景に取り入れると、利用者の視覚的な認識が高まり、ビジュアルの一貫性も保てそうですよね。
ダッシュボードをもっと魅力的にしたい方は、ぜひ試してみてください。

今回のダッシュボードには使っていませんでしたが、ビジュアル面でよくユーザーから改善要望が挙がっていたチャートとして、「テーブル」と「ピボット テーブル」があります。
この2つのチャートもビジュアル面が強化され、「テーブル」と「ピボット テーブル」の標準チャートに加えてカスタムオブジェクトの「Qlik Dashboard bundle」に新チャートとして追加されました。

※「Qlik Dashboard bundle」に2023年5月（Straight table）、2023年12月（Pivot table）に追加されたビジュアライゼーションの機能で、Qlik Sense Client-Managed版では2023年5月（Straight table）、2024年2月（Pivot table）に新機能として追加されました。

新しい「Straight table」、「Pivot table」について知りたい方は、メーカーのYouTube動画、メーカーヘルプをご確認ください。
Qlik Tips:ストレートテーブル＆新しいピボット テーブル
ストレートテーブル
ピボット テーブル

今回は、昨年から今年にかけて強化されたビジュアライゼーションチャートの新機能を紹介しました。
どれも簡単に使えるので、ぜひ試してみてください。

また、本ブログでご紹介したアプリは下記URLからダウンロードができます。ぜひご自身の目と手でご確認ください！
layoutcontainer_dashboard.zip

※1. 本アプリ内のデータは全てサンプルデータです。
　2. 本アプリの使用に関して、いかなる責任も負いかねます。自己責任でご利用ください。
　3. 本アプリの再配布や再公開はご遠慮ください。