サイトの構築

ArcGIS Hub で、サイトを構築し、そのサイトにマップ、アプリ、調査などのエレメントを埋め込みます。複数のコンポーネントを組み合わせて、公園の改善に関する魅力的な Web サイトを作成します。

サイトの探索

ArcGIS Hub を作成する前に、そのコンポーネントを開いて確認します。

William Land Park Improvement Plan Hub を開きます。
Hub が開きます。
Hub とそのコンポーネントを探索したりクリックしたりします。
ArcGIS Hub では、マップ、アプリ、データセット、ドキュメント、ダッシュボードをまとめたサイトやページを構築し、それらをプロジェクト、イニシアティブ、目標を軸に編成することができます。必要に応じて、イベント、エンゲージメントツール、コラボレーションワークフローなどのフィーチャを追加して、情報の共有、進捗の追跡、他のユーザーとの交流をしやすくできます。
[William Land Park Improvement Plan] を閉じます。

サイトの作成の開始

まず、編集と入力を行えるサイトを作成します。 ArcGIS Hub では構成可能なドラッグアンドドロップカードを取り揃えており、HTML コードを編集してさらにカスタマイズできます。

ArcGIS の組織アカウントにサインインします。
注意:
組織アカウントがない場合は、ソフトウェアアクセスのオプションをご参照ください。
リボンのアプリランチャーをクリックし [Hub] を選択します。
ArcGIS Hub を開きます。
[ワークスペースへようこそ] ウィンドウが表示された場合、[ワークスペースの使用] をクリックします。
ArcGIS Hub ワークスペースの概要ページでは、サイトの作成と管理、コンテンツの追加など、複数の主要なワークフローにアクセスできます。
[作成] をクリックして [サイト] を選択します。
[サイトの作成] ウィンドウが表示されます。
[タイトル] に「William Land Park Improvement Plan」と入力します。
サイトの URL に表示されるサブドメインも追加します。
[サブドメイン] に「william-land-park-improvement」と入力します。
次に、デフォルトのカタログとサイトレイアウトを選択します。カタログにはサイトのコンテンツが含まれており、これをカスタマイズして、サイトの検索バーでユーザーに見つけてほしいコンテンツアイテムを追加することができます。このチュートリアルでは、基本的なカタログを自動的に生成する [カタログをクイックスタート] を使用します。
レイアウトには、サイトを作成するための編集可能なサンプルエレメントをいくつか含むシンプルレイアウトを使用します。
[カタログ] で [カタログをクイックスタート] を選択します。 [サイトレイアウト] で [シンプル] を選択します。
[次へ] をクリックします。
ArcGIS Online のグループとサイトを共有するオプションもあります。ここでは、どのグループともサイトを共有しません。
[作成] をクリックします。
サイトが作成されます。 [カタログをクイックスタート] オプションを選択した後にサイトアイテムを作成すると、ArcGIS Online にグループが作成されます。このグループはサイトのコンテンツの管理に使用できますが、サイトのレイアウトの編集には必要ありません。
確認メッセージの下にある、サイトの [レイアウトの編集] をクリックします。
編集可能な形式でサイトが表示されます。 [シンプル] サイトレイアウトを選択したため、すでにデフォルトのコンテンツがいくつか含まれています。

タイトルセクションの追加

サイトの利用者には、市の公園を頻繁に訪れるユーザーが含まれている可能性があるため、明確かつユーザーにとって使いやすい方法でコンテンツを共有することが目標です。この目標を実現するために、ハイコントラストのタイトルと背景画像を使用したサイトを導入します。まず、サイトの設計に使用する画像をダウンロードします。

