モバイルに合わせたアプリレイアウトの最適化

アプリのレビュー

最初に、アプリをレビューして、小画面デバイスに合わせて修正する必要があるエレメントを特定します。

「ArcGIS の組織アカウント」にサインインします。
注意:
組織アカウントがない場合は、ソフトウェアアクセスのオプションをご参照ください。
リボンで、アプリボタンをクリックして [Experience Builder] を選択します。
ヒント:
または、Experience Builder サイトに直接移動することもできます。
Experience Builder が表示されます。ホームページに、最近作成したエクスペリエンスが一覧表示されています。
[新規作成] ボタンをクリックします。
テンプレートのリストが表示されます。テンプレートには、設定済みの変更可能なレイアウトとウィジェットが含まれています。このチュートリアル用に作成された公園情報アプリテンプレートを使用してアプリを作成します。
[ArcGIS Online] タブをクリックします。
検索バーで、「Great Smoky Mountains National Park owner:Learn_ArcGIS」と入力します。結果のリストで、[Great Smoky Mountains National Park (Tutorial)] の [作成] をクリックします。
ヒント:
正しいテンプレートには公園の写真のサムネイルが付いています。名前をポイントすると、テンプレートのフルネームを確認できます。
このテンプレートを使用してアプリが作成されます。エディターが開き、必要に応じて変更を加えることができます。
このアプリには 7 つのページがあり、これらのページはホームページから開くことができます。アプリは完成しているように見えますが、デスクトップ画面用にのみデザインされています。ディスプレイを変更して、小画面デバイスではどのように表示されるかを確認します。
リボンの [小画面デバイス用のページを編集] ボタンをクリックします。
注意:
このボタンの横にあるディメンションドロップダウンメニューを使用して、特定の画面サイズでアプリをプレビューできます。しかし、3 つの汎用デバイスモードでレイアウトを整理するだけでもかまいません。
アプリのレイアウトが変わります。
アプリのエレメントの多くは小さすぎてテキストが読めなくなり、タイトルテキストはヘッダーに収まっていません。
デフォルトで、アプリのヘッダーと本文は [自動] レイアウトを使用して調整されました。このレイアウトでは、Experience Builder によって自動的に変更が行われます。このアプリをモバイルデバイス用に最適化するため、いくつかのカスタムな変更を加える必要があります。

本文の編集

アプリのホームページはヘッダーと本文の 2 つのコンポーネントから成ります。ヘッダーはページの上部にあり、タイトル、ロゴ、ナビゲーションボタンが含まれています。本文はページの下部にあり、主要なコンテンツが含まれています。最初に、本文を編集します。

