Quick BI:テーマデザイン

前提条件

Quick BI コンソール にログインし、ダッシュボード編集ページにアクセスしていること。 詳細については、「ダッシュボードを作成する」をご参照ください。

手順

1. ページ設定ダッシュボード編集ページで、トップメニューバーの をクリックします。

   

   アイコンをクリックすると、ページ設定パネルを展開または折りたたむことができます。

   

2. [ページ設定] パネルで、[テーマ] タブをクリックして、ダッシュボードテーマ [テンプレート]、グローバルスタイル、ページレイアウト、およびその他の設定を構成します。

   

   検索ボックス特定の構成項目をすばやく見つける必要がある場合は、上部の にキーワードを入力して、構成オプションを表示できます。

   

   すべての構成カテゴリを一度に折りたたむ必要がある場合は、検索ボックスの右側にある アイコンをクリックし、[すべてのカテゴリを折りたたむ] を選択します。

   

3. 次のパラメーターを設定します。

• ダッシュボードテーマ セクションでは、公式テーマから適切なダッシュボードテーマを選択するか、カスタム作成されたテーマを選択できます。

  • 公式テーマ: デフォルト、ディープブルー、スターリースカイ、テクノロジー、アクティビティ、ミニマリスト、インディゴがサポートされています。

  • カスタムテーマ: 既存のカスタムテーマを選択できます。

    

    カスタマイズ組織管理者は、 をクリックして レポートテーマ管理 ページにアクセスし、カスタムテーマテンプレートを管理できます。

    

    説明

    Quick BI プロフェッショナル版は、カスタムダッシュボードテーマをサポートしています。

    • 組織管理者の場合は、公式推奨テーマを選択するか、カスタムテーマを追加できます。

    • 組織管理者でない場合は、公式推奨テーマまたは既存のカスタムテーマを選択できますが、カスタムテーマを追加することはできません。

• グローバルスタイル セクションで、テーマのグローバルスタイルを設定します。

  チャート構成項目	説明
  テーマモード	ライトモードとダークモードがサポートされています。 [ライトモード] が選択されている場合、ダッシュボードの背景色は白です。 デフォルトスキンは [ライトモード] です。 [ダークモード] が選択されている場合、ダッシュボードの背景色は黒です。
  チャートカラースキーム	テンプレート配色カスタムカラースキームシステム構成の と をサポートします。 [チャートカラースキーム] が [テンプレート] [カラースキーム] に設定されている場合は、ドロップダウンリストからカラースキームを選択できます。 たとえば、カラースキームが [アドバンスドグレー] に設定されている場合、切り替え後のチャートは次のようになります。 [チャート配色] が [カスタム] に設定されている場合、各カラーブロックの色を変更できます。 説明 インジケータートレンド比較グラデーションカラー スタイルは、、、 チャートに適用されます。
  ページフォント	チャートページのフォントタイプを設定します。
  カードの角丸み	チャートカードの [角丸] を設定します。半径なし、小さい半径、大きい半径をサポートしています。
  間隔	コンパクト、標準、および カスタム オプションをサポートしています。
  カード間隔	[カスタム] 間隔が選択されている場合にのみ使用でき、カード間の行と列の間隔を調整できます。
  カードパディング	[カスタム] 間隔が選択されている場合にのみ使用でき、カード内の上端、下端、左端、および右端からの距離を調整できます。
  セマンティックカラー	セマンティックカラー注意:条件付き書式や2次メトリック表示などの機能では、データの増加、横ばい、減少などの情報を視覚的に伝えるために、多くの場合色が使用されます。 構成では、 で選択したテーマに基づいて、システムが自動的に異なるデフォルトのセマンティックカラーを一致させます。 また、データのトレンド、正/負の値、ステータス、その他の意味のグローバルカラースキームをカスタマイズして、ビジネスデータの表示習慣によりよく合わせることができます。 この構成はダッシュボード全体に適用されます。

