マルチテナントSaaSにおけるデザイン【マルチテナントSaaSにおけるエンジニアリング大全 Day23】

はじめに

本記事は any Advent Calendar #2 「マルチテナントSaaSにおけるエンジニアリング大全」 Day23 の記事です。 弊社anyのアドベントカレンダーをひとつ丸ごと占有して、ひとりアドベントカレンダーとして、筆者の「マルチテナントSaaSのエンジニアリング」への経験をすべてアウトプットしていくカレンダーです。

今回はすこし視点を変えて、マルチテナントSaaSにおけるデザインについてエンジニア目線で語ろうと思います。

デザインシステムで支えるフロントエンド開発

エンジニアリングとデザインという観点においては、大手のB2B SaaSにおいてはデザインシステムを採用する企業も増えてきました。Day 13のマルチプロダクトの記事でも簡単に紹介しましたが、実際に生成AI時代ではFigmaのDev Modeなどを活用することで、UIのHTML/CSSコーディングの効率化を行うことができます。デザインの統一性という観点でも非常に重要になります💪

すでにデザインシステムを構築されている企業も多いため、下記の記事を参考にしてみることをおすすめします。

White-label SaaS

近年のB2B SaaSでは、テナント（導入企業）が自社のロゴやテーマカラーを設定できる White-label機能 を提供する流れが強まっています。厳密な定義では、White-label SaaSは「SaaSベンダーの名前やブランドを完全に隠し、導入企業のブランドとして提供できる」形態を指しますが、完全なWhite-labelではなく、部分的なブランディングカスタマイズを提供するケースが多く見られます。具体的には下記のような機能になります。

• ログイン画面への自社ロゴの表示
• アプリケーション内のヘッダーロゴのカスタマイズ
• プライマリカラーやアクセントカラーの変更
• ファビコンの設定
• カスタムドメインの利用

マルチテナントSaaSにWhite-label機能が求められる背景には、従業員が日々利用する業務システムが「自社のブランド」として表示されることで、心理的な受容度が高まるというメリットがあります。特にエンタープライズ企業では、社内システムの統一感が重視されることが多く、外部SaaSであっても自社システムのように見せたいというニーズがあります。

管理者設定 / ユーザ設定が複雑になりがち

マルチテナントSaaSでは、テナント管理者とエンドユーザで見える画面や設定項目が大きく異なります。この二層構造が、UI設計を複雑にする大きな要因となります。

• テナント管理者設定：テナント全体に影響する設定（組織情報、権限設定、統合設定など）
• エンドユーザ設定：個人のプリファレンス（通知設定、表示設定、言語設定など）

SaaSが成長するにつれて、機能が増え、それに伴い設定項目も増加していきます。このあたりはプロダクト内のUIデザインのみならず、実際にはヘルプページなどで丁寧に解説をすることが多いでしょう。Qastにおいてもカスタマーサクセスのメンバーがサポートページをプロダクトの改善に合わせて、日々更新をかけてくれています。

ユニバーサルデザインへの取り組み

マルチテナントSaaSは、多様な企業の多様な従業員が利用するプラットフォームになるため、アクセシビリティの観点も非常に重要になるでしょう。

• キーボード操作への対応

  • Tabキーでのフォーカス移動
  • Enter/Spaceでの操作実行
  • Escでのモーダル閉じる操作
  • 論理的なフォーカス順序の設定

• スクリーンリーダーへの対応

  • 適切なHTML5セマンティック要素の使用（<nav>, <main>, <button>など）
  • ARIA属性の適切な使用（aria-label, aria-describedbyなど）
  • 画像への代替テキスト（alt属性）の設定
  • フォーム要素への適切なラベル付け

• 色覚対応

  • 色だけに依存しない情報伝達（アイコン、テキストラベルの併用）
  • 十分なコントラスト比の確保（WCAG 2.1では4.5:1以上を推奨）
  • 複数の色を使い分ける際の配慮（赤と緑だけで区別しない）

• フォントサイズへの対応

  • 相対単位（rem, em）の使用
  • ブラウザのズーム機能で200%まで拡大しても崩れないレイアウト
  • ユーザがフォントサイズをカスタマイズできる設定

取り組み自体を積極的に公開する企業もあるため、ぜひ参考にしてみると良いでしょう。

さいごに

プロダクトにおけるデザインにおいてもエンジニアが意識する側面は非常に多く、デザイナーとの協業は言わずもがな重要になります。マルチテナントSaaSならではの考慮事項も押さえた上で、エンジニアリングの設計を行えると良いですね🧑‍🎨