本文で、[カスタム] をクリックします。
カスタムを有効にすることで、他のデバイスモードとは別にウィジェットを手動で配置できることを知らせるメッセージが表示されます。
[有効化しますか] で、[OK] をクリックします。
本文を編集できるようになりました。最初に、[Current Conditions] ボタンを変更します。小画面では、テキストが途中で切れています。
[Current Conditions] ボタンウィジェットをクリックします。
ウィジェットを編集するオプションを含むウィンドウが開きます。
[Current Conditions] ウィンドウで、[スタイル] タブをクリックします。
ボタンを中央に配置し、ボタンの幅を調整し、本文の中心を基準にしてボタンの位置を変更します。
[水平方向の中央揃え] ボタンをクリックします。
[サイズと位置] で、[幅] に「50」と入力します。相対位置チャートで、数値をクリックして「5」と入力します。
プレビュー内のボタンに変更内容が自動的に適用されます。ボタンの幅が広がってすべてのテキストが表示されるようになりました。さらに、本文の最上部に移動したことで、他のコンテンツの調整に使えるスペースが増えました。
リボン上で [保存] ボタンをクリックします。
注意:
小画面デバイス用にウィジェットのサイズと位置を変更しても、他の画面サイズの設定は変わりません。 [大画面デバイス用のページを編集] ボタンをクリックすれば、大画面デバイスのレイアウトには変更が加えられていないことを確認できます。ウィジェットを完全に削除した場合は例外です。 1 つのビューでウィジェットを削除するとすべてのビューで削除されるため、残しておきたいものを削除しないよう注意してください。
次に、小画面で崩れて表示されている 5 つのカードを修正します。 [Current Conditions] ボタンのように移動してサイズ変更を試みることも可能ですが、現在の状態ですべてのカードを画面に収めるには大きすぎます。
カードを保留中リストに移動します。保留中リストは、ある画面サイズのウィジェットを他の画面サイズからは削除することなく非表示にするための手段です。デバイスモードによって表示するウィジェットを変えたり、サイズや位置以外のウィジェット設定を変更したい場合、保留中リストを使用することをお勧めします。
[Visitor Guides] カード (左端のカード) をクリックします。ウィジェットツールバーの [保留中のリストに移動] ボタンをクリックします。
このウィジェットはビューから消えますが、アプリからは削除されず、他の画面サイズでは引き続き表示されます (ウィジェットを削除した場合、他の画面サイズからも削除されます)。
注意:
保留中リストを表示するには、[ウィジェットの挿入] ウィンドウで、[保留中] タブをクリックします。保留中リストからウィジェットをいつでも再び追加できます。
他の 4 つのカードを保留中リストに移動します。
スペースが空いたので、保留中リストに移動したカードから置き換えるボタンを追加します。 [Current Conditions] ボタンは多くのスペースを取らず、モバイルで読み取れるため、このボタンのスタイルをコピーします。
[Current Conditions] ボタンをクリックします。ツールバーの [複製] ボタンをクリックします。
[Current Conditions 2] という名前のボタンのコピーが表示されます。その名前とテキストを変更します。
[Current Conditions 2] ウィンドウで、ウィンドウのタイトルをクリックし、「Visitor Guide」と入力します。 [テキスト] で、テキストを「Visitor Guide」に置き換えます。
このボタンを [Current Conditions] ボタンと区別するため、このボタンの外観を変更します。ボタンを複製したときに表示された [クイックスタイル] ウィンドウにはデフォルトのスタイルオプションがいくつか用意されていますが、ボタンのウィンドウの [高度な設定] セクションでさらに細かい変更を加えることができます。
[Visitor Guide] ウィンドウで、[背景] の下にある [塗りつぶし] 色見本をクリックします。
国立公園局のスタイルガイドで使用されている茶色に変更します。
カラーパレットで、[さらに表示] をクリックします。 [Hex] に「#6f4930」と入力します。
次に、ボタンのリンクを設定して、アプリの適切なページに移動するようにします。
[Visitor Guide] ウィンドウで、[リンクの設定] をクリックします。
[リンクの設定] ウィンドウの [リンク先] で、[ページ] を選択します。 [ページの選択] で、[Visitor Guide] を選択します。
[OK] をクリックします。アプリのプレビューで、[クイックスタイル] ウィンドウを閉じ、[Visitor Guide] ボタンを [Current Conditions] ボタンの下約 25 パーセントの位置に中央揃えで配置します。
ヒント:
ボタンを移動すると画面に表示される青色のガイドは、他のエレメントからのボタンの距離を示しています。赤色のガイドは、ボタンと他のエレメントとの位置揃えを示しています。
[Visitor Guide] ボタンを 4 回複製します。以下の方法で、複製された各ボタンの名前、テキスト、リンクを編集します。
- 1 つ目のボタンの名前とテキストを「Park History」に変更し、リンクを [Park History] ページに設定します。
- 2 つ目のボタンの名前とテキストを「Trail Information」に変更し、リンクを [Trail Information] ページに設定します。
- 3 つ目のボタンの名前とテキストを「Biodiversity」に変更し、リンクを [Hemlock Forests] ページに設定します。
- 4 つ目のボタンの名前とテキストを「Visitor Survey」に変更し、リンクを [Visitor Satisfaction Survey] ページに設定します。
アプリのプレビューで、各ボタンをドラッグして、前のボタンの下約 5 パーセントの位置に中央揃えで配置します。
これらのボタンは小画面でも簡潔で読みやすく、ナビゲーションオプションは元のデスクトップアプリのカードとすべて同じです。
アプリを保存します。

ヘッダーの編集

本文の編集が完了したので、ヘッダーを編集します。ヘッダーには、タイトルのウィジェット、ロゴのウィジェット、すべてのアプリページへのリンクを含むウィジェットの 3 つが含まれています。現在のところ、ウィジェットは途切れて重なり合っています。

