STEP-002 公開  更新

縦タイムライン型 フロー

流れの各段階を縦に並べ、段階ごとに「やること」「期間の目安」「お客様にお願いすること」を書く設計です。
横並び型に収まらない説明を、順番を保ったまま読めます。
お客様が準備しておくことが段階ごとに分かるので、依頼前の不安を減らします。

ワイヤーフレーム(PC)

縦タイムライン型 フロー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

縦タイムライン型 フロー SP版ワイヤーフレーム

SP版の特徴

  1. 形は変えず、大きさだけ小さく:PCと形を変えると読み手が混乱するため、円と文字の大きさだけを調整しています。
  2. 名前と期間は折り返してよい:狭い画面では無理に1行に収めず、読みやすさを優先しています。
  3. 相談ボタンは横いっぱい:読み終えたあとに押しやすい大きさにしています。

採用前の判断ポイント

向いているケース

  • 各段階の内容と、お客様にお願いすることまで伝えたい
  • 各段階に、2〜3文の説明を書ける
  • 依頼の途中で、お客様に確認や資料の提出をお願いする場面がある
  • 制作会社、士業、リフォーム、コンサルティングなど、依頼から完了まで数週間以上かかる業種

向かないケース

このワイヤーの特徴

各段階の内容を、順番どおりに読める

流れが箇条書きの名前だけだと、各段階で何が起きるのかが分かりません。段階の名前に続けて、やることの説明を2〜3文で書いています。

お客様にお願いすることが、段階ごとに分かる

お客様の作業が最後になってから分かると、準備が間に合わないことがあります。各段階に「お客様にお願いすること」を別の枠で置き、何を準備すればよいかを前もって伝えています。

縦の線と番号で、つながっていることが分かる

段階が離れて並ぶと、別々の話に見えることがあります。番号の円を縦の線でつなぎ、続きものであることを示しています。

段階の数が増えても、崩れない

縦に伸びる形は、段階が1つ増えても並べ方を変える必要がありません。段階ごとに同じ項目を同じ順番で書き、増減しても全体の形が保たれます。

SPでも、同じ形で読める

PCとSPで形を大きく変えると、読み手が混乱することがあります。SPでも縦に並べたままにし、円と文字の大きさだけを小さくしています。

制作時のよくある失敗

説明が長く、読み飛ばされる

1つの段階に長い文章を書くと、縦に長くなり、途中で読まれなくなります。
1つの段階は2〜3文にまとめ、詳しい内容が必要なら別のページや開閉に分けます。

お客様にお願いすることが書かれていない

制作側の作業だけが書かれていると、お客様の準備が後回しになり、進行が遅れる原因になることがあります。
お客様にお願いすることを、段階ごとに具体的に書きます。

「ご協力をお願いします」のような、抽象的な書き方

「ご協力ください」だけでは、何をいつまでにすればよいか分かりません。
「原稿と写真を、決めた期日までにご用意ください」のように、内容と期限が分かる書き方にします。

段階ごとに、書く項目が違う

ある段階には期間があり、別の段階にはない、という状態では見比べられません。
すべての段階で、載せる項目と順番をそろえます。

線や丸だけで、順番を表す

装飾の線や丸だけでは、順番が伝わらない人がいます。
番号は文字で書き、順序のあるリスト(ol)で組みます。

よくある質問

「お客様にお願いすること」は、すべての段階に必要ですか?

ない段階は省いて構いません。
ただし、省くと見比べにくくなるため、「特にありません」と書く方法もあります。
お願いすることがある段階は、内容と期限を具体的に書きます。

縦のタイムラインは、どのくらいの長さまで読まれますか?

一般的な目安はありませんが、段階が多く縦に長くなるほど、途中で読まれなくなると考えられます。
5つ前後を基本にし、それ以上なら開閉する型(詳細開閉型)を検討します。

期間の目安は、段階ごとに書くべきですか?

段階ごとの期間があると、全体の長さを足し算で確かめられます。
ただし、案件によって大きく変わる場合は、無理に細かく書かず、全体の期間と前後する条件を書く方法もあります。

流れと、フォームのステップ表示は、どう違いますか?

流れは、依頼から完了までの進め方を伝える説明です。
フォームのステップ表示は、入力の途中経過を示す画面の部品で、役割が違います。
入力の流れはステップ分割型 フォームを参考にしてください。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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