Webサイトやサービス仕様の検討段階で必ず登場するのが画面遷移図です。画面遷移図はサービスの全体像を捉えたり、画面間の相互関係を示す時に使われます。画面遷移図を正しく作ることで、チームメンバーでサービスの全体像を正しく共有することができるだけでなく、抜け漏れなくページを洗い出すことで失敗を防ぐことができます。今回は、この画面遷移図を簡単に作成できる「Overflow」というMacのツールをご紹介します。
このアプリで仕事が効率化できる理由
- 画面遷移図を簡単に作成できる
- 完全に無料で利用できる
- AdobeXDなdp他のツールと連携を取ることができる
使い方
インストールする
はじめにサイトの「get started for free」をクリックしてみましょう。
すると、インストールが始まっていきます。Macのインストール手順に従いAppricationにドロップアンドドラッグをします。
次にインストールアプリ一覧から「overflow」をクリックします。
メールアドレスを書いて「次へ」をクリックします。
名前とパスワードを設定して「start 30day trial」をクリックします。
次に組織の名前を書いて「next」をクリックします。
チームのメンバーを加えてください。いない場合は「skip」をクリックします。今回は、「skip」をクリックします。
全ての準備が整ったので「Okay」をクリックします。
実際に使用してみる
「welcome to Overflow」という画面になりますので、「esc」をクリックします。
画面転移図が現れるので自分の好みに図を置きましょう。
連携アプリを使用したい場合は、＋ボタンをクリックして「screen」をクリックしましょう。
基盤をどのタイプにするか携帯画面の中から選択をします。
また、画面遷移図の中から自由に画面をずらすこともできます。
最後に「File」→「 save」で保存をします。
特徴
「Overflow」は、画面遷移図の作成に特化したツールで、美しい画面遷移図が簡単に作れるというのが大きなポイントとなっています。また、AdobeXD,Figma,Sketch,imageなどのデザインアプリと連携して作成することができます。連携アプリの数はまだ少ないですが今後さらに増えていくことでしょう。是非とも利用してはいかがでしょうか。
価格
最初の１ヶ月間は完全無料で使用できます。その後、月15ドルかかります。ですが、年間契約にすると144ドルで利用でき月12ドルで使用することができます。この機会に是非ともご利用してはいかがでしょうか。
サイト情報
URL：https://overflow.io/
運営会社：Protoio, Inc