MotionBoardで"ちょっとだけ"集計表をオシャレにしてみた

#最初に
MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/04c48011-e65b-88dd-f666-a838819636e4.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e777e485-f3d0-3dc7-57e2-ddddd2df8860.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7bc601e7-ace8-cafa-2313-c2d66b9de500.gif" width=60%>
綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
[MotionBoard　体験デモについて（公式HPより）](https://www.wingarc.com/product/motionboard/demo/index.html)

<details><summary>【MotionBoardとは】</summary><div>
様々なデータソースからデータをあつめ、１つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657180/877897e8-35d1-b055-a80c-b9051866bc38.png" width=60%>
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社　MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
</div></details>


MotionBoardは他のBIツールよりも、集計表に関しての表現が多彩です。
日本はExcel文化が根付いていて、凝りに凝ったExcelレポートが企業に多数存在します。
そんな慣れ親しんだExcelの帳票も、製造元が日本であるMotionBoardだと、かなり近いところまで再現ができます。

今回はその中でも、色合いが細かく設定できる点を紹介していきたいと思います。

まずは下図をごらんください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/13c3364b-c07b-7814-a907-e3429d808163.png)


上はMotionBoardのデフォルトの集計表、下はオシャレにした集計表です。
濃い緑と白、偶数列は灰色でまとめています。
この集計表ですと、達成率を一番見てほしいので、達成率の色を変えています。

手を加えればもっともっとオシャレになりますが、まずはここまでを抑えてみましょう。
こうやって加工をするんだ、という手順をご確認いただけますとうれしいです。

ちなみに、MotionBoardはテンプレート機能がございます。
オリジナルのように手を加えなくても、ちゃっちゃっとこの機能を使っても、きれいになります。
<details><summary>テンプレートの設定方法はこちら</summary><div>
チャートをクリックして、右側に出てくるランチャーから「デザイン設定」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2b2ddd88-221a-7de5-6757-ba38b4e6356a.png)

このテンプレート（集計表だけで50以上あります）の中から、好きなものを選んで、「適用」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/14de920a-9cdc-632d-9805-41396fd07f6b.png)

これでOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/1ec8d853-b3da-ce6f-e5df-e9d80c4ed24f.png)
</div></details>

では細かく見ていきましょう。

#「集計表のスタイル」について
今回のポイントは少ないです。
集計表を右クリックすると「集計表のスタイル」が選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7b65ef56-a80c-1022-dcb2-f67f2f962410.png)

この「集計表のスタイル」はものすごく機能が多く、最初はわかりにくいです。
そのため、ポイントだけを抑えていきましょう。（ぼくも全機能を網羅できていませんorz）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/3e7f047b-9e52-3975-d44a-5787732e9bf5.png)

上のタブを注目してください。

各タブの位置付けは下図のようになります。

|スタイル  |適用場所  |
|---|---|
|基本スタイル  |集計表全体に有効  |
|カスタム行スタイル  |横に細かな設定ができる  |
|カスタム列スタイル  |縦に細かな設定ができる  |
|カスタムセルスタイル  |特定の項目に対して細かな設定ができる  |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b6a5d5a7-bde3-3280-bac7-c6dee5f09645.png)

集計表への影響範囲の順番は
１．基本スタイル
２．行・列スタイル
３．セルスタイル
となります。


ではさっそく基本スタイルから手を入れましょう。
でもその前に、ちょっとだけ色について説明をします。

##カラーリングについて
さて、細かく設定ができるということがご理解いただけたかと思います。
しかし見やすい集計表を作るには、類似色を選んだり、色の数を絞ったり、テクニックを駆使する必要があります。

今回の集計表のカラーリングを整理すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d4feaaf5-5426-9850-a232-14722702aa66.png)

✅　色合いは青系の4色
✅　表の中で一番見て欲しい情報（達成率）に色を付ける
✅　濃い色で網掛けしたら文字は白にする
としています。

基本的に色はたくさん使いすぎず、親和性の高い色を３つか4つにした方がよいです。
今回はこの色を使っているので参考にしてください。

|色  |カラーコード（Hex）  |
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2fe14fe4-068e-5a83-b1c0-2940820f8ea1.png)|#156A80  |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4deeadcf-c4cb-07bf-a397-ea786cfad91c.png)|#2E7E92  |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/419df814-d36e-1f1f-ffe9-f20779895fb0.png)|#8ACDDE  |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/10d3798a-378f-4df8-efe6-3fcd422dd9d9.png)|#CAEAF0  |



##「集計表のスタイル」を触る
今回触るところは
　・基本スタイル
　・カスタム列スタイル
の２箇所になります。

###基本スタイル
さて、タブの中を見てみると、ここも設定項目がとても多いです。
設定の種類は大きく分けて２パターンです。

まずは基本設定項目です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d5610472-d3a4-4d1f-57e5-16fe97d9dfa5.png)
デフォルトのフォントや表の中の線の色などを指定します。
今回は境界線の色を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/c960363b-8093-f7f9-38fa-09dd108f7563.png)






基本情報以降はこの情報の繰り返しです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/53f9016c-785c-8cb6-ea43-116c032c3570.png)

各グループに対しての設定となります。
マニュアルに一覧が載っております。
[集計表スタイルのカスタマイズ](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-b1d892a2-4b7b-d590-b39f-ba5827d981e1.html#UUID-b1d892a2-4b7b-d590-b39f-ba5827d981e1_d38915e41553)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/18252a81-148d-bb9c-5f20-e494446e5bd7.png)

今回の集計表で指定する箇所は下図の部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9b1436b0-e2c7-747e-8087-f777fa4fdcff.png)

設定内容の一覧はこちらです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/86ce3ff7-8b3b-c769-6acd-560ae43a2884.png)


ちょっと設定箇所が多いですが、図と見比べながら進めていきましょう。
参考にもう一度、色の見本を載せます。

|色  |カラーコード（Hex）  |
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2fe14fe4-068e-5a83-b1c0-2940820f8ea1.png)|#156A80  |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4deeadcf-c4cb-07bf-a397-ea786cfad91c.png)|#2E7E92  |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/419df814-d36e-1f1f-ffe9-f20779895fb0.png)|#8ACDDE  |
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/10d3798a-378f-4df8-efe6-3fcd422dd9d9.png)|#CAEAF0  |


###カスタム列スタイル
次は列単位での指定です。
今回は「達成率」を強調色にするために、列スタイルを指定します。

列名に「達成率」と入れて、適用範囲の「列名を含むすべての列に適用する」に ✅ をいれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/75bf3f54-30c9-9e01-436b-3b427602aedd.png)

列名の横の ？ にはヘルプが書かれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/624c479e-2331-1b04-12d7-b94fff25d5d0.png)

こちらに記載の通り、「04月/達成率」とすると、４月の項目のみに変更を加えることができます。
細かいところまで設定ができますね。

その他の設定箇所は集計項目ヘッダーと集計値セル-通常　です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/75abb79f-a626-fc82-2d66-ef7ab034f936.png)


設定は以上となります。

##おわりに
さて、下図のような集計表が出来上がりましたでしょうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/79d603ed-dadd-be2a-3a61-3380e9fe9837.png)

このようにMotionBoardでは集計表のデザインを細かく指定することが可能です。
今回のようなデザインだけでなく、形そのものに手を加えることも可能です。

リンクを貼りますので、興味ある方はご覧いただけますと幸いです。
[MotionBoardのデータ補完＆キーマップ事後計算をつかって集計表を作ってみる](https://qiita.com/Ryo---san/items/b4617bf57b2494290ce4)