• ページレイアウト セクションで、次のパラメーターを構成します。

  チャート構成項目	説明
  ページレイアウト	ダッシュボードコンテンツのレイアウトを選択します。[コンテンツに合わせる] と [ウィンドウに合わせる] がサポートされています。 コンテンツに合わせる：チャートやクエリコントロールなど、すべてのコンポーネントの実際のサイズと位置に合わせてダッシュボードのサイズを調整します。 ウィンドウに合わせる: 現在のブラウザウィンドウに合わせてサイズが自動的に調整されます。ページの列レイアウトを設定することもできます。
  ページ情報	ダッシュボードに表示されるページ情報を設定します。これには、[タイトルエリア]、[ストーリーライン]、および[フッター] が含まれます。 タイトルエリア: ダッシュボードのタイトルエリアの表示/非表示を設定します。タイトルエリアが表示されている場合、 アイコンをクリックして以下の項目を設定します。 メインタイトルの表示: メインダッシュボードのタイトルを表示または非表示にします。メインタイトルが表示されている場合は、テキストスタイルを調整し、ロゴとコンテンツの配置を設定します。 注釈: メインタイトルエリアに注釈を表示するかどうかを設定します。注釈が表示されている場合、 アイコンをクリックして注釈の内容をカスタマイズします。 コンテンツエリア下部の余白: メインタイトルエリアの下部の余白を調整します。 カバー バックグラウンド：メイン タイトル エリアの背景色、オーバーレイ イメージ、高さを設定します。 ストーリーアウトライン: タイトルエリアの下にストーリーアウトラインを挿入するかどうかを指定します。選択すると、現在のダッシュボードにある既存のチャートのレイアウト順に基づいて、システムが自動的にストーリーアウトラインを生成します。[ストーリーノード] の横にある アイコンをクリックして、必要に応じて [ストーリーノード編集] ダイアログボックスでストーリーアウトラインをカスタマイズおよび編集できます。 フッター: ダッシュボードのフッターエリアを表示するかどうかを設定します。フッターが表示されている場合は、 アイコンをクリックして、以下の項目を設定します。 フッターのテキスト内容: 必要に応じてフッターエリアに表示するテキストを設定します。 フッターエリアのバックグラウンド: フッターエリアの背景色、オーバーレイイメージ、および高さを設定します。
  ページの背景	背景色を設定し、単色、グラデーション メソッドをサポートし、背景画像をオーバーレイするかどうかを選択します。
  ページ幅	自動ローテーション、固定方式をサポートします。 説明 固定メソッド が選択されている場合は、左右の余白のピクセルサイズを設定する必要があります。 設定後、左右の余白は固定され、調整できません。
  ページ余白	標準、特大ページ、および カスタム オプションをサポートしています。

• [ダッシュボードの背景] セクションで、次のパラメーターを構成します。

  グラフ設定項目	説明
  上部のイメージおよび下部のイメージ	イメージを選択する際、[既存のイメージ] または [カスタムイメージ] を選択できます。 説明 カスタムイメージを選択する場合、ローカルイメージをアップロードするか、ターゲットイメージのリンク経由でアップロードできます。

• ダッシュボードウィジェット セクションで、次のパラメーターを構成します。

  

  チャート構成項目		説明
  タイトル	テキスト	チャートタイトルのフォントサイズと配置を設定します。
  	線の区切り文字	タイトルの区切り線のの色と幅を設定します。
  	カスタムタイトルの背景	タイトルエリアの背景と位置を構成できます。 単色を選択する場合、[背景色] を設定できます。 グラデーションを選択すると、[グラデーションの配色] と [グラデーションの角度] を設定できます。 背景画像をオーバーレイすることを選択した場合は、素材を使用するか、カスタム画像を使用するかを選択できます。 説明 カスタム画像を選択する場合は、ローカル画像をアップロードするか、ターゲット画像のリンクからアップロードできます。 タイトルエリアの位置は、[チャート内]、[チャートの端]、および [チャートの上] をサポートしています。
  	ステータスアイコン	[ステータスアイコン] をホバー時に表示するか、常に表示するかを設定し、[ステータスアイコン] の色を設定できます。
  	プレビューモードでその他の操作エントリを非表示にする	その他の操作この構成項目をチェックすると、プレビューモードでは のエントリが非表示になります。
  背景スタイル	塗りつぶし	背景に塗りつぶしの色を表示するかどうかを設定します。
  	背景画像をオーバーレイ	画像素材またはカスタム画像をチャートの背景に追加します。
  	罫線	背景の罫線と罫線の色を表示するかどうかを設定します。
  	影を表示	背景に影を表示するかどうかを設定します。
  空のデータスタイル	テキストコンテンツ	空のデータのテキストプロンプトのカスタマイズをサポートします。デフォルトのプロンプト：返されたデータは空です。
  	アイコンスタイル	空のデータアイコンスタイルのカスタマイズをサポートします。 説明 [カスタムイメージ] を選択すると、ローカルイメージをアップロードするか、ターゲットイメージのリンクを使用してアップロードできます。
  	ジャンプリンク	ジャンプリンクを構成した後、アイコンまたはテキストをクリックすると、リンクアドレスにジャンプします。

