Qlik Training Blog

ビジュアライゼーション・分析

デザインが変わると、Qlikをもっと好きになる!綺麗なアプリ作成に役立つカスタムテーマ入門

New

公開日:
ビジュアライゼーション・分析
#Qlik Cloud
#Qlik Sense
#開発者

Qlikのダッシュボードが「地味で社内に活用されない」とお悩みではありませんか?
実は、「カスタムテーマ」をひとつ適用するだけで、時間をかけずに洗練されたデザインに変身します。
以前からある機能ですが、公式ヘルプをAIに共有して作成できるようになり、利用ハードルは大幅に下がりました。
そこで今回は、カスタムテーマの基本活用法から手軽な作成方法まで分かりやすく解説します。

※本記事は「2026年08月時点のQlik Cloud Analytics」で作成しています。

カスタムテーマとは

Qlik Sense/Qlik Cloud Analytics には標準テーマ(Sense フォーカスやSense Breezeなど)が用意されており、切り替えるだけでアプリ全体の雰囲気(背景色、フォント、カラーパレットなど)を一括で変更できます。

そして、このテーマは自分で作成することも可能です。それが「カスタムテーマ」です。自作することで、自社のブランドカラーや特定のデザインルールに合わせたスタイルへ自由に制御できるようになります。

手動で装飾する手間を大幅に削減し、理想的なデザインをすぐに適用できるのが特徴です。


カスタムテーマは、たとえば以下のようなシーンで活用できます!

  • 自社カラーに統一してシステム感・ブランド感を出す

  • 「売上は青」「リスクは黒」などアプリの目的別に色分けする

  • 経営陣向けに文字を大きくするなど、見やすさを最適化する

  • シート右上に会社ロゴを常時表示する

基本の作成方法

カスタムテーマはデザイン定義・設定ファイルを作成します。
それをzip化し管理コンソールにインポートすることで、アプリで適用できるようになります。


つまり、カスタムテーマ作りで大切なのは「必要なファイルを用意すること」です。
ここからは、作成に欠かせない2つの必須ファイル「[テーマ名].qext」と「theme.json」について解説します。

・[テーマ名].qext
qextファイルではカスタムテーマ名やバージョンを定義します。

必須プロパティ

設定例

説明

"name"

"name": "My Custom Theme"

カスタムテーマの名前

"type"

"type": "theme"

Qlikにテーマと認識させるために
常に以下を設定する
"type": "theme"

※参考ヘルプページ
https://qlik.dev/extend/create-custom-themes/custom-themes-getting-started/

<例>
-------------------------------
{
  "name": "My Custom Theme",
  "description": "当社オリジナルのカスタムテーマ",
  "type": "theme",
  "version": "1.0.0",
  "author": "yamada"
}
-------------------------------

<管理コンソールへの反映イメージ>


・theme.json

JSONファイルでは、各ビジュアライゼーションタイプのスタイルを定義します。
ファイル名をtheme.jsonとし、QEXTファイルと同じフォルダに配置します。

プロパティ例

設定例

説明

"dataColors"

"dataColors": { "primaryColor": "#0052CC" }

棒グラフなどの単色(1色のみ)で表示される際の
デフォルト色を指定

"palettes"

"palettes": { "data": [ ... ], "ui": [ ... ] }

軸による色分け(data)や、プロパティパネルのカラーピッカー選択肢(ui)を設定

"scales"

"scales": [ { "type": "gradient", "scale": [ ... ] } ]

メジャーの数値に応じたグラデーション(グラデーションカラー)を設定

※参考ヘルプページ
https://qlik.dev/extend/extensions/extension-api/property-panel-basics/define-properties/themes-properties/

https://qlik.dev/extend/create-custom-themes/custom-themes-getting-started/

<例1:チャートのタイトルと、チャートのデフォルト色を指定>


<例2:チャートの配色を軸ごと、メジャーごとに設定した際に選択できる色を指定>


実は、ご紹介した2つの例(JSONファイル)は、どちらも生成AIに作成してもらったものです。

次は、生成AIを活用する上でのTipsや、CSSファイルを利用した高度な装飾についてもご紹介します。

もっと手軽に・もっと高度に!テーマ作成のヒントと注意点

「コードを書くのが難しそう…」と感じられる方もいらっしゃるかもしれませんが、工夫次第で作成のハードルは大きく下がります。

  • 生成AI(Gemini等)で手軽に作成
    公式ヘルプ(Theme JSON properties 等)の「Copy Page」ボタンで仕様を丸ごとコピーできます。これをGeminiやChatGPTにペーストし、「この仕様に基づいてフォントカラーを〇色にした theme.json を作って」と指示するだけで、専門知識がなくても簡単に作成できます。


  • サードパーティーツール(Sense Theme)の利用
    「Sense Theme」は、画面上で色を選びながらリアルタイムで確認・ZIP出力ができる無料の外部ツールです。有志が作成したテーマも入手できます。
    ※Qlik公式のツールではなくサードパーティ製のため、社内のセキュリティガイドラインをご確認のうえご自身の責任でご活用ください。

  • CSSを利用した高度な装飾(ロゴの配置など)
    theme.json だけでは表現できない「シート右上への会社ロゴの常時表示」などは、style.css を外部ファイルとして呼び出すことで実現できます。
    theme.json 内の customStyles に CSS を登録することで、Qlikの画面全体に独自のスタイリングを適用可能です。
    ※DOM指定はサポート対象外(自己責任)です。Qlikのアップデートにより画面構造が変更され、表示が崩れる可能性がある点にご注意ください。

さいごに

「Qlikの画面を綺麗にするには個別に作り込むしかない」と諦めていた方や、「カスタムテーマは専門知識が必要で難しそう」とハードルの高さを感じていた方も多いのではないでしょうか。

以前はコードの仕様を理解して記述する必要がありましたが、現在はQlik公式ヘルプの仕様をAIに共有して作成をサポートしてもらうことで、心理的にも作業的にもハードルが大きく下がっています。

ダッシュボードが見違えるように整うと、作成者自身のモチベーションが向上するだけでなく、社内ユーザーの「使ってみたい」という意欲を引き出す大きなきっかけになります。
AIという心強いツールも使いながら、ぜひ社内で「使ってみたい!」と思ってもらえるQlikアプリを作っていきましょう!


この記事をシェアする

この記事を書いたスタッフ

著者の顔写真

DX技術本部 DX技術統括部 データ活用基盤技術1部 6課

大山 葵

DX技術本部 DX技術統括部 データ活用基盤技術1部 6課

大山 葵