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

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

プロジェクトの作成

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

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

テンプレートの選択

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

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

パネルの作成・追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

③マップの追加

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

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

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

ヘッダーの追加

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

①タイトルの追加

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

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

②サイト名の追加

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

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

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

③アイコンの追加

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

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

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

デザインの編集

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

①カラー テーマの変更

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

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

3. [アイコン] をクリックします。
   

4. 下記の画像内の赤枠で囲った色 (青緑色) をクリックします。
   
   

5. [適用] をクリックします。

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

②チャートの調整

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

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

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

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

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

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

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

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

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

テンプレートの保存

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

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

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

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

1. [マップ] タブをクリックします。

2. 右上のメニューが [ピンの追加] になっていることを確認して、「円町駅」と入力し、Enter キーを押します。

3. マップが移動し、京都府の円町駅上にピンがプロットされるので、[サイトの作成] をクリックします。

4. [リング] タブで、半径 1 キロメートルと設定し、[適用] をクリックします。
   

5. 表示されたポップアップから [インフォグラフィックス] を選択します。

6. [実行するインフォグラフィックスの選択] プルダウン リストの [マイ インフォグラフィックス] の中から「人口・年代別人口プロファイル」を選択し、[インフォグラフィックスの実行] をクリックします。

インフォグラフィックスが実行され、円町駅から 1km 圏内の人口分布を確認できました。

7. Esc キーを押して、インフォグラフィックスを閉じます。BA Web App を閉じます。

まとめ

本演習では、インフォグラフィックスのカスタマイズの要であるインフォグラフィックス テンプレートへのパネルの作成・配置方法、デザインの編集方法について学びました。