「デザイナー専用ツール」だけじゃない！Figmaで作る画面遷移図が、開発の「伝わらない」を解決します

こんにちは！株式会社雲海設計の開発部です。

突然ですが、こんな経験はありませんか？

「新しい業務システムを外注したのに、出来上がったものが思っていたのと全然違う…」

「社内で『こういうアプリが欲しい』と話し合ったはずなのに、みんなイメージがバラバラだった…」

システムやアプリの開発って、「完成するまで何ができるか分からない」という怖さがありますよね。

もし「開発を依頼する前に、完成イメージをもっとハッキリさせたい」と感じている方がいらっしゃったら、今日の記事はきっとお役に立てると思います。

この記事を読み終える頃には、「Figma」というツールを使って、誰でも簡単に「画面の流れ」を可視化できることを知っていただけるはずです。

そもそも「Figma」と「画面遷移図」って、何ができるの？

まず、Figma（フィグマ）について。

すごくシンプルに言うと、「ブラウザ上で動くデザインツール」のことです。

「デザインツール」と聞くと、イラストレーターやデザイナーが使う難しいソフトを想像するかもしれません。

でもFigmaは、パワーポイントを使える方なら十分に操作できるくらい、直感的に作られています。

しかもインストール不要で、Googleアカウントがあればすぐに無料で始められます。

次に、画面遷移図について。

これは、「アプリやWebサイトの画面が、どういう順番で切り替わるかを図にしたもの」です。

例えば、ネットショッピングを思い浮かべてください。

「商品一覧」→「商品詳細」→「カートに入れる」→「購入手続き」→「完了画面」

と、ボタンを押すたびに画面が変わりますよね。

この流れを、矢印でつないで一枚の図にしたのが画面遷移図です。

Figmaを使うと、この画面遷移図を実際の画面デザインに近い形で作ることができます。

パワーポイントで作る四角と矢印だけの図とは違い、「本物っぽい画面」を並べて流れを確認できるので、完成イメージがグッと湧きやすくなるんです。

実は、中小企業にこそチャンスがある

「Figmaなんて、デザイナーがいる大きな会社が使うものでしょ？」

そう思われる方も多いかもしれません。

でも実は、専任のデザイナーがいない中小企業こそ、Figmaを活用するメリットが大きいんです。

なぜなら、開発の現場で一番コストがかかるのは「認識のズレによる手戻り」だからです。

大企業であれば、専門のプロジェクトマネージャーがいて、何度も打ち合わせを重ねて認識を合わせることができます。

でも、リソースが限られた中小企業では、そこまで時間をかけられないことも多いですよね。

そこで画面遷移図の出番です。

開発を始める前に「完成したらこんな画面が、こういう流れで動きますよ」という図を一枚用意するだけで、発注側と開発側の「思っていたのと違う」を大幅に減らせます。

しかもFigmaは基本無料で使えます。

高価なソフトを買う必要もなければ、デザイナーを雇う必要もありません。

「ちょっと図を作って共有したい」というニーズにぴったりなんです。

具体的な活用シーン

「外注先に『こういう感じで』が、なかなか伝わらない…」

システム開発を外部に依頼するとき、言葉だけで要望を伝えるのは本当に難しいですよね。

「ログイン画面があって、その後にダッシュボードが出て…」と口で説明しても、お互いの頭の中にあるイメージは微妙に違っていたりします。

Figmaで画面遷移図を作っておくと、この問題がかなり解消されます。

例えば、社内の在庫管理システムを発注するケースを考えてみましょう。

「在庫一覧」「入庫登録」「出庫登録」「レポート」といった画面を、Figma上で簡単なレイアウトとして描いてみます。ボタンや入力欄の配置をざっくり決めて、画面同士を矢印でつなぐ。

これだけで、「このボタンを押すとこの画面に行く」という流れが一目瞭然になります。

すると、外注先との打ち合わせが「この図をベースに話しましょう」と始められるので、認識合わせの時間が大幅に短縮されます。

後から「ここ、思ってたのと違う」という手戻りも減り、結果的にコストダウンにつながるんです。

「新しいシステムの話、社内でなかなか前に進まない…」

「うちもそろそろ業務をシステム化したい」という話が社内で出ても、具体的な検討がなかなか進まない…というケースもよくあります。

その原因の多くは、「何を作るのか、みんなのイメージがバラバラ」だったりします。

営業部長は「顧客管理ができればいい」と思っているのに、経理担当は「請求書発行も必要だ」と考えている。

でも、それぞれが頭の中で思い描いているだけなので、会議をしても話が噛み合わない。

こんなとき、Figmaで「たたき台」の画面遷移図を作ってみると、議論が一気に具体的になります。

例えば、「こういう画面構成でどうですか？」と可視化したものを見せると、「ここにはこの項目も欲しい」「この画面は要らないかも」と、具体的なフィードバックが出やすくなります。

言葉だけで議論するより、「絵を見ながら話す」方が、圧倒的に話が前に進むんです。

「今使っているシステム、正直もっと使いやすくしたい…」

既存のシステムやアプリに不満があるけど、「どこをどう直せばいいのか、うまく説明できない」ということもありますよね。

そんなときも、画面遷移図が役立ちます。

現状のシステムの画面構成をFigmaで再現してみて、「ここの操作が3ステップもあるから面倒」「この画面からあの画面に直接行けたら便利なのに」という改善点を図の上で指摘できるようになります。

「なんとなく使いづらい」という曖昧な不満を、「この画面遷移を変えれば解決する」という具体的な改善提案に変えられる。

これは、社内で改善を提案するときにも、外部のベンダーに修正を依頼するときにも、とても強力な武器になります。

最初の一歩、どう踏み出す？

「Figmaが便利そうなのは分かったけど、何から始めたらいいの？」

そう思われた方も多いかもしれません。ご安心ください。いきなり本格的な画面デザインを作る必要はありません。

最初の一歩としておすすめなのは、「四角形と矢印だけで、画面の流れを描いてみる」ことです。

Figmaにアクセスして、無料アカウントを作成したら、まずは四角形を5〜6個並べてみてください。

それぞれに「ログイン画面」「一覧画面」「詳細画面」などと名前を付けて、矢印でつなぐ。これだけで、立派な画面遷移図の第一歩です。

慣れてきたら、四角形の中に「ボタン」や「入力欄」を追加していく。そうやって少しずつ「本物っぽい画面」に近づけていけばOKです。

もし「本格的にシステム開発を検討したいから、もっとしっかりした画面遷移図を作りたい」という段階になったら、ぜひ私たち専門家にご相談ください。

「どこまで自分たちで作ればいいか」「この図をベースにどう開発を進めるか」といったアドバイスをさせていただきます。

まとめ

Figmaで作る画面遷移図は、魔法の杖ではありません。

これがあれば開発がすべてうまくいく、というわけではないでしょう。

しかし、「作りたいものを、目に見える形にする」という一歩は、想像以上に大きな価値があります。

社内での合意形成がスムーズになる。

クライアント様/ベンダー様との認識ズレが減る。

「思っていたのと違う」という手戻りコストを削減できる。

これらはすべて、「伝わらない」を「伝わる」に変えることから始まります。

あなたの会社でも、「システム化したいけど、なかなか話が進まない」「外注したいけど、どう伝えればいいか分からない」といったお悩みはありませんか？

株式会社雲海設計では、画面遷移図の作り方から、その先の開発まで、一貫してサポートしています。

「うちの場合はどうすればいい？」という個別のご相談も大歓迎です。

あなたの会社に合った「最初の一歩」を、全力でサポートします。