ワイヤーフローを活用したい件
概要
Google UX Design Professional Certificate で「ワイヤーフロー」というものを知り、実務でも使うとよさそうに思ったのでまとめておく。
ワイヤーフロー、何それおいしいの？
フロート 🍨 だったら美味しそうだけど、残念ながら食べ物ではない。
ワイヤーフローとは、ワイヤーフレームに遷移先画面やインタラクション情報 (ボタン押下で何が起こるのか、など) を付与した図のこと。
https://www.nngroup.com/articles/wireflows/
上記のブログは2016年のもので、モバイルアプリの設計で一般的な手法として使われていたものらしい。
上記のブログにリンクされている動画では、ワイヤーフローの利点として以下が挙げられている。
- ユーザーフローを文書化できる
- 協働でアイディアを生み出せる
- 具体的なインタラクションや、開発者へのハンドオフの概要を示せる
軽く調べたところ、日本では「ワイヤーフロー」という言葉は検索結果になかなか出てこない。
Lucid さんのブログの ユーザーフロー図の例 に、ワイヤーフローが描かれているのは見つけた。
いろいろなフロー図たち
画面設計フェーズで登場する図でよく利用されるものは、タスクフロー、ユーザーフロー、ワイヤーフレームあたりだろうか。
タスクフロー
- 理想的なタスク完了までの経路 (ハッピーパス、メインフロー) を示す
- タスク完了の最短ルートを可視化することで、本質的に必要なステップを見極めたり、議論のベースとして利用したりできる
- MVP を定義する際の指針にもなるので、画面設計より前のフェーズで利用するのもよさそう
ユーザーフロー
- ユーザーが、ウェブサイトやアプリで目的のタスクを完了するまでの経路を可視化したもの
- タスクフローとは異なり、分岐を含む
- ユーザーが実行するアクションは
◯で示す - ユーザーがアクションを完了した時に表示される画面は
□で示す - 分岐は
◇で示し、→でユーザーフローの方向を示す
※ 軽く調べたところ、図形の種類と使い分けには、いくつかの種類がありそうだった。正解はないと思うので、プロジェクト内で合意した図を使うとよさそう
ワイヤーフレーム
- 大まかな画面レイアウトや、AI (アーキテクチャインフォメーション、情報設計) の「骨組み」を作るためのもの
- ビジュアルデザインを含めずに (造形・彫刻の分野でワイヤーを使って原型を作るように)、骨組み (フレーム) を表現する
- 上記2つの図とは異なり、画面に見立てた枠の中に情報を描いていく
- テキスト、アイコン、画像、アクション (ボタンなど) を、線や四角形や円で示す
- 色や装飾などのビジュアルデザインは含めない
今回登場するワイヤーフローは、上記3つの図のいいとこ取りをしたようなものだと思う。
ワイヤフロー、どうやって作成する？
我々には Figma という文明の利器があるではないか。
ワイヤーフレームにプロトタイプでコネクションを貼ったらあら不思議、ワイヤフローが完成した。
Figma のプロトタイプでワイヤーフローを作成する際は、以下のようなポイントを意識するとよさそう。
- ホットスポット (操作可能領域) を明示する (上記の図だと紫でハイライトした部分)
- 矢印が見やすくなるように、各画面の配置を調整する
- プロトタイプを再生するのが目的ではないので、ナビゲーションメニューや同じ挙動をするUIは、すべてにコネクションを貼る必要はない (例として1つコネクションを貼れば十分だと思う)
画面間隔が狭く、不必要にコネクションを貼ると、このような感じで非常に見づらくなる↓
Figma のプロトタイプと何が違う?
一般的に、デザインフェーズでの「プロトタイプ」は、ビジュアルデザインフェーズに入ったあとに試作品として作成するもので、実装に入る前に製品の挙動を確認するために用いられる。
Figma には、この「プロトタイプ」を作るための機能が備わっていて、作成したプロトタイプを「再生」することで、試作した製品の操作性を確認できる。
対して、ワイヤーフローは、ビジュアルデザインに入る前の段階で作成し、再生することなく、ワイヤーフレームとユーザーフローを確認できる。「プロトタイプを再生せずに、画面間のつながりを俯瞰できる」のが、ワイヤーフローのよいところ。
ワイヤーフローは、主に画面設計時に使用する想定だが、プロジェクトに新規メンバーが参加した際にも、扱っているアプリの全体像を把握するのに役立つと思う。
実務で活用するには？
実務でワイヤーフローを活用する場合、デザインフェーズのどこで作り、どのように活用できるだろうか?
例として、以下のようなデザインフローで考えてみる。
2のデジタルワイヤー作成時にワイヤーフローを作成して、AI (アーキテクチャインフォメーション) 設計しつつ、ページと画面構造の骨組みを作っていくのがよさそうに思う。
1.紙のワイヤー作成 (アイディア出し、ラフ)
2.デジタルのワイヤー作成・AI（アーキテクチャインフォメーション）設計 # ここ
3.ローファイデザイン作成
4.ローファイプロトタイプ作成
5.ハイファイデザイン作成
6.ハイファイプロトタイプ作成
ワイヤーフローを使うことでステークホルダーとの共通理解が深まり、意思疎通や合意形成がしやすくなる。
デザインフェーズの初期段階でビジュアルデザインに入ってしまうと、AI (アーキテクチャインフォメーション) 部分の柔軟な修正がしにくくなるため、ワイヤーの時点で骨組み (構造) をよく検討しておくのが重要になっていくる。
そこでワイヤーフローを活用し、MVP で必要な画面構成や画面間の動き (インタラクション) を俯瞰できるようにすることで、早い段階でステークホルダーから意見を集めることができ、デザインが完成してからの手戻りも減らせるようになると思う。
おわり
こんな感じで、つらつらと考えていることを書いてみたが、あくまでも仮説なので、機会があれば実務で実際にワイヤーフローを使って検証してみたい。
今参加しているプロジェクトでは、ワイヤーフレームはデザイナーが Figma で作成し、画面遷移図は実装に入ってから開発者が TRACERY 上で作成している。上記に描いたようなワイヤーフローであれば、デザインフェーズの早い段階で作成でき、使用するツールも Figma で完結する。ワイヤーフローを活用すれば、デザインが進んでからの手戻りも減らせて、デザイン→実装へのハンドオフもしやすくなると予感している。