きっかけ
overflowが気になった。
SketchのPrototypingで線繋いで手元で遷移確認して、そのままOverflowにアップロードしたらめちゃくちゃ見やすい遷移図+簡易プロトタイプが見れるとか神すぎるやろ。俺の1日返して。しかもシェアしたリンクはパスワードがかけられる
— Ryo Nakae (@ryo_dg) 2018年4月23日
デザイナーが選んだ。私が好きなデザイン 2018年2月号 – Adobe Creative Stationにて、
Get obachanをご紹介されていたRyo Nakaeさんのツイートを見て気になり触ってみました。
overflowとは?
アプリを作るときに必要な画面の遷移図、みなさんはどのように作っていますか?
このツールでは、簡単に作成できるフローチャートを元にプロトタイプを作ることができます。
フローを描くためのラインをきれいに引けるだけでなく、様々な種類から選択してカテゴリー分けをして、役割を記載することも可能です。新しいものが大好きなGoodpatchで3月に話題になったアプリ、サービス、デザインまとめ | Goodpatch Blog
- ・遷移図(フローチャート)・簡易なプロトタイプが作れるツール。
- ・SketchのデフォルトのPrototypingで設定した内容を引き継げる。
SketchのデフォルトのPrototypingを引き継げるサービスを他に知らないので、とても素敵だなと思いました。(2018年5月現在)
諸々のメモ
01. overflowアプリのダウンロード
- overflowのサイトから「Request early access」ボタンを選択。
メールアドレスを登録し、アプリをダウンロードする。
Sketchファイルのアップロード
- チャートフロー(遷移図)を用意したい、対象のSketchファイルを開く。


- ・メニューバー「Overflow > Sync All Artboards」
ショートカット:Option (⌥) + Shift (⇧) + E - ・メニューバー「Overflow > Sync Selected Artboard(s)」
02. Overflowと同期する




03. メニューの内容
- ・メニュー「Select document」
ファイルを新規作成 / 既存ファイルの選択 - ・ボタン「Open an Existing Document…」
既存のOverflowファイルを読み込む - ・メニュー「Select board」
Overflowのboardを新規作成 / 既存のboardを選択 - ・メニュー「Design density / Export density」
読み込み/出力のサイズ - ・ボタン「Sync to Overflow」
同期を開始する