【Spring '26最新】Salesforce画面フローが劇的進化！「スタイルタブ」のデザイン編集を徹底解説

＼詳細はこちらをクリック／

toBeマーケティング株式会社では、お客様のマーケティング成果の最大化を目指し、デジタルマーケティング施策の戦略策定から、実際のSalesforce導入支援、導入後の活用支援、運用業務まで、お客様の状況や課題に合わせたサポートを幅広く提供しています。

また、Salesforceの使いやすさと美しさをプラスするデザインも得意としています。システムとしての機能性だけでなく、ユーザーが迷わないデザインの両立でお困りの方も、ぜひお気軽にご相談ください。
⇒ Salesforce導入支援の詳細はこちら

さらに、顧客情報基盤の構築や営業活動の効率化、マーケティングとの連携強化を通じて、
データに基づいた意思決定を実現できる体制づくりをサポートします。
⇒ 詳細はこちらよりお気軽にお問い合わせください！

▶︎関連ブログ： Salesforce のフローとは？作成方法を徹底解説！

Salesforceでは年に3回、大規模なアップデートが行われます。2026年春の最新アップデート「Spring '26」では、画面フローのユーザーインターフェース（UI）に関する画期的な新機能がリリースされました。

今回注目したいのは、画面フローにおけるデザインおよびレイアウト編集機能の強化です。 これまでの「項目を配置するだけ」の設計から、ノーコードで詳細な外観設定ができる「スタイルタブ」が追加されました。

この記事では、新機能の具体的な使い方、そして実際の作成手順までを解説します。

これまでのSalesforce画面フローでは、標準機能でのデザイン変更に限界があり、見た目を細かく変えることができませんでした。

Spring '26のアップデートにより、Flow Builderのプロパティパネルに「スタイル（Style）タブ」が新設されました。これにより、開発スキルがなくても、標準機能の範囲内でコンポーネントの外観（カラー、枠線など）を直接メニューから編集できるようになっています。

今回のアップデートで追加・強化された主なデザイン機能は以下の通りです。

Style タブの搭載

各コンポーネントの右側に設定タブが追加され、背景色やテキスト色、ボタン形状をプロパティから指定可能となりました。

Message コンポーネントの追加

「成功」「警告」「エラー」等の通知を、Salesforceの標準デザインガイドラインに準拠したバナー形式で配置可能となりました。

セクションの背景色・境界線設定

画面を分割する「セクション」ごとに背景色を設定でき、視覚的な情報のグループ化が容易になりました。

参考：参考：Salesforce Spring '26リリースノート：画面フローの更新Salesforce Summer '26

https://help.salesforce.com/s/articleView?id=release-notes.rn_automate_flow_builder_screen_flows.htm&release=260&type=5

ここからは、画面フロー内で実際にスタイルタブを使用して画面のデザインを編集する具体的な手順を解説します。今回は実践的な例として、「外出先からモバイルで商談と活動を同時に更新する入力画面」を作成していきます。

【 PC 入力画面】

【モバイル入力画面】

まずはシンプルな画面フローを作成します。 

設定＞「フロー」>「新規フロー」>「画面フロー」 を選択します。

商談のフェーズ要素を追加するため、右側の「新規リソース」をクリックし以下を作成します。

·        リソース種別:「選択リスト選択肢セット」

·        API参照名: StageChoicesなど

·        オブジェクト:「商談（Opportunity）」

·        データ型:「選択リスト」

·        項目:「フェーズ（StageName）」

次に、フローを商談レコードと紐づけるために、以下の変数を作成します。

リソース種別：変数

API参照名：recordId（※この名称）

データ型：テキスト

入力で使用可能：チェックを入れる

画面を作る前に、Salesforceから今の商談の名前を取ってきます。

キャンバス上の「＋」をクリックし、「レコードを取得」要素を追加します。

表示ラベル:商談名の取得

API名: Get_Opportunity

オブジェクト:「商談（Opportunity）」を選択。

項目: Id（商談ID）

演算子:次の文字列と一致する

値: {!recordId}

レコードデータを保存する方法:「すべての項目を自動的に保持」を選択。

キャンバス上の「＋」をクリックして「画面」要素を追加します。

セクションを追加し入力部分を作成します。

今回は1列で作成します。「列を追加」で列を追加します。さらに下に同様にセクションを5つ追加します。

1行目（商談名）

