画面遷移図は何を決める図か?|作り直しを減らす描き方

画面遷移図は何を決める図か?|作り直しを減らす描き方

画面遷移図を「作る画面を並べた一覧」だと思っていると、描き上がった図はほぼ確実に作り直しになります。画面を数えた資料と、画面のつながりを決めた資料は別物です。前者は枚数を数えるための資料で、後者は「どこから、何をしたら、どこへ行けるか」を決めるための資料です。制作会社に前者を渡すと、返ってくるのは見積もりだけで、抜けは抜けたまま先へ進みます。実際、こんな声が続きます。「画面の一覧は作ったのに、作った画面を通して試す段階で行き止まりが次々に出てきました」「戻る操作をしたときにどこへ戻るのかが決まっておらず、実装のあとで作り直しになりました」。——サイトのリニューアルを任された担当者から、時期を問わず出てくる声です。これは、図の描き方が下手だという話ではありません。本当は、画面と画面のあいだにある条件を書く欄が、その図に最初から用意されていないのです。この記事では、画面遷移図が何を決める図なのかを整理したうえで、作り直しを減らす描き方と、生成AIに任せてよい範囲までを順に見ていきます。


カメ先生カメ先生

画面遷移図は画面を並べる図だと思われがちなんだ。でも本当は、画面と画面のあいだを決める図なんだよ。四角の数が全部そろっていても、四角のあいだが決まっていなければ、作る側は想像で埋めるしかないんだ。


カメ子カメ子

画面の数が決まっていても、あいだが決まっていなければ作り直しになる、ということですか。


カメ先生カメ先生

そのとおり。しかも抜けるのは、ボタンを押した先ではないんだ。押さなかったとき、失敗したとき、途中でやめたとき、戻ったとき。この4つの行き先が空欄のまま残る。うまくいく道筋から描き始めるから、描いている本人には抜けが見えないんだよ。


カメ子カメ子

うまくいく道筋だけを描くと、うまくいかなかったときの行き先が空欄のまま残ってしまう、ということですね。


この記事のポイント
  • 決めるのは画面の枚数ではなく、遷移の条件と戻りと行き止まり。画面一覧とも状態遷移図とも役割が違う
  • 抜けるのは失敗・0件・権限なし・戻りの4か所。状態を画面として数え直すと、枚数と見積もりが変わる
  • 洗い出しは生成AIに任せてよい。どの画面を残すか、優先するかは人が決める。任せる範囲を先に紙に書く

コンテンツ制作にAIを活かす第一歩、まずは導入から始めませんか?

デボノはアカウント開設・初期設定など「そもそものAI導入」から社内定着まで伴走支援。マーケティング活用など一歩進んだご相談にも対応します。

目次

この図が決めるのは、画面の枚数ではない

画面遷移図とは、情報システムやアプリケーションの開発で、利用者が操作する画面同士のつながりを図式化した設計資料のことです。個々の画面を四角で表し、押す、入力して確定するといった操作をきっかけに、どの画面へ移るかを矢印で示します。ここで押さえておきたいのは、画面を列挙するための資料は別に存在するという点です。用語の解説でも、画面一覧はシステムの機能に必要な操作画面を列挙したもの、画面遷移図は複数の画面にまたがる操作の道筋を示すもの、と役割が分けて説明されています。枚数を数える資料と、道筋を決める資料は別物です

もう1つ混ざりやすいのが状態遷移図です。作図の道具の解説では、画面遷移図は利用者の操作を対象にして画面の並びと使い勝手を整理するために描くもの、状態遷移図はシステムの内部の動きを対象にして、条件やきっかけで状態がどう移るかを理解するために描くもの、と対象が分けられています。同じ矢印の図に見えても、答えようとしている問いが違います。画面遷移図に内部の処理まで描き込むと、読む相手が変わってしまい、合意を取りたかった相手が読めなくなります

資料答える問い主に読む人変わる頻度
画面一覧作る画面は何枚あり、それぞれ何をする画面か見積もりを見る人、進み具合を管理する人高い(機能が増えるたび)
画面遷移図どこから、何をしたら、どこへ行けるか決裁する人、その画面で仕事をする人、作る側中くらい(筋道が変わったとき)
状態遷移図内部の状態が、どの条件でどう移るか作る側、試験を設計する人低い(仕様が固まれば動かない)

