App Builder でレスポンシブデザインを作成しよう！ - インフラジスティックス・ジャパン株式会社Blog

こんにちは！ソリューションコンサルタントの田上です。

現代のWeb開発において、レスポンシブデザインは欠かせない要素です。スマートフォンやタブレット、デスクトップといった様々なデバイスで、同じサイトを快適に閲覧できることは、ユーザー体験の向上やビジネス成功の鍵となります。特に画面サイズや解像度が多様化する中で、柔軟なレイアウトが求められています。

App Builder を活用することで、このようなレスポンシブデザインを簡単かつ効率的に実現できます。App Builder はドラッグ＆ドロップの直感的なインターフェースで、Webアプリケーションを構築できるローコードツールです。

複雑なレイアウトも手軽に構築でき、コード自動生成により開発時間を大幅に短縮します。特に Flex レイアウトを使えば、解像度に応じた動的なレイアウト変更を容易に行えるため、様々なデバイスに対応したUIデザインが可能です。

この記事では、App Builder で「Flex レイアウト」と「Wrap（折り返し）機能」を活用して、効率的なレスポンシブデザインを構築する具体的な手順をご紹介します。

1. 親レイアウトを作成する
2. 子レイアウトを作成する
3. 完成したレイアウト（デモンストレーション）
4. WrapとNowrapの違い
- Wrap（折り返しあり）
- Nowrap（折り返しなし）
5. まとめ
App Builder でレスポンシブデザインを始めよう！

1. 親レイアウトを作成する

1-1. 最上位の親レイアウトを準備する

App Builder を起動したら、テンプレートから空のビューを準備します。この空のビューに対して、「最上位の親レイアウト」を配置していきます。

1-2. ツールボックスからレイアウトをドラッグ＆ドロップする

ツールボックスにある「Column Layout」もしくは「Row Layout」をキャンバスへドラッグ＆ドロップします。どちらのレイアウトを選んでも良いです。今回は親レイアウトとして「Row Layout」を配置したいと思います。

Column Layout：1列のレイアウトで「内部にN行の複数行」を持つことができるレイアウト部品
Row Layout：1行のレイアウトで「内部にN列の複数列」を持つことができるレイアウト部品

1-3. 親レイアウトに Flex と Wrap を設定する

先ほどドラッグ＆ドロップで配置した親レイアウトである「Row Layout」に対して設定を行います。

サイズ変更：「拡大」と「縮小」を同時選択します。
モード：「Flex」を選択します。
折り返し：「Wrap（折り返しあり）」を選択します。
マージン：「24px」を指定します。
外観（Bg.Fill）：「Gray-400（灰色）」を指定します。

作成した「親レイアウト（灰色）」は下図になります。この親レイアウトに対して、次のステップから「子レイアウト」を配置していきます。親レイアウトの背景色を灰色（Gray-400）に指定することで、子レイアウトとの差別化を表現しています。

1-4. なぜ Wrap（折り返し）を指定するのか？

ここで重要なことは、親レイアウトに Wrap（折り返し） を指定することです。Wrap を設定することで、子要素が親コンテナの幅を超えた場合に、自動的に折り返されます。これにより、画面サイズが小さくなったときでも要素が整列（子要素が並ぶ幅が足りなくなったときに次の行へ要素が自動配置）され、視認性が保たれます。

また、App Builder の Wrap/Nowrap の設定が提供されているのは「Flex レイアウトのみ」であることから、Flex レイアウトで作成しています。

2. 子レイアウトを作成する

次に、親レイアウトの中に3つの子レイアウトを作成します。ツールボックスから「Column Layout」をドラッグ＆ドロップして配置します。

子１レイアウト（赤）を作成する

まず始めに、子1レイアウト（赤）に対して下記を設定してください。

Column Layout：このレイアウトの内部にはUI部品を縦に並べて配置したいことから「Column Layout」を選択します。
幅の最小値：「280px」を指定します。画面サイズを狭めた場合にレイアウト崩れを防ぎます。
マージン：「24px」を指定します。
外観（Bg.Fill）：「赤色」を指定します。

また、子1レイアウト（赤）は、他の子2（青）、子3（緑）のレイアウトとは差別化したいため、サイズ比率を2:1に固定します。サイズ比率は下図の手入力ボタンを押下することで入力することができます。

「カテゴリチャート」と「グリッド」を配置し、グラフと表形式のデータを組み合わせたUIを作成します。カテゴリチャートとグリッドに下記のマージンと幅の最小値を設定してください。

マージン：「5px」を指定します。
幅の最小値：「unset」を手動で入力します。
高さの最小値：「500px」を指定します。
サイズ変更：「拡大」は「OFF」を選択します。

このステップで完成したレイアウトは下図のようになります。

子２レイアウト（青）を作成する

次に、子2レイアウト（青）には「Card（カード）」を配置します。ツールボックスから Card をドラッグ＆ドロップしてください。

幅：「unset」を手動で入力します。
幅の最小値：「unset」を手動で入力します。
マージン：「5px」を指定します。
モード：「Data」を選択し、モックAPIから「Employees（従業員）」を選択します。

また、Card のプロパティを下図のように設定してください。

Type：「Actions-Column」を選択します。
Title：接続済みのAPIから「firstName」を選択します。
Subtitle：接続済みのAPIから「title」を選択します。
Avatar：「OFF」を選択します。
Content：「OFF」を選択します。
Media：「ON」を選択します。
Image：アセット（Asset）ではなく「URL」を選択し、接続済みのAPIから「avatarURL」を選択します。

Card の完成イメージは下図のようになります。

このステップで完成したレイアウトは下図のようになります。

子３レイアウト（緑）を作成する

最後のステップとして、子3レイアウト（緑）に「カレンダー」を配置しましょう。ツールボックスから「Calender（カレンダー）」をドラッグ＆ドロップしてください。

幅：「auto min」から「unset」に再選択します。
幅の最小値：「auto min」から「unset」に再選択します。
マージン：「0px」を指定します。

このステップで完成したレイアウトは下図のようになります。

3. 完成したレイアウト（デモンストレーション）

では、完成したレイアウトのサイズを変更したときに、正しく動作するか確認しましょう。App Builder のサイズ変更機能を活用することでモバイル、タブレット、デスクトップ、大画面デスクトップ、全画面といったサイズ変更が可能です。下記のリンクをクリックして、実際に操作してみましょう。

デモンストレーション🔗（Infragistics へのユーザーログインが必要）

4. WrapとNowrapの違い

Wrap（折り返しあり）

Wrapは、子要素が親コンテナの幅を超えたときに自動で次の行に折り返されます。画面サイズが小さくなっても、要素が見やすく並べ替えられます。
例えば、3つの子要素が横並びの状態で、画面サイズが狭くなると子要素が自動で2列や3列に並び変わります。これにより、ユーザーはスクロールや拡大をせずにコンテンツを確認できます。

Nowrap（折り返しなし）

一方、Nowrapは、子要素が親コンテナの幅を超えても、強制的に横一列に並びます。この設定は、要素が狭い範囲に収まらず、スクロールが必要になるケースで使用されます。
例えば、横に並べた要素がコンテンツをはみ出す場合、Nowrapはそのままスクロールして表示させるので、要素の並び順を崩したくないケースに最適です。