Blog

スマホに合ったステップリストをインラインSVGで

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

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

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

example

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

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

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

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

↓サンプル

DEMO

nino-eye

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

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

HTML

CSS

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

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

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

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

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