レスポンシブユーザーインターフェイス

レスポンシブ動作により、画面サイズに関わらず、ビュー要素の最適なユーザー体験が提供されます。水平方向のスクロールを最小限に抑え、利用可能なディスプレイスペースで最大限にデータを表示します。 

レスポンシブユーザーインターフェイス（UI）の概要については、次のビデオをご覧ください。

動画のスクリプト

企業というのは、チャネル、場所、デバイスを問わず、顧客とつながりたいと考えています。 画面の解像度やサイズが多様化する中、レスポンシブUIは、デバイスの種類に関わらず最適なユーザー体験を自動的に提供できます。 レスポンシブUIは、1つのバージョンのUIで複数のデバイスに対応できるため、エンドユーザーだけでなく企業にとってもメリットがあります。

たとえば、ちょっとした交通事故の後、被保険者が自宅からパソコンを使って保険金を請求したとします。 UIは、その高解像度の画面に合わせて表示されます。 別の例では、被保険者がモバイルデバイスからすぐに保険金請求を行いたいとします。 同じプロセスを、モバイル画面の解像度に合わせたUIで顧客に提供し、パソコンに劣ることなく生産性の高いユーザー体験を提供できます。

レスポンシブ動作オプション

レスポンシブ動作のオプションには、フォームのデザインレイアウトやテーブルの列の重要度などがあります。 たとえば、ユーザーがタブレットの向きを横から縦に変えると、その動きに応じてUI画面の幅が狭まります。

ブレークポイントにより表示幅が定義されます。 デフォルトでは、Pegaのレスポンシブブレークポイントは自動的に設定されます。 表示幅がブレークポイントを超えると、レスポンシブ動作がレイアウトに適用されます。 ダイナミックレイアウトでは、レスポンシブブレークポイントの動作により、表示領域の幅に基づいてフィールドのレイアウトが変更されます。 

たとえば、デフォルトのブレークポイントでは4列が、タブレットでは2列、スマートフォンでは1列が表示され、小さい画面幅でもフォームが読みやすくなり、水平方向のスクロールは不要になります。

ブレークポイントでトリガーしたい動作を選択できます。 レスポンシブブレークポイント動作には以下のオプションがあります。

App Studioでは、フィールドのレイアウトは利用可能なデザインテンプレートに限定されます。 デザインテンプレートは、UIがどのように変化するかを決めます。 レイアウトテンプレートを変更するには、実行時にビューを設定します。

たとえば、1列のデザインテンプレートの代わりに2列のデザインテンプレートを使用するようにビューを設定できます。 

Preview 機能を使用して、アプリケーションをプレビューし、さまざまなデバイスでどのように表示されるかを確認できます。 App Studioで「Preview」をクリックし、アプリケーション名の横のポータルリストからポータルを選択します。 モニターとタブレットのアイコンにカーソルを合わせてプレビューサイズを確認し、アイコンをクリックしてデバイスのアプリケーションプレビューを表示します。

次の問題に答えて、理解度をチェックしましょう。