STEP-006 公開  更新

分岐型 フロー

ご依頼の種類(新しく作る/リニューアル/運用だけ任せる、など)を選ぶと、その場合の流れに切り替わる設計です。
読み手は自分に関係のある段階だけを読めます。
選んだ種類と段階の数を文字で示し、切り替えたことを読み上げでも知らせます。

ワイヤーフレーム(PC)

分岐型 フロー PC版ワイヤーフレーム

ワイヤーフレーム(SP)

分岐型 フロー SP版ワイヤーフレーム

SP版の特徴

  1. 選択肢は横いっぱいに3等分:押しやすく、文字が折り返さない幅にしています。
  2. 段階の並びは縦のまま:PCと形を変えず、円と文字の大きさだけを小さくしています。
  3. 相談ボタンは横いっぱい:流れを読み終えたあとに押しやすい大きさにしています。

採用前の判断ポイント

向いているケース

  • ご依頼の種類によって、流れの段階が変わる
  • 種類が2〜3つで、それぞれ別々に説明する必要がある
  • 共通の段階と、その種類だけの段階を整理できる
  • 制作会社、士業、リフォーム、コンサルティングなど、依頼の内容が複数に分かれる業種

向かないケース

このワイヤーの特徴

自分に関係のある流れだけを、読める

すべての種類の流れを並べると、読み手は自分に当てはまる部分を探すことになります。ご依頼の種類を選ぶと、その場合の段階だけが表示されます。

選んだ種類と、段階の数を文字で示す

表示が切り替わっても、何を選んだか、いくつの段階なのかが分からないことがあります。「リニューアルの流れ:6つの段階」のように、選んだ種類と段階数を文字で書いています。

選択肢は、ラジオボタンにする

切り替えの選択肢が、押せる見た目だけの部品だと、選んでいる状態が伝わりません。選択肢は radio ボタンで組み、グループの名前を「どのようなご依頼ですか?」としています。

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

表示が変わっても、目で見ない人には気づけません。切り替えたあとに、「リニューアルの流れに切り替えました。
6つの段階です」と読み上げで知らせます
。

最初から、ひとつを選んだ状態にする

何も選ばれていないと、何も表示されない画面になります。最初は、いちばん多い種類(新しく作る)を選んだ状態にして、流れを表示しています。

制作時のよくある失敗

選択肢が多すぎる

選択肢が4つ以上あると、どれを選べばよいか迷います。
種類が多い場合は、種類ごとにページを分けるか、選択肢を大きな分類にまとめます。

最初は何も選ばれておらず、何も表示されない

選ぶまで空白だと、ページを開いた人は何のページか分からなくなります。
最初はいちばん多い種類を選んだ状態にします。

種類ごとの段階の名前が、似すぎて違いが分からない

段階の名前が同じ・似ていると、何が違うのか伝わりません。
その種類だけの段階には、内容が分かる名前を付け、共通の段階は同じ名前にそろえます。

切り替えると、番号が飛ぶ

特定の段階が表示されないのに、番号がそのままだと、「1、2、4」のように飛びます。
表示される段階だけを、上から順に振り直します。

分岐が複雑で、流れ図のようになる

種類の中でさらに条件が分かれると、読み手は図を読み解くことになります。
分岐は1階層にとどめ、細かい違いは各段階の説明の中で書きます。

よくある質問

分岐は、何種類までにするとよいですか?

決まった数はありませんが、2〜3種類が扱いやすいと考えられます。
4種類以上に分かれる場合は、種類ごとにページを分けるほうが、読み手が自分の流れを見つけやすくなります。

切り替えは、タブとラジオボタンのどちらがよいですか?

選んだものによって表示が変わるだけなら、ラジオボタンで足ります。
タブは、独立した複数の内容を切り替える部品で、矢印キーでの移動など決まった操作を実装する必要があります。

共通の段階は、どう扱えばよいですか?

種類が変わっても同じ名前・同じ内容にそろえます。
その種類だけの段階は、内容が分かる名前を付け、共通の段階の間に入れます。
表示される段階の番号は、上から順に振り直します。

URLに、選んだ種類を含めたほうがよいですか?

含めると、選んだ状態のまま人に伝えられ、戻るボタンでも状態が保たれやすくなります。
必須ではありませんが、種類ごとに案内したいときは有効と考えられます。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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