「UI GRAPHICS ―世界の成功事例から学ぶ、スマホ以降のインターフェイスデザイン」 2015.12

最近、↑こちらの本で、スマホ以降のUIについて、紹介や考察がされているのを見ました。
そこでWEBサイトのステップリストについて、気づいたことがありましたので、ご紹介いたします。

これまで私は、WEBデザインでステップリストが必要な場合は、以下の様な形式を使っていました。

先のステップの内容も確認できるなど、こちらのステップリストを使うことによるメリットも有るのですが、
横幅を必要とする場合が多いため、スマホでは無理が生じてしまい、
強引に省略したりして、本来のステップリストの機能が果たせない場合が多々ありました。

その理由は、このステップリストがPCのWEBデザインに最適化されたもので、
スマホ用に作られたものではないということに今さらながら気づきました。

スマホでのWEBデザインはアプリのデザインに近く、
これまでのPCのWEBデザインにとらわれずに考える必要があります。

そこで、以下の様なステップリストが良いのではないかと本を読みながら気づいたので、
インラインSVGを使って作ってみました。

↓サンプル

DEMO

ステップリストはステップ全体から見た進捗状況を知らせることが重要なので、
他のステップの項目名は省略し、
円グラフ形式で現在の進捗が全体から見でどのくらいの状況かが、
直感的に伝わるようにしました。

色などはインラインSVGを使っているので、サイトごとにデザインに合わせた微調整が可能です。

HTML

CSS

円グラフはSVGのpathを使っています。

ステップ数を変更する場合は、以下のサイトで目的の扇型をシュミレーションできるので、便利です。

SVGによる扇形の描画サンプル(塗りつぶし)

真ん中のアイコンはFont Awesomeを利用しています。