ホーム ページの構成

ホーム ページは、組織の Web サイトのランディング ページであり、ユーザー コミュニティへの入口としての役割を果たします。 ホーム ページでは、組織のメンバーや (外部からのアクセスを許可している場合は) 一般ユーザーに役立つリソースやコンテンツを提供しています。 組織のブランディングとミッションを反映し、コミュニティにとって最も重要なマップ、シーン、アプリ、レイヤーを表示する、モダンで魅力的な外観のホームページを構成することができます。

注意:

2020 年 6 月以前に設定された組織は、従来のホーム ページ設定を使用してホーム ページが構成されている可能性があります。 従来のホーム ページ設定のサポートは終了しており、組織サイトは、アイテム ギャラリー、リンク、カスタムの色とフォントを利用できる最新のモバイル対応ホーム ページにアップグレードされています。 従来のホーム ページを継続使用するための延長を組織が受け取っている場合は、引き続き従来のホーム ページを表示し、最新のホーム ページに対してコンテンツの参照やコピーを行うことができます。

デフォルトの管理者と適切な権限が付与されたユーザーは、ホーム ページ エディターのカスタマイズ可能なコンポーネント、またはブロックを使用して、デスクトップ ブラウザーとモバイル ブラウザーの両方で最適に表示される応答性の高いホーム ページを設計、プレビュー、および配置できます。

ヒント:

操作を開始するためのヒントおよびベスト プラクティスについては、「組織のホーム ページを作成するためのベスト プラクティス」をご参照ください。

ホーム ページの作成

ホーム ページ エディターを使用して、ArcGIS Online 組織サイトのホーム ページを作成します。 ホーム ページ エディターには、柔軟性の高いコンポーネントおよびオプション セットが搭載されているため、サイト独自のエントリ ポイントを作成できます。 ホーム ページ エディターを使用してページを構成すると、設計した内容のライブ プレビューが表示され、目的の外観と機能を実現するのに役立ちます。 ホーム ページ エディターの下部にある表示オプションを使用すると、さまざまなデバイス上でのページの表示を確認できます。

注意:

2020 年 6 月以前に設定された組織は、従来のホーム ページ設定を使用してホーム ページが構成されている可能性があります。 従来のホーム ページ設定のサポートは終了しており、組織サイトは、アイテム ギャラリー、リンク、カスタムの色とフォントを利用できる最新のモバイル対応ホーム ページにアップグレードされています。 従来のホーム ページを継続使用するための延長を組織が受け取っている場合は、引き続き従来のホーム ページを表示し、最新のホーム ページに対してコンテンツの参照やコピーを行うことができます。

1. デフォルトの管理者または組織の Web サイトを管理するための管理権限を持つカスタム ロールとしてサイン インしていることを確認します。
2. サイトの上部にある [組織] をクリックして、[設定] タブをクリックします。
3. ページの横にある [ホーム ページ] をクリックします。
4. [ホーム ページ エディター] セクションで、[エディターの起動] をクリックします。
5. ホーム ページのコンテンツ エレメントを以下のように構成します。
   • [ヘッダー] - タイトル、ロゴ、およびカバー画像
   • [コンテンツ ブロック] - アイテムのギャラリーとテキスト、およびリンク
   • [フッター] - 連絡先情報、カスタム フッターのテキストとリンク、およびフッターのスタイル設定
6. ホーム ページのデザインを以下のように構成します。
   • [色] - 設定済みまたはカスタム カラー テーマ
   • [タイポグラフィ] - 設定済みまたはカスタム フォント テーマ
7. [表示] オプションを使用して、デスクトップ、タブレット、モバイル デバイスでのホーム ページの表示をプレビューします。
8. [保存] をクリックして、ホーム ページの構成を適用します。
9. [閉じる] ボタン をクリックして、ホーム ページ エディターを閉じます。
10. サイトの上部にある [ホーム] をクリックすると、ホーム ページが表示されます。

ヘッダー

ホーム ページのヘッダーには、カバー画像、組織のタイトル、組織ロゴのうち、任意のエレメントを含めることができます。