実務では、この3つを1枚にまとめようとして失敗します。更新される頻度も、読む人も違うからです。画面が1枚増えるたびに合意用の図まで描き直すことになると、更新は数週間で止まります。分けて持ち、画面の名前だけを共通の鍵にしてつなぐ形にすると、片方だけを直せるようになります。名前がそろっていれば、3つの資料のあいだで突き合わせるのは表計算の作業で済みます。

記法は標準化されていない、という前提から始める

画面遷移図には、厳密に標準化された記法がありません。用語の解説にも、書き方は組織や開発の案件ごとに異なると明記されています。最も単純なものは画面名だけを書いた四角を線で結んだ図で、詳しいものになると、分岐の条件、権限による遷移の制御、誤りを知らせる画面、外部のサイトへの移動まで含みます。作図の道具の解説にも、決まったルールや標準化された基準はない、と書かれています。正しい記法を探している時間は、そのまま無駄になります

詳しさの段階も1つではありません。全体の輪郭をつかむための概要の図と、画面の上に重なって出る小さな窓まで網羅した詳細な図が、同じ案件の中に併存することがあります。作図の道具の解説では、この図は提案の段階や要件を決める初期の段階で作られることが多いとされています。つまり、最初に描く図は粗くてよいということです。粗い図と詳しい図を1枚にまとめようとした瞬間に、描き終わらない図が生まれます

代わりに決めておくのは、社内で使う記法を1つに固定することです。四角は画面、角の丸い四角は画面の上に重なる小さな窓、ひし形は条件による分岐、点線は同じ画面のまま表示だけが変わるもの。この4つを決めておくだけで、誰が描いても読める図になります。決めた記号の意味は図の隅に凡例として置き、凡例のない図は受け取らないと社内で決めておくと、案件ごとの記法の揺れがそこで止まります。読みやすさの要点として、記号の一貫性と適切な札の付け方が挙げられているのは、どの解説でも共通しています。

作り直しは、図の段階ではなく実装のあとに表面化する

遷移の抜けは、図を眺めている間はほとんど気づけません。図はうまくいく道筋から描き始めるので、描いている人の頭の中では全部つながっているからです。表面化するのは3か所です。作った画面を通して試す段階で、押しても何も起きないボタンが見つかる。公開したあと、途中まで進んだ利用者から戻れないという問い合わせが来る。そして、追加の見積もりという形で費用に表れる。

直す費用は、工程が進むほど上がります。図の段階なら線を1本足すだけです。実装のあとになると、画面と処理と表示する文言と試験の項目が同時に増え、確認の会議も1回増えます。同じ抜けでも、見つかる時期によって直す量が何倍にも変わります。だから、図の段階で見つける仕掛けを持っているかどうかが、そのまま作り直しの量になります。仕掛けというのは、次のような描き方をしていないかを毎回確かめる、という程度のことです。

  • 矢印に条件を書かない——押せば必ず進むのか、条件を満たしたときだけ進むのかが読めない
  • うまくいく道筋しか描かない——失敗したとき、途中でやめたときの行き先が空欄のまま残る
  • 戻る矢印を省く——直前の画面に戻るのか最初に戻るのか、入力した内容が残るのかが決まらない
  • 画面の上に重なる小さな窓を画面として数えない——確認の窓や入力の窓が、作る対象から漏れる
  • ログインの前と後を1枚に混ぜる——同じ画面名なのに、見える項目と行ける先が違う状態が生まれる
  • 外部のサイトへ出る矢印を切りっぱなしにする——決済や地図から戻ってきたときの行き先が決まらない
  • 画面名を「画面1」「画面2」と番号で書く——どの機能の画面かを、打ち合わせのたびに聞き直すことになる

7つとも、図を描いた本人には見えません。見えないものを見つけるには、描いた人以外が決まった手順で点検するか、機械的に数え上げるしかありません。次の章から、この7つがなぜ起きるのかを5つの原因に整理していきます。原因が分かると、点検の手順は自然に決まります。

