Power BI公式サンプルの「Intro」画面を作る方法：魅力的な導入画面の作り方１／２

はじめに

Microsoft の Power BI レポート公式サンプル売り上げと返品のサンプル レポート (.pbix ファイル)をダウンロードして、ビジュアライズテクニックを学ぼうと思って、見ていました。
なるほど、この画面みたいに、前置きがあるとかっこいいなと、「Intro」というイケてる画面を参考にさせていただこうと、解析に取り組んだのですが、どうやって作ったのか、全然分かりませんでした。
この記事では、「Intro」画面を作り込む過程を一から解説します。

「Intro」画面：

長いため、２記事に分けました。

●今回の記事
・はじめに
・「Intro」のページ概要
・データの取り込み
・テーマを参照
・背景壁紙
・説明文言
・Download PBIX ボタン
・縦棒
・輪っか

●次回「Power BI公式サンプルの「Intro」画面を作る方法：魅力的な導入画面の作り方２／２」
・Design Factors
・ブックマーク
・縞模様の行の色

最初の画面はよくある利用規約の画面で、「Intro」は二番目の画面になります。

Power BI とは？とかの説明は省略します。

本記事では、"Microsoft の Power BI レポート公式サンプル" について、「Intro」のページ以外のことについて、まったく触れていません。また、「Intro」のページにデータビジュアライズのテクニックは含まれませんが、この記事に出てくる手法がデータビジュアライズのヒントとなる可能性はあります。

Microsoft Power BI Desktop

バージョン: 2.116.622.0 64-bit (2023 年 4 月)

サンプルデータ：Sales_20_26_20Returns_20Sample_20v201912.pbix

で確認しました。バージョンにより、状況が異なる可能性があります。

「Intro」のページ概要

構成としては、大まかに以下になります。

・背景壁紙
・説明文言
・Download PBIX ボタン
・縦棒
・輪っか
・Design Factors

説明文言の日本語訳：

このスケートボード会社のインタラクティブな販売および返品分析ダッシュボードを使用すると、データを掘り下げて、販売と返品に影響を与えるすべての要因を調べることができます。

また、さまざまな地域でどのタイプの製品が最も人気があるかを分析し、マーケティング活動を集中させる領域に関する洞察を提供します。

このレポートには、ユーザーが使いやすいインターフェイスで大量のデータを理解できるようにする Power BI 機能が読み込まれています。この Power BI レポート内に Power Apps を統合することで、ユーザーはデータからインサイト、アクションへと迅速に到達できます。

データの取り込み

新規レポート作成前にデータをエクセルで作成しておきます。

サンプルのデータビューを開いて、
Details テーブルをクリック > 右クリック > テーブルのコピー をクリック します。

エクセルに貼り付けます。

同じ要領で、Tooltip Info テーブル も同じエクセルブックに貼り付けます。

この時、Empty 列は、削除しておきます。
また、シート名を Details、 Tooltip Info としておきます。

ファイル → 新規 → Excel からデータをインポートする
にて、先ほどのブックを指定します。

データビュー画面で、
Tooltip Info テーブル選択 → 右クリック → クエリの編集
で Power Query エディター を開いて、
変換 → １行目をヘッダーとして使用 をクリックします。
（一番上の行が見出し行として認識されませんでした。）

ホーム → 閉じて適用 をクリックします。

ここで、Tooltip Info テーブルに Empty 列を作成します。Empty 列は、一律 " " が入っている列になります。

データビュー画面で、新しい列 をクリックして、式入力欄に
Empty = " "
と入力します。

エンターで適用されて、Empty 列が作成されます。

これにて、データの準備は完了です。

テーマを参照

レポートビューの作成に入るのですが、その前に、サンプルレポートがテーマでパレット色のレパートリーを変更していますので、サンプルレポートのテーマ情報をエクスポート、インポートします。

テーマエクスポート

