Webディレクター、結局どのツールが一番『マブダチ』なの?

Figmaの海で溺れる前に。ディレクターが死守すべき『最低限のAdobe』生存戦略

「Figmaに完全移行しました!」と言い切った翌月、クライアントから「バナーのデータ、PSDで納品してもらえますか?」というメッセージが届く。

あの一瞬の「え、PSD……?」という感覚、経験したことある人はいますか。Figmaに慣れきった手が止まって、Photoshopのアイコンを探してデスクトップをぐるぐるスクロールするあの感じ。「たしか入ってたよな……」って思いながら、Creative Cloudのアプリ一覧を開いて、更新を求められて、10分後にやっと起動する。

Figmaの時代になったのはわかってる。でも現場では、まだPSDもAIもXDも、普通に生きてます。ディレクターとして「最低限どこまでAdobeと付き合うか」を決めておかないと、急に詰む場面が来る。今日はその話をしたいです。

「Adobe全部使えます」の幻想

若手のころ、「WebディレクターはAdobeが使えて当然」みたいな空気が現場にあって、僕はなんとなく全ツールをインストールしていました。Photoshop、Illustrator、XD、After Effects、InDesign、Dreamweaver……全部入れた。全部開いたことはある。全部「なんとなく触ったことある」状態。

でもよく考えると、「触ったことある」と「使える」は全然違う話で、PhotoshopはWEB用バナーのレイヤー構造が読めるかどうか怪しかったし、Illustratorはロゴのパスをいじろうとしたら全部崩れたし、XDはちょっとプロトタイプを作れたけど「Figmaでいいのでは」という感情を常に持ちながら使ってました。

「Adobe使えますか?」って聞かれたとき、「使えます」と答えてたけど、それは厳密には「全部開けます」という意味だったんですよね。開けることと使えることは別の話です。

デザイナーさんに「このレイヤー構造、どうなってますか」と質問されて、PSDを開いてはみたものの、グループが8層に入れ子になっていて何がなんだかわからず「確認します」と答えたあの日は、今でも思い出す。

Figma時代のAdobe、どこまで付き合うか問題

Figma全盛の今、「もうAdobeいらなくない?」という意見はよく聞きます。正直、その気持ちはわかる。Figmaはブラウザで動くし、チームで共有しやすいし、プロトタイプ機能も充実してきた。ディレクターとして普段のワイヤー作業や画面設計に使うなら、Figmaで全部いける場面がほとんどです。

ただ、現場の話をすると、Adobeが必要になる場面はまだ普通に存在します。

クライアントが「Illustratorのaiデータで納品してほしい」と言ってくる。デザイナーさんから「バナーのPSDを確認してほしい」と来る。制作物の入稿データがPSD指定になっている。古いプロジェクトのデザインデータがXDで管理されていて、引き継いで欲しいと言われる。

こういうとき、「Figmaしかわかりません」だと詰む。詰むというのは、チームに迷惑をかける詰み方じゃなくて、「自分の作業が止まる」という詰み方です。確認できない、判断できない、デザイナーとの会話が成り立たない。

だから「Adobe全部使えなくていいけど、最低限これは押さえておく」という自分なりの基準が必要になってくる。

XDってもう古いの?という誤解を先に解いておく

ここでXD(Adobe XD)の話を少ししておきます。

XD(Adobe XD) は、Adobeが提供するUI/UXデザイン・プロトタイピングツールです。画面のワイヤーフレームや画面遷移のプロトタイプを作るためのツールで、2016年ごろから普及が始まりました。

使い方は、Figmaとかなり近い感覚で、アートボードにパーツを並べて画面を設計して、リンクを繋いでプロトタイプにする、という流れです。共有リンクを発行してクライアントに見せることもできるので、Figmaが普及する前はUI設計ツールの主流でした。

よくある誤解が「XDはもう使われていない」というものです。 Figmaの普及で確かにシェアは下がっているし、Adobeもだいぶ前にXDの主要な機能開発を停止しました。でも現場ではまだ普通に生きているツールで、特に「5年以上続いているプロジェクト」を引き継ぐと、デザインデータがXDだったというケースが割と出てきます。

XDが使いどころになるのは主に2つです。 一つは、前任者がXDで設計したプロジェクトの引き継ぎ。もう一つは、クライアントやデザイナーがAdobeエコシステム全体を使っていて、XDデータとIllustratorやPhotoshopのデータを行き来させながら管理している現場。この2つに遭遇する可能性がある以上、「XDって何ですか?」はさすがに困る。

ちなみにXDのポジションを一言で言うと、FigmaとPhotoshopの間で挟まれた中間管理職みたいなツールです。デザイナーからは「Figmaでよくない?」と言われ、クライアントからは「これ昔のXDのデータなんですけど……」と渡されてくる。そういう立ち位置。かわいそうだけど、実際に仕事してる。

ディレクターが死守すべきAdobe3つ

Adobeには製品が大量にあります。大家族にもほどがあるというか、Photoshop、Illustrator、XD、After Effects、InDesign、Premiere Pro、Audition、Dreamweaver、Acrobat……ざっと並べると10本以上あって、全部使いこなそうとするとそれはもう専門職の人間が何人も必要です。