原因1:矢印に条件が書かれていない

条件が書かれていない図は、読む人の数だけ解釈が生まれます。実務の解説記事でも、遷移の条件の記載漏れは典型的な失敗として挙げられ、ボタンを押したときなのか、誤りが起きたときなのか、という条件を矢印に書くべきだとされています。条件のない矢印は、そこへ行ける、としか言っていません。行ける条件を書いて初めて、行けない場合の行き先が必要だと気づけます。

書き方は3つに絞れます。操作を書く(「申し込む」を押したとき)。条件を書く(在庫があるとき)。結果を書く(保存に失敗したとき)。このどれかを矢印のそばに1行で置くと、同じ2つの画面のあいだに矢印が2本以上必要になる箇所が浮かび上がります。矢印が1本しかない場所こそ、条件が抜けている場所です。とくに、確定や送信を伴う画面から次の画面へ1本しか矢印が出ていないなら、失敗したときの行き先が抜けています。

条件を書くと、図は必ず大きくなります。ここで枝を減らしたくなりますが、減らすのは条件のほうではなく画面のほうです。同じ結果に着く枝が3本あるなら、着地する画面を1つにまとめられないかを考えます。条件を省いて図を小さくすると、省いた条件は実装の担当者が想像で埋めます。想像で埋まった部分は、作った画面を通して試す段階まで誰も気づきません。図が大きくて読みにくいなら、割る単位を変えるのが正しい対処です。

原因2:戻る道と行き止まりが描かれていない

進む矢印は描かれるのに、戻る矢印は省かれます。理由は単純で、戻る操作は画面の中のボタンではなく、機器側の操作や履歴で行われることが多いからです。しかし戻ったときに何が起きるかは、設計で決めるべきことです。入力した内容が残るのか消えるのか。確定したあとに戻ったら、二重に申し込めてしまわないか。戻りの扱いを決めていない図は、申し込みや決済のある画面で必ず問題になります

行き止まりも同じです。完了の画面、誤りを知らせる画面、検索の結果が0件の画面。ここから先へ出る矢印が描かれていない図は珍しくありません。利用者は必ずその先へ進もうとします。出口のない画面を1つでも残すと、そこに着いた人はそのまま離れます。図を描き終えたら、矢印が出ていない四角を全部数えて、意図した終点かどうかを1つずつ確かめます。意図した終点は、残してよい行き止まりです。

確かめ方は機械的にできます。すべての画面について、入ってくる矢印と出ていく矢印の本数を数える。入ってくる矢印が0本の画面は、どこからも行けない画面です。出ていく矢印が0本の画面は、行き止まりです。この2つの数え上げだけで、抜けの大半は見つかります。数えるだけの作業なので、人の判断は要りません。生成AIに任せられる部分でもあり、その渡し方は後の章で扱います。

原因3:状態が画面として数えられていない

いちばん多い抜けは、うまくいっている画面しか数えていないことです。1つの画面には、条件によって見た目と行ける先が変わる状態があります。読み込んでいる途中、該当が1件もない、入力に誤りがある、権限がなくて見られない、通信に失敗した。これらを別の画面として作るのか、同じ画面の中の表示として作るのかを決める必要があり、決めないものは作られません。

状態起きる場面図に書いて決めること
読み込み中一覧や検索の結果を待つあいだ待たせる表示を出すか、前の画面のまま止めるか
該当が0件検索や絞り込みで結果がない何と書くか、次にどこへ行かせるか
入力の誤り必須の欄が空、形式が違う誤りの場所を画面のどこに出すか、入力した内容を残すか
権限がないログインしていない、契約していない案内の画面へ送るか、その場で断るか
通信の失敗保存や送信が届かないもう一度試させるか、下書きとして残すか
完了申し込みや購入が終わった次の行き先を1つ決める。ここを空のままにしない

右の列を埋めていくと、画面の枚数は増えます。増えること自体は問題ではありません。問題は、増えた分が見積もりに入っていないことです。この分は、後から必ず作ることになります。図の段階で数えておけば見積もりに入り、数えなければ追加の請求として出てきます。数え直しは、費用の話を前倒しする作業でもあります。