• 共通コンテンツスタイル セクションで、次のパラメーターを構成します。

  チャート構成項目		説明
  グラフスタイル	軸タイトル	軸タイトルのフォントサイズ、カラースタイルなどを設定します。
  	軸ラベル	軸ラベルのフォントサイズ、カラースタイルなどを設定します。
  	データラベル	データラベルのフォントサイズ、カラースタイルなどを設定します。
  	ツールチップ	ツールチップのフォントサイズ、カラースタイルなどを設定します。
  	凡例	凡例のフォントサイズ、カラースタイルなどを設定します。
  テーブルスタイル	スタイル設定	ここでは、シマウマストライプ、ワイヤーフレーム、簡略化、ミニマリスト の 4 つのスタイルを設定できます。
  	メインカラースキーム	ここでメインカラースキームを設定できます。テーマカラー、グレー、カスタムカラースキームをサポートしています。
  	テーブルヘッダー	テーブルヘッダーのフォントサイズ、色などを設定します。
  	コンテンツ	コンテンツのフォントサイズ、色などを設定します。

• [タブウィジェット] セクションで、次のパラメーターを構成します。

  チャート構成項目	説明
  TAB 選択済みスタイル	ここで TAB 選択済みスタイルを設定できます。下線、区切り線、選択済みブロックスタイルをサポートしています。
  タブ ラベル スタイル	ここでタブ ラベルのフォントサイズ、デフォルト状態スタイル、選択済み状態スタイルを設定できます。
  TAB 内部の可視化カードの境界線を表示	TAB 内の可視化カードの境界線を表示するかどうかを設定します。色の選択をサポートしています。
  タブ内のコンポーネントのカスタム間隔	このオプションを選択すると、タブ内のコンポーネント間の間隔にカスタム値を指定できます。このオプションが選択されていない場合、間隔はダッシュボードの行と列の間隔設定によって決まります。 説明 値は PC の場合は -32 から 32 px、モバイルデバイスの場合は 0 から 20 px の範囲で指定できます。

• クエリ制御領域 で、次のパラメーターを構成します。

  

  チャート構成項目	説明
  罫線	クエリ コントロール ボーダー を表示するかどうかを設定します。色の選択をサポートしています。
  インタラクティブ ボタン	インタラクティブボタン の色の設定をサポートしています。
  ボタンの境界線の半径	ボタンの角半径の設定をサポートしています。
  条件の間隔	条件の間隔の設定をサポートしています。
  条件名	条件名 のテキストスタイルの設定をサポートしています。
  選択ボックス スタイル	選択ボックススタイルの設定をサポートしています。
  背景色	選択ボックスの 背景色 の設定をサポートしています。
  罫線	選択ボックスの罫線の太さと色を設定できます。
  境界線の半径	選択ボックスの 境界線の角丸 を設定できます。
  テキスト	選択ボックスのテキストの色とフォントサイズの設定をサポートしています。

  説明

  クエリ コントロール エリアの構成項目は、すべてのグローバル コントロールに適用されます。 ただし、個々のクエリ コントロールにカスタムの スタイル構成 がある場合、ここの構成は有効になりません。 たとえば、クエリ コントロール エリアの選択ボックス スタイルが塗りつぶしに設定されているが、クエリ コントロール A のスタイル設定で選択ボックス スタイルがワイヤーフレームに設定されている場合、クエリ コントロール A の選択ボックス スタイルはワイヤーフレームになり、クエリ コントロール エリアの選択ボックス スタイル構成項目はクエリ コントロール A には適用されません。

• 構成が完了したら、[保存] をクリックします。