LWCでSLDSとカスタムCSSを活用して美しいUIを作る方法

日付:


Salesforce Lightning Web ComponentsにおけるCSSとLightning Design System (SLDS) の活用方法

SalesforceのLightning Web Components (LWC) では、ユーザーインターフェースの美しさと一貫性を実現するために、Lightning Design System (SLDS) を利用することが推奨されています。SLDSは、Salesforceのネイティブなデザインガイドラインに沿った、豊富なUIコンポーネントとユーティリティクラスを提供します。さらに、必要に応じてカスタムCSSを組み合わせることで、独自のブランディングや特定のデザイン要件に対応することが可能です。

1. Lightning Design System (SLDS) とは？

SLDSはSalesforceが提供する公式のフロントエンドフレームワークで、以下の機能を備えています：

  • プリビルトUIコンポーネント: ボタン、カード、モーダル、データテーブルなど。

  • レスポンシブグリッドシステム: 柔軟で適応性のあるレイアウトを簡単に作成可能。

  • ユーティリティクラス: スペーシング、タイポグラフィ、アラインメントなどの共通スタイルを迅速に適用。

  • アクセシビリティ: ARIAロール、キーボード操作、スクリーンリーダー対応が組み込まれている。

SLDSを利用することで、Salesforceの標準UIと一貫性のあるデザインを容易に実現でき、ユーザーエクスペリエンスの向上が期待できます。

2. LWCでSLDSを利用する方法

2.1 基本のLWCコンポーネントでSLDSを利用する

Salesforceが提供する基本コンポーネント（例: や ）は、SLDSが自動的に適用されています。たとえば、以下の例では、ボタンがSalesforceのデザインに準拠したスタイルで表示されます。

<template>
    <lightning-card title="基本コンポーネントの例">
        <lightning-button label="クリックしてください" onclick={handleClick}></lightning-button>
    </lightning-card>
</template>


import { LightningElement } from 'lwc';
export default class BasicComponent extends LightningElement {
    handleClick() {
        console.log('ボタンがクリックされました。');
    }
}

このように、SLDSが組み込まれているため、追加のスタイル指定なしでSalesforceらしい見た目が得られます。

2.2 カスタムCSSを組み合わせる

SLDSのユーティリティクラスやコンポーネントに、必要に応じてカスタムCSSを追加することで、ブランドカラーや独自デザインを実現できます。LWCでは、各コンポーネントのCSSはshadow DOMにスコープされるため、他のコンポーネントに影響を与えることなくスタイルを定義できます。

例: カスタムボタンコンポーネント

HTML:

<template>
    <lightning-card title="カスタムボタン例">
        <button class="custom-button" onclick={handleClick}>カスタムボタン</button>
    </lightning-card>
</template>

CSS:

/* コンポーネント専用のスタイル */
.custom-button {
    background-color: #0070d2;  /* Salesforceブルー */
    color: #ffffff;
    border: 1px solid #005bb5;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.custom-button:hover {
    background-color: #005bb5;
}

JavaScript:

import { LightningElement } from 'lwc';
export default class CustomButton extends LightningElement {
    handleClick() {
        alert('ボタンがクリックされました！');
    }
}

この例では、custom-button クラスを使ってボタンのスタイルを独自に定義していますが、必要に応じてSLDSのユーティリティクラスを併用することも可能です。

2.3 LDSユーティリティクラスの活用

SLDSは、簡単なレイアウト調整のためのユーティリティクラスも提供しています。これを使用することで、余分なカスタムCSSを記述せずに迅速なデザイン調整が可能です。

例: ユーティリティクラスの併用
<template>
    <lightning-card title="ユーティリティクラスの使用例">
        <div class="slds-p-around_medium slds-border_bottom slds-text-heading_small">
            Hello, World!
        </div>
        <lightning-button label="送信" class="slds-m-top_medium" onclick={handleClick}></lightning-button>
    </lightning-card>
</template>

ここでは、slds-p-around_medium（中程度のパディング）、slds-border_bottom（下部の境界線）、slds-text-heading_small（小見出しテキスト）などのユーティリティクラスを使って、迅速かつ一貫性のあるスタイリングを行っています。

3. ベストプラクティス

  1. まずはSLDSを活用する
    可能な限り、Salesforceが提供する標準コンポーネントとユーティリティクラスを利用し、デザインの一貫性とアクセシビリティを保ちます。

  2. カスタムCSSは必要最小限に
    ブランディングや特定のUI効果が必要な場合のみ、カスタムCSSを追加します。CSS変数やカスタムプロパティを活用して、メンテナンスしやすいコードを書くことが重要です。

  3. shadow DOMのスコープを意識する
    LWCのCSSはコンポーネント単位でスコープされるため、他のコンポーネントへの影響を避けるため、スタイルの衝突に注意しましょう。

  4. パフォーマンスに配慮する
    大規模なUI変更が必要な場合は、必要な部分だけにスタイルを適用するなど、パフォーマンスにも注意を払いましょう。

まとめ

Lightning Design System (SLDS) は、Salesforceらしい一貫性のあるUIを簡単に構築するための強力なツールです。LWCと組み合わせて使用することで、標準コンポーネントのメリットを活かしながら、必要に応じてカスタムCSSを追加して独自のデザインを実現できます。
これにより、ユーザーエクスペリエンスが向上し、保守性や拡張性にも優れたアプリケーションを開発することが可能です。

以上、LWCにおけるSLDSとカスタムCSSの使い方について説明しました。これらの手法を活用して、効率的かつ美しいSalesforceアプリケーションの構築を目指しましょう。

コメント

コメントを投稿