サンプルの Sales_20_26_20Returns_20Sample_20v201912.pbix を開いて、
表示 > テーマ > 現在のテーマのカスタマイズ をクリックします。

テーマの更新 > 適用 をクリックします。

表示 > テーマ > 現在のテーマを保存 をクリックします。

テーマ読み込みエラーについて

テーマをそのまま新規レポートの方で読み込もうとすると、エラーになります。
テーマをインポートできません。レポート テーマの JSON ファイルに問題があります。[詳細] を選択して、問題のトラブルシューティングを行います。

詳細：

#/visualStyles/barChart/*/categoryAxis/0/position must be string (type; matching schema #/properties/visualStyles/properties/barChart/properties/*/allOf/1/properties/categoryAxis/items/properties/position/type)
#/visualStyles/barChart/*/categoryAxis/0/position must be equal to one of the allowed values (enum: 'Left' ,'Right'; matching schema #/properties/visualStyles/properties/barChart/properties/*/allOf/1/properties/categoryAxis/items/properties/position/enum)
#/visualStyles/barChart/*/valueAxis/0/axisScale must be string (type; matching schema #/properties/visualStyles/properties/barChart/properties/*/allOf/1/properties/valueAxis/items/properties/axisScale/type)
#/visualStyles/barChart/*/valueAxis/0/axisScale must be equal to one of the allowed values (enum: 'linear' ,'log'; matching schema #/properties/visualStyles/properties/barChart/properties/*/allOf/1/properties/valueAxis/items/properties/axisScale/enum)
#/visualStyles/barChart/*/valueAxis/0/labelDisplayUnits must be integer (type; matching schema #/definitions/labelDisplayUnits/type)
#/visualStyles/barChart/*/valueAxis/0/labelDisplayUnits must be equal to one of the allowed values (enum: '0' ,'1' ,'1000' ,'1000000' ,'1000000000' ,'1000000000000'; matching schema #/definitions/labelDisplayUnits/enum)
#/visualStyles/barChart/*/valueAxis/0/labelPrecision must be integer (type; matching schema #/properties/visualStyles/properties/barChart/properties/*/allOf/1/properties/valueAxis/items/properties/labelPrecision/type)
#/visualStyles/barChart/*/labels/0/labelDisplayUnits must be integer (type; matching schema #/definitions/labelDisplayUnits/type)
#/visualStyles/barChart/*/labels/0/labelDisplayUnits must be equal to one of the allowed values (enum: '0' ,'1' ,'1000' ,'1000000' ,'1000000000' ,'1000000000000'; matching schema #/definitions/labelDisplayUnits/enum)
#/visualStyles/columnChart/*/categoryAxis/0/axisScale must be string (type; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/categoryAxis/items/properties/axisScale/type)
#/visualStyles/columnChart/*/categoryAxis/0/axisScale must be equal to one of the allowed values (enum: 'linear' ,'log'; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/categoryAxis/items/properties/axisScale/enum)
#/visualStyles/columnChart/*/categoryAxis/0/axisType must be equal to one of the allowed values (enum: 'Scalar' ,'Categorical'; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/categoryAxis/items/properties/axisType/enum)
#/visualStyles/columnChart/*/valueAxis/0/position must be string (type; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/valueAxis/items/properties/position/type)
#/visualStyles/columnChart/*/valueAxis/0/position must be equal to one of the allowed values (enum: 'Left' ,'Right'; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/valueAxis/items/properties/position/enum)
#/visualStyles/columnChart/*/valueAxis/0/axisScale must be string (type; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/valueAxis/items/properties/axisScale/type)
#/visualStyles/columnChart/*/valueAxis/0/axisScale must be equal to one of the allowed values (enum: 'linear' ,'log'; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/valueAxis/items/properties/axisScale/enum)
#/visualStyles/columnChart/*/labels/0/labelOrientation must be integer (type; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/labels/items/properties/labelOrientation/type)
#/visualStyles/columnChart/*/labels/0/labelOrientation must be equal to one of the allowed values (enum: '0' ,'1'; matching schema #/properties/visualStyles/properties/columnChart/properties/*/allOf/1/properties/labels/items/properties/labelOrientation/enum)

