Figma全盛期に、あえて『XD』でワイヤーを引く。その愛着に隠された合理性

チームのツールがFigmaに統一されてから、もうずいぶん経ちます。共有ファイルはFigmaで管理されていて、デザイナーさんとのやり取りもFigmaのコメント機能でやっている。それが今の僕の現場の標準で、たいていの作業はFigmaで完結しています。

でも、ワイヤーフレームだけは、今もXDで引いていることが多いんですよね。

自分でもなぜかと考えたことがあって、最初は「慣れているから」という答えしか出てきませんでした。それはそれで本当の話なんですが、しばらくXDとFigmaを行き来しながら作業を続けているうちに、慣れの先に「合理性」があることに気づいてきた。今日はその話を書きます。

ツールに迷っていた時期のこと

Webディレクターとして動き始めたころ、ワイヤーフレームをどのツールで作るかは、わりと悩ましいテーマでした。PowerPointで作る人もいれば、Excel派の先輩もいたし、Sketchを使っている人もいた。「これが正解」という基準が見えなくて、なんとなく周りに合わせていた記憶があります。

そのころXDが出てきて、「UIデザインとプロトタイプが一緒に作れる」という触れ込みに素直に乗りました。アートボードにパーツを並べて、矢印で遷移を繋いでいくと、画面の流れがそのままプロトタイプになる。それが新鮮で、画面設計の仕事がひとつながりになる感覚がありました。

その後、Figmaが普及してきた。チームがFigmaに移行するタイミングで、「じゃあXDは卒業かな」と思っていたんですよね。Figmaの方がチームでの共同編集がしやすいし、ブラウザで動くから環境依存も少ない。合理的な理由が揃っていたので、移行に抵抗はなかった。

ただ、移行してしばらく経っても、ワイヤーの作業だけはXDに手が伸びる自分がいた。

XD（Adobe XD）という存在について

ここで少しXDの話を整理しておきます。

XD（Adobe XD） は、Adobeが提供するUI/UXデザインとプロトタイピングのためのツールです。アートボード上で画面を設計して、インタラクションを設定することで、実際の操作感に近いプロトタイプを作れます。2016年ごろから普及が始まり、Figma登場以前はUI設計ツールの主流の一つでした。

よく聞く誤解は「XDはもう使われていない」という認識です。 Adobeは数年前にXDの主要機能の更新を停止しましたし、Figmaの普及でシェアが下がっているのも事実です。でも「使われていない」というのは正確ではなくて、特に「XDで設計された既存プロジェクト」が現場にはたくさん残っています。何年も続いているサービスを引き継ぐと、XDのデータが来ることは今でも普通にある。

使いどころとして今も有効なのは3つです。 一つ目は、前任者がXDで設計したプロジェクトの引き継ぎ。二つ目は、クライアントやパートナー会社がAdobeの環境で動いていて、XDデータのやり取りが発生する現場。三つ目は、IllustratorやPhotoshopなど他のAdobeツールと連携しながらデザインを進めるとき、Adobe同士の方がデータの相性がいい場面があります。

もう一つ、見落とされがちな特性として、XDは「Adobeアカウントがあれば共有リンクを渡せる」という手軽さがあって、クライアントへのプロトタイプ共有に今でも使っているケースがあります。Figmaのアカウントを持っていないクライアントに見せるとき、ブラウザでそのまま開けるXDのプレビューリンクは意外と便利です。

「慣れ」の先に何があるか

話を戻します。僕がXDでワイヤーを引き続けている理由を、もう少し掘り下げてみたいんですよね。

「慣れているから」というのは、ツール選択の理由としてよく軽視されます。「慣れているだけで合理的じゃない」という論法です。でも、慣れているというのは「そのツール上での思考速度が速い」ということで、それはワイヤー作業においてけっこう重要なことじゃないかと思っています。

ワイヤーフレームを引く作業は、「考えながら描く」プロセスです。「このページに何が必要か」「どういう順番で情報を並べるか」を考えながら、それを形にしていく。このとき、ツールの操作に思考の一部を割かれると、考えながら描くことが難しくなる。

XDでは、アートボードを追加して、コンポーネントを並べて、遷移を設定する一連の動作が体に入っています。考えているとき手が止まらない。これが、慣れの実質的な価値だと思っています。

長年使い込んだ包丁は、持ち方が手に馴染んでいる分、食材を切ることだけに集中できる。ツールへの慣れは、それに近い感覚です。

現場で感じているXDの「余白」

もう少し具体的な話をします。

XDのアートボードは、デフォルトの配置や余白の設定が、Figmaよりシンプルな感じがします。Figmaはオートレイアウトや変数など、細かい設定ができる機能が多い。それは設計の精度を上げるためには有効なんですが、ワイヤーフレームの段階では「細かく設定できる」ことが必ずしも必要じゃなくて、むしろ余分な選択肢が思考の邪魔になることもある。

XDのシンプルさは、ワイヤーの段階ではちょうどいいと感じています。「今は大まかな構造を決める段階で、詳細な実装仕様を考えるのはまだ先」というモードのとき、ツールの複雑さが少ない方が作業に集中できる。

これはXDの方が優れているという話ではなくて、作業フェーズによってツールの向き不向きがある、ということだと思っています。ワイヤーはXDで、詳細設計とデザインはFigmaで、というのが今の僕の使い分けです。

一つだけ失敗談を書くと、XDで引いたワイヤーをFigmaで受け取ったデザイナーさんに「ちょっとこのデータ、Figmaに変換するの手間かかります」と言われたことがあります。XDとFigmaはデータの互換性が完全じゃないので、引き継ぎに手間がかかる場合があります。チームの作業フローによっては、最初からFigmaで統一した方がいい場面もある。これは自分の事情だけで決めていい話ではないので、そこは確認するようにしました。

ツール選択の基準は「自分の思考速度に合うか」

まとめると、XDを使い続けているのは「慣れているから合理的」という話で、合理性の根拠は「ツールの操作に思考を取られない状態を作れるから」です。

どのツールが優れているかではなくて、「自分がそのツールを使っているときの思考の流れ方」を基準にしてみると、ツール選択の答えが少し変わってくると思います。

Figmaが良いか、XDが良いかという問いは、たぶん問いの立て方が少し違っていて、「今の自分の作業フェーズに合ったツールはどちらか」が正しい問いです。チームの環境との相性は別として、自分の思考速度に合うツールを選ぶこと。それが、ツールとの長い付き合い方の基本だと思っています。

XDが現役かどうかという問いに答えるなら、少なくとも僕の手の中では、今もちゃんと動いています。