ホーム ページ ヘッダーを構成するには、次の手順を実行します。

1. 上の「ホーム ページの作成」セクションに記載された最初の 4 つの手順を実行します。
2. [コンテンツ] の下にある [ヘッダー] をクリックします。
3. 必要に応じて、ヘッダーに組織のタイトルを含めます。
   1. [組織のタイトルの表示] 切り替えボタンをオンにします。
   2. [組織のタイトル] テキスト ボックスで、(組織のプロフィール設定からインポートされた) タイトルを維持するか、新しいタイトルを入力します。
   3. [ヘッダーの色] ドロップダウン メニューから、タイトル テキストの色を選択します。

      注意:

      ホーム ページのデザインで既定またはカスタム カラー テーマが指定されている場合、ドロップダウン メニューから新しい色を選択すると、このエレメントに指定された色のスタイルはオーバーライドされます。

4. 必要に応じて、ヘッダーに組織のロゴを含めます。
   1. [組織のロゴの表示] 切り替えボタンをオンにします。
   2. [ファイルの選択] をクリックして、デスクトップ上の画像ファイルを参照します。

      使用できる画像形式は PNG、GIF、および JPEG です。 最適な結果を得るには、ロゴを幅 300 ピクセル、高さ 300 ピクセルにする必要があります。

   3. ロゴに表示したい内容になるまで画面移動および拡大します。

      画像ファイルのサイズと解像度、およびサムネイルのカスタマイズの際の拡大率によっては、画像が、保存されるときにリサンプリングされ、サイズ変更される場合があります。

   4. [保存] をクリックします。
5. 必要に応じて、ヘッダーにカバー画像を含めます。
   1. [カバー画像の表示] 切り替えボタンをオンにします。
   2. 次のいずれかのオプションを使用して、カバー画像オプションを選択します。
      • [ストック カバーの使用] - すぐに使用できるストック カバー画像を適用します。 ドロップダウン メニューから画像を選択します。
      • [カスタム カバーのアップロード] -カスタム カバー画像をアップロードします。 [ファイルの選択] をクリックして、デスクトップ上の画像ファイルを参照します。 使用できる画像形式は PNG、GIF、および JPEG です。 [保存] をクリックします。

        注意:

        画像は幅 1920 ピクセル x 高さ 1080 ピクセル前後にする必要があります。 ファイル サイズが大きいと、Web サイトを参照する一部のユーザーのパフォーマンスに影響を与える可能性があるため、画像ファイルをアップロードする前にサイズをご確認ください。 ファイルのサイズは 1 MB　未満でなければなりません。

6. [レイアウト オプション] をクリックして、次のいずれかを実行します。
   • カバー画像の高さとして、全画面、3 分の 2 の画面、または半画面を選択します。
   • 画像プレビュー ウィンドウでクリックして、カバー画像の中心点を調整します。 指定した中心点により、すべての画面サイズでの画像の中心が決定されます。
   • [オーバーレイの不透明度] スライダーでカバー画像の不透明度を調整します。
   • タイトルとロゴの垂直方向の配置と、カバー画像に対する水平方向の位置を調整します。

     注意:

     [左揃え] を選択した場合、タイトルの配置は画面サイズに基づいて動的に調整されます。 デスクトップ デバイスで画面サイズを狭くすると、タイトルが中央に寄ります。 タブレットやスマートフォンでは、選択した整列オプションにかかわらず、タイトルは常に中央に配置されます。

7. [保存] をクリックしてヘッダー構成を保存します。

コンテンツ ブロック

ホーム ページには、テキスト、アイテム、ギャラリー、リンクなど、最大 15 のコンテンツ ブロックを含めることができます。 テキスト ブロックを使用して、組織に関する見出しやその他のテキスト ベースのコンテンツを構成します。 アイテム ギャラリーを構成して、マップ、シーン、アプリ、その他のコンテンツ アイテムを表示します。 メンバーと訪問者がその他のコンテンツを検索するのに役立つカスタム リンクのブロックを追加します。

