flow_001

flow_001.zip

サービス導入や申込み手順を視覚的に伝える、スタンダードな横並びフローデザイン。
STEP・見出し・イラスト・本文の4つの要素で構成されており、直感的に理解しやすいレイアウトです。

5ステップまでは「目次ブロック」、6〜8ステップなら「アルバムブロック」を使い分ける設計。
自動的に矢印が入るbefore要素により、STEP間の流れもスマートに表現されます。

FontAwesomeの矢印は、PCでは横向き、スマホでは縦向きに自動で切り替わるレスポンシブ対応。
画像サイズも自動調整され、横並びでも見た目のバランスが崩れにくくなっています。

見出しの改行やイラストの縦横比にも配慮した設計で、見た目の統一感を重視。
ステップ数や文字量に応じて柔軟に調整可能なため、業種を問わず幅広いシーンで活用できます。

機能性とデザイン性を両立した、「伝える力」の高いBlockDesignです。

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