flow_008

flow_008.zip

サービス導入やステップの流れを順序立てて整然と伝えたいときに最適なフローデザイン。
flow_008は、丸型のSTEP番号と角丸の枠線が印象的な、視認性に優れた構成が魅力です。
各カラムは「STEP（リード）・アイコン・見出し・本文」の4要素で構成。
STEPはリード要素として設定され、背景色＋角丸＋内側余白で丸くデザインされたラベルとして表示されます。
すべて2桁の数字で統一されており、流れの順序が明確に伝わります。
カラムは角丸＋枠線付きのボックスデザインで、1ステップごとにしっかり整理された印象に。
さらに、カラムのbefore要素にはfontawesomeの矢印が挿入されており、ステップ間の進行を視覚的に補強します。
アイコンは、220px四方の背景透明画像に128pxサイズで中央配置。
スマホでは80pxに縮小され、左寄せ・フロート表示で圧迫感のないモバイルレイアウトになります。
本文は左揃え、見出しとアイコンは中央揃えで設定されており、読みやすさとデザイン性の両立が実現されています。
5ステップ以内は目次ブロック、6ステップ以上はアルバムブロックをコピペして使用可能。
いずれも同じスタイルで、STEP数に応じた柔軟な運用が可能です。
「順序を美しく伝える」ことにこだわりたい時に選びたいBlockDesignです。

https://bindism.com/blockdesign/flow/flow_008.html