Sparkle Design

Drawer

ドロワーは同一ウィンドウ内で補助的な情報や操作を一時的に提供するコンポーネントです。

Drawer の概要図

Anatomy: 解剖図

Drawerの構成要素を示す解剖図。1はDrawer全体を囲むContainerを、2はタイトルと閉じるボタンを含むHeaderを、3はコンテンツを表示するBodyを、4はオプションで配置可能なアクションボタンを含むFooterを示します。
ItemNameDescriptionComponentOptional
1Containerコンテナ要素
2Headerヘッダー要素
3Bodyボディ要素
4Footerフッター要素任意

Options: 選択肢

Size

sm

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

smサイズのDrawer。

md

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

mdサイズのDrawer。

lg

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

lgサイズのDrawer。

isFooter

True (default)

フッターを表示するデフォルトのオプションです。ボディのコンテンツに対するアクションを提示します。

isFooter true のDrawer。「キャンセル」「保存」というアクションボタンを含むFooterが表示されているDrawerです。

False

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

フッターを非表示にする場合は、ヘッダーのコントロールタイプをデフォルト(Close)にする必要があります。

isFooter false のDrawer。Footerが非表示にするDrawerです。

Behaviors: 振る舞い

オーバーレイ

領域外のアクションを受け付けない場合は、オーバーレイが表示されます。

オーバーレイの振る舞いを示す図。画面左側に「メニュー」というタイトルのDrawerが表示されています。

領域外のクリック

オーバーレイ利用かつ領域外をクリックした際に、ドロワーを閉じるかどうかをオプションで選択することができます。

Info
デフォルトは有効 (クリックでドロワーを閉じる) です。
有効にする場合は、ドロワー内で行った作業内容が失われる可能性に考慮します。
基本的に、領域外のクリックを受け付ける場合は、ドロワー内で情報を提示する用途で使用してください。
領域外クリックの振る舞いを示す図。画面左側に「メニュー」というタイトルのDrawerが表示され、右側のオーバーレイ領域にマウスカーソルが配置されています。

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

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

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

コンテンツオーバーフローの振る舞いを示す図。DrawerのBody内に複数の入力フィールドが縦に配置されています。

ドロワーの表示起点

情報の提示文脈に合わせて、上下左右の表示起点を選択することができます。

上下いずれかを起点にして配置する場合は、横幅の定義は破棄され、親要素の横幅に依存します。

表示起点の振る舞いを示す図。画面下部から「タイトル」というHeaderと「内容」というテキストを含むDrawerが表示されています。

Metrics: 寸法

  • Vertical resizing: Hug
  • Horizontal resizing: Fixed
  • Padding top: 16px
  • Padding bottom: 16px
Drawerの寸法仕様を示す図。

Usage: 使い方

Slotの使用方法は、 Sparkle UI for Figma - スロットの使用 をご覧ください。

不適切な使用例。「案件情報の設定」というタイトル、閉じるボタン、入力フィールド、「キャンセル」「保存」ボタンを含むDrawerです。
Don’t

ヘッダーの閉じるボタンとフッターのキャンセルボタンなどの挙動が重複するアクションを、違う見た目で複数配置しないようにしてください。

一つの挙動に対しては、一貫した識別性を担保するように留意してください。

Contents: 内容

適切な使用例。「チュートリアル」というタイトルと「はじめに」というセクション、説明テキストを含むDrawerです。
Do

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

不適切な使用例。「このアプリの操作チュートリアル」という長いタイトルが複数行に改行されて表示され、「はじめに」というセクション、説明テキストを含むDrawerです。
Don’t

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

Change log: 変更履歴

DateChanges
2025/06/20ドキュメントを公開
2025/06/3Figmaを公開
小さな気づきや違和感があればお気軽に教えてください。
フィードバック
Chat illustration