アイテム ギャラリーを構成する場合は、表示するアイテムを含むグループを指定します。 これにより、異なるユーザーに別のコンテンツが表示されるようにカスタム ギャラリーを構成することができます。 たとえば、匿名アクセスを許可している組織サイトで、一部のアイテムを組織のメンバーのみに表示し、メンバー以外のサイトへの訪問者には表示しないようにすることができます。

次のグループ設定 (このグループを表示できる人) とアイテム共有レベルの組み合わせを使用して、アイテム ギャラリーと個々のギャラリー アイテムの表示設定を制御できます。

アイテム ギャラリーの対象ユーザー	グループを表示可能にするユーザー	アイテム共有レベルの設定
すべての人 (パブリック)	すべての人 (パブリック)	すべての人 (パブリック)
すべての組織のメンバー (メンバー以外はなし)	組織内の人	組織
特定の組織のメンバー	組織内の人	アイテム ギャラリー グループとその他の特定グループ

アイテム ギャラリーに、ホーム ページを表示しているユーザーに表示されるアイテムがない場合、ギャラリーは表示されません。 たとえば、メンバー以外のユーザーには、組織レベルで共有されているアイテムのみを含むギャラリーは表示されません。

リンク ブロックを構成するとき、最大 8 つのリンクを含めることができます。 リンクには Web サイトの URL と電子メール アドレスを使用できます。 有効な HTTPS URL と mailto リンク構文を使用する必要があります。 リンクは、下線付きのテキストまたはボタンとして表示されるように構成できます。 リンクごとに画像を含めることもできます。

各コンテンツ ブロックは、組織やユーザー コミュニティのニーズに合わせてカスタマイズすることができます。 一度構成したブロックは、ページ上で並べ替えたり、必要に応じて編集したりすることができます。

ホーム ページのコンテンツ ブロックを構成するには、次の手順を実行します。

