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
Overflowの口コミ
口コミを書く | |
関連アプリ
3Dキャラクターを作成できる「VRoid Hub」
アニメーション付きプレゼンテーションが作れる「Prezi」
AIでシネマグラフが作成できる「PLOTAVERSE」
Googleのオンラインストレージサービス「Google Drive」
PDFを電子カタログに変換できる「Issuu」
アイデア共有のためのオンラインノートサービス「Milanote」
オンラインで画像編集ができる「Fotor」
複数PC間でファイルが共有できるDropbox」
モックアップが作成できる「Justinmind」
タスクが整理できる「Todoist」
エンジニア向けチャットツール「Slack」
ドキュメントをWebで共有できる「Dropbox Paper」