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

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

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

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

Overflowのキャプチャ

Overflow

Overflowの特徴

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

Overflowのキャプチャ

ユーザーフローの作成

Overflowの3大柱

  • 作成
    さまざまなデザインツールと連携して、ユーザーフローを作成できます。作成方法も簡単、アートボードを同期させ、各画面をコネクタで繋げるだけです。
    ※現在はSketchのみ、Adobe XD, Photoshop, Figmaに対応予定。
  • プレゼンテーション
    通常のユーザーフローは静的にしか利用できませんが、Overflowではインタラクティブなユーザーフローとしても利用できます。
    さらに、1クリックでプロトタイプにすることもでき、非常に便利です。
  • 共有
    Overflowはデスクトップのツールで、クラウド共有機能も備えています。さまざまなデバイスからユーザーフローを見ることができます。

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

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

Overflowのダウンロード

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

サイトのキャプチャ

Overflow

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

Overflowの使い方

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

Overflowのキャプチャ

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

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

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

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

Overflowのキャプチャ

インタラクションの表示

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

Overflowのキャプチャ

プロトタイプ

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

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

アートボードの同期

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

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

Overflowのキャプチャ

ユーザーフローの作成

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

Overflowのキャプチャ

アートボードの選択

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

Overflowのキャプチャ

テーマの変更

sponsors

top of page

©2018 coliss