ページは、アプリのレイアウトの基盤となるドキュメントです。 ヘッダー、本文、フッターというコンテンツを含めることができる 3 つの主要な要素で構成されています。
Web エクスペリエンスには少なくとも 1 つのページが含まれ、複数のページを含めることができます。 レイアウトをデザインするとき、利用者にコンテンツを表示する最適な方法を決定します。 マップにフォーカスしたコンテンツの場合、全画面アプリ ページを使用します。 コンテンツを組み合わせる場合 (垂直にスクロールする必要があるマップ、複数の画像、テキストのブロックなど) 、スクロール ページを使用します。 ユーザーが複数のページにアクセスできるように、アプリにメニューを含める場合は、アプリ ページをサブメニューにグループ化するフォルダーを追加したり、他の Web サイトへのリンクを追加したりします。 また、アプリやページの読み込み時に開くウィンドウを追加および構成することもできます。
ウィジェット、ブロック、およびスクリーン グループ テンプレートをページに追加すると、[ページ] パネルの [アウトライン] の [本文] ノードに一覧表示されます。 検索可能なアウトラインには選択したページのブロック、スクリーン グループ、およびウィジェットの階層が表示され、有効にしている場合はヘッダーとフッターも含まれます。 ページをアプリに追加するには、[ページの追加] ボタン ![[ページの追加]](GUID-0C8548C3-AE84-4178-A8BB-29044B82143D-web.png "[ページの追加]")
をクリックして、コンテンツおよび想定されるアプリのフローに合うページ テンプレートを選択します。次に、例を示します。
- ヘッダーが含まれる 1 つの全画面ページにマップ中心のアプリを作成します。
- ホーム ページ上で全画面アプリを含む複数ページのアプリ、およびユーザーがメニューまたはボタンを使用してアクセスできる別のページ上のサポート コンテンツを含むスクロール ページを作成します。
ヒント:
ビルダー ウィンドウの下部にあるクイック ナビゲーション メニューを使用し、エクスペリエンス内のページやウィンドウを選択して、その設定にアクセスします。 このメニューには、ページ階層とウィンドウ タイプのプレビューも表示されます。
複数ページのアプリ
[ページ] パネルには、アプリでページを管理するための以下のオプションがあります。
- [ページの追加] - 全画面アプリおよびスクロール ページという 2 つのページ タイプから選択します。 各ページ タイプには、複数のテンプレートが含まれています。 テンプレートには、マップ中心のテンプレートとコンテンツの組み合わせ (テキスト、画像、マップなど) にフォーカスしたテンプレートがあります。 空白のテンプレートを選択して独自のレイアウトをデザインすることもできます。
- [リンクの追加] - 別の Web サイトへのリンクを追加して、エンド ユーザーがアプリのメニューから関連する Web ページにアクセスできるようにします。
- [フォルダーの追加] - ページとリンクのフォルダーを追加し、メニュー ウィジェットにドロップダウン メニューとして表示します。
- 他のオプション - 複数ページの場合、ページをホーム ページとして選択したり、必要に応じて、アプリに追加するメニュー ウィジェットからページを非表示にしたりします (アプリ内のすべてのメニューは同じページを含みますが、メニューのスタイルを別々に設定することができます)。ページの名前変更、複製、および削除を行ったり、ページを別のページ上にドラッグして階層的に整理したりすることができます。 ページをドラッグすると、他のページ間に配置される場所を示すラインが表示されます。 別のページの下にネストするには、周りにボックスが表示されるまで、そのページを移動先のページにドラッグします。
設定
ページには次のような構成の設定があります。
- [アイコン] - アイコンを変更して、[ページ] パネルのページを区別します。
注意:
次の画像形式をアップロードできます: PNG、GIF、JPG、JPEG、BMP。
- [ラベル] - ページの名前を変更します。
- [ウィンドウで開く] - 必要に応じて、ページが開いたときにページの前に表示されるウィンドウを選択します (ページで開くウィンドウは固定ウィンドウのみ選択できます)。
- [コンテンツの幅] (スクロール ページのみ)
- [カスタム] - ページの最大幅を設定します。
- [自動] - ページの幅全体を使用します。
- [アニメーション] - ページの本文にウィジェットのアニメーションを追加します (アニメーションは、[アウトライン] ビューの最上位のウィジェットに適用されます)。
- ボディ
- [塗りつぶし] - ページの色を選択します。
- [ヘッダー] - 選択したページのヘッダーを表示します。 以下のヘッダーの設定は、ヘッダーが有効化されたすべてのページに適用されます。
- [高さ] - ヘッダーの高さを変更します (ピクセル単位)。
- [塗りつぶし] - ヘッダーの色を変更します。
- [スクロール時にページの上部に留まる] (スクロール ページのみ) - ユーザーが下にスクロールしたとき、ヘッダーはページの上部に表示されたままになります。
- [フッター] - 選択したページのフッターを表示します。 以下のフッターの設定は、フッターが有効化されたすべてのページに適用されます。
- [高さ] - フッターの高さを変更します (ピクセル単位)。
- [塗りつぶし] - フッターの色を変更します。
- [レイアウト] (スクロール ページのみ)
- [ギャップ] - ページの行間のギャップ (とじしろ) を定義します (ピクセル単位)。
- [埋め込み] - ページの 4 辺の埋め込みを定義します (ピクセル単位)。
テンプレート
テンプレートには、設定済みのレイアウトとテーマレイアウトが含まれています。これらはそのレイアウトのロックを解除して変更できます。 [レイアウトのロック] ボタンを使用すると、テンプレートを使用してデザインを開始でき、必要に応じてそのテンプレートを変更できます。 レイアウトのロックを解除すると、構成パネルにその他のオプションが表示され、[ウィジェットの挿入] が有効になります。 [デフォルト] ギャラリーのテンプレートを使用してデザインを開始する場合、[プレビュー] ボタンをクリックすると、たとえば、ニーズに合ったテンプレートを選択する際などに役立ちます。 アプリに複数のページを追加するとき、同じテンプレートからほとんどのテンプレートを選択できます (複数ページのテンプレートは、最初に Web エクスペリエンスを作成するときにのみ選択できます)。以下のカテゴリからテンプレートを選択します。
- 標準の全画面アプリ用にデザインされた一般的なワークフローのマップ中心のテンプレート。 これらのテンプレートを構成するには、マップを選択し、関連ウィジェットをウィジェット コントローラーに追加します。ウィジェットを構成し、エクスペリエンスを保存して、公開します。 次に例を示します。
- [折りたたみ可能] は、コントローラー ウィジェットを含む見出しを備え、マップに焦点を合わせたシンプルでオープンなインターフェイスのテンプレートです。
- [ジュエリーボックス] は、マップと組み合わせてリスト内にフィーチャを表示するために作成されたテンプレートです。
- [ローンチパッド] は、コントローラー ウィジェットをページの下部に固定して、マップを強調するようにデザインされたテンプレートです。
- [ビルボード] は、マップとコントローラー ウィジェットが含まれるシンプルなマップ ビューアーです。
注意:
一部の全画面アプリ テンプレート内のヘッダー バーは、[ページ設定] の [ヘッダー] を使用する代わりに、固定パネル ウィジェットを使用して作成されています。 これにより、複数ページのアプリを作成する場合に他のページのヘッダーを有効にして構成することができます。 [ヘッダー] と [フッター] のコンテンツ、レイアウト、および設定は、[ヘッダー] や [フッター] を有効にするアプリのすべてのページで使用されます。
- ブロックまたはスクリーン グループで整理されるスクロール ページのテンプレート。 ブロックは行に似ています。 次に例を示します。
- [一般] は、コンテンツを共有するための長くスクロールするテンプレートを提供します。
- [イントロダクション] は、画像と見出しを効果的に表示するようにデザインされたモジュール レイアウトのテンプレートです。
- [ギャラリー] は、目立つサムネイル画像を使用してコンテンツを強調するようにデザインされたテンプレートです。
- [視差] は、ページの上部にバナー画像があり、最後にスクロール パネルのスクリーン グループが表示されるテンプレートです。
- ゼロから作成しデザインする、全画面ページおよびスクロール ページ用の空白のテンプレート。
- [空白のスクロール ページ] は、スクロールする Web ページで独自のデザインを作成するための空白のテンプレートです。 ウィジェットをスクロール ページに追加すると、デフォルトで [ブロック] に追加されます。 [ブロックの挿入] ボタンをクリックして、一般的なブロック レイアウトから選択するか、[スクリーン グループの挿入] ボタンをクリックして、複数のスクリーン テンプレートから選択します。
- [空白の全画面アプリ] は、全画面アプリで独自のデザインを作成するための空白のテンプレートです。