円形配置 4 ステップフロー

このパーツの使いどころと実装ポイント

このパーツは、中央に成果物（YOUR SITE）を置き、その周囲に「ヒアリング・デザイン・実装・公開」の 4 ステップを上下左右へ配置した円形フローです。position:absolute と transform を使い、固定サイズの正方形ラッパー内で中心の円とステップカードを正確に並べています。直線の番号付きフローと違い、すべての工程が中央の成果に向かって回り込む構図なので、「一連の流れで一つのものを作る」という印象を与えられます。

向いている場面

制作工程やサービスの提供フローを 4 段階で説明したい場面に向きます。Web 制作会社の進め方紹介、コンサルティングの支援サイクル、オンライン講座の学習ステップなど、工程数が 4 つに収まるサービスで使いやすい型です。

カスタマイズと注意点

• 中央の円のテキストは、最終的に何が得られるかを短い英字や言葉で表す
• 各ステップは番号と短い見出しに絞り、説明文を入れすぎない（カード幅が固定のため）
• ステップが 4 つを超える場合はこの円形配置が崩れるので、別レイアウトを検討する

絶対配置で組んでいるため、極端に狭い画面では円が窮屈になります。スマホでは縦並びのステップに切り替えるなど、レスポンシブの分岐を用意すると読みやすさを保てます。