Modal | Sparkle Design

モーダルはコンテンツに重ねられたウィンドウを介して、ユーザーの注意を特定の情報に集中させるために使用するコンポーネントです。

Anatomy: 解剖図

Modalの構成要素を示す解剖図。1はヘッダー要素を表すHeaderを、2はボディ要素を表すBodyを、3はフッター要素を表すFooterを、4はコンテナ要素を表すContainerを示します。

Item	Name	Description	Optional
1	Container	コンテナ要素	—
1	Header	ヘッダー要素	任意
2	Body	ボディ要素	—
3	Footer	フッター要素	任意

Headerの構成要素を示す解剖図。1はアイテム要素を表すHeaderを、2はタイトルを表示するテキスト要素を表すTitleを、3はモーダルを非表示にするための要素を表すCloseを示します。

Item	Name	Description	Component	Optional
1	Header	アイテム要素		—
2	Title	タイトルを表示するテキスト要素		—
3	Close	モーダルを非表示にするための要素	IconButton	任意

Options: 選択肢

Size

Smallサイズのモーダルです。横幅は320pxです。

Mediumサイズのモーダルです。横幅は512pxです。

Largeサイズのモーダルです。横幅は672pxです。

XLargeサイズのモーダルです。横幅は1024pxです。

full

Fullサイズのモーダルです。上下左右には40pxのオフセットが存在します。

データコンテンツなど、コンテンツ量が多い、または複雑な場合に使用します。

isHeader

True (default)

ヘッダーを表示するデフォルトのオプションです。

isHeader Trueの状態。「タイトル」というヘッダー、右上に閉じるボタン、「SLOT」というボディ領域、「キャンセル」と「保存」というボタンがあるフッターが表示されています。

False

ヘッダーを非表示にします。ヘッダーを非表示にする場合、必ずフッターを表示してください。

isCloseTrigger

True (default)

ヘッダーのクローズボタンを表示するデフォルトのオプションです。

isCloseTrigger Trueの状態。「タイトル」というヘッダー、右上に閉じるボタン、「SLOT」というボディ領域、「キャンセル」と「保存」というボタンがあるフッターが表示されています。

False

ヘッダーのクローズボタンをを非表示にします。クローズボタンを非表示にする場合、必ずフッターで代替のクローズトリガーを表示してください。

isFooter

True

フッターを表示するデフォルトのオプションです。

ヘッダーを非表示にする場合や、ヘッダーだけでモーダルに関するアクションや情報を表現できない場合は、フッターを表示します。

isFooter Trueの状態。「タイトル」というヘッダー、右上に閉じるボタン、「SLOT」というボディ領域、「キャンセル」と「保存」というボタンがあるフッターが表示されています。

False (default)

フッターを非表示にします。

フッターを非表示にする場合、必ずヘッダーを表示し、クローズボタンが機能するようにしてください。

isFooter Falseの状態。「タイトル」というヘッダー、右上に閉じるボタン、「SLOT」というボディ領域が表示されています。

Behaviors: 振る舞い

レイアウト

モーダルはウインドウの画面中央に固定表示されます。

上下左右には40pxのオフセットが存在します。また、モーダルはオーバーレイコンポーネントの上に配置されます。

フルサイズのモーダルも同様に上下左右に40pxのオフセットが存在します。これによりメインUIの文脈を残すことができます。

レイアウトの仕様を示す図。グレーの背景（オーバーレイ）の上に「ステータス設定」というモーダルが中央に配置されています。

領域外のクリック

領域外をクリックした際にモーダルを閉じるかどうかを、オプションで選択することができます。

Info
デフォルトは無効 (クリックでモーダルを閉じない) です。
有効にする場合は、モーダル内で行った作業内容が失われる可能性に考慮します。
基本的に情報を提示するモーダルのみに使用してください。

領域外のクリックを示す図。グレーの背景の上に「ステータス設定」というモーダルが表示され、背景の右上にカーソルアイコンが表示されています。

コンテンツのオーバーフロー

ディスプレイの表示領域よりもコンテンツが多い場合、コンテンツがオーバーフローされます。

ボディー領域の最下部は、追加コンテンツがあることを示す必要があります。

コンテンツのオーバーフローを示す図。「期間」と「備考」というラベル、日付入力フィールド、テキスト入力フィールド、「キャンセル」ボタンが表示されたモーダルです。

Metrics: 寸法

Vertical resizing: Hug
Horizontal resizing: Fixed
Padding top: 16px
Padding bottom: 16px

Usage: 使い方

適切な使用例。「ステータス設定」というモーダルに、「タスクのステータス」というラベルとセレクトフィルドが表示されています。

編集や管理タスクなど、短時間で頻度の低いタスクで使用します。

不適切な使用例。「ステータスの一括変更」というモーダルに、「3件のステータスを進行中に変更します。よろしいですか？」というテキストとキャンセルと実行ボタンが表示されています。

Don’t

アクションの実行・中断など、ユーザーのアクションを確認するメッセージには使用しないでください。代わりにダイアログを使用してください。

不適切な使用例。「ステータスの変更完了」というモーダルに「変更は正常に終了しました。」というメッセージと「閉じる」「OK」というボタンが表示されています。

Don’t

ユーザーの確認アクションを伴わないメッセージには使用しないでください。代わりにトーストを使用してください。

Contents: 内容

ヘッダータイトルは、モーダル内のタスクや目的を示すように簡潔に記述してください。また、タスクのアクションの接頭辞として機能するように留意してください。

Don’t

ヘッダータイトルは改行せずに記述してください。複数行になった場合は、タイトルを再検討してください。

Dialog

Toast

Change log: 変更履歴

Date	Changes
2025/06/02	Modalのmd〜fullサイズ調整ドキュメント更新
2025/03/27	ModalにFullサイズを追加
2025/01/31	ドキュメントを公開
2023/10/14	Figmaを公開