簡単すぎて驚いた！ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow

Webサイトやスマホアプリのデザインで重要なのは、単一の画面ではなく、ユーザーがどのように遷移するか全体の流れを通して画面をデザインすること。
しかし、ユーザーフローやプロトタイプを作成するのは、なかなか面倒です。

Sketch（Photoshop, Adobe XDにも対応予定）ファイルからアートボードを自動同期し、ユーザーフローとプロトタイプを簡単に短時間で作成できるツールを紹介します。

現在はベータ版でmacOSのみですが、Windows版のリリースも予定されています。

Overflow

• Overflowの特徴
• Overflowのダウンロード
• Overflowの使い方

Overflowの特徴

Overflowは、ユーザーフローとプロトタイプを簡単に作成することができるデスクトップ用のツールです。
オンラインツールではないので、安心して利用できると思います。

ユーザーフローの作成

Overflowの3大柱

• 作成

  さまざまなデザインツールと連携して、ユーザーフローを作成できます。作成方法も簡単、アートボードを同期させ、各画面をコネクタで繋げるだけです。
  ※現在はSketchのみ、Adobe XD, Photoshop, Figmaに対応予定。

• プレゼンテーション

  通常のユーザーフローは静的にしか利用できませんが、Overflowではインタラクティブなユーザーフローとしても利用できます。
  さらに、1クリックでプロトタイプにすることもでき、非常に便利です。

• 共有

  Overflowはデスクトップのツールで、クラウド共有機能も備えています。さまざまなデバイスからユーザーフローを見ることができます。

プレゼンにもぴったりなユーザーフロー

各画面のボタンやリンクをクリックすると、アニメーションで遷移します。

Overflowのダウンロード

Overflowのダウンロードは、下記ページから。

Overflow

現在はベータ版でmacOS版のみが、無料でダウンロードできます。
Windows版のリリースも予定されています。

Overflowの使い方

Overflowのデスクトップ版をダウンロードしたので、簡単に使い方を説明します。

Overflowで作成したユーザーフロー

ユーザーフローはオンラインのデモも用意されています。

• オンラインのデモ
  ※共有用のユーザーフローとプロトタイプのデモです。編集はできません。

ユーザーフローは拡大・縮小に対応しており、「Shift」キーを押すとインタラクションの箇所がハイライトされます。

インタラクションの表示

プロトタイプにする時は、「Enter」キーを押すだけです。

プロトタイプ

ユーザーフローの作成も簡単です。
Overflowをインストールすると、Sketchにもプラグインとしてインストールされます。

1. .sketchファイルをSketchで開き、メニューから「Overflow: Sync...」を選択。
2. アートボードは全部、または選択することができます。

アートボードの同期

これでアートボードの同期が完了し、ユーザーフローを作成できます。

ユーザーフローに必要なラインや図形はすべて揃っており、各画面をコネクタでつなぎ、必要があればコネクタにラベルを加えます。

ユーザーフローの作成

1つのファイルにアートボードを複数同期させることも可能です。

アートボードの選択

ユーザーフローやプロトタイプのテーマも簡単に変更できます。
現在は、ライト・ダークの2種類です。

テーマの変更