STEP-004 公開  更新

担当分け型 フロー

流れの各段階を、「制作側の作業」と「お客様の作業」の2列に分けて表で並べる設計です。
お客様が何をいつ準備すればよいかが、制作側の作業と並べて分かります。
ボタンで、お客様の作業だけをめだたせることもできます。

ワイヤーフレーム(PC)

担当分け型 フロー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

担当分け型 フロー SP版ワイヤーフレーム

SP版の特徴

  1. 表をやめて縦に並べる:3列の表は文字が読めないため、段階ごとに縦に積んでいます。
  2. 「制作側」「お客様」のラベルを付ける:列の位置がなくなるため、ラベルで担当を示しています。
  3. 相談ボタンは横いっぱい:読み終えたあとに押しやすい大きさにしています。

採用前の判断ポイント

向いているケース

  • お客様にお願いする作業が多く、事前に把握してもらいたい
  • 段階ごとに、制作側とお客様それぞれの作業を書き分けられる
  • 原稿・写真・確認など、お客様の作業が遅れると全体が遅れやすい
  • サイト制作、リフォーム、士業の手続き、教室の入会など、共同で進める業種

向かないケース

このワイヤーの特徴

制作側とお客様の作業が、段階ごとに並んで分かる

作業がひとつの文章に混ざっていると、誰が何をするのかが分かりません。段階ごとに、制作側の作業とお客様の作業を別の列に置いています。

「お願い」のラベルで、お客様の作業が分かる

列の位置や色だけでは、お客様の作業がどれか伝わらない人がいます。お客様の作業の先頭に「お願い」の文字ラベルを付けています。

お客様の作業だけを、めだたせられる

準備することだけを確かめたい読み手もいます。「お客様の作業をめだたせる」のボタンで、お客様の作業だけを濃く、制作側の作業を薄く表示します。

切り替えたことを、読み上げで知らせる

見た目の濃淡は、目で見ない人には伝わりません。ボタンに aria-pressed で押している状態を示し、切り替えたあとに読み上げでも知らせます。

SPでは、段階ごとに縦に並べる

SPで3列の表を並べると、文字が読めません。SPでは段階ごとに、「制作側」「お客様」のラベルを付けて縦に並べています。

制作時のよくある失敗

お客様の作業が、書かれていない

制作側の作業だけが並ぶと、お客様は自分が何を準備するのか分からず、進行が遅れる原因になることがあります。
お客様の作業を、段階ごとに書きます。

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

何をすればよいか分からない書き方では、準備が始まりません。
「原稿と写真を用意する」のように、内容が分かる言葉で書き、可能なら期日も添えます。

色や位置だけで、担当を分ける

列の色や位置だけでは、読み上げを使う人や印刷したときに担当が分かりません。
「お願い」のような文字のラベルでも担当を示します。

お客様の作業に、期日がない

「原稿を用意する」とだけ書くと、いつまでに必要か分かりません。
「制作の開始まで」のように期日や目安を添え、準備に時間がかかるものは、制作の段階より前の段階で頼みます。

作業が多すぎて、表が読み切れない

すべての細かい作業を並べると、表が長くなり、大事な作業が埋もれます。
主な作業だけを載せ、詳細は別のページや開閉に分けます。

よくある質問

お客様の作業は、いくつくらい載せればよいですか?

1つの段階につき1〜2つを目安にし、主な作業だけに絞ると読みやすくなります。
細かい作業は、段階の詳細を開いたときや、別のページに書く方法があります。

制作側の作業も、載せる必要がありますか?

載せると、お客様が待っている間に何が進んでいるかが分かり、不安を減らせます。
お客様の作業との前後関係も伝わります。
詳しすぎる作業は省き、主な作業を書きます。

表にせず、文章で書いてはいけませんか?

文章でも構いませんが、担当の違いが読み取りにくくなります。
表にすると、段階ごとの制作側とお客様の作業を見比べやすくなります。
表の見出しは、列の意味が伝わるよう th 要素で書きます。

「お客様の作業をめだたせる」は、必要ですか?

必須ではありませんが、準備することだけを確かめたい読み手には役立つと考えられます。
付ける場合は、押している状態を aria-pressed で示し、切り替えたことを読み上げでも知らせます。

同じパーツのPattern

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

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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