「ステップ・フロー」のUIを集めてみた|パーツ別デザインまとめ
こんにちは!株式会社Rabeeでデザイナーをしています、nanamiです。
今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。
はじめに
「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。
今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか?という調査も含めデザインを収集しました。
💡横に整列
宅トラ
メリービズ バーチャル経理アシスタント
Payme
マネーフォワード クラウド会社設立
UM FACTORY
サンスター株式会社 印象美導パンフレット
日興フロッギー
デジコ
💡縦に整列
CX+
SAPURI STANDARD
KAMINASHI
OPTEMO
💡その他
BEAMS Web決済サービス
BIGLEMON
TELECY
まとめ
調査したなかでは、左から右に流れる横並びのフロー形式がやはり最も多数派でした。
ただし、SPデザインにする際や、ステップ数が多い場合の汎用性という観点では、縦並びも活用していくべきということがわかりました。
ステップ要素内で一番見せたいのは、イラストやイメージなのか?それともテキストの内容なのか?全体の大まかな流れ感が伝われば良いのか?
その目的によって型を使い分けるべきだと学びました。
今回も最後まで読んでいただき、ありがとうございました!
参考記事
この記事が気に入ったらサポートをしてみませんか?