ステップメニューをCSSでデザインするサンプル （CSS Step Menu）

入力フォームなど複数のページにまたがって、入力などをしてもらう際にどのような作業を行うと終了するのかわかりやすく表示することで、ユーザビリティを向上できる。ステップメニューをCSSでデザインする際の参考になるのが、CSS Step Menu。

サンプルとして公開されているので、コンテンツにあわせて修正をする必要はある。デザインを変更したい場合は幾つかの画像を作成する必要があるので、どちらかといえばCSS記述のサンプルとしての利用となる。

リストをCSSでフラットにする

基本的なHTML記述は上記のようになる。ページによって<li>のclass部分の指定を行う必要があるが、ナビゲーションとして絶対に必要な要素ではないので、CookieとJavaScriptなど利用して、class部分を出力するほうが既存のプログラムに影響を与えずにすむ。

入力フォームなどユーザー離脱率の高いページに、ステップメニューのような表示を行う事で、離脱率の引き下げが可能な場合がある。ゴールが見えると、本領発揮できるという人が多いのかもしれない。