カスタムテンプレート作成の基本操作

本演習にかかる時間の目安は 30 分程度です。

このチュートリアルでは、インフォグラフィックスパネルの作成・配置方法、デザインの編集方法について学びます。本演習を通じて、以下のようなインフォグラフィックステンプレートを作成します。

プロジェクトの作成

BA Web App は作成した商圏等のデータをプロジェクト単位で管理します。プロジェクトを組織内で共有することで組織または特定のユーザーと共同作業を行うこともできます。

プロジェクトの作成方法については、ガイドツアーのレベル 1「プロジェクトの作成」、管理方法についてはレベル 5「プロジェクトの管理」をご確認ください。

プロジェクトが作成されると画面にマップが表示されます。画面左側に [プロジェクト] ウィンドウが開くので、[閉じる] をクリックして閉じます。

マップに作業データが残っている場合は、画面右側の [マップツールバー] で [マップの消去] ボタンをクリックしマップ上からデータを消去します。

テンプレートの選択

本手順では一からインフォグラフィックステンプレートを作成するため、「空のテンプレート」を選択します。

[レポート] タブ → [レポートの作成] → [インフォグラフィックスの作成] をクリックします。
[空のテンプレート] をクリックします。
[空] のテンプレートにカーソルを合わせ、[開く] をクリックします。

パネルの作成・追加

テンプレート内にチャートやテキスト、テーブルなどを表示するためのインフォグラフィックスパネルを作成・追加します。BA Web App の標準テンプレート内のパネルを使用する方法と標準データから作成する方法があります。

本演習では、人口総数や年代別人口構成の分析に適したパネルを追加します。

①既存テンプレート内のパネルを使用

既存テンプレート内のパネルを再利用する方法をご紹介します。ここでは、標準テンプレートの「人口・世帯プロファイル」内の「年代別人口の構成割合」パネルを使用します。

[ + エレメントの追加] → [別のテンプレートからパネルを追加] をクリックします。
[標準テンプレート] タブ →「人口・世帯プロファイル」にカーソルを合わせ、[開く] をクリックします。
「年代別人口の構成割合」のチャートにカーソルを合わせ、[+ 追加] をクリックし、[パネルの追加] を選択します。
追加したパネルにカーソルを合わせ、[パネルオプション] をクリックします。
[寸法] および [整列と配置] を展開し、以下のように設定します。
- 寸法
  - 高さ (px): 280
  - 幅 (px): 660
- 整列と配置
  - 左 (px): 30
  - 上 (px): 510
同じパネル上で [編集] をクリックします。
画面右下の [チャートオプション] をクリックします。
[横軸] タブをクリックして展開し、タイトルに「年代 (代)」と入力します。
同様に [縦軸] タブを展開し、タイトルに「年代別人口の構成割合 (%)」と入力します。
[凡例] タブを展開し、[位置:] の「右」をクリックします。
画面右下の [適用] をクリックし、編集画面を閉じます。
手順 1～3 と同様の手順で「人口・世帯プロファイル」から「年代別人口の構成割合」のテーブルを追加します
追加したテーブルの [パネルオプション] を開き、以下のように設定します。
- 寸法
  - 高さ (px): 280
  - 幅 (px): 290
- 整列と配置
  - 左 (px): 730
  - 上 (px): 510

ここまでの操作で、標準テンプレートからパネルを追加し、レイアウトの調整を行うことができました。

②独自のインフォグラフィックスパネルを構築

続いて、独自のパネル構築を行います。本手順では、国勢調査の人口総数と人口密度を使用します。

[ + エレメントの追加] → [インフォグラフィックス] をクリックします。
[+ インフォグラフィックス　パネルの作成] ボタンをクリックします。
[インフォグラフィックスパネルの作成] ウィンドウが開いたら、[人口] カテゴリをクリックし、[一般的な変数] から、以下の変数をそれぞれクリックして追加します。
- 2020 人口総数 (国勢調査)
- 2020 人口密度 (平方㎞あたり)(国勢調査)

