はじめまして！WHIでUI/UX デザイナーをやっております、バナです。
2025年6月に入社しました。
なんと WHI は中途入社であっても2か月の豪華オンボーディング研修があり、今は研修の真っ最中です。オンボーディング研修についてはぜひこちらの記事をご覧ください！
WHI開発オンボーディングを大解剖！ Vol.1 ～Work fun！× 実践的なオンボーディングとは？～
研修の１つである「ソフトウエアテスト手法」を学んでいるときに、「これUI Designで使えるやん！」と思った図表がありましたので、これまで使っていたものも含めてここにまとめたいと思います。
フローチャート
UIデザインにおいてフローチャートは、画面や操作の流れ、ユーザーの判断による画面分岐などを視覚的に整理するのに便利です。
一見単純だと思っていた機能のUIを作成していて、作っていくうちに「あれ、以外と画面が多いな・・」と思ったことはありませんか？そして、エンジニアに「〇〇の画面が足りないんですけどー」と後から突っ込まれた経験がある方は少なくないと思います。そのような事態を防止するためにも、フローチャートは有効です。ログイン画面を例にフローチャートを書いてみましょう。
一見単純なログイン画面でもフローチャートを書いてみると複数の分岐があることがわかります。デザイナーはワイヤーフレームの作成をしながら分岐を考えることが多いように思いますが、ケースが網羅できておらず抜け漏れが発生することもしばしば（私の場合）。ユーザーのフローが複雑な場合は特に、フローはフローできちんと整理してからUI Designをするのがおすすめです。
デシジョンツリー
デシジョンツリー（決定木）とは、「ある条件に基づいて判断を分岐させていく木構造の意思決定モデル」です。
UI Designで活用するとしたら、分岐によって生じる複数のUIパターンを整理するのに向いていると思います。例えばこんな画面フローがあったとします。
- クイズに答える
- じゃんけんをする
- クイズに正解の人でじゃんけんに勝ちの人は画面A、あいこの人は画面B、負けの人は画面C
- クイズに不正解の人でじゃんけんに勝ちの人は画面C、あいこの人は画面D、負けの人は画面E
これらをUI Designのみで表すのはちょっと大変ですので、デシジョンツリーを描いてみましょう。
分岐が視覚的にわかりやすいですよね。前述のフローチャートでも同様の内容を表現可能ですが、デシジョンツリーは分岐が少なく直感的に表現したいときに向いています。用途に応じて使い分けると良いでしょう。
デシジョンテーブル
デシジョンツリーを表形式にして、複数の条件とそれに対する結果を整理したものです。デシジョンツリーが直感的に分岐を表すのに対し、デシジョンテーブルは条件の組み合わせを網羅的に整理、確認するのに向いてます。さきほどのクイズとじゃんけんの結果による画面分岐をデシジョンツリーで表してみましょう。
見ての通り、すべてのパターンを網羅・整理できるのがメリットです。条件が複雑な場合に「条件に抜け漏れがないか」「重複や矛盾がないか」などを確認するために活用すると良いと思います。
状態遷移図
状態遷移図
「画面が遷移するわけじゃなくて、状態が違うんだよな・・・」UIを作成していて、そんな風に思ったことはありませんか？そんなときは「状態遷移図」が便利です。
画面遷移図と似ていますが、画面の遷移ではなく状態の変化を表します。
UI Designで出番は少ないかもしれませんが、知っていると便利だと思います。ストップウォッチアプリを例に、状態遷移図を作成してみましょう。
※参考文献：ソフトウエアテスト技法練習帳 3.1 ストップウォッチの動作
このように、同じ画面でも状態の違いを表すことができます。また、それぞれの状態でどのようなアクションが必要かを整理することができます。「画面は遷移しないけど、状態の違いがいくつもある」ときは、状態遷移図を用いて仕様を整理できることを覚えておくとよいでしょう。
状態遷移表
上記の状態遷移図を表にしたものです。 デシジョンツリーとデシジョンテーブルの関係性と同様で、条件の組み合わせを網羅的に整理、確認するのに向いてます。ストップウォッチの例を状態遷移表にしてみましょう。
※参考文献：ソフトウエアテスト技法練習帳 3.1 ストップウォッチの動作
表を書くのにややコツがいりますが、一度書けばすぐ慣れます。この表は、例えばボタンや機能が複数あり、状態の違いによって機能が制限されるときに役立つと思います。すべてのパターンを網羅できるため、抜け漏れの確認に便利です。「この状態でもこの機能必要だよね？」や、「この状態のときはこの機能使えないはずだよね？」といったミスをなくせると思います。
おわりに
以上、５つの図表を紹介してきましたが、いかがだったでしょうか？
私はこれを10年前に知りたかったです・・w
冒頭の研修の話に戻りますが、WHIでは２か月たっぷりかけて中途入社者のオンボーディング研修を行っています。デザイナーはソフトウエアテストの他にも、クラウド基礎、プログラミング、アプリケーション開発など開発に関するさまざまな研修を通じてプロダクトへの理解を深めていきます。
研修自体がチャレンジの連続ではありますが、WHIのVisionでもある「我々が最も『はたらく』を楽しんでいる」をどう実現するか、研修を通じて試行錯誤の毎日です。
WHIでは、ともに「はたらくを楽しむ」仲間を募集しています！ご興味のある方はぜひ採用サイトをのぞいてみてください。ではまた！
採用サイト｜株式会社Works Human Intelligence