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

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

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

ArcGIS Online のサインインおよび BA Web App の起動

演習に入る前に、以下リンクの手順に沿って、ArcGIS Online へのサインインおよび BA Web App の起動を行います。

プロジェクトの作成

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

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

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

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

ここまでの操作で、インフォグラフィックス テンプレートを作成する準備ができました。

テンプレートの選択

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

手順

  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

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

②標準データを使用する方法

続いて BA Web App の標準データを使用した、パネルの作成およびレイアウトの調整を行います。本手順では、国勢調査の人口総数と人口密度を使用します。

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

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

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

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

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

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

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

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

ここまでの操作で、BA Web Appの標準データを使用してパネルの作成およびレイアウトの調整等を行いました。

③マップの追加

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

手順

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

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

タイトル・サイト名・アイコンの追加

本手順ではタイトル・マイ サイト・アイコンを記載したパネルを作成します。

①タイトルの追加

手順

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

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

②サイト名の追加

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

手順

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

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

③アイコンの追加

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

手順

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

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

デザインの編集

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

①カラー テーマ・各アイコンのデザイン編集

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

手順

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

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

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

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

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

②チャートのデザイン編集

「年代別人口の構成割合」のチャート内の色を変更します。

手順

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

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

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

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

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

手順

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

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

  1. 「セル値 95 未満」の [スタイルの変更] をクリックします。
  2. [テキストの色] をクリックし、下記の画像内の赤枠で囲った色 (黄緑色) を選択します。

  3. 「セル値 105 より大きい」の [スタイルの変更] をクリックします。
  4. 同様の手順で、下記の画像内の赤枠で囲った色 (水色) を選択します。
  5. [適用] をクリックします。
  6. 赤枠内のセルをクリックします。
  7. Shift キーを押しながら下記の画像の赤枠で囲ったセルをクリックします。
  8. 「スパナ アイコン」をクリックします。
  9. [枠線] をクリックします。
  10. 赤枠内の [色] をクリック、白色を選択します。

  11. [描画] をクリックします。
  12. こちらのウィンドウを閉じます。
  13. [適用] をクリックします。

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

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

テンプレートの保存

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

手順

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

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

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

手順

  1. [マップ] タブをクリックします。
  2. 右上の [アドレスまたは位置の入力] で「円町駅」と入力し、Enter キーを押します。
  3. マップが移動し、京都府の円町駅上にピンがプロットされるので、[サイトの作成] をクリックします。
  4. [リング] タブで、半径 1 キロメートルと設定し、[適用] をクリックします。
  5. 表示されたポップアップから [インフォグラフィックス] を選択します。
  6. [実行するインフォグラフィックスの選択] プルダウン リストの [マイ インフォグラフィックス] の中から「人口・年代別人口プロファイル」を選択し、[インフォグラフィックスの実行] をクリックします。

[実行するインフォグラフィックス] が表示されない場合、初期設定を開き、以下の通り [開く前にサイト メニューで～] のオプションを有効にして保存します。

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

インフォグラフィックス内の [バーは比較対象を示しています] プルダウンをクリックすると、比較対象を「市区町村」、「都道府県」、「全国」に変更することが可能です。

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

まとめ

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