追加した変数は [選択した変数] ボタンで確認・編集できます。

[次へ] をクリックし、「2020 人口総数」のアイコンをクリックします。
[形状とアイコン] をクリックします。
[すべてのアイコン] のプルダウンリストから「人」を選択し、以下のアイコンのうち任意のものを 1 つ選択します。
「2020 人口総数」の変数にカーソルを合わせ、[スタイルと形式の編集] をクリックします。
[スタイルおよび形式] が開くので [テキストの色] をクリックし、黒色を選択します。
文字サイズを 32px に設定し、[スタイルおよび形式] を閉じます。
「2020 人口総数」の説明にカーソルを合わせ、 [テキストの編集] をクリックします。
「国勢調査：人口総数」と入力します。
[テキストスタイル] で文字サイズを 16px に変更します。
「2020 人口密度 (平方㎞あたり)」のアイコンをクリックし、先ほどと同様の手順で以下のアイコンから任意のものを 1 つ選択します。
「2020 人口密度 (平方㎞あたり)」の変数にカーソルを合わせ、[スタイルと形式の編集] をクリックします。
先ほどと同様の手順で [テキストの色] を黒色に変更し、文字サイズを 32 px に変更します。
「2020 人口密度 (平方㎞あたり)」の説明にカーソルを合わせ、[テキストの編集] をクリックします。
「国勢調査：人口密度 (平方㎞あたり)」と入力し、文字サイズを 16px に変更します。

Shift キーを押しながら Enter キーを押すと、改行できます。

[保存] をクリックします。
タイトルに「国勢調査：人口総数と人口密度」と入力し、保存します。

作成したインフォグラフィックスパネルは [マイパネル] に保存されます。

保存したパネルは、他のテンプレート作成時にも繰り返し使用できます。さらに、作成したパネルを組織内に共有すると、組織内の他の BA Web App ユーザーも [共有パネル] から利用できるようになります。

作成したパネルにカーソルを合わせ [追加] をクリックします。
追加したパネルをドラッグして、以下のように配置します。

ここまでの操作で、独自パネルの作成・追加ができました。

③マップの追加

本手順ではマップの追加およびレイアウトの調整を行います。

[+ エレメントの追加] → [マップ] をクリックします。
[ベースマップ] タブの「地形図」をクリックします。
マップパネルをドラッグし、以下のように配置します。

ここまでの操作で、マップの追加およびレイアウトの調整を行いました。

ヘッダーの追加

本手順ではタイトル・サイト名等を記載したヘッダーパネルを作成します。

①タイトルの追加

[+ エレメントの追加] → [テキスト] → [テキストボックス] をクリックします。
テキストパネル内の [テキストを入力] をクリックし、「人口・年代別人口プロファイル」と入力します。
[テキストスタイル] で文字サイズを 48px に変更します。
赤枠内のボタンをクリックし、テキストを太字にします。
[テキストスタイル] を閉じます。
「人口・年代別人口プロファイル」のテキストパネルをドラッグし、リサイズしながら、以下のように配置します。

ここまでの操作で、タイトルの追加・編集を行いました。

②サイト名の追加

サイト名とは、商圏を作成したときの地点名を指します。本手順ではサイト名を表すパネルを作成し、解析地点を一目で分かるようにします。

[+ エレメントの追加] → [テキスト] → [テキストボックス] をクリックします。
[テキストスタイル] の [設定を増やす] → [＋動的なフィールドまたはノートの追加] をクリックします。
[サイト名] をクリックします。
[テキストスタイル] で文字サイズを 32px に変更します。
[テキストスタイル] を閉じます。
[サイト名] のテキストパネルをドラッグし、リサイズしながら、以下のように配置します。

これまでの操作で、サイト名がインフォグラフィックステンプレート内に表示されるようになりました。

③アイコンの追加

本演習では人に関するアイコンを追加しますが、企業のロゴ画像などの任意画像を設定することも可能です。

