フローチャート設計の最新UX用語と、4つの役立つツール

タスクフロー、ユーザーフローという言葉はここ数年でよく聞くようになりましたが、それぞれの言葉を明確に定義した辞書はいまだありません。

UI/UX業界にはたくさんの専門用語があり、その多さにはため息が出ます。第一線で働くデザイナーでさえ、すべての単語の定義を明確に理解しているとは限りません。

今回は、フローチャートを作成するときに絶対理解しておきたい専門用語と、その作成に役立つ4つのツールをまとめました。

フローチャートの重要性

私がフローチャートの用語を説明する理由。それは、優れたフローチャートがあれば、開発者の作業が格段に良くなるからです。プロトタイプを作るための最初のステップでもあります。

“フロー”とは動きという意味。フローチャートは、複雑なシステムや活動に関わる人と物の動き、行動のシーケンスを示す図です。開発者はこの図を元に、Webサイトやアプリはどのように利用されるのかを考えます。

最新用語をチェックしよう

1. タスクフロー とユーザーフロー

ふたつの言葉に大きな違いはありませんが、ニュアンスが少し違います。どちらも、ユーザーにタスクを完了してもらうための道すじを最小・最適化するために、機能をデザインに落とし込むのを目的としています。

タスクフロー

タスクフローはすべてのユーザーの特定の行動による、単一の完結したフローのことで、単一のフローなので、分岐することはありません。（例： ユーザー登録など）

ユーザーフロー

ユーザーフローとは、ユーザーがアプリケーション上で通る道筋のこと。直線的である必要はなく、分岐することが可能です。ユーザーの選択肢を可視化することで、ユーザーエクスペリエンスを最適化することができます。複数の選択肢やユーザーへ要求が多ければ多いほど、ユーザーフローは複雑なものとなります。
製品をリリースする前にもユーザーフローを描いてみて、複雑なフローになることを避けましょう。

デザイナーのモーガン・ブラウンも、自身の記事上で次のように述べています。

designing user flows leads to better results for both the user and business.（ユーザーフローを設計することでユーザーにも、ビジネスにも良い結果をもたらす）

Stop Designing Pages And Start Designing User Flows

2. UIフロー

Ryan / signalvnoiseUI

デザイナーのライアンは、ユーザーフローをより簡略化した「UIフロー」（ストーリーボードよも呼ばれます）がいかに優れているかを述べています。

The format is really fast to sketch, and it communicates the essentials of what needs to happen as I’m imagining it. For such simple examples, you don’t really need a shorthand. But for more complicated flows, especially of entirely undesigned sections of an app, the shorthand can illustrate a lot of behavior.

A shorthand for designing UI flows

また、ユーザーフローには次のような問題があると、同記事で主張しています。

・フローだけだと、設計の意図を伝えることが難しい。
・すべてのフローの状態を描くのは時間がかかり過ぎる。
・デザインが変わると、そのフローチャートはすぐに使えなくなる。

UIフローは簡単に作れて効率的なので、ぜひ試してみてください。

3. ワイヤーフロー

Michael Pons / Dribbble

最近、NNグループが新しいUX用語を定義しました。それが「ワイヤーフロー」。フローチャートにワイヤーフレームを取り込んだものです。

コンサルティング会社のNielsen Norman Group（NNグループ）による定義を以下に引用します。

ワイヤーフローとは、より効率のよく情報を伝えるためにワイヤーフレームに簡略化されたフローチャートを取り込んだフォーマットです。

Wireflows: A UX Deliverable for Workflows and Apps

ワイヤーフレームではレイアウトや静的コンテンツの構造を伝えることができますが、相互にどのような動きをするのかは伝えられません。一方、フローチャートだけでは、ユーザーがどのような動きをするのかを詳細に伝えることができますが、コンテンツを伝えることができません。

ふたつを組み合わせたワイヤーフローなら、複雑なコンテンツや数ページに渡るレイアウトをドキュメントで提示できます。インタラクションをチームに共有するための方法としては最も最適だと思います。

ここで、ワイヤーフローを構成する4つの要素をまとめたいと思います。

• ユーザーの入口と出口が記されている
• ステップを示す要素（ユーザーアクション、システムアクション、代替パス）がある
• 最もユーザーを導きたいのルートと、別の可能性のルートが書かれている
• ユーザーが２つ以上の選択肢からどれかを選ばなくてはならない決断ポイントがある

おすすめのリソース

ここまでで紹介した手法やアイディアを元に、ユーザーの選択肢とアクションの可能性を理解することで、より洗練されたユーザーエクスペリエンスを実現できます。
優れたフローチャートを生み出すためのリソースを紹介します。

Flow kit for Sketch

Flowchart kit for Sketch / FREEBIE

シンプルなサイトマップを早く、簡単に作成できます。矢印をふくめたすべての要素は拡大縮小でき、カスタマイズも自由です。

Flow kit for Sketch

Sketch app by Bohemian Coding

Flowchart Kit Sketch Resource / Sketch App Sources

Webプロジェクトのページ間の関係を表すフローチャートキットです。矢印やアイコン、ページのカスタムキットを使って、正確なサイトマップが作成できます。

Sketch app by Bohemian Coding

13+ Productive UX Flowchart Templates

User Flow Diagram Template / Dribbble

ジャロスワウ・セボルスキによるテンプレート集。すべてのブロックや矢印が快適なSketchと同期しているユーザーフローダイアグラムテンプレートで、簡単に美しいダイアグラムが作成できます。

13+ Productive UX Flowchart Templates

Sketch Plugins

Sketchのプラグインのなかでも、AEフローチャートが一番作りやすいと思います。

Sketch Plugins

まとめ

ユーザーエクスペリエンスを可視化するフローチャート作りにまつわるトレンドは常に進化しています。紹介した手法を参考に、優れたフローチャートの作り方を模索してみてください。

（翻訳：Kazunari Mino／Thumbnail Photo：quinntheislander ）