「表示テキスト」を入れ、値に「商談名」と入力。 その下に 「テキスト」コンポーネントを入れ、API参照名をOppNameに設定。 さらに「既定値」に{!Get_ Opportunity.Name}を設定することで、今開いている商談名が自動で入力された状態で入力をスタートできます。

2行目（本日の商談結果）

「表示テキスト」コンポーネントを入れ、API参照名をLabel_Stage、値に「フェーズ」と入力します。 その下に「選択リスト」を入れ、API参照名をStageに設定します。先ほど作成した選択肢の「StageChoices」のリソースを選択します。

3行目（活動内容）

「表示テキスト」コンポーネントを入れ、API参照名をLabel_Description、値に「今日の活動内容」と入力します。 その下に「ロングテキストエリア」コンポーネントを入れ、API参照名をDescriptionに設定します。

4行目（次回アクション）

「表示テキスト」コンポーネントを入れ、API参照名をLabel_NextStep、値に「次回アクション」と入力します。その下に「テキスト」を入れ、API参照名をNextStepに設定します。

5行目（次回のアプローチ日）

「表示テキスト」コンポーネントを入れ、API参照名をLabel_NextDate、値に「次回アプローチ日」と入力します。その下に 「日付」を入れ、API参照名をNextDateに設定します。

画面で入力した情報を、商談レコードに上書き保存します。

「レコードを更新」要素を追加

表示ラベル: Update_Opportunity

更新するレコードを検索して値を設定する方法:「レコードを特定するための条件を指定し、項目を個別に設定」を選択。

オブジェクト:「商談（Opportunity）」を選択。

項目: Id /演算子:次の文字列と一致する/ 値: {!recordId}

項目の値を設定します。

項目: CloseDate（または次回期限カスタム項目）←値: {!NextDate}

項目: Name ←値: {!Get_ Opportunity.Name}

項目: NextStep ←値: {!NextStep}

項目: StageName ←値: {!Stage}

同時に活動も作成します。

「レコード作成」要素を追加

表示ラベル: Create_Task

レコードの項目値の設定方法:手動

オブジェクト:「ToDo（Task）」を選択。

項目の値を設定

Subject（件名）:本日の商談報告：{!OppName}

ActivityDate（期日のみ）: {!NextDate}

Description（コメント）:【本日の内容】: {!Description}

WhatId（関連先ID）: {!recordId}

ここからが今回のアップデートで変わったデザイン部分の操作です。

TOPにロゴ等を使う場合、画像を保存します。

「設定」>「静的リソース」 を開きます。

「新規」をクリックし、ロゴ画像をアップロードします。

名前: CompanyLogo（後で使いやすい名前に）

キャッシュコントロール:公開

保存後、作成した名前を控えておきます。

コンポーネントから「表示テキスト」を検索し画面中央にドラック&ドロップ

API参照名をLogo_Header等の名前を付けます。

入力エリアの「画像挿入」アイコンをクリックし、「静的リソースから画像を追加」を選び、先ほど付けた名前を「静的リソース画像名」と「代替えテキスト」に入れます。

ロゴが入ります。

背景カラーの変更

ラベル部分の文字色をホワイトに設定します。

右側の設定パネルで「Style」タブに切り替え、以下の項目を編集します。

背景色: #00a1e4

境界線の色: #00a1e4

境界線の太さ: 6 (px)

他の項目も同様に設定していくことで、統一感のあるデザインになります。

入力フォームの最上部に、「これから何をするか」を示す案内バナーを配置します。

配置:画面の一番上（ロゴのすぐ下）に「Message」コンポーネントをドラッグ＆ドロップします。

API参照名: Message

メッセージ種別:情報を選択。

メッセージコンテンツ:「営業活動の報告を入力してください。」と入力します。

メッセージ種別の情報はグレー系、成功はグリーン系、警告はオレンジ系、重大は赤系になります。

また、このメッセージは、ユーザーの入力に応じて動的に変化させることができます。

設定例:割引率が一定数を超えた際、警告メッセージを表示し、同時に「確定」ボタンの色を赤に変更するなど。今回は入力が完了したら、「入力完了！保存を押してください。」とメッセージを出すように設定します。

表示を切り替える「数式リソース」を作成

リソース種別:数式

API参照名: f_DynamicMessage

データ型:テキスト

