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をご紹介しました。

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

0

0

AUTHOR

sasakki デザイナー

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

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

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

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

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

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP