VisualforceをLightning仕様に近づける設定と注意点

Lightning Experienceでも動くが見た目は変わらない

Visualforceページは、Lightning Experienceのタブやカスタムアプリの中でもそのまま動きます。ただし、表示は自動的にLightning仕様になりません。標準コンポーネントはClassicの見た目のまま表示されます。これがLightning Experience移行で最初につまずく点です。公式ガイドは、Lightning Experienceのスタイルシートを既存ページへ手動で適用する方法を案内しています。

lightningStylesheetsで見た目を合わせる

apex:pageタグにlightningStylesheets="true"を付けると、ページ全体にLightning Design Systemのスタイルが適用されます。公式ガイドによれば、対象はapex:pageBlockやapex:pageBlockSection、apex:dataTable、apex:commandButton、apex:inputFieldなど70以上の標準コンポーネントです。

Classic版はこのページからlightningStylesheets="true"が抜けているだけで、他のマークアップは同じです。

<apex:page standardController="Account" lightningStylesheets="true">
<apex:form>
<apex:pageBlock title="My Content" mode="edit">
<apex:pageBlockButtons>
<apex:commandButton action="{!save}" value="Save"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<apex:inputField value="{!account.site}"/>
<apex:inputField value="{!account.type}"/>
<apex:inputField value="{!account.accountNumber}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

元のページに属性を1つ足しただけです。マークアップは変えていません。

コントローラを持つページも属性だけで対応する

selectList・selectRadio・dataTableのようにApexコントローラを持つページも、直す場所はapex:pageタグだけです。コントローラのApexコードは変更しません。

<apex:page controller="selectRadioController" lightningStylesheets="true">
<apex:form>
<apex:selectRadio value="{!country}">
<apex:selectOptions value="{!items}"/>
</apex:selectRadio>
<apex:commandButton value="Test" action="{!test}" rerender="out" status="status"/>
</apex:form>
<apex:outputPanel id="out">
<apex:actionstatus id="status" startText="testing...">
<apex:facet name="stop">
<apex:outputPanel>
<p>You have selected:</p>
<apex:outputText value="{!country}"/>
</apex:outputPanel>
</apex:facet>
</apex:actionstatus>
</apex:outputPanel>
</apex:page>

selectRadioのページにlightningStylesheetsを追加します。コントローラ側は変更不要です。

⚠️ 実際の見た目は、組み合わせるコンポーネントや独自のCSSによって変わります。最終的な見た目はSandboxで確かめてください。

windowオブジェクトとURLの扱いを見直す

Classic向けに書かれたVisualforceには、Lightning Experienceで問題になりやすい書き方があります。

JavaScriptカスタムボタンはLightningで動かない

OnClick JavaScriptを使うカスタムボタン・リンクは、Lightning Experienceでは動きません。公式ヘルプは「Custom buttons that call JavaScript aren't supported in Lightning Experience.」と明記しています。REQUIRESCRIPT関数もOnClick JavaScript専用の機能なので、同じ制約を受けます。置き換え先は、クイックアクション、Flow、Lightning Web Componentsのいずれかです。既存のJavaScriptのロジックをそのまま移すのではなく、機能単位で作り直します。

ここで間違えやすい

確認した環境

• 2026年9月 ／ Salesforce Summer '26（APIバージョン67.0）時点の公式ドキュメントで、lightningStylesheetsの対応範囲とJavaScriptボタンの制限を確認しています

まとめ

• Visualforceページ自体はLightning Experienceでも動きますが、見た目は自動的には変わりません
• apex:pageにlightningStylesheets="true"を付けると、標準コンポーネントの多くがLightning Design Systemの見た目になります
• 一部のコンポーネントやrenderAs="pdf"のページ、Experience Cloudサイトには効果がありません
• window.locationはsforce.oneのナビゲーションメソッドに置き換えます
• JavaScriptカスタムボタンはLightning Experienceで動きません。クイックアクションやFlow、LWCに作り直します