1. 上の「ホーム ページの作成」セクションに記載された最初の 4 つの手順を実行します。
2. [コンテンツ] の下にある [コンテンツ ブロック] をクリックします。
3. テキスト ブロックを追加するには、次の手順を実行します。
   1. [ブロックの追加] をクリックし、[テキスト] をクリックします。
   2. 見出しを含めるには、[大見出しの表示] 切り替えボタンをオンにして、見出しを入力します。
   3. 本文テキストを含めるには、[本文の表示] 切り替えボタンをオンにして、[本文コピー] テキスト ボックスに本文テキストを入力します。

      本文テキストにハイパーリンクを含めるには、[リンクの追加] をクリックします。 [リンクの追加] ウィンドウで、リンク タイトルとリンク先を入力し、[追加] をクリックします。 リンク先は有効な HTTPS URL (https://www.arcgis.com/home など) または mailto リンク (mailto:[e-mail] など) である必要があります。 リンクは、マークダウンの構文を使用して [ボディ コピー] テキスト ボックスに追加されます。

   4. テキストの整列オプションを選択します。
   5. [ブロックの色] ドロップダウン メニューから、テキスト ブロックの背景色を選択します。

      注意:

      ホーム ページのデザインで既定またはカスタム カラー テーマが指定されている場合、ドロップダウン メニューから新しい色を選択すると、このエレメントに指定された色のスタイルはオーバーライドされます。

   6. [保存] をクリックしてテキスト ブロックの構成を保存します。
   7. テキスト ブロックごとに、これらの手順を繰り返します。
4. アイテム ギャラリーを構成するには、次の手順を実行します。
   1. [ブロックの追加] をクリックし、[アイテム ギャラリー] をクリックします。
   2. [グループ] ボックスをクリックし、ギャラリーに表示するコンテンツのグループを見つけて選択します。
   3. タイトルを含めるには、[タイトルの表示] 切り替えボタンをオンにして、タイトルを入力します。
   4. サマリーを含めるには、[サマリーの表示] 切り替えボタンをオンにして、[サマリー] テキスト ボックスにサマリーを入力します。

      ギャラリー サマリーにハイパーリンクを含めるには、[リンクの追加] をクリックします。 [リンクの追加] ウィンドウで、リンク タイトルとリンク先を入力し、[追加] をクリックします。 リンク先は有効な HTTPS URL (https://www.arcgis.com/home など) または mailto リンク (mailto:[e-mail] など) である必要があります。 リンクは、マークダウンの構文を使用して [サマリー] テキスト ボックスに追加されます。

   5. タイトルおよびサマリー テキストの整列オプションを選択します。
   6. [表示するアイテムの数] ドロップダウン メニューから、数値を選択します。
   7. 必要に応じて、アイテム ギャラリーに注目のグループ コンテンツではなく、グループに最近追加されたアイテムを表示するには、[注目のコンテンツの表示] 切り替えボタンをオフにします。

      このオプションは、選択したグループに注目のアイテムの管理ギャラリーがある場合のみ利用できます。

   8. アイテムの並べ替え方法を変更するには、[アイテムの並べ替え基準] ドロップダウン メニューからオプションを選択します。 たとえば、ビュー数や所有者でアイテムを並べ替えることができます。 アイテムを昇順ではなく降順で並べるには、[昇順で並べ替え] チェックボックスをオフにします。

      グループに注目のコンテンツ ギャラリーがあり、[注目のコンテンツの表示] 切り替えボタンがオンの場合、アイテムは、グループの注目のコンテンツ ギャラリーに表示されるのと同じ順序で、ホーム ページのアイテム ギャラリーに表示されます。

   9. [アイテム タイプの表示] ドロップダウン メニューから、表示するアイテムのタイプ ([マップ] や [アプリ] など) を選択するか、[すべて] を選択してすべてのアイテム タイプをギャラリーに表示します。
   10. [アイテムの表示設定] セクションで、次のいずれかの操作を実行します。
       • [ブロックの色] ドロップダウン メニューから、必要に応じてギャラリーに異なる背景色を選択します。

         注意:

         ホーム ページのデザインで既定またはカスタム カラー テーマが指定されている場合、ドロップダウン メニューから新しい色を選択すると、このエレメントに指定された色のスタイルはオーバーライドされます。

       • アイテム カードに表示する情報を指定します。 たとえば、[アイテム タイプの表示] および [アイテムのサマリーを表示] 切り替えボタンをオフにすると、この情報を非表示にすることができます。
   11. ギャラリーごとに、これらの手順を繰り返します。
5. リンク ブロックを追加するには、次の手順を実行します。
   1. [ブロックの追加] をクリックし、[リンク] をクリックします。
   2. 必要に応じて、[リンクに画像を追加] 切り替えボタンをオンにして、ブロック内のリンクごとに画像を含めます。
   3. [リンクの追加] をクリックします。
   4. [リンク タイトル] テキスト ボックスに、リンクのタイトルを入力します。
   5. 画像を含めるオプションをオンした場合は、[リンク画像] ボックスの [画像のアップロード] をクリックし、画像を参照して [保存] をクリックします。

      適切な結果を得るには、幅 800 ピクセル x 高さ 600 ピクセルの画像を選択する必要があります。

   6. [リンク先] テキスト ボックスに、有効な Web サイトの HTTPS URL または電子メールのリンクを入力します。

      ヒント:

      電子メールのリンクの有効な構文は mailto:[e-mail] です。

   7. [追加] をクリックして、リンクをクリックします。
   8. 上記の手順を繰り返して、リンクをブロックに追加します。

      各リンク ブロックは、最大 8 つのリンクを含めることができます。

      注意:

      トライアル サブスクリプションでは、リンクはサポートされていません。

   9. 各リンクをボタンとして表示するには、[ボタンのアウトラインを表示] 切り替えボタンをオンにします。 リンクを下線付きのテキストとして表示するには、切り替えボタンをオフにします。
   10. [ブロックの色] ドロップダウン メニューから、必要に応じてリンク ブロックに異なる背景色を選択します。

       注意:

       ホーム ページのデザインで既定またはカスタム カラー テーマが指定されている場合、ドロップダウン メニューから新しい色を選択すると、このエレメントに指定された色のスタイルはオーバーライドされます。

   11. リンクを管理するには、次のいずれかを実行します。
       • リンクを編集するには、[編集] ボタン をクリックし、必要な変更を行い、[保存] をクリックします。
       • リンクを削除するには、[削除] ボタン をクリックします。
       • ブロック内のリンクの順序を変更するには、リンクの横にある [順序変更] ボタン をクリックして、新しい位置にドラッグします。
6. ブロックの構成が完了したら、[保存] をクリックします。
7. [ボディ] ウィンドウで、次の手順を実行し、構成したブロックを編集して並べ替えます。
   • ブロックを編集するには、[編集] ボタン をクリックし、必要な変更を行い、[保存] をクリックします。
   • ブロックを削除するには、[削除] ボタン をクリックします。
   • ホーム ページ上のブロックの位置を変更するには、ブロック上の [並べ替え] ボタン をクリックして、新しい位置にドラッグします。
8. 完了したら [保存] をクリックします。

フッター

デフォルトでは、ホーム ページのフッターに事前構成済みの 3 つのリンク ([Esri へのお問い合わせ] リンクなど) が含まれています。 また、組織のカスタム連絡先リンクとカスタム フッターのテキストを構成したり、フッターの背景色を選択したりすることもできます。

ホーム ページ フッターを構成するには、次の手順を実行します。

1. 上の「ホーム ページの作成」セクションに記載された最初の 4 つの手順を実行します。
2. [コンテンツ] の下にある [フッター] をクリックします。
3. フッターにカスタム テキスト (著作権情報テキストなど) を含めるには、[フッターのテキストの表示] 切り替えボタンをオンにして、フッターのテキストを入力します。

   カスタム フッターのテキストにハイパーリンクを含めるには、[リンクの追加] をクリックします。 [リンクの追加] ウィンドウで、リンク タイトルとリンク先を入力し、[追加] をクリックします。 リンク先は有効な HTTPS URL (https://www.arcgis.com/home など) または mailto リンク (mailto:[e-mail] など) である必要があります。 リンクは、マークダウンの構文を使用して [フッターのテキスト] ボックスに追加されます。

4. フッターに [組織に連絡] リンクを含めるには、[[組織に連絡] リンクの表示] 切り替えボタンをオンにして、リンクに使用する電子メール アドレスを入力します。
5. [ブロックの色] ドロップダウン メニューから、ホーム ページ フッターの背景色を選択します。

   注意:

   ホーム ページのデザインで既定またはカスタム カラー テーマが指定されている場合、ドロップダウン メニューから新しい色を選択すると、このエレメントに指定された色のスタイルはオーバーライドされます。

6. [保存] をクリックしてフッター構成を保存します。

色

ホーム ページ エディターを使用すると、ホーム ページに表示される色を制御できます。 事前に設定された 8 つのカラー テーマからいずれかを選択して、自分のホーム ページ コンテンツに適用することができます。 各カラー テーマには、テキスト、背景、大見出し、およびボタンやリンクの色を定義する色のスタイルが含まれています。

組織に特定の色のブランディング要件があるなど、設定済みのテーマが自分のニーズに合わない場合は、ユーザーが構成したカラー スタイルを持つカスタム カラー テーマを作成することができます。

ホーム ページの色を構成するには、次の手順を実行します。

1. 上の「ホーム ページの作成」セクションに記載された最初の 4 つの手順を実行します。
2. [デザイン] の下にある [色] をクリックします。
3. [設定済みのテーマを使用] または [カスタム テーマを使用] をクリックします。
4. 設定済みのテーマを使用する場合は、ドロップダウン メニューからテーマを選択し、必要に応じて、ホーム ページ コンポーネント (テキスト ブロック、ギャラリーなど) のいずれかに適用するカラー スタイルを変更します。
5. カスタム カラー テーマを構成する場合は、以下のように 1 つ以上のカスタム スタイルを構成します。
   1. [ユーザー設定の色のスタイル] で [カスタム スタイルの追加] をクリックします。
   2. スタイルの名前を入力します。
   3. [色の構成] で、ブロック エレメント (たとえば [背景]) の横の [カスタム スタイルの編集] ボタン をクリックします。
   4. 16 進数、RGB、または HSV の値を入力するか、カラー ピッカー、規定カラーのパレット、または共有テーマ色 (定義されている場合) から色を選択することで、色を指定します。
   5. 色を構成したい各ブロック エレメントについて、上記の手順を繰り返します。
   6. [読みにくい] とマークされたエレメントがある場合は、そのエレメントの [カスタム スタイルの編集] ボタン をクリックして別の色を指定します。

      代わりに背景の色を調整できます。

      注意:

      タイトル、サマリー、およびリンクやボタンの色のそれぞれについて、コントラスト比が計算され、表示されます。 コントラスト比は、背景色とこれらの指定された各色の間のコントラスト量を計測した値です。 WCAG 2.1 アクセシビリティ基準に従った見やすさの尺度に基づき、コントラスト比が高いほど読みやすいことを示します。 4.5 を下回るコントラスト比は、[読みにくい] とマークされます。

   7. [カスタム スタイルの追加] ウィンドウでの作業が完了したら、[保存] をクリックします。
6. 追加のカスタム スタイルを作成する場合は、前の手順を繰り返します。

   ヒント:

   既存のスタイルに基づいてカスタム カラー スタイルを作成する場合は、スタイルの [編集] ボタン をクリックし、新しいスタイルの名前を入力してスタイル カラーを指定し、[新しいスタイルとして保存] をクリックします。

7. カスタム カラー スタイルを編集する場合は、[編集] ボタン をクリックし、スタイルの名前または色を変更して、[スタイルの上書き] をクリックします。
8. カスタム カラー スタイルを削除するには、[削除] ボタン をクリックしてそのスタイルを削除することを確認し、[削除] をクリックします。

   注意:

   スタイルを削除すると、削除したいカスタム スタイルを使ってスタイル設定されているホーム ページのブロックには、グレー スタイルが適用されます。

9. [保存] をクリックして色の構成を保存します。

タイポグラフィ

ホーム ページ エディターを使用すると、ホーム ページに表示されるフォントを制御できます。 ホーム ページをプロフェッショナルなデザインにする設定済みのフォント テーマのリストから選択できます。 設定済みの各フォント テーマには、タイトルのフォントと本文のテキストのフォントが含まれています。

組織に特定のフォントのブランディング要件がある、フォントの選択肢を増やしたいなど、設定済みのテーマが自分のニーズに合わない場合は、選択した一般的なフォントからタイトルと本文のフォントの組み合わせを選択してカスタム フォント テーマを作成することができます。

ホーム ページのフォントを構成するには、次の手順を実行します。

1. 上の「ホーム ページの作成」セクションに記載された最初の 4 つの手順を実行します。
2. [デザイン] の下にある [タイポグラフィ] をクリックします。
3. [設定済みのテーマを使用] または [カスタム テーマを使用] をクリックします。
4. 次のいずれかを実行します。
   • 設定済みのフォント テーマを使用する場合は、リストから選択します。
   • カスタム フォント テーマを使用する場合は、ドロップダウン メニューからタイトルのフォントと本文のフォントを選択します。
5. [保存] をクリックしてフォントの構成を保存します。

従来のホーム ページ

従来のホーム ページ設定のサポートは終了しており、組織サイトは、アイテム ギャラリー、リンク、カスタムの色とフォントを利用できる最新のモバイル対応ホーム ページにアップグレードされています。 従来のホーム ページを継続使用するための延長を組織が受け取っている場合は、引き続き従来のホーム ページを表示し、最新のホーム ページに対してコンテンツの参照やコピーを行うことができます。

1. デフォルトの管理者または組織の Web サイトを管理するための管理権限を持つカスタム ロールとしてサイン インしていることを確認します。
2. サイトの上部にある [組織] をクリックして、[設定] タブをクリックします。
3. ページの横にある [ホーム ページ] をクリックします。
4. [以前のホーム ページ] リンクをクリックします。