ヘッダーで、[カスタム] をクリックします。 [有効化しますか] で、[OK] をクリックします。
アプリのプレビューで、ヘッダーにポインターを合わせ、[ヘッダーの編集] をクリックします。タイトル (Great Smoky Mountains National Park) をクリックします。
タイトルウィジェットの設定を含む [Hemlock Title] ウィンドウが表示されます。フォントサイズを縮小します。
他のデバイスモードのウィジェットに影響を与えないで変更できるのはウィジェットのサイズと位置の設定だけであることを覚えているかと思います。つまり、テキストサイズを変更すると、テキストサイズを変更する必要がないデスクトップアプリでもテキストサイズが変わってしまいます。
この問題を回避するため、タイトルを複製し、元のタイトルを保留中リストに移動します。次に、複製されたタイトルのテキストサイズを変更して、他のデバイスでのサイズを変えることなく、タイトルをモバイルに適したサイズにします。
アプリのプレビューで、タイトルのウィジェットツールバーの [複製] ボタンをクリックします。
複製されたタイトルがデフォルトで選択されています。
元のタイトルを再び選択します。ウィジェットツールバーの [保留中のリストに移動] ボタンをクリックします。
複製されたタイトルを選択します。 [Hemlock Title 2] ウィンドウの [テキスト形式] で、テキストサイズを 16 px に変更します。
複製されたタイトルがヘッダーの中心と揃っていないため、タイトルのスタイル設定を調整します。
[Hemlock Title 2] ウィンドウで、[スタイル] タブをクリックします。 [幅] に、「225」px と入力します。
[水平方向の中央揃え] ボタンをクリックします。 [上にスナップ] ボタンをクリックし、[垂直方向の中央揃え] を選択します。
タイトルがヘッダーに中央揃えで配置されますが、まだ他のウィジェットと重なり合っているので読み取れません。次に、ロゴを縮小します。アプリのプレビューで重なり合っていてロゴをうまくクリックできないため、ページ上のすべてのウィジェットのリストを開いて設定を変更します。
左側のツールバーで、[ページ] ボタンをクリックします。
アプリのすべてのウィジェットのリストがページ別に並べ替えて表示されます。デフォルトでは、[Home] ページが表示されます。
[アウトライン] で、[ヘッダー] の下の [ロゴ] を選択します。
アプリのプレビューでロゴが選択され、その設定ウィンドウが表示されます。サイズと位置だけを変更します。
アプリのプレビューで、ロゴのコーナーをドラッグして幅を約 62 px に変更します。ロゴをタイトルの左側に再配置します。
ヒント:
ロゴやその他のウィジェットのサイズと位置を変更するには、ウィジェットのウィンドウでサイズツールと位置ツールを使用するか、プレビュー上でウィジェットのサイズ変更と再配置を行います。好きな方法を使用してください。
次に、他のページへのリンクのメニューを変更します。本文内にボタンを作成したので、必ずしもヘッダーにすべてのリンクを表示する必要はありません。現在のメニューを、小画面に適したアイコンに置き換えます。
[ページ] ウィンドウの [アウトライン] で [メニュー] をクリックします。
アプリのプレビューで、ウィジェットツールバーの [複製] をクリックします。元のメニューを保留中リストに移動し、複製されたメニューを再び選択す。
[メニュー 2] ウィンドウの [コンテンツ] タブで、[タイプ] として [アイコン] を選択します。
[スタイル] タブをクリックします。 [幅] を 30 px に変更し、アイコンをタイトルの右側に再配置します。
変更した後のヘッダーは少し高すぎます。小画面デバイスでは高さを低くします。
[ページ] ウィンドウの [Home] をクリックします。
[Home] ウィンドウが開いてホームページのオプションが表示されます。
[Home] ウィンドウの [ヘッダー] で、[高さ] を 70 px に変更します。
注意:
ヘッダーの高さを変更したことで、ヘッダー内の一部のエレメントの位置が変わることがあります。必要に応じて、これらを自由に再配置してください。
アプリを保存します。必要に応じて、リボンの [ライブビュー] をクリックして、完成したアプリのホームページを表示およびテストします。

このチュートリアルでは、Web アプリのレイアウトを編集してモバイルデバイス用に最適化しました。ウィジェットを移動およびサイズ変更し、保留中リストを使用して、画面サイズによって異なる設定にしました。

このチュートリアルでは、1 つのページに対する変更についてのみ取り上げました。モバイルデバイス用にアプリのページを変更する練習をさらに行いたい場合には、グレート・スモーキー国立公園アプリの他の 6 つのページで試すことができます。アプリの作成者によって各ページがどのように変更されたのかを確認するため、各自のモバイルデバイスで完成したテンプレートを表示することができます。

他のチュートリアルについては、ArcGIS Experience Builder リソースページをご覧ください。

アプリのレビュー

注意:

ヒント:

ヒント:

注意:

本文の編集

注意:

注意:

ヒント:

ヘッダーの編集

ヒント:

注意:

Get Started with ArcGIS Experience Builder

Building Web Solutions Using ArcGIS Experience Builder

ArcGIS Experience Builder の、スタイルおよびレイアウトを使用したアプリの設計

要件

Outline

モバイルに合わせたアプリ レイアウトの最適化

アプリのレビュー

注意:

ヒント:

ヒント:

注意:

本文の編集

注意:

注意:

ヒント:

ヘッダーの編集

ヒント:

注意:

使用許諾

フィードバックを送信

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

詳細​

関連する Esri トレーニング

Get Started with ArcGIS Experience Builder

Building Web Solutions Using ArcGIS Experience Builder

ArcGIS Experience Builder の、スタイルおよびレイアウトを使用したアプリの設計

モバイルに合わせたアプリレイアウトの最適化

詳細