draw.io、私もこれまでシステム構成図とか書くのにけっこう使ってたりするんですが、 ワイヤーフレームや画面遷移図もdraw.ioでいいんじゃないかな、って思って調べてみました。

調査

アプリ開発における画面遷移図の作成方法

画面デザインを含めた画面遷移図はFigma、ワイヤーフレームくらいのレイアウトならdraw.ioって棲み分け。 まあそうですよね。わかる。 でもFigmaをまともに使おうとするとお金かかるんです。

できればFigma寄りの成果物をdraw.ioで作りたい。

競プロ解説スライドのテンプレートを Draw.io 用に作ってみた

これは直接的に画面遷移図をつくるという内容では無いのですが、 テンプレートを作っておいてそれをベースに利用しよう、というアプローチが良かったです。 draw.ioの設定変更点などもまとまってて良い感じ。

Figmaっぽく使う

ページ設定

ページを超えてオブジェクトを配置すれば追加されるので特に設定は不要だけれども、画面遷移図はそれなりの領域を使いがちなので予め大きく作っておく。

表示

スクラッチパッド

画面のベース図形をスクラッチに保存しておくと新規画面が作りやすそう 携帯アプリの画面であればベース図形は 375 x 667 （iPhone SEサイズ）の四角形を基準にすると良いかも

スタイル

遷移線

画面間の遷移を表す線のスタイルは使いまわしたいところ

参考