Qlik Trainingブログ

  • 可視化
2021.08.30

色合いが統一されたスタイリッシュなアプリを目指そう!

色合いが統一されたスタイリッシュなアプリを目指そう!

アプリ開発の際、気がつくと思ったよりたくさん色を使っていて全体を見たいときに画面が煩雑に見えてしまう…なんてことはありませんか?
今回は、そんなときに便利な色の統一方法を3つに分けてご紹介します。

目次

※本記事は バージョン「May 2021」の[SaaS]で作成しています。

Qlik Senseでの色指定とは?

Qlik Senseでは取り込んだデータの値や数式に任意の色を指定することができます。
例えば、野球の球団ごとに勝利数を棒チャートで表現するとき、何も設定しなければこのようなチャートができあがります。

ここから、項目「球団」の値である各球団名に色を割り当てると、以下のように各球団のポジションを一目で確認しやすくなります。

また、視点を変えて、勝利数が40を超えている球団を確認したいというときは、数式である勝利数に対して40を超えたときに表示する色を設定することで、このようにみることができます。

このように、任意の値や範囲に対してあらかじめ色を指定することによって、色そのものに意味が生まれるため、参照ユーザも一目でデータを把握しやすくなります。
さらに、色をあらかじめ設定しておくことで、複数人でアプリ開発をしても色が統一された状態のスマートな分析画面を作成しやすくなります。

次の章から実際に色を設定してみましょう!

自動で色を割り当てる方法

まずはQlik Senseに自動で色を割り当てる方法をご紹介します。
先ほどの棒チャートを例に、球団に自動で色を割り当てていきます。
1.色をつけたいチャートを選択し、画面右部プロパティパネルの[スタイル]-[色と凡例]タブを開き、[色]を「自動」から「カスタム」に変える。
 ※もし[スタイル]タブがないときは右上部にある[推奨チャート]をオフにする

2.すぐ下に表示されたドロップダウンリストから[軸ごと]を選択し、[軸の選択]に色を反映したい軸[球団]を選択する。

3.アプリの他のチャートにも同じ色を割り当てたい場合は、[固定色]にチェックを入れる。その後、各チャートにも1,2の設定を同様にする。
 ※[固定色]にチェックを入れていない場合、データ分析時の選択によって球団の色が変  動します。また、ほかのチャートとも色は連動しません。
 ※色は12種または100種からランダムに割り当てられます。

項目の値に色を指定する方法

自動で割り当てるのではなく自分で色を決めたい!というときは、マスターアイテムから好きな色を指定することができます。
1.左部アセットパネルの[マスターアイテム]-[軸]タブの[新規作成]より、[球団]のマスターアイテムを作成する。

2.作成後、[球団]を選択すると出てくる吹き出しより、鉛筆マークを選択して編集画面を表示する。

3.[値の色]タブを開くと、値ごとに色が表示される

4.値右側の色がついている箇所をクリックし、指定したい色を選択した後、編集画面右下の[保存]ボタンで設定を保存する。

これで球団ごとに色を指定することができました。あとはこの色をチャートに反映していきます!

5.色指定をしたマスターアイテムを使用してチャートを作成し、プロパティパネルより[スタイル]-[色と凡例]タブを開き、[色]をカスタムに変更する。

6.すぐ下のドロップダウンリストを[軸ごと]に切り替え、[軸の選択]を[球団]に設定、[ライブラリカラー]をオンにする。

数式における任意の範囲に色を指定する方法

最後に、数式の任意の範囲に対して色を指定する方法をご紹介します。

1.[マスターアイテム]の[新規作成]から、メジャーを作成するポップアップ画面を表示する。

2.数式や名前を設定し、「セグメントカラー」を開く。

3.[セグメントカラー]を[カスタム]、[セグメントフォーマット]を[固定値]を選択し、吹き出しの入力ボックスに範囲の閾値となる勝ち数「40」を入力し、エンターキーで適用する。
 ※3色以上に範囲を分けたい場合は、[限度の追加]をクリックし、同様の操作で値を追加します。

4.赤枠で囲っているバーの色をクリックして各範囲の色を選択し、完了したら右下[作成]ボタンをクリックする。

これでマスターアイテムに登録した数式(メジャー)の色指定が完了しました!
ここから分析画面に配置するチャートに対して設定した色を反映させるには、以下の操作を実施します。

5.マスターアイテムを使用してチャートを作成し、プロパティパネルの[色と凡例]の色を[自動]から[カスタム]に切り替える。

6.カスタムに切替後、下に表示されるドロップダウンリストを[単色]から[メジャー別]に変更し、[メジャーの選択]に先ほど作成した[勝利数]を選択した後に[ライブラリーカラー]をオンにする。

さいごに

いかがでしたか?今回ご紹介した色指定は、より見やすいアプリ開発だけでなく、色を管理するという面でもとても便利な機能です。球団のように軸に色をつけて各データを見やすくするのか、勝利数のように数式に色をつけて各データのポジションを見やすくするのか、色の指定でさまざまな見方の分析画面を作成できることをご理解いただけたかと思います。
視覚的にもデータをとらえやすい画面を目指して、ぜひご活用してみてください!

関連している記事

  • 可視化
2021.08.30

ドリルダウン軸を使って多角的にデータ分析してみよう!

Qlik Senseでは、ユーザのデータ選択に応じて画面が連動して様々な視点で分析が可能です。ですが、それに加えて、1つのチャートで軸の粒度を変えながらデータを見ることができたら、見たいものを絞り込むことができるのでもっと分析が捗ると思いませんか?

  • 可視化
2021.08.12

MLB全体1位の貢献度?大谷翔平選手の打撃成績を分析してみた!

オールスターゲームに出場し、日本人初のMLBホームラン王のタイトルにも期待がかかる

  • 可視化
2021.07.20

ボタンで値の選択やシート移動をやってみよう!

Qlik Senseでは、標準チャートの中に「ボタン」が用意されています。このボタン、皆さんは上手く使いこなせていますか?

ページの先頭へ戻る