[Images] 圧縮フォルダーをダウンロードします。
ダウンロードしたフォルダーを、覚えやすい場所 ([ドキュメント] フォルダーなど) に展開します。
次に、このフォルダー内の画像の 1 つをアップロードして、サイトの上部のバナーとして使用します。 ArcGIS Hub では、コンテンツが行ごとに整理されます。バナーは、サイトの最初の行です。
ArcGIS Hub で、最初の行 (背景画像を含むバナー) にポインターを合わせます。バナーの横にあるツールバーで、編集ボタンをクリックします。
[行] サイドパネルが表示されます。このパネルでは、この行専用の設計オプションを構成します。
[行] サイドパネルの [背景画像] で、[アップロード] をクリックします。 [画像の参照] をクリックします。
展開した [Images] フォルダーを参照します。 [intro_image1] をダブルクリックします。
画像が行の背景画像としてアップロードされます。また、行の透過的な背景色を変更して、画像を補完するフィルターを提供します。
[背景色] に「#6a9ab0」と入力します。
[画像透過率] に「30」パーセントと入力します。
次に、タイトルテキストを編集します。
[Hero Section] というテキストにポインターを合わせます。 [テキスト] ツールバーで、編集ボタンをクリックします。
テキストが編集可能になります。テキストを編集する場合は、テキスト書式設定ツールを使用するか、カスタム HTML および CSS コードを挿入できます。ここでは、後者を実行します。
テキストエディターの下部で、[HTML で編集] をクリックします。
HTML エディターが表示されます。ユーザーにすぐに印象を与えるために、タイトルとバナーを大きくする HTML および CSS を追加します。

[HTML] ウィンドウで、既存のコードを削除し、次のコードを貼り付けます:

<div class="banner-heading" style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Plan</strong></span></div>

[適用] をクリックします。
このサイトには必要ない補足情報を含む、この行のもう 1 つのテキストカードを削除します。
[This hero section is a row] で始まるテキストにポインターを合わせます。 [テキスト] ツールバーで、削除ボタンをクリックします。
[レイアウトからカードを削除] ウィンドウで、[削除] をクリックします。
テキストが削除されます。サイトのタイトルのみがこの行に含まれるようになりました。
リボンの [レイアウトの保存] をクリックします。
変更内容が保存されます。

目的の定義

次に、サイトの目的を定義する情報をテキスト形式で追加し、一般の人々が公園の美化活動に参加する方法についての情報も記載します。選択したサイトレイアウトには、サイトの目的の定義に使用できる行がタイトル行の下に含まれています。

[Section] というヘッダーテキストを含むテキストカードを選択して編集します。
テキストエディターで、既存のテキストをすべて削除します。次のテキストをコピーして書式設定なしで貼り付けます: 「We want your insight on how we can make William Land Park a cleaner, more beautiful space.」
ヒント:
書式設定なしで貼り付けるには、貼り付けたい場所で右クリックして [書式なしテキストとして貼り付け] を選択するか、または Ctrl + Shift + V を押して貼り付けます。
テキストをハイライト表示します。 [スタイル] ボタンをクリックし、[ヘッダー 2] を選択します。
テキストの選択を解除します。 [We] の最初の文字の前にカーソルを置いて Enter を押し、テキストの前に改行を追加します。
ピリオドの後にカーソルを置いて Enter を押し、テキストの後に改行を追加します。
[カスタマイズ] サイドパネルで、[画像] カードをテキストカードの左側にドラッグし、[左に挿入] ドロップ領域にドロップします。
[画像] サイドパネルが表示されます。 [Images] フォルダーから画像をアップロードします。
[画像] サイドパネルの [アップロード] をクリックします。 [画像の参照] をクリックします。
[park_image2] をアップロードします。
画像が行に追加されます。画像のサイズを調整して、テキストとの位置関係がよくなるようにします。
画像カードの右端にポインターを合わせ、矢印をクリックします。
画像のサイズが縮小されます。また、画像に代替テキストを追加して、アクセシビリティーを向上させます。
[画像] サイドパネルで、[オプション] を展開します。 [画像の代替テキスト] に「People enjoying their park」と入力します。
最後に、不要な空白スペースをテキストおよび画像の上下に追加しているスペーサーを削除します。
テキストおよび画像の上にある空白スペースにポインターを合わせます。 [スペーサー] ツールバーの削除ボタンをクリックします。
[レイアウトからカードを削除] ウィンドウで、[削除] をクリックします。
同様に、テキストおよび画像の下にあるスペーサーカードも削除します。
リボンの [レイアウトの保存] をクリックします。