状態を図に描くときは、1枚に全部を描かないほうが読めます。主要な道筋を1枚に描き、状態の分岐は画面ごとの別紙に分けます。本線の図は関係者の合意に使い、状態の別紙は作る側との受け渡しに使う、と用途で分けます。分けずに1枚へ押し込むと線が交差して、誰も読まない図になります。線を交差させない工夫は、読みやすい図の条件として作図の解説でも挙げられています。

原因4:権限とログインの前後が1枚に混ざっている

同じ画面名なのに、見える項目と行ける先が人によって違う。この違いを1枚の図で表そうとすると、必ず破綻します。実務の解説記事でも、利用者の権限が混ざることが失敗例として挙げられ、権限が異なる場合は図そのものを分けるやり方が示されています。管理する側と使う側、契約している人としていない人。権限の数だけ図を分けるのが、いちばん読み違いの少ない形です

会社のサイトでも同じことが起きます。ログインの前と後、資料を請求する前と後、見込みの相手と既存の取引先。同じ「サービス紹介」という画面でも、置くボタンと行ける先が違います。分けるかどうかの判断は簡単で、行ける先が1つでも違うなら、別の図にします。見た目だけの違いなら、同じ図の中に注記を置けば足ります。この線引きを決めておかないと、図を分ける分けないの議論が案件のたびに再燃します。

分けた図のあいだをつなぐのは、入口になる画面です。ログインの画面、会員の登録の画面、契約の確認の画面。ここが図と図の継ぎ目になるので、継ぎ目の画面にはどの図へ抜けるかを必ず書きます。継ぎ目を書かないまま分けると、分けた瞬間に全体像を誰も持たなくなり、抜けを見つける力そのものが落ちます。継ぎ目の一覧を1枚だけ別に作っておくと、図が増えても迷いません。

原因5:画面名が揺れて、別の画面として数えられる

図の中の画面名は、そのまま後の工程の共通語になります。実務の解説では、「画面1」のような番号ではなく、「顧客一覧」のように何をする画面かが分かる名前を付けることが勧められています。番号で書くと、打ち合わせのたびに「何番はどの画面か」を確認することになり、その手間が案件の期間だけ続きます。名前は、図の読みやすさの問題ではなく、会話の速さの問題です。

揺れは、名前の付け方の癖から生まれます。「一覧」と「リスト」、「詳細」と「情報」、「確認」と「入力内容の確認」。3人で描けば3通りになります。先に語尾を統一します。一覧、詳細、入力、確認、完了、通知。この6語のどれかで終わる形に寄せると、名前を見ただけで役割が分かり、足りない状態にも気づきやすくなります。たとえば「入力」で終わる画面があるのに「確認」で終わる画面がないなら、そこは抜けです。

名前は図だけの問題ではありません。図の画面名、画面一覧の画面名、設計書の見出し、実装したあとの画面の呼び名。4か所で同じ名前が使われる前提で決めると、後から直す費用が消えます。名前を直す作業は、図を直すより後の工程のほうが重くなります。名前を確定させる短い会議を1回置き、その場で凍結してしまうのが、実務ではいちばん速い形です。

対策:描く順番を4工程に固定する

描き方の手順そのものは難しくありません。作図の道具の解説では、必要な画面を洗い出す、遷移が分かりやすいように並べ直す、矢印でつなぐ、という3段階が示されています。実務ではこれに1段階を足します。利用の筋道を先に文章で書く工程です。画面から描き始めると、思いついた画面だけが並び、思いつかなかった画面は最後まで出てきません。

STEP1
利用の筋道を文章で書く

「資料を探しに来た人が、資料を受け取るまで」のように、始まりと終わりを決めて筋道を1本ずつ文章で書く。筋道は3本から5本。ここで書いた終わりが、そのまま図の終点になる

STEP2
筋道に出てくる画面を書き出す

文章に出てきた画面だけを四角にする。ここではまだ並べず、名前だけを決める。語尾を先に統一しておくと、この時点で重複が見つかる

