【Webデザイン】モバイルのステッパーには円形のプログレスバーを使う

モバイルの Web デザインで、なるほど！と思ったので備忘録としてまとめ。
新規会員登録など、複数ステップある登録作業があるページを実装する際に、今なにをしていて、あとどのくらい作業が残っているのかをあらわすステッパーを使用することがあると思います。
ステップの数字＋簡単な説明文で構成されており、PC などある程度大きな画面なら、下のようなデザインで問題ないと思います。

が、スマートフォンなどで表示した場合は画面サイズによっては数字下の説明文が改行されて読みにくくなったり、全ステップが画面内に納まらないということも考えられると思います。

どうしようか…と思っていたところ、下記の記事に答えが書いてありました。

モバイルにおけるステップインジケーターはどうあるべきか | UX MILK
https://uxmilk.jp/77951

こちらの記事によると、モバイルの場合はステッパーではなく、円形のプログレスバーで現在の進捗を表示するのが良いとのことでした。
それを踏まえて実装したのが下記です。

確かにこれなら画面が小さくても進捗が分かりやすいし、現在のページの説明文のエリアが広く取れるため文字も大きく表示できて読みやすいです！
参考にした記事には「可視性と可読性が鍵」とありましたが、確かにその通りですね！

今回実装したモバイルステッパーのコードは下記のとおりです。
なお、React で実装しており、円形のプログレスバーは Material-UI ライブラリを使用しています。

import React from 'react';
import PropTypes from "prop-types";
import { CircularProgress } from '@material-ui/core';

const steps = ["規約確認", "メールアドレス入力", "情報入力", "情報確認", "登録完了"];

const Stepper = props => {
  return (
    <div id="mobileStepper">
      <div className='progress'>
        <CircularProgress
          size={65}
          variant="determinate"
          thickness={3.0}
          value={(props.activeStep + 1)/steps.length * 100}
          className='main' />
        <CircularProgress
          size={65}
          variant="determinate"
          thickness={3.0}
          value={100}
          className='background' />
        <span className='step'>{`${props.activeStep + 1}/${steps.length}`}</span>
      </div>
      <div>
        <span className='title'>{steps[props.activeStep]}</span>
        { props.activeStep + 1 < steps.length && <span className='next'>{`次: ${steps[props.activeStep + 1]}`}</span> }
      </div>
    </div>
  );
}
export default Stepper;

Stepper.propTypes = {
    activeStep: PropTypes.number,
};

CSS は下記のとおりです。

#mobileStepper {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  .progress {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 65px;
    .main {
      z-index: 10;
      color: #2B9146;
    }
    .background {
      color: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 0;
      left: 0;
    }
    .step {
      font-size: small;
      font-weight: bold;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      letter-spacing: 1.5px;
    }
  }
  .title {
    font-weight: bold;
    display: block;
    font-size: large;
  }
  .next {
    font-size: 11px;
    padding-left: 3em;
  }
}

余白や円形のプログレスバーのサイズ、線の太さなどは、お好みで調節してください。
実装する際は上記のコンポーネントをインポートし、現在のステップ数を activeStep として渡せば OK です。
サンプルコードは下記のとおりです。

import Stepper from "[コンポーネントがあるディレクトリパス]/Stepper";

<Stepper activeStep={this.state.activeStep} />

以上、円形のプログレスバーを使ってモバイルのステッパーを実装する方法についてでした。
ご参考になれば幸いです。