このワイヤーの特徴
自分に関係のある流れだけを、読める
すべての種類の流れを並べると、読み手は自分に当てはまる部分を探すことになります。ご依頼の種類を選ぶと、その場合の段階だけが表示されます。
選んだ種類と、段階の数を文字で示す
表示が切り替わっても、何を選んだか、いくつの段階なのかが分からないことがあります。「リニューアルの流れ:6つの段階」のように、選んだ種類と段階数を文字で書いています。
選択肢は、ラジオボタンにする
切り替えの選択肢が、押せる見た目だけの部品だと、選んでいる状態が伝わりません。選択肢は radio ボタンで組み、グループの名前を「どのようなご依頼ですか?」としています。
切り替えたことを、読み上げでも知らせる
表示が変わっても、目で見ない人には気づけません。切り替えたあとに、「リニューアルの流れに切り替えました。
6つの段階です」と読み上げで知らせます。
最初から、ひとつを選んだ状態にする
何も選ばれていないと、何も表示されない画面になります。最初は、いちばん多い種類(新しく作る)を選んだ状態にして、流れを表示しています。
制作時のよくある失敗
選択肢が多すぎる
選択肢が4つ以上あると、どれを選べばよいか迷います。
種類が多い場合は、種類ごとにページを分けるか、選択肢を大きな分類にまとめます。
最初は何も選ばれておらず、何も表示されない
選ぶまで空白だと、ページを開いた人は何のページか分からなくなります。
最初はいちばん多い種類を選んだ状態にします。
種類ごとの段階の名前が、似すぎて違いが分からない
段階の名前が同じ・似ていると、何が違うのか伝わりません。
その種類だけの段階には、内容が分かる名前を付け、共通の段階は同じ名前にそろえます。
切り替えると、番号が飛ぶ
特定の段階が表示されないのに、番号がそのままだと、「1、2、4」のように飛びます。
表示される段階だけを、上から順に振り直します。
分岐が複雑で、流れ図のようになる
種類の中でさらに条件が分かれると、読み手は図を読み解くことになります。
分岐は1階層にとどめ、細かい違いは各段階の説明の中で書きます。
よくある質問
分岐は、何種類までにするとよいですか?
決まった数はありませんが、2〜3種類が扱いやすいと考えられます。
4種類以上に分かれる場合は、種類ごとにページを分けるほうが、読み手が自分の流れを見つけやすくなります。
切り替えは、タブとラジオボタンのどちらがよいですか?
選んだものによって表示が変わるだけなら、ラジオボタンで足ります。
タブは、独立した複数の内容を切り替える部品で、矢印キーでの移動など決まった操作を実装する必要があります。
共通の段階は、どう扱えばよいですか?
種類が変わっても同じ名前・同じ内容にそろえます。
その種類だけの段階は、内容が分かる名前を付け、共通の段階の間に入れます。
表示される段階の番号は、上から順に振り直します。
URLに、選んだ種類を含めたほうがよいですか?
含めると、選んだ状態のまま人に伝えられ、戻るボタンでも状態が保たれやすくなります。
必須ではありませんが、種類ごとに案内したいときは有効と考えられます。













