ナビゲーション
ステッパー
Stepper
ステッパーとは、複数の段階に分かれた手続きの中で、今どのあたりまで進んでいるのかをひと目で示す案内板です。
定義
ステッパーは、複数のステップに分かれた長い手続きの中で、今どのあたりまで進んでいるのかを ひと目で示してくれる案内板です。たいていはステップが横一列に並び、終わったステップには チェックマークが付き、今取り組んでいるステップは色や太さで強調され、まだ残っているステップは 薄く表示されます。決済や会員登録のように順番が決まった作業を一画面にまとめきれないとき、 その流れをいくつかの短いステップに分けて、上部に地図のように広げておくのがステッパーの 役割です。プログレスバーと違って各ステップに名前が付いているので、次に何をするのかまで前もって 知らせてくれる点が特徴です。
なぜ重要か
人は終わりの見えない作業を前にすると、途中で疲れて投げ出しやすくなります。ステッパーは 「今が何番目のステップで、あと何ステップ残っているか」を目に見える形にして、この不安を やわらげます。全体の分量を先に伝えておけば、ユーザーは心の準備をして最後まで進む力を得られ、 終わったステップにチェックがたまっていく様子は小さな達成感を与えて、次のステップへと背中を 押してくれます。長いフォームを一画面に詰め込む代わりにステップに分ければ、一度に集中する 項目も減り、入力ミスと心理的な負担がともに下がります。結局のところステッパーは、 離脱を減らして最後まで完走してもらうための仕掛けなのです。
よくある間違い
- ステップを細かく分けすぎて数を増やしてしまうケースです。ステップが多すぎると、かえって 先が長く見えてユーザーは始める前から疲れてしまい、画面上の表示も窮屈になって、各ステップが 何なのか読み取りにくくなります。分ければ分けるほど良いわけではありません。
- 完了したステップに戻れるかどうかを決めていないケースです。前のステップで入力を間違えたのを 直したいのに戻る手段がなければ、ユーザーは最初からやり直すか、いっそあきらめてしまいます。 戻ったときに前に入力した値が消えていないかも、あわせて気を配る必要があります。
- 完了・現在・待機という三つの状態の見た目が似ていて区別できないケースです。どこまで終わって 今どこにいるのかが色やアイコンではっきり分かれていないと、進み具合を示すというステッパー 本来の目的そのものが意味をなさなくなります。
実務のヒント
- ステップは3〜5個くらいに保ち、戻れるかどうかを最初からはっきり決めておきましょう。順番の ある長い手続きを程よく分けて、どこまで来てあとどれだけ残っているかを見せると、途中離脱が 大きく減ります。
- 完了・現在・待機の各ステップを色とアイコンでしっかり区別しましょう。完了したステップには チェック、今のステップは強調、残りのステップは薄く、と分けておけば、ユーザーは自分の位置を ひと目で読み取れます。
- 各ステップには、その中で何をするのかが分かる短い名前を付けましょう。番号だけよりも 「配送先」「お支払い」のように中身を表したラベルがあってこそ、ユーザーは次にすることを 前もって見当をつけ、心の準備をして次のステップへ進めます。
AIに頼む
これは[過程の性格 — 例: フィールド8個の会員登録]だよ。これをステッパーで設計して。ステップは3〜5個を超えないようにまとめて、各ステップには番号の代わりに「配送先」「決済」のように中で何をするか伝える短いラベルを付けて。プログレスバーと違ってステッパーは次にやることまで見せるから、名前を見ただけで何をするのか見当がつくように決めて、戻る操作を許可するかどうかとその理由も最初から決めて。最終的なステップ構成を表にまとめて。
下に貼り付けるステッパーで、完了・現在・待機の3つの状態が色が似ていて区別できない。完了はチェックアイコン、現在は色・太さで強調、待機は薄く — こんなふうに3つの状態を色だけでなくアイコン/形でもはっきり分けて。色覚障害のあるユーザーも区別できるよう色一つだけに頼らず、現在のステップには aria-current="step" を付けて。変更したスタイルを完了/現在/待機の3行の表にまとめて。
下に貼り付けるステッパーのコードで、前のステップに戻る動作を点検して。過去のステップを押して戻れるか、戻ったときに先に入力した値が消えずにそのまま残るか確認して、値が消えるなら保持するように直して。戻る操作を許可する方針なら、完了したステップはクリックできるように、まだ進んでいないステップは押せないようにブロックして、どこまで移動できるかのルールを明確にして。