【Tableau】VIZの垢抜けスキル①〜シートの背景透過〜

この記事は[Advent Calendar 2021 Tableau](https://qiita.com/advent-calendar/2021/tableau2021)の1日目の記事となります。

12月はTips情報をいくつか更新していく予定です。
本日はVIZの垢抜けスキルとして、**シートの背景透過**についてご紹介します。

どんな事かイメージが湧きにくい方も居ると思うので、イメージは以下です。

![女性への暴力問題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/75708a69-f41f-f117-08b3-034f12d5ac5e.png)
上記VIZのデータソース元：MakeOverMondayの[2020W10_Violence Against Women & Girls](https://www.un.org/en/observances/ending-violence-against-women-day"MakeOverMonday")

ここで何をしているかというと、
**女性の画像を背景とし、その上に透過したワークシート(線グラフ)を重ねて置いてます。**

では実際の手順を解説していきます。
※私の解説＆キャプチャはTableauDesktopのバージョン2020.4、PCはMacを使ってます。
バージョンが異なったりPCがWindowsの場合、操作が一部異なる場合もあるかもしれません。
###STEP①
ダッシュボードを開き右下の「イメージ」をダブルクリック（もしくはドラック＆ドロップ）
イメージオブジェクトの編集と表示されるので、「イメージを選択」から画像を選択します。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f313533373134322f36646632383262322d353836342d333938652d656231612d3233366364336131656639372e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/01d252a1-8e9c-a54c-934d-66cd0bbd795a.png)

画像が表示されます。
必要であればここで画像のサイズを引き伸ばしたり調整してください。
![スクリーンショット 2021-12-01 23.35.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/7265271b-2370-00aa-54f4-54827e4e2b78.png)

###STEP②
そして作成したワークシート（ワークシートの作成手順はここでは解説しません）をダブルクリック（もしくはドラック＆ドロップ）し、ダッシュボードに挿入します。

![スクリーンショット 2021-12-01 23.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/e567f20e-4b94-14d2-106b-96c7bf374216.png)

###STEP③
ワークシートを背景画像の上に持ってくるために、ワークシートの▼をクリックし、「浮動」を選択します。

![スクリーンショット 2021-12-01 23.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/f40d5d34-4fc1-c5e1-1406-e5beb9b5944a.png)

これで背景画像の上にワークシートを重ねることが出来るようになります。
![スクリーンショット 2021-12-01 23.45.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/dc9a107d-67c9-60f0-2ecb-ae1d8af1a2c3.png)

###STEP④
次にワークシート自体を透過していきます。
対象のワークシートを開き書式設定の「網掛け」を選択します。
![スクリーンショット 2021-12-01 23.49.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/946d24aa-9e11-e5c8-bc42-f7137e498b64.png)

ワークシートの色はデフォルトで白に選択されているかと思います。
![スクリーンショット 2021-12-01 23.52.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/8d39c9e6-273b-dd5c-0fde-ffd6fe75f591.png)

ここの色を「なし」に変更します。
![スクリーンショット 2021-12-01 23.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/6bc30ab7-1966-1c8a-cd2e-b73e37d7adf7.png)

ダッシュボードに戻りレイアウトを調整して完成です。
![スクリーンショット 2021-12-01 23.56.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/ee34e01a-0d6c-0a81-313c-b1215a315fc2.png)

ちなみに背景を画像ではなく、背景色を設定したい場合には、ダッシュボードの「空白」ダブルクリック（もしくはドラック＆ドロップ）
![スクリーンショット 2021-12-01 23.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/fd26d0a3-0a35-8e2f-ffcf-a66253edc3f7.png)

レイアウトのバックグラウンドで色を選択し完成です。
![スクリーンショット 2021-12-02 0.01.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/7c43104a-6ff3-5e88-6a6c-18e01a69f5fa.png)

不透明度も変更できます。（ワークシート側のチャートの不透明度も変えられます）
![スクリーンショット 2021-12-02 0.02.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1537142/0e60c4d7-b1b7-9b48-f44d-d2040f8d163c.png)



注意点としては画像や色のインパクトは強いので、本来目立たせたいチャートに目が行き辛くなるケースがあります。
しかし上手く使えばデザインに遊び心が出て、Viewerが触りたくなるようなビジュアライズが出来ると思っているので私もバランスを見つつ活用してます。

今回の背景透過を活用したVIZは以下のリンクに投稿してます。
https://public.tableau.com/app/profile/misaki.takatsu/viz/MoM_2020W10_ViolenceAgainstWomenGirls/sheet0