ディレクターとしての最低ラインは、この3本だけ押さえておけばいいと思ってます。

1. Photoshop(バナーと画像の読み書き)

バナー制作の現場ではまだPhotoshopが主流で、デザイナーさんが作ったPSDデータを確認する場面は普通にあります。ディレクターとして必要なのは「作れる」じゃなくて「読める」レベルです。レイヤーが何を意味しているか、書き出し設定がどうなっているか、スライスがどこに入っているか。この3点がわかればPSDの確認業務はこなせます。

逆に言うと、フィルターをかけたり合成をしたりはデザイナーの仕事なので、無理に覚えなくていい。「このPSDのこのレイヤーは何ですか?」という会話ができるだけで、現場のコミュニケーション速度が変わります。

2. Illustrator(ロゴとベクターデータの扱い)

クライアントからロゴデータをもらうとき、aiファイルで来ることがまだ多いです。「このロゴ、色違いが欲しい」「サイズを変えたい」というとき、aiファイルが開けないと始まらない。ディレクターが押さえるべきなのは、ロゴのパスが崩れていないかの確認と、色モード(RGBとCMYKの違い)がわかることです。

Illustratorで複雑なイラストを描く必要はまったくなくて、「ロゴのアウトラインをかける」「カラーモードを変換する」「書き出しができる」この3つができれば現場で詰まることはほぼないです。

3. XD(過去データの読み込みとプロトタイプ確認)

前述した理由から、XDは「使いこなす」よりも「読める」状態を維持しておく、というスタンスでいいです。アートボードを開いて、画面遷移を確認して、コンポーネントの名前を把握できるくらい。引き継ぎプロジェクトでいきなりXDのデータが来たとき、「XDわからないので一回Figmaに書き直してもらえますか」と言える立場なら問題ないけど、そうじゃないケースの方が多い。

「最低限開けて、見れる」だけで全然違います。

僕がやらかした、Adobeが原因の現場詰まり

実際の失敗を一つ出しておきます。

バナー入稿の案件で、デザイナーさんから「書き出し前のPSDを確認してもらえますか」と来たとき、PSDを開いたら複数バージョンのレイヤーが重なっていて、どれが正のデータかわからなかった。「上から2番目のレイヤーフォルダが正しいやつです」と言われても、Photoshopに不慣れだとそのフォルダを特定するだけで時間がかかる。結局「これで合ってますか?」と確認を重ねて、確認に1時間使いました。

普通に読めれば15分で終わってた作業です。Adobeが読めないコストは、自分の時間じゃなくてチームの時間を削ることになる。それがじわっと積み重なると、「あの人に頼むと時間かかる」になっていく。怖いのはそっちです。

もう一個あって、クライアントのロゴをIllustratorで書き出すとき、カラーモードをRGBで書き出すべきところをCMYKのまま渡してしまったことがあります。WEBで使ったら「なんか色が違う」という指摘が来て、ひたすら謝った記憶がある。CMYKとRGBの違い、Illustratorを少し触っておけばすぐわかる話なのに、避けていたせいで無駄なやり取りを発生させた。

やらかしてみて初めて「最低限は押さえておくべきだった」と思えるんですよね。遅かったけど。

Figmaとの使い分けはこう整理する

整理すると、Figmaは「設計・共有・プロトタイプ」の主戦場で、Adobeは「入稿・既存データ・クライアント納品」の対応ツール、というポジション分けが一番しっくりきています。

Figmaで全部できると思っていると、入稿やデータ納品の場面で急に壁が来る。逆にAdobeで全部やろうとすると、コラボレーションやスピードの面でFigmaに負ける。どっちか一方に全振りするんじゃなくて、「Figmaがメイン、Adobeは最低3本を読める状態で維持」というスタンスが今の現場にはフィットします。

もう一つ言うと、自分がツールを使いこなすより、「デザイナーさんとの会話が成立するかどうか」 を基準にした方がいいです。Photoshopのレイヤーについて話せるか、aiファイルのカラーモードについて話せるか、XDのアートボードが何かわかるか。ここが担保されていると、デザイン周りのコミュニケーションのスピードが上がります。

ツールの上手い下手よりも、会話が成立するかどうか。ディレクターとしてはそこが一番大事だと思ってる。

まとめ:「最低限」を決めると、Figmaがもっと使いやすくなる

Adobeを全部マスターしようとすると、沼にはまります。それはデザイナーの領域なので、ディレクターが全部追わなくていい。でも「何も知らない」では現場で詰む場面が来る。その中間地点として、Photoshop・Illustrator・XDの3本を「読める・確認できる」レベルで持っておく、というのが今のところ僕がたどり着いたベストなバランスです。

Figmaをメインにしながら、この3本が手元にある状態。それがディレクターにとっての「Adobe生存戦略」です。

Figmaの海で溺れないためには、岸にロープを3本くらい繋いでおけばいい。全部泳ぎ切ろうとしないで、戻ってこれる場所を作っておく感覚で、Adobeと付き合ってみてください。
そして、どうしてもダメなら先輩に相談してみてください。先輩は多分秒で解決できます。

前の記事 会議のゴールは『納得感』。クライアントを巻き込んで一緒に熱狂するプレゼン術
次の記事 PowerPointの図形描画を極めたら、もはやそれはCADだった話