ヘッダーの構成

ヘッダーは、サイトの各ページ上部に表示されるため、ブランディングに適した場所です。組織のロゴと、公園およびオープンスペースに関する詳細情報へのリンクを追加します。

[カスタマイズ] サイドパネルで [ヘッダー] をクリックします。
[ヘッダー] サイドパネルで、[ロゴ] をオンにします。
[ロゴ] で [アップロード] をクリックします。 [画像の参照] をクリックします。
展開した [Images] フォルダーを参照し、[cpp-logo] 画像をアップロードします。
サイトの上部、最初の行の上にロゴが追加されます。ヘッダーにサイト名を追加することもできますが、サイト名はすでにタイトル行にあるため、冗長になってしまいます。ヘッダーから名前を完全に削除します。
[名前] をオフにします。
オープンスペースに関する詳細情報を示すサイトへのリンクも追加します。
[メニュー] を展開します。 [リンクの追加] をクリックして [リンク] を選択します。
[リンクの追加] ウィンドウが表示されます。
[リンク名] に「What is Open Space?」と入力します。
[リンク先] に、URL (「https://www.epa.gov/G3/green-streets-and-community-open-space」) をコピーして貼り付けます。
[保存] をクリックします。
追加したリンクが、ヘッダーにあるロゴの横に表示されます。
リボンの [レイアウトの保存] をクリックします。

フッターの構成

フッターは、サイト下部に表示され、サービスの利用条件、行動喚起、ページ上の画像の著作権者などの重要な情報のためのスペースを提供します。最初に、テンプレートのフッターを削除します。次に、オリジナルでないコンテンツの著作権者と、このサイトが学習目的限定であることを示す、シンプルなカスタムのフッターを設計します。

サイドパネルで、[カスタマイズ] をクリックして、[カスタマイズ] サイドパネルに戻ります。
[フッター] をクリックします。
[フッター] サイドパネルで [なし] をクリックします。
デフォルトのフッターが削除されます。次に、新しい行を作成して、必要な情報を追加します。
[フッター] サイドパネルで、[カスタマイズ] をクリックします。 [レイアウト] をクリックします。
[レイアウト] サイドパネルで、[行] カードをサイト下部にドラッグし、[下に挿入] ドロップ領域にドロップします。
サイトの他のコンテンツと区別するために、行のテキストの色と背景色を変更します。
[行] サイドパネルで、[テキストの色] に「#ffffff」と入力します。 [背景色] に「#32444d」と入力します。
次に、テキストを追加します。
[行] サイドパネルで [レイアウト] をクリックし、[レイアウト] サイドパネルに戻ります。
[テキスト] カードを空の行にドラッグし、[行に追加] ドロップ領域にドロップします。
テキストエディターで、次のテキストをコピーして書式設定なしで貼り付けます:
使用許諾
「This is not an official website of Sacramento and is used for demonstration purposes only.
Sacramento Parks data was provided by Sacramento County Open Data.
© Custom Site Template. All photos used on this site are from Esri.」
テキスト行の間にある空白の改行をすべて削除します。
すべてのテキストをハイライト表示します。 [段落] ボタンをクリックし、[中央揃え] を選択します。
[使用許諾] をハイライト表示します。 [スタイル] ボタンをクリックし、[ヘッダー 1] を選択します。
これで [使用許諾] セクションが完了しました。
リボンの [レイアウトの保存] をクリックします。

指示の追加

イニシアティブの目標と、コミュニティーがどのように役立つかを明確に伝えることは、利用者の注目を集めるために重要です。次に、調査に関する説明を入力し、リアルタイムに結果を表示する Web マップを使用して、利用者の回答がどのように影響するかを示します。利用者が洞察を共有するために何をする必要があるか、および利用者の回答によって Web マップがどのように更新されるかを説明します。

導入行とフッター行の間に、別の [行] カードを追加します。
[行] サイドパネルで、[テキストの色] に「#ffffff」と入力します。 [背景色] に「#6a9ab0」と入力します。
[レイアウト] をクリックし、[カスタマイズ] サイドパネルに戻ります。 [テキスト] カードを空の行に追加します。
テキストカードに次のテキストを入力します (またはコピーして貼り付けます): 「Please take the survey below to add your insight to the map. Your responses will help us to identify what and where improvements can be made.」
カーソルを適切な位置に配置して Enter を押し、テキストの前後に空白行を追加します。
すべてのテキストをハイライト表示します。 [スタイル] ボタンをクリックし、[ヘッダー 2] を選択します。
テキストの右に [画像] カードを追加します。
[画像] サイドパネルの [アップロード] をクリックし、[画像の参照] をクリックします。 [map_image4] をアップロードします。
画像の左端にポインターを合わせて矢印をクリックし、画像のサイズを縮小します。画像の高さがテキストの段落とほぼ同じになるまで、画像のサイズを引き続き縮小します。
リボンの [レイアウトの保存] をクリックします。

サイトに手順を追加したことで、このサイトの目的と、次に追加するマップおよび調査の操作方法をユーザーに理解してもらいやすくなります。

コミュニティーからのフィードバックの収集

ArcGIS Hub では、静的なサイトよりもユーザーとの交流を促進する、マップや調査などの ArcGIS コンテンツを統合できます。基本的な情報とブランディングを含むサイトを作成したので、公園改善計画へのコミュニティーの参加を促すためのインタラクティブなエレメントを追加します。

調査の追加

新しい行を作成し、事前構成済みのマップと調査を設定します。この調査は、公園に関するフィードバックを収集することを目的としています。調査結果は Web マップに直接フィードされ、Web マップは即座に更新されて回答を表示します。

[画像] サイドパネルで、[レイアウト] をクリックします。手順行と使用許諾行の間に [行] カードを追加します。
[行] サイドパネルで、[背景色] に「#f5fcfc」と入力します。
スペーサーカードを追加して、行内に追加のスペースを作成します。
[行] サイドパネルで、[レイアウト] をクリックします。
行に [スペーサー] カードを追加します。
次に、調査を追加します。調査は、ArcGIS Survey123 を使用してすでに作成されています。
注意:
Survey123 は、ArcGIS マップやアプリと統合できる、フォームベースのデータ収集プラットフォームです。このチュートリアルでは、調査の作成方法については説明しません。学習する場合は、「ArcGIS Survey123 Web デザイナーの基本操作」チュートリアルをお試しください。
[スペーサー] サイドパネルで、[レイアウト] をクリックします。
[スペーサー] カードの下に、[調査] カードを追加します。
[調査] サイドパネルが表示されます。
[調査の選択] をクリックします。
[調査の選択] ウィンドウが表示されます。自分または他のユーザーが作成した調査を選択できます。
[取得元] で、[世界 (パブリック)] を選択します。
「William Land Parks Improvements Feedback (Esri Tutorials)」を検索します。検索結果のリストで、[William Land Parks Improvements Feedback (Esri Tutorials)] を選択します。
[保存] をクリックします。
[調査] サイドパネルで [埋め込み] をクリックします。
これで、調査がサイトに埋め込まれました。ユーザーが別のウィンドウで開く必要はありません。
ユーザーがスクロールしなくても大部分の質問を確認できるよう、調査の高さを増やします。
[調査] サイドパネルの [オプション] で、[高さ] に「945」と入力します。
リボンの [レイアウトの保存] をクリックします。

Web マップの追加

調査の送信内容をリアルタイムで表示するように事前構成された Web マップも調査に追加します。ユーザーが調査に入力すると、調査の質問に対する回答を含むポイントがマップに追加されます。

注意:

調査と同様に、このチュートリアルで使用するマップはすでに作成されています。 Web マップの作成方法を学習するには、「はじめての ArcGIS Online」チュートリアルをお試しください。

[調査] サイドパネルで、[レイアウト] をクリックします。
調査の右側に [マップ] カードを追加します。
[マップ] サイドパネルが表示されます。
[マップの選択] をクリックします。
[マップの選択] ウィンドウの [取得元] で、[世界 (パブリック)] を選択します。
「Community Feedback for William Land Park (Esri Tutorials)」を検索します。結果のリストで、[Community Feedback for William Land Park (Esri Tutorials)] を選択します。
マップが追加されます。
[保存] をクリックします。
[マップ] サイドパネルの [オプション] で、[タイトル] を「Community Feedback for William Land Park」に変更します。
[高さ (px)] に「900」と入力します。
[マップの凡例の有効化] をオンにします。
サイトで埋め込みマップが構成されます。調査フォームの横に表示されます。
[マップ] サイドパネルで、[レイアウト] をクリックします。
調査とマップの下に [スペーサー] カードを追加します。
リボンの [レイアウトの保存] をクリックします。

サイトの公開

サイトが完了しました。他のユーザーが閲覧できるように公開します。

リボンで [レイアウトの公開] をクリックします。
サイトが公開されます。現時点では共有されていないため、表示できるのはあなただけです。共有する前に表示して、見た目に問題がないことを確認します。
リボンで [表示] をクリックし、[公開済みの表示] を選択します。
公開済みバージョンのサイトに移動します。サイトを表示することで、サイトがユーザーにどのように表示されるかを確認できます。
公開済みのサイトを探索します。サイトのエレメントがすべて正しく表示され、機能することを確認します。
問題を見つけた場合、またはサイトをさらに編集する必要がある場合は、必要に応じて [編集] ボタンをクリックします。
必要に応じて変更を行います。レイアウトを保存して、公開済みバージョンのサイトの表示に戻ります。
サイトに問題がなければ、誰でも表示できるように共有することができます。
公開済みサイトを表示している場合は、[サイトの管理] ボタンをクリックします。
ワークスペースに戻ります。
[ワークスペースへようこそ] ウィンドウが表示された場合、[ワークスペースの使用] をクリックします。
リボンの [共有] をクリックします。
[共有レベル] で、[パブリック] を選択します。
これで、リンクを知っている人は誰でも、サイトを表示できます。
ヒント:
公開済みサイトに戻るには、[サイトの表示] をクリックします。

このチュートリアルでは、ArcGIS Hub を使用してサイトを作成しました。タイトルを追加し、ヘッダーとフッターを変更して、サイトの目的に関する情報を含む行を作成しました。また、インタラクティブなエレメントを提供してコミュニティーの参加を促すための調査および Web マップを埋め込みました。

最初のサイトが完成したら、このサイトを適切な利用者に共有します。このサイトは、ソーシャルメディアを使用してプロモーションするサイトとして独立させることも、組織の他のサイトやページに埋め込むこともできます。

他のチュートリアルについては、チュートリアルギャラリーをご覧ください。

サイトの構築タイトル、ヘッダー、フッターを使用してサイトを設計します。	30 分
コミュニティーからのフィードバックの収集コミュニティーと交流するための Web マップと調査を追加します。	15 分

サイトの構築

コミュニティーからのフィードバックの収集

サイトの探索

サイトの作成の開始

注意:

タイトルセクションの追加

目的の定義

ヒント:

ヘッダーの構成

フッターの構成

指示の追加

調査の追加

注意:

Web マップの追加

注意:

サイトの公開

ヒント:

Configuring an ArcGIS Online Organization

Create Smart Surveys and Forms Using ArcGIS Survey123

Make and Share Web Maps with ArcGIS Online

要件

Outline

サイトの構築

コミュニティーからのフィードバックの収集

サイトの構築

サイトの探索

サイトの作成の開始

注意:

タイトル セクションの追加

目的の定義

ヒント:

ヘッダーの構成

フッターの構成

指示の追加

コミュニティーからのフィードバックの収集

調査の追加

注意:

Web マップの追加

注意:

サイトの公開

ヒント:

使用許諾

フィードバックを送信

このチュートリアルの共有と再利用

詳細​

関連する Esri トレーニング

Configuring an ArcGIS Online Organization

Create Smart Surveys and Forms Using ArcGIS Survey123

Make and Share Web Maps with ArcGIS Online

タイトルセクションの追加

詳細