flow_007

flow_007.zip

サービスの流れや導入手順を自然な順番で伝える、整った印象のフローデザイン。
flow_007は、各カラムの左上にSTEP番号を固定表示することで、視線を自然に誘導しながら順序を明確に示せます。
構成は「STEP（左上固定）・アイコン・見出し・本文」の4要素。
STEPラベルは絶対配置でカラムの左上に表示され、本文の流れを邪魔せず開始位置がひと目でわかる設計です。
本文は左揃え、見出しとアイコンは中央揃えで構成されており、
整ったリズムで読み進められるバランス設計がなされています。
アイコンは、220px四方の背景透明画像に128pxサイズのアイコンを中央配置。
サイトのメインカラーを活かしたアイコンを使用すれば、全体に統一感のあるデザインが実現できます。
スマホ表示では、アイコンは幅80pxで左寄せ＆フロート表示。
小さめでも存在感を出しつつ、軽やかなスマホ表示が可能です。
カラムのbefore要素にはfontawesomeの矢印を挿入し、ステップ間の流れもわかりやすく可視化。
スマホでは自動的に下向きに切り替わります。
5ステップ以内は目次ブロック、6ステップ以上はアルバムブロックを使用。
いずれも同一スタイルで構成されているため、ステップ数の増減にも柔軟に対応できます。
順序がしっかり伝わるフロー表現をしたいときに最適なBlockDesignです。

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