STEP3
並べて矢印でつなぐ

左から右、上から下へ、時間の順に置く。線が交差する場所は、置き場所を入れ替えて交差を減らす。矢印には操作か条件か結果を1行で書く

STEP4
状態と戻りを足す

各画面に、失敗したとき、0件のとき、権限がないときの行き先を足す。最後に、入ってくる矢印と出ていく矢印の本数を全画面で数える

道具を持つ順番も決まっています。実務の解説では、最初は手書きで粗い輪郭を作り、ある程度形になった段階で作図の道具に移す流れが勧められています。最初から道具で描くと、線をきれいに引くことに時間が溶けます。粗い段階で関係者に見せて筋道の抜けを先に潰したほうが、結果として早く仕上がります。清書は、合意が取れてからで間に合います。

4工程のうち、いちばん飛ばされるのが1番目です。筋道を文章で書かずに画面から描くと、社内の誰かが思いついた画面が全部入り、使われない画面まで作ることになります。筋道に出てこない画面は、その案件では作らない。そう決められることが、1番目の工程の効き目です。削る判断を図の上でやろうとすると、必ず声の大きい人の画面が残ります。

粒度は「1枚に載せる画面の数」で決める

粒度に正解はありませんが、決め方の基準は置けます。1枚に載せる画面の数を先に決める、という基準です。全体像を見せる図は15前後まで、詳しい図は1つの機能あたり10前後まで。この数を超えたら図を割る、と決めておきます。数で決めておくと、どこで割るかを毎回議論しなくて済みます。人によって読める密度は違うので、話し合いで決めようとすると終わりません。

割り方は、機能の単位ではなく利用の筋道の単位にします。機能で割ると、1本の筋道が複数の図をまたいでしまい、つながりを追えなくなります。筋道で割ると、1枚の図が1つの目的を最後まで見せます。1枚の図に、始まりと終わりが1組だけある形にすると、読む人がどこを見ればよいか迷いません。同じ画面が複数の図に出てきても構いません。名前がそろっていれば、それは同じ画面だと分かります。

詳しさの段階は2つで足ります。粗い図は画面名と主要な矢印だけ。詳しい図は条件、状態、戻り、外部への移動まで。3段階に増やすと、真ん中の図が更新されなくなります。更新されない図が1枚でもあると、どれが最新か分からなくなり、全部の図が信用されなくなります。段階を2つに絞り、粗い図は合意が終わった時点で凍結する、と決めておくと運用が持ちます。

図を文章で書くと、変わった場所が残る

図の弱点は、変わった場所が分からないことです。差し替えられた画像を2枚並べても、どの矢印が増えたのかは目で追うしかありません。ここを埋めるのが、図を文章で書く記法です。画面と矢印を文字で書いておけば、図としても表示され、文字の差分としても読めます。代表的なものにマーメイド記法があり、公式の説明では、状態を表す図の書き方として、状態の宣言、矢印による遷移、始点と終点を表す共通の記号、条件による分岐、並行する流れ、入れ子にした状態、注記の位置指定、図の向きの指定が用意されています。

置き場所との相性もあります。開発でよく使われている共有の場では、文章の中に決められた囲みでこの記法を書くと、そのまま図として表示されます。公式の案内では、課題の記録、議論、変更の依頼、説明の文書のいずれでも表示されるとされています。つまり設計の文書と図を別のファイルに分けずに、1つの文書の中で持てます。図だけが古くなるという、いちばん多い事故が起きにくくなります。

向かない場面もあります。並べ方を細かく決めたいとき、線の交差を手で直したいとき、関係者に見せる清書のとき。こうした場面では、置き場所を自動で決める記法より作図の道具のほうが速く仕上がります。作業用は文章で、合意用は作図の道具でと使い分けるのが現実的です。なお公式の案内には、外部の追加機能を併用すると表示が崩れることがあるという注意と、使っている版を確認するための命令があることが書かれています。版によって書ける記法が変わるため、社内の書式を決めるときは版も一緒に決めます。

図の置き場所と、更新する担当を決める