現在では、スキーマが変わったらしく、修正が必要です。

テーマファイル修正

修正方法が間違っているかもしれませんが、読み込めて、今回の目的を達成したため、ヨシ！としました。

テーマファイルをテキストエディタで修正します。

テーマファイルの中身は、JSON テキストですが、最初、一行で書かれているため、「JSON 整形」でググって出てくるサイトで整形しました。整形したまま読み込ませても問題ありません。

修正内容は、以下です。

/visualStyles/barChart/*/categoryAxis/0/position
/visualStyles/barChart/*/categoryAxis/0/position
/visualStyles/columnChart/*/valueAxis/0/position
/visualStyles/columnChart/*/valueAxis/0/position
削除

/visualStyles/barChart/*/valueAxis/0/axisScale
/visualStyles/barChart/*/valueAxis/0/axisScale
/visualStyles/columnChart/*/categoryAxis/0/axisScale
/visualStyles/columnChart/*/categoryAxis/0/axisScale
/visualStyles/columnChart/*/valueAxis/0/axisScale
/visualStyles/columnChart/*/valueAxis/0/axisScale
削除

/visualStyles/barChart/*/valueAxis/0/labelDisplayUnits
0 に修正

//visualStyles/barChart/*/labels/0/labelDisplayUnits
"3" → 1000000 に修正

//visualStyles/barChart/*/valueAxis/0/labelPrecision
0 に修正

//visualStyles/columnChart/*/categoryAxis/0/axisType
"Continuos" → "Categorical" に修正

