画面遷移図が作成できる「Overflow」

Webサイトやサービス仕様の検討段階で必ず登場するのが「画面遷移図」です。画面遷移図はサービスの全体像を捉えたり、画面間の相互関係を示す時に使われます。画面遷移図を正しく作ることで、チームメンバーでサービスの全体像を正しく共有することができるだけでなく、抜け漏れなくページを洗い出すことで失敗を防ぐことができます。今回は、この画面遷移図を簡単に作成できる「Overflow」というMacのツールをご紹介します。

使い方

インストールする

はじめにサイトの「Get Started for Free」をクリックします。

すると、インストールが始まります。Macのインストール手順に従いAppricationにドラッグ＆ドロップします。

インストールアプリ一覧に「OverFlow」が追加されますのでこちらをクリックします。

メールアドレスを書いて「次へ」をクリックします。

名前とパスワードを設定して「Start 30 day trial」をクリックします。

次に組織の名前を書いて「Next」をクリックします。

複数で画面遷移図を共有する場合は、ここでチームのメンバーを加えることができます。いない場合は「Skip」をクリックします。（今回は、「Skip」をクリックします。）

全ての準備が整ったので「Okay」をクリックします。

画面遷移図を作成する

「Welcome to Overflow」という画面になりますので、「esc」をクリックします。

画面転移図が現れるので自分の好みに図を置きましょう。

連携アプリを使用したい場合は、＋ボタンをクリックして「Screen」をクリックしましょう。

どのデバイス用の画面遷移図にするかをアイコンの中から選択します。

また、画面遷移図の中から自由に画面をずらすこともできます。

完成尾は、「File」→「 Save」で保存をします。

以上がOverFlowの使い方でした。画面遷移図の作成に特化したツールですが、また、AdobeXDやFigma、Sketchなどのデザイン系アプリと連携することができます。ぜひとも利用してはいかがでしょうか。

価格

最初の１ヶ月間は完全無料で使用できます。その後は、月15ドルかかります。年間契約にすると144ドルで利用でき月12ドルで使用することができます。

サイト情報

URL：https://overflow.io/
運営会社：Protoio, Inc