flow_004

flow_004.zip

サービス導入や申込みの手順を、**色の変化と構成の整った4ステップで伝える**フローデザイン。

各カラムは「STEPラベル・見出し・イラスト・本文」の4要素で構成され、順を追った説明に最適です。

flow_004では、カラムごとに背景色を設定し、左から右へ**徐々に濃くなるグラデーション構成**に。

自然な進行感を演出しながら、視線の流れを誘導できる設計です。

カラムの幅は【23%／26%／26%／25%】でバランスよく配置。

PC表示では高さ360pxに固定されており、画像サイズや文字量もこの中で収まるよう最適化されています。

スマホ表示ではカラムが縦並びになり、**各カラムのbefore要素で矢印形状**を表示。

「コンテンツ幅320px」の設定で表示の安定性も確保しています。

DRESSの仕様上、サイズ指定は固定となりますが、**その分デザイン崩れしにくく安心して使える**フロー構成です。

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