エクストーンの松本です。 ワイヤーフレームをどのツールを使って作るかについては、多様な意見があるところかと思います。昔はオフィス系ツール以外の選択肢があまりなかったように思いますが、最近ではデザイン系ツールやオンラインのコラボレーションツールなどが続々と登場し、かなり選択肢が増えてきました。
エクストーンでは以前はパワーポイントを主に使用していましたが、最近はFigmaを使うケースが増えてきました。今回はワイヤーフレームを作成する上で抑えるべきポイントと合わせて、Figmaを利用するメリットについて書いてみたいと思います。
ワイヤーフレームに求められること
まず大前提として、ワイヤーフレームは、ディレクター、デザイナー、エンジニア、QA担当者、クライアント、パートナー企業など、プロジェクトに関わるほぼ全員が目にする資料です。この資料を起点として、ビジュアルデザインやプログラム開発、テスト仕様書など、様々な成果物へと発展していくので、その役割はとても重要です。
「ワイヤーフレームを書くツール」を考える上で、重要なポイントは様々ありますが、特に重要なのは、以下の3点に集約できるのではないかと思います。
- 関係者全員が資料にアクセスしやすいこと
- 分かりやすい資料を作るための描画ツールが揃っていること
- 資料がメンテナンスしやすいこと
他にも細かなポイントはあるかと思いますが、まずは上記のポイントに絞ってFigmaの特徴について書いていきたいと思います。
Figmaでワイヤーフレームを書くメリット〜基本編〜
関係者全員が資料にアクセスしやすいこと
ワイヤーフレームは多くの関係者が参照する資料なので、なるべく特殊なツールや環境を必要とせず、誰もが簡単に開けることが理想的です。
Figmaはデスクトップアプリ・モバイルアプリ・WEBアプリと、3通りのアクセス方法があります。前者2アプリについてはインストールをして利用する形になりますが、WEBアプリはブラウザさえあればアクセスできるため、アクセスのハードルはとても低いです。 Figmaのデザインファイルへのアクセス権限は、いつでも更新できるので、プロジェクトへのメンバーの参加、退出が発生した際も、アクセス権のコントロールが簡単に行える点も、オンラインベースのツールの利点と言えます。
クラウドベースのツールであるがゆえオフラインでアクセスできない点はデメリットかもしれませんが、ほぼ一日中オンライン接続している筆者のワークスタイルでは、この点を不便と感じたことはありません。
分かりやすい資料を作るための描画ツールが揃っていること
ワイヤーフレームはあくまで「設計図」なのでデザイン的な要素は不要ですが、画面を構成する要素はきちんと抜け漏れなく定義されている必要があります。また、状態変化に伴った要素の出し分けに関する定義や、画面同士の関係を示した遷移図・フローチャートなど、仕様が立体的かつ網羅的に定義されていると、より分かりやすい資料になります。
これらの情報を資料に落としていくには、図形やテキストブロック、コネクタ、表などの描画ツールを組み合わせて表現していきますが、Figmaはそもそもがデザインツールなので、描画周りのツールについて困ることはほとんどありません。 むしろ、コンポーネントやオートレイアウト、バリアントなどの機能を使いこなせるようになると、圧倒的に効率良く、時短でワイヤーフレームを書くこともできるようになります。このあたりの機能は、ドキュメント作成系のツールにはない利点です。 表現をする内容によっては、デフォルトの機能だけでは足りないこともありますが、豊富なプラグインを活用することで大抵のケースには対応が可能です。
非デザイナーにとっては、少々ラーニングコストはかかることも
デザインツールの扱いに慣れたデザイナーと比べて、非デザイナーの方々はもしかすると使い慣れるまで少々の期間が必要になるかもしれません。かくいう筆者もその一人ですが、使い慣れて来ると作業のスピードと効率が圧倒的に変わったので、チャレンジして損はないように思います。
資料がメンテナンスしやすいこと
実はワイヤーフレームを作るツールの機能の中でかなり重要なのが、「資料内のテキストの一括検索・置換ができること」です。 エクストーンでは、仕様を定義する資料はなるべく増やさずに、できるだけ一元管理するよう心がけています。多くのドキュメントに情報が分散してしまうと、探すことが大変だったり、資料のメンテナンス性が下がってしまうためです。
例えば、プロジェクトの途中で用語や文言ルールが変わったとします。 そうした際に、ドキュメントが一箇所で管理されていると、資料内を一括検索して変更が必要な箇所を網羅的に把握し、変更に対応ができるのでミニマムの手数で対応ができます。逆にそれができないと、複数の資料をチェックし、それぞれを修正をしなければならず、時間がかかるだけでなくミスも起きやすくなります。
実は最近までFigmaは公式の機能として「一括検索・置換」を提供しておらず、その点がネックとなり、一定以上の規模のプロジェクトではFigmaをワイヤーフレーム作成のツールとしては利用しない傾向がありました。 しかし、2022年10月のアップデートでFigmaが公式の機能として「検索・置換」をリリースし、これによりファイル内のフレーム名だけでなく、テキストやコンポーネントなども含めてファイル内を一括して検索ができるようになり、一気にメンテナンスがしやすくなりました。このタイミングから、弊社内の様々なプロジェクトでFigmaをビジュアル制作だけでなく、ワイヤーフレーム作るツールとして活用する機会が増えたように思います。
Figmaでワイヤーフレームを書くメリット〜応用編〜
複数のメンバーで共同作業ができる
Figmaはコラボレーションを前提として作られたデザインツールなので、チームのコラボレーションを促進するための様々な機能が提供されています。
オフラインのツールでは基本的に一人づつが作業を行い、どこかで統合するような方法が多かったですが、Figmaを利用すると、複数のメンバーで同時に共同作業ができます。そのため、特に集中的にディスカッションをしたいパートを検討する際などは、関係者が集まってWEB会議をしながら作業をするなど、スピーディーで効率的に共同作業を行えるようになりました。
作業の途中段階を見られたくないことも？
コラボレーション上のメリットは数多くある一方で「作業の途中段階の状態が、他のメンバーやクライアントに実況中継されてしまうことに抵抗がある」という声もたまに聞こえて来ます。このあたりの塩梅については、お互いが空気を察して配慮をするか、あるいはどうしても気になってしまう場合は、プライベートなデザインファイルで作業を行い、一定段階まで作ったら共有スペースに持ち込む、などの方法も有効かもしれません。
プロトタイプが簡単に作れる
Figmaには使いやすいプロトタイプ作成機能もあります。ビジュアルデザインからプロトタイプを作成し、完成イメージを掴むだけでなく、ワイヤーフレームの段階でも活用できます。ワイヤーフレームを基にプロトタイプを作成することで、全体的な画面遷移や遷移時のインタラクションの検討が容易になります。
圧倒的に広いキャンバス
縦横のサイズに制限があるツールと比べて、Figmaは圧倒的に広いキャンバスを活用して資料を作ることができます。縦長の画面や複数の画面を並べて検討する際に、広いキャンバスのメリットが発揮されます。 ドキュメント作成系ツールでは、紙のページ単位で制約があることが多く、画面の定義が複数のページにまたがる場合などに工夫が必要でしたが、Figmaではそのような問題はありません。
まとめ
ワイヤーフレームを作成するツールは様々ありますが、この記事で触れたようにFigmaには様々な利点があります。 一方で、Figmaはまだ新しいツールであるため、プロジェクトの中に使い慣れていないメンバーやパートナーがいる場合もあるかもしれません。そうした場合は、ツールがプロジェクトにマッチするかをきちんと見定めた上で使い始めた方が良いかもしれません。
ワイヤーフレームは、前述の通り多くの関係者が参照する資料なので、プロジェクトを構成するメンバーやコミュニケーション方法をきちんと見極めた上で、ツール選定をされると良いと思います。
