翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# ビューで列のレイアウト、色、データ定義を設定する
このトピックでは、Amazon Connect UI ビルダーで列レイアウト、色、動的データフィールドを設定して、コンタクトセンターエージェントのビューをカスタマイズする方法について説明します。
UI ビルダーでは、次の図に示すように、**カスタマイズ**パネルが右側にあります。
**[カスタマイズ]** パネルを使用して以下を設定することができます。
+ ビューリソース全体のグローバル設定
+ コンポーネントレベルのローカル設定 各コンポーネントには独自のプロパティセットがあります。
**[カスタマイズ]** パネルを使用して、次のようなビューの設定範囲を設定します。
+ 列のレイアウト
+ カラー
+ 動的データマッピング
+ サンプルデータ
+ 静的データ定義
## ビューのグローバルレイアウトと色の設定
グローバル設定を構成するには、次の図に示すように、**[カスタマイズ]** パネルに移動して、グローバル設定アイコンを選択します。
グローバル設定を使用して、ビューの全体的なレイアウトと色を設定することができます。
+ **[アライメント]** セクションを使用して、ビューでのコンポーネントの相対位置 (左、中央、右) を指定します。
+ 3 つの色フィールドを選択します。
+ プライマリカラー
+ セカンダリカラー
+ ニュートラルカラー
ビュー内の各コンポーネントは、デフォルトでこの設定を適用します。ただし、コンポーネントをカスタマイズする場合は、このようなグローバルカラー設定を上書きできます。
## 列のレイアウト
ビューリソースは 12 列のフレックスボックスパターンを使用します。コンポーネントは互いに相対的な位置に配置されます。コンポーネントをピクセル単位でキャンバスに配置することはできません。これにより、ビューの構成を失うことなく、ビューのサイズをレスポンシブにスケールアップおよびスケールダウンできます。
グローバル設定では、列のグループ化方法を指定できます。例えば、**[列]** セクションでは、ビューを 6 列の 2 つのセクションに分割して、次の図のようにレイアウトにすることができます。
次の図は、このレイアウトがエージェントに対してどのように表示されるかの例を示しています。
**[カスタマイズ]** スライダーを使用して、このようなグループの比率を変更することもできます。例えば、次の図に示すように、ビューの左側が 4 列、右側が 8 列になるように設定できます。
次の図は、このレイアウトがユーザーにどのように表示されるかの例を示しています。