数式: IF(NOT(ISBLANK({!Description})), "入力完了！保存を押してください。", "今日の活動内容は入力しましたか？")Messageコンポーネントに数式を割り当てる

Messageコンポーネントの設定を開きます。

Messageの入力欄に、直接文字を打つのではなく、作成した{!f_DynamicMessage}を選択して入れます。

画面フローの中のメッセージ部分に移動します。

配置:画面の一番下に「Message」コンポーネントをドラッグ＆ドロップします。

API参照名: Input_Message

メッセージ種別:情報を選択。

メッセージコンテンツ:先ほど作成した数式を選択します。

また、右下のボタンの文字を保存に変更します。

画面のグレー部分などをクリックし全体の設定に戻ります。右側のフッターを設定の部分で「カスタム表示ラベルを使用」を押し、表示ラベルを保存にします。

まず「セクション」コンポーネントを画面に配置します。その1つのセクションの中に、関連する項目をドラッグ＆ドロップでまとめて入れます。

【上段カード】商談情報：1つのセクションの中に「商談名」と「フェーズ」の両方を配置します。

【下段カード】活動報告：別のセクションを用意し、その中に「今日の活動内容」「次回アクション」「次回アプローチ日」を配置します。

これで、バラバラだった項目が2つの大きな「情報のブロック」にまとまります。

次に、セクションごとの「スタイル」を設定します。

各セクションの枠をクリックし、右側のプロパティパネルで以下の値を入力します。

商談情報セクション（上段）の設定を薄いグレーの背景に仕上げます。

背景色: #f3f3f3

境界線の色: #f3f3f3

境界線の太さ: 6 (px)

活動報告セクション（下段）の設定

活動内容として、白背景で入力箇所を分けます。

背景色: #ffffff

境界線の色: #ffffff

境界線の太さ: 6 (px)

今回はスペースの調節で、各項目の下に「表示テキスト」を入れて調整しています。

アクションの新規作成

商談レコードからフローを呼び出すための「ボタン」を作ります。

「設定」＞「オブジェクトマネージャー」＞「商談」＞「ボタン、リンク、およびアクション」

「新規アクション」をクリック

アクション種別： フロー

フロー： 作成したフローを選択

表示ラベル： 本日の報告

名前(API名)：Sales_Report_Action

作ったボタンを、実際の商談画面で見えるように配置します。

「商談」のレコード画面を開き、右上の歯車アイコンから「編集ページ」を選択。

画面上の「強調表示パネル」(ボタンが並ぶエリア)をクリック。

右側の設定パネルにある「アクションを追加」を押し、「本日の報告」を選択。

表示位置はお好みで変更します。

「保存」をしてから「有効化」を押し、全ユーザーに見えるように設定します。

これで、商談右上に本日の報告ボタンが設置されました。

モバイルでの設置は、以下の設定が必要です。

設定＞オブジェクトマネージャー＞ページレイアウト＞該当のページレイアウトを選択し、モバイルおよびLightningのアクションで作成した本日の報告を追加します。

完成したフローをPC、スマホそれぞれで確認してみましょう。 商談レコードの「本日の報告」ボタンをクリックすると、設定した通りのブランドカラーや、セクションごとのまとまりが適用された美しい入力画面が表示されるはずです。

【PC】

【スマホ】

スマホで該当の商談に入り、ボタンを押します。

以上で完成です。

本記事では、Spring'26で拡充されたSalesforce画面フローのデザインの編集について実際に作成しながらご紹介しました。

新設された「スタイルタブ」を活用することで、自社のブランドや業務に最適な画面を構築できるようになります。今後はデザインの自由度がさらに広がり、自作コンポーネントへの適用も進む見通しです。

画面の視認性が向上すれば、ユーザーの入力ミス軽減や生産性向上に直結します。ぜひ新しいデザイン機能を活用し、使い勝手の良い画面設計に取り組んでみてください。

弊社はSalesforceの構築だけでなく、ユーザーが迷わない「UI/UXデザイン」も得意としております。

「標準機能でどこまでおしゃれにできるか？」「現場が本当に使いやすいレイアウトは？」など、具体的な活用事例やデザインのご相談があれば、お気軽に弊社までお問い合わせください。

本資料は、Salesforce CRMを活用した顧客データの統合および業務プロセスのデジタルトランスフォーメーション（DX ）に取り組む企業様の成功事例を多数ご紹介しております。

＼詳細はこちらをクリック／