こんにちは。TAM UX/UIチームでデザイナーをしております、萩原です。
私のチームではユーザーフローの可視化や構成を固めるワイヤーフレーム、デザインの確認まで『Overflow』を活用しています。
『Overflow』は全体が俯瞰できるので、プロトタイプでは見落としがちな細かい画面を網羅できたり、画面間の関係性がみえるのでプロジェクトメンバーとのディスカッションもはかどります。
また、ダブルクリックで100%表示になったり、遷移の矢印を付けたオブジェクトをクリックするとｽﾙｽﾙ～っと気持ちよく動いてくれて、はじめて見たときは感動しました！
『Overflow』とは、ユーザーが画面遷移する流れや画面間の相互関係を視覚的に表現できる画面遷移図作成ツール。
今回はそんな『Overflow』の使い方をご紹介します。
デザインツールと連携しているので、修正や変更もしやすく、クラウドにアップできるので共有も簡単です。
直感的に操作できるので、英語のできない私でも問題なく操作できました！
『Overflow』の使い方
macOSのみになりますが『Overflow』をダウンロードしてインストールしましょう。
30日間無料で試すこともできます！（2020.08現在）
※以下画面キャプチャではイメージとして一部MentorMe UI Kitをお借りしています。
デザインツールと連携
AdobeXDは『Overflow』のプラグインがあるのでインストールします。
Sketchもプラグインとしてインストールされます。
後はアップしたいアートボードを選択して、同期するだけ！
（figmaも連携できますが今回は割愛させていただきます）
更新したときなど、上書きする場合も同じ手順になります。
※アートボードの名前が同じところに上書きされるので、注意してください。（名前が全く同じ2つのアートボードがあった場合、『Overflow』上で重なってしまう場合があります）
遷移をかく
同期すると、デザインのオブジェクトごとに別れており、オブジェクトの四方から矢印が表示されます。
そこから遷移を引きたい画面へドラッグすることで遷移の矢印をかくことができます。
左上から矢印の色や文字サイズを変更できます。
画面の左端から、新しいボードを追加したり、右クリックで背景の色を変えることもできます。
共有する
遷移図が完成したら保存して、画面右上の「Document Shares」から共有用のURLを作成します。
タイトルを入力したら「Upload」ボタンをクリック。
「Protect link with passphrase」にチェックすれば、リンク先にパスワードをかけることもできます。
更新した際も「Upload」ボタンクリックで上書きされるので、更新するたびにリンクを共有する必要はありません！
ブラウザ上で確認してみましょう！
画面ごとにURLを作成してくれるので、ピンポイントで画面を確認してほしいときや、仕様書にリンクを貼るときなどにとても便利です。
コメントする
最近コメント機能も追加されました。
ブラウザ上にコメントを残せるので、質問や確認がよりしやすくなりました。
ドキュメントとして残す
プロジェクト完了後など、ドキュメントとして残したいこともあると思います。
そんなときPDFまたはPNG形式で書き出すこともできます。
まとめ
以上が使い方でした。触ってみると思った以上に簡単に感じられると思います。
【応用編】では遷移が複雑になった場合でも、『Overflow』で分かりやすい遷移図をかくポイントをご紹介します。こちらもあわせてぜひご覧ください！