2018年6月13日

デザイン

Sketchで簡単に画面遷移図が作れるプラグイン、UserFlows

User Flows プラグイン画面遷移図

はじめに

アプリやWebサイト作りに「UX」の観点がどんどん必要とされる中、デザイナーにもディレクターにも画面遷移図を作る機会が増えてきています。

今日はそんな方のためにSketchで簡単に画面遷移図が作れるプラグイン、User Flowsをご紹介します！

User Flowsで何ができるのか、どのようにセットアップするのか、オススメの理由などをご紹介します！

User Flowsをオススメする理由

そもそも現在、画面遷移図を作る方法がたくさんある中、なぜ「User Flows」を紹介するのか、オススメするのかということについてまず触れておきます。

画面遷移図を作る方法

画面遷移図を作る方法はいくつかあります。

最近の有名なところでいうとoverflowがあります。
こちらは遷移図を作れるだけでなく、クライアントに見せる時のプレゼンテーションモードがついていたり、遷移図を作るだけでそれをプロトタイプに落とし込んでくれたり非常に機能が豊富です。

overflowのサンプルの遷移図の一部

その他にもSketchの元々のプロトタイピング機能でも簡単な画面遷移図のようなものが作れます。

こちらに関しては以前の記事でご紹介しているのでぜひご覧ください。

アプリのワイヤー作りを爆速にするSketchプラグイン！LIGHTWIRE

ワイヤー作りをとても早くできるプラグインを紹介しているのですが、出来上がったワイヤーをSketchのプロトタイプ機能で画面遷移図のようなものにしています。

User Flowsのメリット

そもそもこの既存のoverflowやSketchのプロトタイプ機能を上回るメリットがないと「User Flows」を使う必要がないのですが、私は「User Flows」にはその価値があると思います。

理由としては大きく4つです。

Sketch内で作業ができる
ifなどのロジックを画面遷移図に入れることができる
カスタマイズができる
画面遷移図をすぐに書き出せる形にしてくれる

詳しくはのちほどご紹介します！

User Flowsとは

User Flowsとは画面遷移図を簡単に作ることができるSketchのプラグインです。繋げたいボタンとアートボードを選択した状態でショートカットキーを押すだけでユーザーがどのように画面遷移をするのか設定することができます。

その他にも画面遷移に条件分岐を設定したり、画面遷移を自分が好きな色やデザインにカスタマイズしたりすることができます。

User Flowsの公式サイト
user Flows | A plugin for generating flow diagrams from Artboards in Sketch.

User Flowsのリポジトリ
UserFlows
リポジトリを見る限り、今でも積極的にアップデート、管理されています。

できること

次に、User Flowsでできることをご紹介します。

User Flowsの特徴は大きく５つあります。

リンクを設定することができる

他の画面遷移図と同じように、User Flowsではリンクを設定することができます。

User Flows公式サイトより

リンクを設定するには、リンクを設定したいレイヤーとその遷移先を選択し、リンクを設定コマンド (Cmd + Shift + M) を走らせてください。

条件分岐を設定することができる

User Flowsでは、ユーザーがログインしていた場合、していない場合など条件によって遷移先を変える場合の遷移図にも対応しています。

条件を追加するには、コマンド (Cmd + Shift + D) から出てきたポップアップに条件を記述します。

User Flows公式サイトより

既に設定してある条件を変更するには、条件が書かれているアートボードを選択し同コマンド (Cmd + Shift + D) で変更することができます。

画面遷移図を書き出す

全てのリンクを設定し終わったら、画面遷移図を書き出す (Generate Flow Diagram) コマンド (Cmd + Shift + D) から出てきたポップアップで図のタイトルと説明、そして最初の画面を設定すると画面遷移図を書き出すことができます。

User Flows公式サイトより

リンクの表示・非表示を切り替える

アートボード上で表示されているリンクは、アートボードに変更を行ってもリンクをredraw (再描写) することで変更したアートボードに合わせたリンクに瞬時に変わってくれます。

リンクをredrawするコマンドは (Cmd + Shift + 9) です。

※アートボードを少し動かす程度であれば、自動でリンクは変わります

iframe src=”https://player.vimeo.com/video/191425996?autoplay=1&loop=1&title=0&byline=0&portrait=0″ frameborder=”0″ webkitallowfullscreen=”” mozallowfullscreen=”” allowfullscreen=” style=”width:100%;height:300px;”>
User Flows公式サイトより

また、 (Cmd + Shift + 0) でリンクの表示・非表示を切り替えることができます。

画面遷移図をカスタマイズする

書き出す画面遷移図は自分の好きなようにカスタマイズすることができます。

User Flows公式サイトより

背景の色や、リンクの色、リンクのエリアや自分の名前などをカスタマイズして、書き出すことができます。

セットアップ

セットアップ方法ですが、Sketchのプラグインなので非常に簡単することができます。

大きく２通りあるのでお好きな方法でセットアップしてください。

公式サイトからダウンロードする

User Flows 公式サイトの「Download Plugin」ボタンからSketchプラグインをダウンロードする。

ダウンロードしたファイルを解凍し、「UserFlows.sketchplugin」をダブルクリックしてSketchにインストールする。

Sketch Runnerからインストールする

Sketch Runner を立ち上げ、install コマンドから User Flowsを探すと出てくるので、そのままエンターキーでインストールできます。

使ってみた感想

実際にLIGHTWIREと「User Flows」を使って画面遷移図を作ってみました。

LIGHTWIREとはアプリのワイヤーフレームが非常に早く作れるプラグインです、詳しくはこちらをご覧ください。
アプリのワイヤー作りを爆速にするSketchプラグイン！LIGHTWIRE

出来上がったものがこちらです。

とても凝っているわけではありませんが、シンプルで見やすく、何よりとても早く作ることができました。

使ってみて感じたメリット

Sketch内で作業ができる
overflowと違い、User FlowはSketch内部で作業ができるので早くて便利です。
ifなどのロジックを画面遷移図に入れることができる
条件分岐を含めたロジックが入れられる画面遷移図は今のところないので、そういったことが簡単にできるのは良いと思いました。
カスタマイズができる
線の色などをカスタマイズすることでシックなイメージにしたり、クライアントのカラーに合わせたりできるので、ある程度融通がきいて良いと思いました。
画面遷移図をすぐに書き出せる形にしてくれる
Sketchのそのままのプロトタイプ機能の図だと、クライアントに渡すときに物足りなく見えるのですが、User Flowはある程度渡しやすい形にまで書き出してくれるので初期の段階の画面遷移図としては思いました。