図が信用されなくなるのは、描き方ではなく更新の止まり方が原因です。止まる理由は3つあります。置き場所が複数あって、どれが最新か分からない。直せる人が1人しかいない。直す義務が誰にもない。この3つは、どれも図の中身とは関係がありません。だから、描き方をいくら整えても止まるときは止まります。

対策も3つです。置き場所を1か所に決めて、他の場所には見に行く案内だけを置く。共同編集ができる形にして、直せる人を3人以上にする。そして、画面が増えたら図を直す、を作業の完了条件に入れる。完了条件に入っていない作業は、忙しい週から順に落ちていきます。担当を決めるより、完了条件に書くほうが確実です。

版の扱いも決めます。合意した時点の図は凍結し、日付を付けて別に保存します。以後の変更は新しい版に加え、凍結した版には触りません。凍結した版があると、追加の依頼が仕様の変更なのか、もともとの抜けなのかを後から判定できます。この判定ができるかどうかで、追加の費用をめぐる話し合いの重さがまるで変わります。凍結は、制作会社との関係を守るための作業でもあります。

生成AIに洗い出させるのは、数え上げの部分

ここまでの点検の多くは、機械的な数え上げです。生成AIが向くのは、まさにこの部分です。図を文章で書いてあれば、その文章をそのまま渡せます。作図の道具で描いた図しかない場合でも、画面名と矢印の一覧を表に書き出して渡せば足ります。任せてよいのは、次のような作業です。

  • 入ってくる矢印が0本の画面と、出ていく矢印が0本の画面を、それぞれ一覧にする
  • 完了、誤りの通知、該当が0件の画面のうち、次の行き先が決まっていないものを挙げる
  • 利用の筋道を文章で渡し、その筋道に必要なのに図にない画面を列挙させる
  • 画面名の表記の揺れを見つけ、統一の候補を1組だけ提案させる
  • 条件の書かれていない矢印を、条件が要るものと要らないものに仕分けさせる

頼み方には形があります。図の全体を渡し、答えを一覧で返させ、根拠として該当する画面名と矢印を必ず添えさせる。根拠を添えさせると、図に存在しない画面を挙げた場合にその場で分かります。逆に「この図を改善して」と頼むと、画面が勝手に増えた別の図が返ってきて、どこが変わったのかを目で追う羽目になります。返させるのは図ではなく一覧、と決めておくのが要点です。

利用の筋道から画面を列挙させる使い方は、初期の段階でとくに効きます。「資料を請求した人が、届いた資料を見て問い合わせるまで」のように筋道を文章で渡し、必要な画面を挙げさせる。出てきた一覧のうち、多くはすでに思いついているものです。全部が新しい発見である必要はなく、1本の筋道につき1つ抜けが見つかれば、その時間は取り返せます。表記の揺れを寄せる作業も同じで、候補を出させて選ぶのは人という形にすると速く終わります。

どの画面を残すかは、AIに決めさせない

洗い出しは任せられますが、決めるところは任せられません。どの画面を作り、どれを次の段階に回し、どれを作らないか。この判断には、予算、期日、社内の力関係、既存の仕組みの制約という、図に書かれていない条件が効きます。図の中だけを見ているものに、この判断はできません。挙がった抜けを全部作ると、枚数が倍になることもあります。

人が決めるのは、具体的には次の3つです。1つ目は、抜けとして挙がった画面を作るかどうか。2つ目は、状態を別の画面にするか、同じ画面の中の表示にするか。これは作る手間と使い勝手の兼ね合いで、正解が場面ごとに違います。3つ目は、行き止まりを許すかどうか。意図した終点なら残してよく、意図していない終点だけを直します。この3つは、いずれも図の外にある事情で答えが変わります。

任せる範囲は、先に紙に書いて配ります。任せてよい作業と、人が決める判断を、同じ紙に並べて配る。片方だけを配ると、書かれていないほうが自動的に許可されたことになります。返ってきた一覧は「採用」「見送り」「保留」に仕分ける欄を作り、見送りには理由を1行だけ書く運用にすると、同じ指摘が毎回上がる無駄が消えます。理由が残っていれば、次に同じ図を見せたときに説明が要りません。

誰と合意し、制作会社にどう渡すか

