2018年6月13日

デザイン

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

目次

  1. はじめに
  2. User Flowsとは
  3. できること
  4. セットアップ
  5. 使ってみた感想
  6. まとめ

はじめに

アプリや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つです。

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

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

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の特徴は大きく5つあります。

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

他の画面遷移図と同じように、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のプラグインなので非常に簡単することができます。

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

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

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

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

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

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

使ってみた感想

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

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

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

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

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

  1. Sketch内で作業ができる
    overflowと違い、User FlowはSketch内部で作業ができるので早くて便利です。

  2. ifなどのロジックを画面遷移図に入れることができる
    条件分岐を含めたロジックが入れられる画面遷移図は今のところないので、そういったことが簡単にできるのは良いと思いました。

  3. カスタマイズができる
    線の色などをカスタマイズすることでシックなイメージにしたり、クライアントのカラーに合わせたりできるので、ある程度融通がきいて良いと思いました。

  4. 画面遷移図をすぐに書き出せる形にしてくれる
    Sketchのそのままのプロトタイプ機能の図だと、クライアントに渡すときに物足りなく見えるのですが、User Flowはある程度渡しやすい形にまで書き出してくれるので初期の段階の画面遷移図としては思いました。

こういう場面では使えないだろうと感じたこと

User Flowはあくまでシンプルに早くSketch内で画面遷移図を作るためのプラグインなので、クライアントやプレゼンテーションなどで人をデザインでびっくりさせるためのものではない、ということは感じました。

まとめ

以上、今日は画面遷移図を簡単に作ることができるSketchのプラグイン、User Flowをご紹介しました。

シンプルで初期の画面遷移図を作るのには向いていると思うプラグインなので、興味がある方はぜひ使って見てください!

Sketchのお仕事に関するご相談

Bageleeの運営会社、palanではSketchに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

CONTACT PAGE TOP