[エレメントの追加] → [画像] → [形状とアイコン] をクリックします。
[すべてのアイコン] のプルダウンリストから、「人」を選択します。
「個人」をクリックします。
「個人」アイコンパネルをドラッグし、リサイズしながら、以下のように配置します。

以上で、インフォグラフィックステンプレートの土台が完成しました。

デザインの編集

本演習では、インフォグラフィックステンプレートはカラーテーマの変更および各パネルのデザイン編集を行います。

①カラーテーマの変更

カラーテーマを変更することで、背景やアイコン、チャートなどの色をテンプレート全体で変更します。

[テーマ] をクリックします。
グレースケールのカラーテーマをクリックします。

[テンプレートのプレビュー] 上で、変更後のイメージを確認できます。

[アイコン] をクリックします。
下記の画像内の赤枠で囲った色 (青緑色) をクリックします。
[適用] をクリックします。

以上の手順によりテンプレート全体のカラーテーマの変更が完了しました。

②チャートの調整

「年代別人口の構成割合」チャートの区画との比較の色が目立たないため、色を変更します。

「年代別人口の構成割合」のチャートパネルにカーソルを合わせ [編集] をクリックします。
画面右下の [チャートオプション] をクリックします。
[区画との比較] タブをクリックし、展開します。
下記の画像を参照し、[色] クリックし、白色を選択します。
[適用] をクリックします。

ここまでの操作で、「年代別人口の構成割合」チャート内にある、比較対象の区画を表す系列の色を変更しました。

③テーブルのデザイン編集

「年代別人口の構成割合」テーブル内にある Index 値の色を変更し、枠線の追加を行います。

「年代別人口の構成割合」のテーブルパネルにカーソルを合わせ [編集] をクリックします。
下記の画像の赤枠で囲ったセルをクリックします。
Shift キーを押しながら下記の画像の赤枠で囲ったセルをクリックします。
「スパナアイコン」をクリックします。
[テキストスタイリング] をクリックします。

テキストスタイリングでは、条件に応じたスタイルの変更を行えます。ここでは、Index 値に応じてテキストの色を変更しています。

「セル値 95 未満」の [スタイルの変更] をクリックします。
[テキストの色] をクリックし、下記の画像内の赤枠で囲った色 (黄緑色) を選択します。
「セル値 105 より大きい」の [スタイルの変更] をクリックします。
同様の手順で、下記の画像内の赤枠で囲った色 (水色) を選択します。
[適用] をクリックします。
赤枠内のセルをクリックします。
Shift キーを押しながら下記の画像の赤枠で囲ったセルをクリックします。
「スパナアイコン」をクリックします。
[枠線] をクリックします。
赤枠内の [色] をクリック、白色を選択します。
[描画] をクリックします。
こちらのウィンドウを閉じます。
[適用] をクリックします。

ここまでの操作で「年代別人口の構成割合」テーブル内のIndex 値の色を変更し、白い枠線を表示することができました。

以上で、インフォグラフィックステンプレートが完成しました。

テンプレートの保存

作成したテンプレートを繰り返し使えるようにするため、保存を行います。

画面右下の [保存] をクリックします。
タイトルに「人口・年代別人口プロファイル」と入力し [保存] をクリックします。
インフォグラフィックスの保存後、表示されるダイアログを確認の上、[OK] をクリックします。

ここまでの操作で「人口・年代別人口プロファイル」テンプレートの保存が完了しました。保存されたテンプレートは [マイテンプレート] タブに追加されます。

インフォグラフィックスの実行

[マップ] タブをクリックします。
右上のメニューが [ピンの追加] になっていることを確認して、「円町駅」と入力し、Enter キーを押します。
マップが移動し、京都府の円町駅上にピンがプロットされるので、[サイトの作成] をクリックします。
[リング] タブで、半径 1 キロメートルと設定し、[適用] をクリックします。
表示されたポップアップから [インフォグラフィックス] を選択します。
[実行するインフォグラフィックスの選択] プルダウンリストの [マイインフォグラフィックス] の中から「人口・年代別人口プロファイル」を選択し、[インフォグラフィックスの実行] をクリックします。