Salesforce Lightning Design Systemのグリッドで学ぶデザインシステム活用術
デザインシステムを「使う」とはどういうことか
デザインシステムという言葉はよく聞くが、実際に使ったことがある開発者は意外と少ない。Material Design のCSSをコピペしたことはあっても、体系的にデザインシステムに従って開発する経験は、業務でSalesforceを触るまで私にはなかった。
Salesforce の Lightning Design System（SLDS）は、エンタープライズ向けUIの設計方針が徹底されたデザインシステムだ。グリッド・タイポグラフィ・カラー・コンポーネント・アクセシビリティまで、ひとつの巨大な仕様書にまとまっている。今回はその中でも「グリッドシステム」の実装を中心にまとめる。
SLDS のグリッドシステムとは
SLDS のグリッドは Flexbox ベースで、12カラムではなく割合ベースの指定が特徴だ。
カラム1
カラム2
slds-col だけだと均等分割になる。幅を指定したい場合は slds-size_-of- クラスを使う。
サイドバー (1/3)
メインコンテンツ (2/3)
12カラムグリッドに慣れていると少し戸惑うが、分数で指定する方が「このカラムが全体の何割か」が直感的にわかる。
レスポンシブ対応
SLDSのブレークポイントは small・medium・large の3段階だ。
| クラスプレフィックス | ブレークポイント |
|—|—|
| slds-small-size_* | 480px以上 |
| slds-medium-size_* | 768px以上 |
| slds-large-size_* | 1024px以上 |
実際のコードで確認する。
商談案件A
金額: ¥1,200,000
更新日: 2026-03-07
slds-wrap を親に付けることで折り返しが有効になる。これを忘れると全カラムが1行に収まろうとして崩れる。
Spacing Utility の活用
SLDSの間隔管理はユーティリティクラスで行う。マジックナンバーをCSSに直接書かなくて済む。
サイズは x-small・small・medium・large・x-large の5段階。これが全コンポーネントで統一されているので、UIに一貫感が生まれる。
フォームレイアウトの実装例
商談登録フォームをSLDSで実装してみた。
¥
slds-gutters_small はカラム間のガターを自動で管理してくれる。左右のカラムが端に寄りすぎず、自然な間隔が保たれる。
アクセシビリティが標準で組み込まれている
SLDSを使っていて驚いたのは、アクセシビリティの配慮が仕様に組み込まれていることだ。
商談の編集
...
aria-hidden="true" をアイコンに付けるのは「アイコン自体を読み上げさせない」ための指示だ。ボタンのテキスト「新規作成」だけが読み上げられる。こうした細かい配慮がSLDS仕様に明記されている。
Salesforce以外でSLDSを使う
SLDSはSalesforceのプロダクト専用ではなく、オープンソースで公開されている。非Salesforce環境でも使える。
ただしアイコンスプライトは別途ダウンロードが必要で、SVGアイコンの参照パスを自前で管理する必要がある。
デザインシステムを使う開発の変化
SLDSを使って変わったのは、「このコンポーネントのpaddingは何pxにしよう」という判断をしなくなったことだ。迷う必要がない。slds-m-around_medium を使えばいい。
デザイナーとのやり取りも変わった。「このカードのマージンをもう少し広くしてほしい」という依頼が来たとき、「medium から large に変えますか？」という会話ができる。数値ではなく意味で話せる。
一方で、SLDSの学習コストは無視できない。クラス名の命名規則を覚えるまでは、ドキュメントをひっきりなしに参照することになる。でもそれは一時的なコストで、覚えてしまえば実装速度は明らかに上がった。
まとめ
Salesforce Lightning Design System のグリッドを中心に、デザインシステムを使った開発の流れを紹介した。
デザインシステムは「覚えるコスト」より「迷わなくなるメリット」の方が大きいと感じている。特にチーム開発では、デザインの一貫性を担保するコストが劇的に下がる。