ステップバーとは？

この記事を読むための時間：5分

ステップバーという言葉を聞いたことがありますか？

例えばWEBサイトで何か購入しようとしたり、会員登録しようとしたとき、あとどれくらいのステップで完了できるかを示したものがステップバーです。

「入力」→「確認」→「完了」といったステップバーは、見たことがある人がほとんどだと思います。

普段何気なく見ているステップバーですが、もしこのバーがないと、ユーザーは不安を感じてサイトを離脱してしまう恐れもあるのです。

この記事では、そんなステップバーについて解説しています。ぜひ参考にしてみてください。

ステップバーとは

ステップバーは、WEBデザインにおけるUI要素のひとつです。

WEBサイトでは、何らかの手続きが完了するまでに入力や確認が必要なページが、複数ページに渡ることがあります。

こういった場合に、「現在いるページが全体のフローのうちどのステップにあたるのか」、「手続きが完了するまであとどのくらいのステップが必要なのか」をわかりやすく示したものがステップバーです。

ステップバーが使われる場面

例えば、ステップバーは以下のような場合に使われます。

基本的には「内容の入力」「確認・修正」「完了」といった必須項目を含む、3〜5ステップに分けられることが多いです。

お問い合わせフォーム

1. お問い合わせ内容の入力
2. 入力した内容の確認・修正
3. お問い合わせ完了

会員登録画面

1. メールアドレスの入力
2. 仮登録
3. メール受信
4. 個人情報の入力
5. 会員登録完了

商品を購入する画面

1. 個人情報の入力
2. 決済情報の入力
3. 入力した個人情報と決済内容の確認・修正
4. 購入完了

アンケートページ

1. 個人情報の同意
2. 個人情報の入力
3. アンケート入力
4. 入力した内容の確認・修正
5. 回答完了

ステップバーの効果

ステップバーが実装されていることで以下のような効果が望めます。

ユーザーのストレス軽減

ステップバーがないと、ユーザーは「あとどのくらいで手続き完了するの？」といった不安や、ストレスを感じてしまいます。

しかし、ステップバーで全体の見通しが示されていれば、ユーザーにストレスや不安を感じさせず手続きを進めてもらうことができるでしょう。

ユーザーの離脱防止

ステップバーによって全体の流れが把握できないと、ユーザーは「手続きにかかる時間が予測できないから、手続きは後回しにしよう」と思ってそのサイトを離脱してしまう可能性が高くなります。

せっかくWEBサイトにユーザーが訪れてくれたのに、何もアクションを起こしてくれなければ意味がありません。そのためにもきちんとステップバーを実装してユーザーの懸念を取り除く必要があります。

UIとは

ステップバーはUI要素のひとつであるとお伝えしました。

ここでは、そもそもUIがどういったものなのかについても解説していきます。

そもそもUIとは

ユーザーインターフェイス（英：User Interface）の略称です。

インターフェイスは「接点・接触面」といった意味を持ちます。つまり、UIはユーザー（利用者）とサービスの接点のことを指しています。

WEBサイトにおけるUI

WEBサイトにおけるユーザーとは、そのWEBサイトを利用してくれる人を指します。そして、サービスとはパソコン・スマートフォン・タブレットに表示されるWEBサイトのことです。WEBサイトを閲覧しているユーザーの視覚に触れる全ての情報がUIであると考えられます。

つまりUIとは、そのWEBサイトの「見た目」や「使いやすさ」のことであり、その中には「画面のレイアウト」「使用されている画像」「フォント」「デザイン」「メニューのわかりやすさ」「操作のしやすさ」といった、ユーザーが目にするもの・操作するもの全てが含まれます。

ステップバーの作り方

WEBサイトにステップバーを実装する方法には、「画像で作る方法」「HTML・CSSで作る方法」「JavaScriptで作る方法」などが挙げられます。

それぞれの方法について解説していきます。

画像で作る方法

この方法では、それぞれのステップにおけるステップバーの画像を、ページごとに作成する必要があります。

つまり、ステップ1〜3までの工程がある場合は、画像を3枚用意して、それぞれのWEBページ用に配置します。

メリット

もしPhotoshopやIllustratorといった画像編集ソフトを使うのが得意であれば、CSSやプログラミング言語を使って作る場合に比べて比較的簡単に作成することができます。

また、CSSで作るよりもデザインの自由度が高く、凝ったデザインのステップバーを作ることも可能です。

デメリット

そもそも画像を作るスキルがない場合は、画像の編集方法を覚えなければならないというデメリットがあります。

また、それぞれのページにそれぞれの画像ファイルが必要になるため、WEBサイトを運営する上で管理しなければならないファイルが増えてしまいます。

HTML・CSSで作る方法

HTMLとは、Hyper Text Markup language（ハイパーテキスト·マークアップ·ランゲージ）の略で、文書を構造化するために使われる言語です。CSSは、Cascading Style Sheets（カスケーディング·スタイル·シート）の略で、HTMLで作成された文書の見た目や装飾を整える役割がある言語です。

このふたつの言語を使うことによってステップバーを作る方法もあります。

メリット

画像ファイルを用意する必要がないため、管理が楽というメリットがあります。

また、HTMLやCSSが使える人であれば、シンプルながらスタイリッシュなデザインのステップバーから、凝ったデザインのステップバーまで作ることができるでしょう。

デメリット

三角形のバーや囲み文字のバーなどシンプルなステップバーを作ることができますが、画像で作るほどの自由度の高いデザインにはできません。

また、きちんとデザインの整ったステップバーを作るためにはHTMLやCSSの高度な知識が必須となります。

JavaScriptで作る方法

JavaScript（ジャバスクリプト）は、WEBページの様々な場面で使われているプログラミング言語のひとつです。

また、HTMLで作成した文書を変更したり、CSSで作成したスタイルを変更したり、アニメーションのような動きをつけたりすることも可能です。

メリット

ステップバーが用意されていることでユーザーの離脱防止につながりますが、ここにアニメーションの動きが加わるとさらに離脱率も下がります。

さらに、「色がどんどん満ちていくデザイン」「ぷにぷにとした弾力性を感じるようなデザイン」「ステップが進むたびに説明文が出てくるデザイン」「色が変化していくデザイン」など、画像や静的な表示だけでは到底表現できないようなデザインのステップバーを作ることが可能です。

デメリット

一から自分で作る場合には、HTML、CSS、JavaScriptの高度な知識が必要となります。

コピペで実装できるようにコードを公開しているサイトも多くありますが、その場合でもある程度プログラミングの知識がないと実装は難しいでしょう。

まとめ

普段何気なく見ているステップバーですが、きちんと実装されていないサイトはユーザーにストレスを与えてしまったり、サイトの離脱につながったりしてしまいます。

複数ページに渡る手続きページがある場合は、必ずステップバーを実装するようにしましょう。