このワイヤーの特徴
全体の順番と段階の数が、ひと目で分かる
流れが文章だけで書かれていると、何段階あるのか、今読んでいるのはどの辺りなのかが分かりません。番号のついた段階を横一列に並べ、線でつなげて、全体の順番と数を最初に見せています。
番号を文字で書き、順番が伝わる
矢印や色の濃淡だけで順番を示すと、読み上げを使う人や色の見分けにくい人には伝わりません。番号は文字として書き、段階のまとまりは順序のあるリスト(ol)で組んでいます。
一言の説明と期間で、次に何が起きるかが分かる
段階の名前だけでは、何をするのか、どのくらいかかるのかが分かりません。各段階に一言の説明と、期間の目安を添えています。
すべての段階を同じ見た目にする
特定の段階だけを強調すると、そこが今の位置のように見えます。丸の大きさ・色・太さをすべての段階でそろえ、どの段階も同じ重さで並べています。
SPでは、同じ順番のまま縦に並べる
SPで5つを横に並べると、1つずつの幅が狭く、文字が読めません。SPでは縦に並べ、線を縦に引いて、順番はそのままにしています。
制作時のよくある失敗
段階が多すぎて、横に収まらない
段階が6つ、7つと増えると、1つずつの幅が狭くなり、説明が読めなくなります。
近い作業をひとまとめにして5つ前後を目安に絞り、詳しい内容は別の場所や開閉で見せます。
段階の名前が「対応」「実施」のように抽象的
「対応」「実施」「完了」だけでは、読み手は何が起きるのか想像できません。
「ヒアリング・お見積り」のように、その段階でしてもらうことや起きることが分かる言葉にします。
守れない期間や、根拠のない期間を書く
短い期間を大きく書いても、実際にかかる期間が違うと信頼を損ねます。
期間は「目安」であることと、前後する条件(お客様の確認にかかる時間など)を近くに書きます。
順番を、矢印や色だけで表す
矢印や色の違いだけでは、順番が伝わらない人がいます。
番号を文字で書き、順序のあるリストで組みます。
矢印や線は補助として使います。
特定の段階だけを、目立たせる
最初の段階だけ濃く塗るなど、特定の段階を目立たせると、今の位置のように読めます。
進捗を示す画面でなければ、すべての段階を同じ見た目にそろえます。
よくある質問
段階は、何個までにするとよいですか?
決まった数はありませんが、横一列で読みやすく収まるのは5つ前後と考えられます。
多い場合は、近い作業をまとめて段階数を減らすか、縦に並べる型や開閉する型を検討します。
期間は、どのように書けばよいですか?
「約1週間」「2〜3週間」のように幅をもたせ、目安であることを書きます。
前後する条件(原稿や写真の準備、確認の回数など)を近くに一文で添えると、あとから食い違いにくくなります。
段階のあいだに、矢印は必要ですか?
必須ではありません。
番号が文字で書かれていれば順番は伝わります。
矢印や線は補助として使い、矢印だけで順番を表さないようにします。
流れは、ページのどこに置くとよいですか?
依頼までの不安が出やすい場所の近くに置くと、読み手が先の見通しを持ちやすくなると考えられます。
たとえば、料金表の近くや、フォームの手前です。