この図は、作る人のためだけの資料ではありません。合意すべき相手は3組います。決裁する人、実際にその画面で仕事をする人、そして作る側。決裁する人には筋道の粗い図を、その画面で仕事をする人には状態と戻りを足した図を、作る側には条件まで書いた図を見せます。同じ図を3組に見せると、必ずどこかの組が読めません。読めなかった組は、後の工程で必ず差し戻してきます。

渡すときは、図だけを渡しません。記法が標準化されていない以上、図は解釈の余地を残す資料だからです。添えるのは次の5点です。

  • 凡例……四角、角の丸い四角、ひし形、点線が何を指すか。記号の意味は組織ごとに違うので、必ず添える
  • 画面の一覧……画面名と、その画面が担う役割を1行ずつ。図の画面名と1文字も違わない形にそろえる
  • 遷移の条件の一覧……矢印ごとに、操作か条件か結果かを1行で。図に書ききれなかった条件はここへ逃がす
  • 決まっていないことの一覧……この段階で決めていない項目を、決める時期と決める人つきで並べる
  • 版と凍結の日付……どの版で合意したか。以後の変更が追加になるかどうかの判定に使う

4番目が抜けやすく、そしていちばん効きます。決まっていないことを書かずに渡すと、受け取った側は「書かれていないことは決まっている」と読みます。決めていない、と書いてあれば、そこは見積もりの前提として扱われます。制作会社側が生成AIを使う場合は、こちらでどこまで洗い出したか、その結果を人がどう仕分けたかも一緒に伝えます。範囲が分かっていれば、受け取った側は同じ点検を繰り返さずに済み、その分を別の確認に回せます。

まとめ

画面遷移図は、作る画面を並べた一覧ではありません。決めるのは、どこから、何をしたら、どこへ行けるかです。画面を列挙する資料は画面一覧、内部の状態の移り変わりを表すのは状態遷移図で、答える問いも読む人も更新の頻度も違います。3つを1枚にまとめようとすると、更新が止まり、どれも信用されなくなります。分けて持ち、画面の名前だけを共通の鍵にしてつなぐ形にします。

作り直しの原因は5つに整理できます。矢印に条件が書かれていない。戻る道と行き止まりが描かれていない。読み込み中、該当が0件、入力の誤り、権限がない、通信の失敗といった状態が画面として数えられていない。権限とログインの前後が1枚に混ざっている。そして画面名が揺れて、後の工程で別の画面として数えられる。どれも、うまくいく道筋から描き始めることの副作用です

描く順番は4工程に固定します。利用の筋道を文章で書く。筋道に出てくる画面を書き出す。並べて矢印でつなぐ。状態と戻りを足し、最後に入ってくる矢印と出ていく矢印を数える。粒度は1枚に載せる画面の数で決め、詳しさの段階は粗い図と詳しい図の2つに絞ります。粗い図は合意が終わった時点で凍結し、日付を付けて別に残します。

生成AIには数え上げを任せます。入ってくる矢印が0本の画面、出ていく矢印が0本の画面、条件の書かれていない矢印、画面名の揺れ、筋道に必要なのに図にない画面。いずれも根拠として画面名と矢印を添えさせる形で頼みます。一方で、どの画面を残し、どれを次の段階に回すかは人が決めます。この判断には、予算も期日も社内の事情も効くからで、それらは図に書かれていません。

最後に、渡し方です。凡例、画面の一覧、遷移の条件の一覧、決まっていないことの一覧、版と凍結の日付。この5点を添えると、図の解釈のずれが見積もりの前に表に出ます。画面遷移図が返してくれるのは、きれいな図そのものではなく、決まっていない場所が分かる状態です。決まっていない場所が見えていれば、作り直しは打ち合わせの中で終わります。見えていなければ、実装のあとで費用として表に出てきます。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。

コンテンツ制作にAIを活かす第一歩、まずは導入から始めませんか?

デボノはアカウント開設・初期設定など「そもそものAI導入」から社内定着まで伴走支援。マーケティング活用など一歩進んだご相談にも対応します。

運営会社:株式会社デボノ

目次