STEP-001 公開  更新

横並び型 フロー

ご依頼から完了までの流れを、番号のついた4〜5つの段階として横一列に並べる設計です。
各段階に一言の説明と期間の目安を添え、全体の順番と長さをひと目で伝えます。
SPでは同じ順番のまま縦に並べます。

ワイヤーフレーム(PC)

横並び型 フロー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

横並び型 フロー SP版ワイヤーフレーム

SP版の特徴

  1. 縦に並べる:5つを横に並べると1つずつが狭くなり読めないため、順番はそのままに縦にしています。
  2. 線を縦に引く:横並びの線と同じ役割で、段階がつながっていることを示しています。
  3. 相談ボタンは横いっぱい:流れを読み終えたあとに押しやすい大きさにしています。

採用前の判断ポイント

向いているケース

  • 流れの全体像を、最初に短く見せたい
  • 段階が4〜5つ以内で、それぞれを一言で説明できる
  • 詳しい説明は別のページや別の場所に置ける
  • 制作会社、士業、教室、クリニックなど、依頼までの進め方が不安になりやすい業種

向かないケース

このワイヤーの特徴

全体の順番と段階の数が、ひと目で分かる

流れが文章だけで書かれていると、何段階あるのか、今読んでいるのはどの辺りなのかが分かりません。番号のついた段階を横一列に並べ、線でつなげて、全体の順番と数を最初に見せています。

番号を文字で書き、順番が伝わる

矢印や色の濃淡だけで順番を示すと、読み上げを使う人や色の見分けにくい人には伝わりません。番号は文字として書き、段階のまとまりは順序のあるリスト(ol)で組んでいます。

一言の説明と期間で、次に何が起きるかが分かる

段階の名前だけでは、何をするのか、どのくらいかかるのかが分かりません。各段階に一言の説明と、期間の目安を添えています。

すべての段階を同じ見た目にする

特定の段階だけを強調すると、そこが今の位置のように見えます。丸の大きさ・色・太さをすべての段階でそろえ、どの段階も同じ重さで並べています。

SPでは、同じ順番のまま縦に並べる

SPで5つを横に並べると、1つずつの幅が狭く、文字が読めません。SPでは縦に並べ、線を縦に引いて、順番はそのままにしています。

制作時のよくある失敗

段階が多すぎて、横に収まらない

段階が6つ、7つと増えると、1つずつの幅が狭くなり、説明が読めなくなります。
近い作業をひとまとめにして5つ前後を目安に絞り、詳しい内容は別の場所や開閉で見せます。

段階の名前が「対応」「実施」のように抽象的

「対応」「実施」「完了」だけでは、読み手は何が起きるのか想像できません。
「ヒアリング・お見積り」のように、その段階でしてもらうことや起きることが分かる言葉にします。

守れない期間や、根拠のない期間を書く

短い期間を大きく書いても、実際にかかる期間が違うと信頼を損ねます。
期間は「目安」であることと、前後する条件(お客様の確認にかかる時間など)を近くに書きます。

順番を、矢印や色だけで表す

矢印や色の違いだけでは、順番が伝わらない人がいます。
番号を文字で書き、順序のあるリストで組みます。
矢印や線は補助として使います。

特定の段階だけを、目立たせる

最初の段階だけ濃く塗るなど、特定の段階を目立たせると、今の位置のように読めます。
進捗を示す画面でなければ、すべての段階を同じ見た目にそろえます。

よくある質問

段階は、何個までにするとよいですか?

決まった数はありませんが、横一列で読みやすく収まるのは5つ前後と考えられます。
多い場合は、近い作業をまとめて段階数を減らすか、縦に並べる型や開閉する型を検討します。

期間は、どのように書けばよいですか?

「約1週間」「2〜3週間」のように幅をもたせ、目安であることを書きます。
前後する条件(原稿や写真の準備、確認の回数など)を近くに一文で添えると、あとから食い違いにくくなります。

段階のあいだに、矢印は必要ですか?

必須ではありません。
番号が文字で書かれていれば順番は伝わります。
矢印や線は補助として使い、矢印だけで順番を表さないようにします。

流れは、ページのどこに置くとよいですか?

依頼までの不安が出やすい場所の近くに置くと、読み手が先の見通しを持ちやすくなると考えられます。
たとえば、料金表の近くや、フォームの手前です。

同じパーツのPattern

フローの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開