Salesforce画面設計で分かりづらい二つの要素の役割を解説
Salesforceのレコード画面を設定していると、次のように感じることはないでしょうか。
- ページレイアウトを変更したのに、画面の見え方が思ったように変わらない
- ページレイアウトとレコードページの違いがわからない
- 動的フォームを使うと、どこで項目を管理すればよいのか分からない
- ［レコードの詳細］と［項目セクション］の違いが分かりづらい
SalesforceのLightning Experienceでは、レコード画面を構成する設定として、主に「ページレイアウト」と「レコードページ」があります。さらに、動的フォームを使用すると、Lightning アプリケーションビルダー上で項目や項目セクションを配置できるようになります。
そのため、画面設計を行う際には、ページレイアウト、レコードページ、動的フォームの関係を整理して理解することが重要です。
本記事では、ページレイアウトとレコードページの役割の違いを整理しながら、動的フォームを使用する場合に注意したい［項目セクション］とレコード作成時の入力項目の関係について解説します。
ページレイアウトとは？
ページレイアウトは、オブジェクトのレコードに表示される項目、セクション、関連リスト、アクションなどを制御するための設定です。
たとえば商談であれば、商談名、取引先名、金額、フェーズ、完了予定日などの項目を、どのセクションに、どの順番で配置するかを設定します。
また、レコード画面上で使用するアクションや、関連リストの表示にも関係します。
簡単に言うと、ページレイアウトは、
「そのオブジェクトのレコードに、どの項目や操作を持たせるか」
を決める設定です。
従来は、レコードの詳細情報として表示される項目の配置は、ページレイアウトで管理することが一般的でした。
そのため、Salesforce管理者の方にとっては、「項目の並び順を変える」「表示する項目を調整する」と聞くと、まずページレイアウトを思い浮かべるケースも多いと思います。
ただし、Lightning Experienceでは、レコードページという別の設定も存在します。
このため、ページレイアウトだけを見ていても、実際の画面全体の構成を把握しきれない場合があります。
レコードページとは？
レコードページは、ユーザーがレコードを開いたときの画面全体の構成を決める設定です。
レコードページは、Lightning アプリケーションビルダーで編集します。
ここでは、［レコードの詳細］、活動、関連リスト、Chatter、レポートグラフ、リッチテキスト、カスタムコンポーネントなどを、画面上のどこに配置するかを設定できます。
たとえば商談のレコードページであれば、次のような構成を作ることができます。
- 画面上部にハイライトパネルを表示する
- 中央に商談の詳細情報を表示する
- 右側に活動やToDoを表示する
- タブで「詳細」「関連」「活動」を切り替える
- 補足説明や入力ルールをリッチテキストで表示する
- 必要に応じてレポートグラフやカスタムコンポーネントを配置する
つまり、レコードページは、
「ユーザーがレコードを開いたときに、画面全体をどのように見せるか」
を決める設定です。
ページレイアウトが「項目や操作の設計」だとすると、レコードページは「画面体験の設計」と言えます。
ページレイアウトとレコードページの違い
ページレイアウトとレコードページは、どちらもレコード画面に関係する設定ですが、役割は異なります。
ページレイアウトは、項目、セクション、関連リスト、アクションなど、レコードの中身や操作に関係する設定です。
一方、レコードページは、画面全体の構成やコンポーネントの配置に関係する設定です。
たとえば、商談画面を例にすると、次のように整理できます。
商談フェーズ、金額、完了予定日などの項目をどのように持たせるかは、ページレイアウトの考え方です。
一方で、詳細情報を画面のどこに表示するか、活動を右側に出すか、関連リストをタブ内にまとめるかといった画面構成は、レコードページの考え方です。
この違いを理解していないと、次のような混乱が起きやすくなります。
- ページレイアウトを編集したのに、画面全体の見え方が変わらない
- レコードページを編集したが、項目の表示内容は想定どおりにならない
- どの設定がユーザーの画面に影響しているのか分からない
Salesforceの画面を考える際は、まず
ページレイアウトは項目や操作を管理する設定
レコードページは画面全体の構成を管理する設定
と切り分けて理解すると分かりやすくなります。
［レコードの詳細］コンポーネントとは？
レコードページ上で、ページレイアウトに設定された項目を表示する代表的なコンポーネントが、［レコードの詳細］コンポーネントです。
［レコードの詳細］コンポーネントをレコードページに配置すると、ページレイアウトで設定された項目やセクションが、レコードページ上に表示されます。
つまり、［レコードの詳細］コンポーネントを使用している場合、実際に表示される項目の中身はページレイアウト側の設定に依存します。
この構成では、役割は比較的シンプルです。
レコードページでは、［レコードの詳細］コンポーネントをどこに配置するかを決めます。
ページレイアウトでは、その中に表示される項目やセクションを決めます。
そのため、［レコードの詳細］コンポーネントを使っている画面では、レコードページとページレイアウトが連動していると考えるとよいでしょう。
動的フォームとは？
動的フォームは、ページレイアウト上の項目やセクションを、Lightning アプリケーションビルダー上の個別のコンポーネントとして扱えるようにする機能です。
動的フォームを使用すると、レコードページ上に［項目セクション］を配置し、その中に項目を追加できます。
これにより、従来の［レコードの詳細］コンポーネントとは異なり、レコードページ上で項目やセクションをより柔軟に配置できるようになります。
たとえば、次のような設定が可能です。
- 項目セクションを画面内の任意の場所に配置する
- 項目や項目セクションに表示条件を設定する
- 特定のフェーズのときだけ項目を表示する
- 特定のユーザーや条件に応じて項目を出し分ける
- 入力が必要な情報と、参照用の情報を分けて表示する
たとえば商談であれば、フェーズが「提案中」のときだけ提案関連の項目を表示し、フェーズが「失注」のときだけ失注理由を表示するといった設計ができます。
これにより、常にすべての項目を画面に表示するのではなく、必要なタイミングで必要な項目を表示しやすくなります。
複数の［項目セクション］を設置する場合の注意点
動的フォームでは、レコードページ上に複数の［項目セクション］を配置できます。
これにより、レコード詳細画面では「基本情報」「提案情報」「失注時入力情報」など、目的別に項目を整理して表示できます。
ただし、注意したいのはレコード作成時の入力項目です。
動的フォームを使用し、レコードページ上に複数の［項目セクション］を配置している場合、レコード作成時の入力項目は、レコードタイプに割り当てられたページレイアウトではなく、レコードページ上に配置された項目と同一になります。
つまり、レコード詳細画面で表示するために配置した項目が、そのままレコード作成時の入力項目にも反映されます。
そのため、［項目セクション］を設計する際は、レコード詳細画面での見やすさだけでなく、レコード作成時にどの項目を入力させたいかもあわせて考えることが重要です。
［レコードの詳細］と［項目セクション］の混在に注意する
動的フォームを使用する場合、もう一つ注意したいのが、［レコードの詳細］コンポーネントと［項目セクション］の混在です。
［レコードの詳細］コンポーネントは、ページレイアウトに基づいて項目を表示します。
一方、［項目セクション］は、動的フォームとしてレコードページ上に直接配置した項目を表示します。
この2つを同じレコードページ上で混在させると、画面上に同じ項目が重複して表示されたり、どの設定がどの表示に影響しているのか分かりづらくなったりすることがあります。
たとえば、ページレイアウト側にも「完了予定日」があり、動的フォームの［項目セクション］にも「完了予定日」を配置している場合、ユーザーから見ると同じ項目が複数箇所に表示される可能性があります。
また、管理者側でも、項目の表示位置を変更したいときに、ページレイアウトを編集すべきなのか、レコードページの［項目セクション］を編集すべきなのか判断しづらくなります。
そのため、動的フォームを利用する場合は、基本的には［レコードの詳細］コンポーネントと［項目セクション］の役割を整理し、どちらを中心に画面を構成するのかを決めておくことが大切です。
動的フォーム利用時の設計ポイント
動的フォームを活用する際は、次のような観点で設計すると分かりやすくなります。
まず、レコードページ上で表示したい項目を整理します。
そのうえで、常に表示する項目、条件付きで表示する項目、レコード作成時に入力させたい項目を分けて考えます。
たとえば、次のような分類です。
- 常に表示したい項目
- 特定のフェーズで表示したい項目
- 特定のユーザーにだけ表示したい項目
- レコード作成時に入力してほしい項目
- 参照用として表示したい項目
この分類を行ったうえで、［項目セクション］をどのように配置するかを考えます。
特に重要なのは、
「見せたい項目」と「作成時に入力させたい項目」を同じものとして扱わない
という点です。
画面上に見せたいだけの項目もあれば、レコード作成時に入力してほしい項目もあります。
動的フォームでは、この違いを意識して設計しないと、想定外の項目が作成時の入力項目に含まれたり、ユーザーにとって分かりづらい入力画面になったりすることがあります。
また、表示条件を増やしすぎないことも重要です。
動的フォームでは、条件に応じて項目や項目セクションを表示できるため、非常に柔軟な画面設計が可能です。
しかし、条件が増えすぎると、管理者自身も「なぜこの項目が表示されているのか」「なぜこのユーザーには見えないのか」を把握しづらくなります。
最初から複雑な条件を設定するのではなく、まずは業務上必要な範囲に絞って設計するのがおすすめです。
まとめ
Salesforceの画面設計では、ページレイアウトとレコードページの役割を整理して理解することが重要です。
ページレイアウトは、項目、セクション、関連リスト、アクションなど、レコードの中身や操作に関係する設定です。
レコードページは、Lightning アプリケーションビルダーで編集する、画面全体の構成やコンポーネント配置に関係する設定です。
従来の構成では、レコードページ上に［レコードの詳細］コンポーネントを配置し、その中身をページレイアウトで管理する形が一般的です。
一方、動的フォームを使用すると、レコードページ上に［項目セクション］を配置し、項目やセクションをより柔軟に管理できます。
ただし、動的フォームを使用し、レコードページ上に複数の［項目セクション］を配置している場合、レコード作成時の入力項目は、レコードタイプに割り当てられたページレイアウトではなく、レコードページ上に配置された項目と同一になります。
そのため、
「レコード詳細画面で表示したい項目」
「レコード作成時に入力させたい項目」
「条件付きで表示したい項目」
を整理したうえで設計することが大切です。
動的フォームを活用することで、Salesforceのレコードページはより柔軟に設計できます。
一方で、ページレイアウト、レコードページ、項目セクションの関係を理解しないまま設定すると、画面やレコード作成時の挙動が分かりづらくなることもあります。
まずは、それぞれの役割を整理し、自社の業務に合った画面構成を検討してみてはいかがでしょうか。
