ダッシュボードのデザインを変更する方法

Spotfireで作ったダッシュボードを、デザイン性溢れるダッシュボードにカスタムしたいと思ったことはありませんか？このコンテンツでは、「キャンバススタイル」という機能を利用して、ダッシュボードのデザインを変更する方法について解説します。
本コンテンツで利用したバージョンは、Spotfire Analyst 12.0です。ご利用環境によって、一部画面構成が異なる場合がありますので、ご了承ください。

キャンバススタイルとは

Spotfireでの「キャンバス」とは、Spotfireのインターフェースの中心部で、ユーザーがデータのビジュアルを配置・編集するための作業領域を指します。このキャンバス上に、さまざまなビジュアル（例：折れ線グラフ、バーチャート、マップ、ヒートマップなど）を配置することができます。

「キャンバススタイル」とは、このキャンバスのデザインや外観を指定するための設定や属性のことを指します。例えば、キャンバスの背景色、枠線のスタイル、テキストのフォントや色など、キャンバスの見た目に関するさまざまな要素を調整することができます。これにより、ユーザーは自分のニーズや好みに合わせて、Spotfireのインターフェースをカスタマイズできます。

キャンバススタイルは、メニューバー「ビジュアライゼーション」>「キャンバススタイル」から変更できます。構成されたデザインとして提供されている「ライト」と「ダーク」という2つのテーマと、独自のデザインを反映することができる「カスタム」テーマを選択することができます。
ここでは、ユーザーがSpotfireのダッシュボードを、自身のニーズや好みに合わせてカスタマイズしていくことを想定し、「カスタム」テーマを取り上げて説明していきます。

カスタムテーマ

カスタムテーマの機能を利用すると、どのようなデザイン要素を調整することができるかを解説していきます。

カスタムテーマの設定画面は、メニューバー「ビジュアライゼーション」> 「キャンバススタイル」> 「カスタムテーマの編集…」からアクセスできます。
「カスタムテーマの編集」ダイアログでは、「全般」と「詳細」の2つのタブがあります。それぞれのタブの役割について説明していきます。

全般」タブ

カスタムテーマの「全般」タブでは、基本的なデザイン設定を行うことができます。具体的には、以下のような設定が可能です：

• テーマのベース：事前に定義されたベースのテーマ、例えば「明るい色」や「暗い色」などを選択して、カスタムテーマの基盤とすることができます。
• ベースの色：ラベルテキストやスケールの色、ページ移動エリアの背景色など、ダッシュボードの主要な部分の色を変更することができます。
• プライマリの色：フィルタパネルの選択部分の色など、強調したい部分や主要な要素の色を設定することができます。
• フォント：ビジュアライゼーションに用いられるテキストのフォントや色、ページ移動エリアのテキストのフォントや色を変更することができます。

「全般」タブは、カスタムテーマの基本的な外観を手軽に設定するためのもので、より詳細なカスタマイズを行いたい場合は「詳細」タブを使用します。

「詳細」タブ

カスタムテーマの「詳細」タブでは、より細かくダッシュボードのデザインをカスタマイズすることができます。具体的には、以下のセクションでの設定が可能です。

• ページ移動エリア
  ・ページタイトルのテキスト・色、アクティブなページタブを示す色を設定できます。
• ビジュアライゼーションエリア：
  ・ビジュアライゼーションが配置される部分の背景色を変更できます。
  ・ビジュアライゼーション間の幅や、ビジュアライゼーションとその周囲のパネルとの距離を設定できます。
• ビジュアライゼーション全般：
  ・ビジュアライゼーション自体の背景色を変更できます。
  ・ビジュアライゼーション同士の境界の幅や色を調整できます。
• ビジュアライゼーションタイトル：
  ・タイトルバーの位置、色、フォントの形式をカスタマイズできます。
• ビジュアライゼーションスケール：
  ・スケール線とメモリの表示設定や、表示する場合の色を設定できます。
• カラムセレクター：
  ・カラムセレクターのテキストの色やフォントを変更できます。
• 注釈：
  ・注釈の外観（例：背景色、文字色、境界線など）をカスタマイズできます。

補足：「詳細タブ」で設定可能な要素

「詳細」タブを開くと、一部パディングやコーナー半径などの用語が出てきます。
カスタムテーマで調整できる部分には、「パディング」「境界」「コーナー半径」「余白」などがあります。
下図の赤字部分は、「詳細」タブ >「ビジュアライゼーション全般」セクションで設定できる要素の一部になります。 調整できる部分の概念について詳細はこちらをご覧ください。

カスタムテーマの適用

作成したカスタムテーマは分析ファイル自体に保存されます。
カスタムテーマを他の分析ファイルに対して適用したい場合は、適用元となる分析ファイルをインポートして反映させることができます。適用元の分析ファイルは、ローカル/ライブラリどちらに保存されていても可能です。

適用は、メニューバー「ビジュアライゼーション」> 「キャンバス スタイル」> 「テーマをファイルからインポート…」または「ライブラリーからテーマをインポート…」から行えます。

今回は、「ライブラリーからテーマをインポート…」を選択して行います。

ライブラリから適用元の分析ファイルを選択します。

分析ファイルを選択すると、その分析ファイルに使用されているテーマがインポートされます。

以上のように、カスタムテーマの作成・適用を簡単に行えます。