/visualStyles/columnChart/*/labels/0/labelOrientation
"vertical" → 1 に修正

テーマインポート

新規レポートのレポート ビューで、
表示 > テーマ > テーマを参照 をクリックします。
ここで、先ほど修正したテーマファイルを指定します。

背景壁紙

背景壁紙を取り込みます。

背景壁紙の画像データですが、サンプルの Sales_20_26_20Returns_20Sample_20v201912.pbix から取り出します。
Sales_20_26_20Returns_20Sample_20v201912.zip とリネームすると、普通に zip ファイルとして展開できます。
展開後の
Report/StaticResources/RegisteredResources/BACKGROUND-0111693359225616518.png
が壁紙画像ですので、これを使います。

以下、壁紙画像設定までの操作内容と各項目の設定内容です。
操作内容
設定値
です。以降、同様にこの書き方とします。
ここに書かれていない項目は、デフォルトの設定から変更しないことを意味します。

視覚化 > レポート ページの書式設定 > ページ情報 > 名前
Intro

視覚化 > レポート ページの書式設定 > ページ情報 > Q&A を許可する
ON

視覚化 > レポート ページの書式設定 > キャンバスの設定 > 型
カスタム

視覚化 > レポート ページの書式設定 > キャンバスの設定 > 高さ
760

視覚化 > レポート ページの書式設定 > キャンバスの設定 > 幅
1280

視覚化 > レポート ページの書式設定 > キャンバスの背景 > イメージ
BACKGROUND-0111693359225616518.png

視覚化 > レポート ページの書式設定 > キャンバスの背景 > イメージのサイズ調整
自動調整

視覚化 > レポート ページの書式設定 > キャンバスの背景 > 透過性
0

視覚化 > レポート ページの書式設定 > 壁紙 > カラー
#CECEDB、 テーマの色 2

ここまでの状態です。

説明文言

説明文言部分を作成します。

挿入 > テキストボックス
でテキストボックスを配置して、とりあえず、文言をサンプルからコピー＆ペーストしておきます。

文字の色が白いため、選択しないと見えません。

テキストボックスごとコピー＆ペーストすれば良いのでは？というツッコミは無しです。

文言のフォーマットの話を省略するため、サンプルからコピー＆ペーストしています。

追加したテキストボックスを選択して、以下のように設定します。

書式 > 全般 > プロパティ > サイズ > 高さ
269

書式 > 全般 > プロパティ > サイズ > 幅
544

書式 > 全般 > プロパティ > 位置 > 横
81

書式 > 全般 > プロパティ > 位置 > 縦
305

書式 > 全般 > 効果 > 背景
OFF

ここまでの状態です。

Download PBIX ボタン

Download PBIX ボタン部分を作成します。

挿入 > ボタン > 空白
で空白のボタンを配置して、以下のように設定していきます。

書式 > 全般 > プロパティ > サイズ > 高さ
50

書式 > 全般 > プロパティ > サイズ > 幅
193

書式 > 全般 > プロパティ > 位置 > 横
81

書式 > 全般 > プロパティ > 位置 > 縦
560

書式 > 全般 > タイトル
ON

書式 > 全般 > タイトル > テキスト > fx
データ形式スタイル：フィールド値
基準にするフィールド：最初の Empty（Tooltip Info の Empty 列）
概要：第１

この設定により、ボタンの上に空白の隙間を作ります。ただ、必須ではなく、なぜ、Empty 列を読み込ませているのか意図が分かりませんでした。

書式 > 全般 > タイトル > テキストの色
灰色　白、 20% 暗い

書式 > ボタン > シェイプ > 丸い角
30

書式 > ボタン > スタイル > 設定を適用する > 状態
既定

書式 > ボタン > スタイル > テキスト
ON

書式 > ボタン > スタイル > テキスト > テキスト
Download PBIX

書式 > ボタン > スタイル > テキスト > フォントの色
黒

書式 > ボタン > スタイル > テキスト > パディング
右0

書式 > ボタン > スタイル > フィル
ON

書式 > ボタン > スタイル > フィル > 色
白

書式 > ボタン > スタイル > フィル > 透過性
0

書式 > ボタン > スタイル > 罫線
OFF

書式 > ボタン > アクション
ON

書式 > ボタン > アクション > アクション > 型
Web URL

書式 > ボタン > アクション > アクション > Web URL
https://go.microsoft.com/fwlink/?linkid=2113239

書式 > ボタン > スタイル > 設定を適用する > 状態
ポイントしたとき

ポイントしたとき （マウスがボタン上にホバーした時）どうなるかの設定に切り替えます。

書式 > ボタン > スタイル > フィル > 色
#9BEF0A

書式 > ボタン > スタイル > 設定を適用する > 状態
押したとき

押したとき （ボタンをクリックした時）どうなるかの設定に切り替えます。

書式 > ボタン > スタイル > フィル > 色
黒

書式 > ボタン > アクション > ツールヒント

は、最初から ON です。

この状態の場合、マウスを当てたときに、

「Ctrl キーを押しながらここをクリックして、リンク先をフォローします」

と表示されます。

ここまでの状態です。

縦棒

ただの白い縦棒なのですが、図形 > 線 ではなく、どうやってやっているのか分かりませんでした。

答えは、単純で、旧バージョンの 図形 > 折れ線 でした。

画像は、PBIDesktopSetup_x64-17 December 2019-2.76.5678.782 で確認しました。（旧バージョンでサンプルファイルを読み込むことはできませんでした。）

旧バージョンの 図形 > 折れ線 を配置する方法が無いため、ここでは、図形 > 線 を配置して進めていきます。

ここでは、図形 > 線
を配置して、以下のように設定していきます。

挿入 > 図形 > 線

書式 > 全般 > プロパティ > サイズ > 高さ
213

書式 > 全般 > プロパティ > サイズ > 幅
36

書式 > 全般 > プロパティ > 位置 > 横
711

書式 > 全般 > プロパティ > 位置 > 縦
514

書式 > 全般 > プロパティ > パディング
上11
下9

書式 > シェイプ > 回転 > シェイプ
90

書式 > シェイプ > スタイル > 罫線 > 色
白

ここまでの状態です。

輪っか

輪っかは、押すとアクションが起きるもので、ボタンで作られています。ボタンは、四角いため、丸い角を 100 にして、輪っか状にしています。真ん中の点は、テキストの ・ です。

挿入 > ボタン > 空白
を配置して、以下のように設定していきます。

● 上の輪っか
書式 > 全般 > プロパティ > サイズ > 高さ
39

書式 > 全般 > プロパティ > サイズ > 幅
39

書式 > 全般 > プロパティ > 位置 > 横
709

書式 > 全般 > プロパティ > 位置 > 縦
501

書式 > ボタン > シェイプ > 丸い角
100

書式 > ボタン > スタイル > 設定を適用する
既定

書式 > ボタン > スタイル > テキスト
ON

書式 > ボタン > スタイル > テキスト > テキスト
・

書式 > ボタン > スタイル > テキスト > フォント
Segoe UI 16

MSDN(日本語)の方では発音はシーゴと明記されています。 Segoe UI (発音は "シーゴ") は、Windows のシステム フォントです。

書式 > ボタン > スタイル > テキスト > フォントの色
白

書式 > ボタン > スタイル > 罫線 > 色
白

書式 > ボタン > スタイル > 罫線 > 幅
5

書式 > ボタン > スタイル > 設定を適用する
ポイントしたとき

ポイントしたとき （マウスがボタン上にホバーした時）どうなるかの設定に切り替えます。

書式 > ボタン > スタイル > 罫線 > 色
#9BEF0A

書式 > ボタン > アクション
ON

クリックした時、ブックマークを呼び出すようにしますが、今は、とりあえず、ON にするだけにします。（後の手順に出てきます。）

書式 > ボタン > アクション > ツールヒント
Design Factors

サンプルのレポートの場合、ボタンが重なって配置されていて、非表示の方にツールヒント、アクションが設定されています。なぜそうなっているのか分かりませんでしたので、単体ボタンの設定としています。

● 真ん中の輪っか

一番下の輪っかも同様の設定、手順になりますので、今回、省略します。

挿入 > ボタン > 空白

書式 > 全般 > プロパティ > サイズ > 高さ
39

書式 > 全般 > プロパティ > サイズ > 幅
39

書式 > 全般 > プロパティ > 位置 > 横
709

書式 > 全般 > プロパティ > 位置 > 縦
597

書式 > ボタン > シェイプ > 丸い角
100

書式 > ボタン > スタイル > 設定を適用する
既定

書式 > ボタン > スタイル > テキスト
ON

書式 > ボタン > スタイル > テキスト > テキスト
・

書式 > ボタン > スタイル > テキスト > フォント
Segoe UI 40

書式 > ボタン > スタイル > テキスト > フォントの色
白

書式 > ボタン > スタイル > 罫線 > 色
白

書式 > ボタン > スタイル > 罫線 > 幅
5

書式 > ボタン > スタイル > 罫線 > 透過性
100

書式 > ボタン > スタイル > 設定を適用する
ポイントしたとき

書式 > ボタン > スタイル > テキスト > フォント
Segoe UI 16

書式 > ボタン > スタイル > 罫線 > 色
#9BEF0A

書式 > ボタン > スタイル > 罫線 > 透過性
0

書式 > ボタン > アクション
ON

クリックした時、ブックマークを呼び出すようにしますが、今は、とりあえず、ON にするだけにします。（後の手順に出てきます。）

書式 > ボタン > アクション > ツールヒント
Questions & Experience

わずかに見えている謎の横線ですが、丸の下の方が見えているようです。

書式 > サイズ > 高さ

38 で横線が消えます。

これで、以下の動画のようになります。

続きは、
次回「Power BI公式サンプルの「Intro」画面を作る方法：魅力的な導入画面の作り方２／２」へ！