Sparkle Design

Stepper

ステッパーは、複数のステップを順番に進むプロセスを視覚的に表現するためのコンポーネントです。

Figma
Stepper の概要図

Anatomy: 解剖図

Stepperの構成要素を示す解剖図。1は各ステップを表す円形の要素を表すStepを、2は1の中央にステップ間をつなぐ線を表すLineを、3は1の下に配置されステップの説明テキストを表すLabelを示しています。
ItemNameDescriptionComponentOptional
1Step各ステップを表す円形の要素
2Lineステップ間をつなぐ線
3Labelステップの説明テキスト

Options: 選択肢

Steps

2ステップから9ステップまで対応しています。各ステップは番号付きの円形要素で表現されます。

1~3、1~4、1~5のように、ステップ数の異なるStepperが表示されています。

Position

Position Firstの状態。白いの円形に「1」が表示され、下に「ラベル」というテキストが配置されています。

First

ステップの一番初めに使用します。

Position Middleの状態。白いの円形に「1」が表示され、下に「ラベル」というテキストが配置されています。

Middle

中間のステップで使用します。

Position Lastの状態。白いの円形に「1」が表示され、下に「ラベル」というテキストが配置されています。

Last

最後のステップで使用します。

isActive

isActive Defaultの状態。白い円形に「1」が表示され、下に「ラベル」というテキストが配置されています。

Default

通常のステップの表示状態です。

isActive Activeの状態。青い円形に白い「1」が表示され、下に「ラベル」というテキストが配置されています。

Active

現在のステップを示すスタイルです。背景色が変更され、番号の色が強調されます。

isActive Doneの状態。青い円形に白いチェックマークが表示され、下に「ラベル」というテキストが配置されています。青い円形の横には、青色の線が配置されています。

Done

完了したステップを示すスタイルです。アイコン・ステップの背景色が変更され、線が強調されます。

Behaviors: 振る舞い

ステップ間の線は、完了したステップに応じて色が変化します。

ステップ間の線の色変化を示す図。左から順に、青い円形に白いチェックマークが表示され下に「入力」というラベル、青い円形に白い「2」が表示され下に「確認」というラベル、白いの円形に「3」が表示され下に「完了」というラベルが配置されています。最初のステップと2番目のステップの間は青い線でつながれ、2番目と3番目の間はグレーの線でつながれています。

Metrics: 寸法

  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Container Height: Hug
Stepperの寸法仕様を示す図。

Usage: 使い方

適切な使用例。3つのステップが横並びに表示されています。左から順に、白色の円形に「1」が表示され下に「入力」というラベル、白色の円形に「2」が表示され下に「確認」というラベル、白色の円形に「3」が表示され下に「完了」というラベルが配置されています。
Do

ステップ数が明確なプロセスに使用してください。

Contents: 内容

適切なラベルの例。4つのステップが横並びに表示されています。左から順に、白色の円形に「1」が表示され下に「基本情報」というラベル、白色の円形に「2」が表示され下に「お支払い方法」というラベル、白色の円形に「3」が表示され下に「内容確認」というラベル、白色の円形に「4」が表示され下に「完了」というラベルが配置されています。
Do

各ステップに適切なラベルを付けてください。

Change log: 変更履歴

DateChanges
2025/06/18ドキュメントを更新
2025/06/06ドキュメントを更新
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ
Stepper | Sparkle Design