flow_006

flow_006.zip

導入の流れや申込み手順を、**縦の区切り線で視覚的に整理する**スマートなフローデザイン。

各カラムは「STEP（囲み）・アイコン・見出し・本文」の4要素で構成されており、シンプルながらも整然とした印象を与えます。

STEPは中央揃えの囲み表示で、背景全体に広がらない**インラインブロック処理**を採用。

見た目に整ったレイアウトで、情報がしっかりと伝わります。

アイコンは、220px四方の画像枠に128pxサイズのアイコンを中央配置。

背景を透明にすることで、サイトのメインカラーに合わせたアイコンデザインと組み合わせやすく、**統一感のあるビジュアル**を実現します。

flow_006の最大の特長は、**背景色を使わずにカラム間を“縦の線”で区切る**構造。

左側にボーダーを入れ、最後のカラムだけ右側にも線を設定することで、**視線誘導と区切りの明確化**を同時に実現しています。

また、カラムのbefore要素にfontawesomeの矢印を設定しており、ステップの進行も直感的に伝えられます（スマホでは下向きに変化）。

矢印の調整や線とのバランスも、DRESSから簡単にカスタマイズ可能です。

5ステップ以内は目次ブロック、6ステップ以上はアルバムブロックを使用。

両方とも同じデザイン構成なので、STEP数の増減にも柔軟に対応できます。

ミニマルで構造的、そして読みやすい。

**“整えること”にこだわった進行型フローデザイン**です。

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