WYSIWYG オーサリングのレスポンシブモード
この機能は、早期アクセスプログラムを通じて使用できます。アクセスをリクエストするには、GitHub 組織名とリポジトリ名を記載したメールを公式アドレスから aem-forms-ea@adobe.com に送信してください。 例えば、リポジトリ URL が https://github.com/adobe/abc の場合、組織名は adobe で、リポジトリ名は abc になります。
レスポンシブFormsの概要
今日のマルチデバイスの世界では、デスクトップモニターからスマートフォンまで、あらゆるサイズの画面でフォームが見栄えがよく、適切に機能する必要があります。 ユニバーサルエディターのレスポンシブモードを使用すると、オーサリングプロセス中に様々なデバイスサイズでフォームをプレビューおよびテストできるので、これを支援できます。
ユニバーサルエディターを使用すると、様々な画面サイズに自動的に適応するフォームを作成でき、使用しているデバイスに関係なく、最適なユーザーエクスペリエンスが提供されます。
様々なデバイスのレスポンシブモードでのフォームのプレビュー
ユニバーサルエディターでは、画面の右上隅にある エミュレーター アイコンを使用して、様々なデバイスサイズでページをプレビューし、レスポンシブデザインの動作をテストして、ユーザーエクスペリエンスを向上させることができます。
レスポンシブモードでフォームをプレビューするには：
-
編集用にユニバーサルエディターでフォームを開きます。
-
ツールバーの
-
デバイス形式を選択してください：
- デスクトップ（デフォルト）
- タブレット
- モバイル
- カスタム （幅と高さを指定）
スクリーンローテーター アイコンを使用して、タブレットやモバイルデバイスでプレビューするときに縦向きと横向きを切り替えることもできます。
ユニバーサルエディターには、様々なデバイスでフォームをプレビューする様々なエミュレーターが用意されています。次の表に、使用可能なエミュレータータイプと、対応するデバイス表現を示します。
レイアウト機能
ユニバーサルエディターでは、簡単に使用できるフォームを作成でき、エンドユーザーに動的なエクスペリエンスを提供します。フォームのレイアウトは、フォーム内での項目やコンポーネントの表示方法をコントロールします。
ユニバーサルエディターは、フォームに対して次のタイプのレイアウトをサポートしています。
パネルレイアウト
パネルレイアウトは、関連するフィールドを整理して、対応するコンテンツを簡単に移動および検索するのに役立ちます。パネルレイアウトを使用すると、フォーム内の個別のセクションまたはパネル内にフォームコンポーネントを配置できます。
例： 求人応募フォームでは、「個人情報」、「教育」、「職業体験」、「参照」を別個のセクションに分割するパネルを使用する場合があります。
レスポンシブ動作： 小さい画面では、通常、パネルは縦に積み重ねられ、狭い幅に調整しながら個別のグループを維持します。
パネルコンポーネントを使用して、フォームにパネルレイアウトをフォームに追加できます。パネルコンポーネントの様々なプロパティを設定する方法について詳しくは、パネルコンポーネントの記事を参照してください。
ウィザードレイアウト
ウィザードレイアウトを使用すると、複雑なフォームを別個の手順に分割して簡素化できます。 各手順はプロセスの異なる部分を表し、ユーザーは多くの場合、「次へ」ボタンと「戻る」ボタンを使用して手順を順番に移動します。ウィザードレイアウトを使用して、複数のセクションや手順を含むフォームを作成できます。
例： 保険金請求フォームでは、ウィザードを使用して、インシデントの詳細の入力、証拠のアップロード、個人情報の入力、送信の確認を行い、ユーザーをガイドすることができます。
レスポンシブ動作： モバイルデバイスでは、ウィザードは段階的なアプローチを維持しますが、画面が狭くなるように各手順でコンテンツが調整され、多くの場合、大きな画面に並べて表示される要素が積み重ねられます。
ウィザードコンポーネントを使用して、フォームにウィザードレイアウトを追加できます。ウィザードコンポーネントの様々なプロパティを設定する方法について詳しくは、ウィザードコンポーネントの記事を参照してください。
アコーディオンレイアウト
アコーディオンレイアウトでは、アダプティブフォーム内の折りたたみが可能なセクションまたはパネルにコンテンツが表示されます。セクションを展開すると、そのセクション内のコンテンツが表示されますが、他のセクションは折りたたまれたままになります。このレイアウトは、大量の情報をコンパクトなフォームで表示する場合に最適です。
例： 製品設定フォームでは、「基本オプション」、「詳細機能」、「アクセサリ」、「支払いプラン」のアコーディオンセクションを使用すると、ユーザーは一度に 1 つの側面に集中できます。
レスポンシブ動作： アコーディオンは、当然ながらコンテンツの展開部分のみを表示することで縦空間を節約するので、モバイルデバイスでは特に効果的で、小さい画面に最適です。
アコーディオンコンポーネントを使用して、フォームにアコーディオンレイアウトを追加できます。アコーディオンコンポーネントの様々なプロパティを設定する方法について詳しくは、アコーディオンコンポーネントの記事を参照してください。
適切なレイアウトを選択する方法
ユーザーエクスペリエンスとフォームの機能を最適化するには、適切なレイアウトを選択することが重要です。次の表は、使用可能な様々なレイアウトオプションを理解するのに役立ち、特定のニーズとユースケースに基づいて最適なレイアウトを選択できます。
– 戻る：「戻る」ボタン
- オプションのスキップ手順
レスポンシブ Formsのベストプラクティス
フォームがすべてのデバイスで最高のエクスペリエンスを提供するようにするには、次のベストプラクティスに従います。
-
モバイル向けのデザイン： まずモバイルデバイス用のフォームを設計し、次に、より大きな画面に向けてフォームを強化します。 このアプローチにより、コア機能が最小の画面で動作することが保証されます。
-
適切なフィールドタイプの使用： タッチデバイスで適切に機能するフィールドタイプを選択します。
- オプションが多数ある場合に、ラジオボタンの代わりにドロップダウンを使用する
- タッチ入力用に設計された日付ピッカーを使用する
- ボタンとタッチターゲットが 44 ピクセル x 44 ピクセル以上であることを確認します
-
画面が小さい場合はシンプルにする：
- モバイルデバイスで 1 行に表示するフィールド数を減らす
- 「さらに表示」オプションの背後にオプションフィールドを非表示にすることを検討します
- 複雑なフォームをモバイルでより多くのステップに分割
-
徹底的にテスト： フォームを実際のデバイスで常にテストするか、ユニバーサルエディターのエミュレーターモードを使用して、画面サイズをまたいで正しく機能することを確認します。
-
読み込み時間の考慮： 特に低速の接続を使用するモバイルユーザーの場合、画像サイズを最適化し、必要なリソースを最小限に抑えます。