見出し画像

社内の標準デザインツールをXDに統一した話

もとやまふとし

松本市の制作会社でwebディレクター・マーケターをしている本山です。

先日私が所属するオンライン上司にて、メンバーからこのような質問がありました。

画像1

webデザインカンプを作成する時、やはり現在はXDでレイアウトを組むことが最もポピュラーでしょうか？もしPhotoshopとの使い分けがあれば、どのような時が教えて頂きたいです。

質問してくれたメンバーの意図として、現在社内のチームでwebデザインのカンプを作る際の標準デザインツールとしてPhotoshopを使用しているが、もしかしたら「うちの会社遅れているのかも」という危機感を持っており、できれば標準ツールをXDに移行したいというものでした。

私も約2年前に質問者さんと同じ思いを持っており、その危機感から昨年ようやく社内の標準デザインツールをXDに移行しました。当然「今日からXD使うよー、よろしくね！」という形で簡単に移行できるはずもなく、段階を経ていろいろな方法を画策しながら、そして草の根的な地道な活動を行い、ようやく移行が完了したという経緯があり、この質問がきた際は、質問者さんの苦悩が伝わってきて、非常に共感を覚えたのです。

そして数年前の苦労した思いが蘇り、オンライン上司に入社してから今までで最長の約3,300字というブログレベルの回答をしたのでした。笑

一方で、質問者さんのように「webデザインのカンプを作る標準のツールをスイッチしたいけど、現場でなかなか受け入れられない」という苦悩を抱えている現場のデザイナーは多いのでは？という疑念が湧いてきて、Twitterで以下のような質問をしてみました。

想定どおり、いいねの数も、たくさんのリプもいただき、「これは自分の経験が他の制作者さんの助けになるかもしれない」と思い、このブログの筆を取ることになった次第です。

ではここからは、私が所属する会社でどのようにwebデザインの標準ツールをXDへ移行したかをお伝えします。

ご注意
・ここでは、XDとIllustrator、Photoshopとの具体的な使い分けの話などツールの使い方の話はしません。
・ここでいう「標準デザインツール」は、webデザインの最終カンプデータを作る際に用いるツールと定義します。
・他のプロトタイプツール（FigmaやSketchなど）の方が優れている！という宗教論争は行いません。

そもそもXDがツールとして生まれてきた背景とは？

まず、本題に入る前にこのツールが生まれた背景を知ることは何より重要です。まだプレビュー版が出て間もない2016年に、AdobeのUXデザイン製品管理担当ディレクターのアンドリュー ショーテン （⁠Andrew Shorten）氏と、Adobe Experience Designリードデザイナーのタリン ワズワース（Talin Wadsworth）氏が「gihyo.jp」のインタビューにこう答えてます。

昔に比べてデザイナーは，Web，タブレット，そして異なるOSに異なる画面サイズの各種スマートフォンなど，デザインしなくてはいけないスクリーンが増えた。しかも画面の見た目だけではなく，それぞれのデバイスでボタンを押した時の動き，スワイプした時の動きまで考えなくてはならない。デザインを作って，プロトタイピングをし，フィードバックをもらって，そしてそれらを別々のツールで作り直していたら非常に時間がかかる。だから，それらのワークフローを完結できるような全く新しくて，そして速いツールを作りたかった。

要するに、スマートフォンやタブレットの出現によって単純にwebデザイナーの設計する画面が増え、それだけではなくアニメーションなどのインタラクティブな動きまで考えなければならず、それまでのツールでは時間がかかりすぎる問題があったのです。

また2019年の2月の「Engadget」のインタビュー記事でタリン氏はこうも答えています。

このプロジェクトが始まった当時、デザイナーが日常的に使用していたツールにおいて、パフォーマンスや用途の面で、デザイナーとしての目的を果たすために不十分な面があると気づきました。

そのツールは静止画のモックアップを作るためのものだったのですが、デジタルプロダクトのデザインを実際にする際、何かしらのコミュニケーションだったり、アイデアだったりを伝える必要が出てきた場合はどうしても"動き"を入れる必要があると感じていました。

つまりwebサイトやアプリなどユーザーの動作に応じて画面が遷移したり、動いたりするものを設計する際に、静止画のモックアップだけでは限界があるのではないか？というのがこのツールが開発された背景です。

この辺りの話を具体的に現場のボトルネックとして噛み砕いた内容を私が昨年に登壇した「CSS Nite in Shinshu, vol.4」のセッションにてお話をさせていただきました。

2年前までの自社のデザインツール状況

さて、ここからいよいよ本題です。まず、当時の会社の状況としては、Photoshopで作るデザイナーもいれば、Illustratorで作るデザイナーもおり、各人自分の得意なツールを使用しておりました。会社の標準ツールというものがなかったんですね。逆にいうとコーダーは案件ごとに扱うツールが違っており、実装作業に負担をかけていたと思います。
2016年くらいからXDのプレビュー版が出て、私は当時からXDを触っていたのですが、「これは絶対に現場に活用していった方が良い」と思っていました。理由は先ほどのスライドに譲りますが、そもそもAdobeがwebデザイン制作の最適化を考え、生まれたツールがXDです。グラフィック制作のために作られたIllustratorより、写真の加工やレタッチツールとして作られたPhotoshopよりwebデザインに特化した機能が盛り込まれているXDの方が、使いやすいに決まっています。

そんな状況の中、私がどのようにしてXDを現場へ浸透させていったかをまとめると大きく下記の3つのフェーズになります。

1. XDでどんなことができるのか？どんなメリットがあるか知ってもらう
2. 実際に現場で使用してもらうように促す
3. XDをより好きになってもらうために外部セミナーへ連れ出す

では、各フェーズで具体的にどのようなことをしたのか見ていきましょう。

1. XDでどんなことができるのか？どんなメリットがあるか知ってもらう

私はXDというツールを知ってから「絶対にワークフローに取り入れたい」と思っていたことは先述の通りですが、一方で制作現場では「今まで使い慣れたツールで制作したい」という空気がありました。そこで私は、まずXDでどんなことができるのか？なぜ巷でXDのツールが人気出てきているのか現場の人間に知ってもらうことが重要と考え、社内の業務改善会議でXDでスライドを作って、発表しました。

そのスライドは下記のTwitterで呟いてます。

実際はデモも交えて機能を紹介もやったのですが、その時は社内のデザイナーからのポジティブな反応があって、それなりの手応えもありました。

2. 実際に現場で使用してもらうように促す

とはいえ、すぐに現場には浸透しませんでした。これはXDに限らずですが、例えどんなに優れたツールでも現場にはじめて導入する際は「具体的に現場にどう適用したらいいのかわからない」「使い方がわからない」「覚えるまで大変そう」というネガティブなイメージを持つ人が多いです。これは「今までで使っているツールは自分にとって一番使いやすいツールだ」「これまで学習コストをかけて覚えてきたツールなんだから簡単に切り替えるわけにはいかない」というバイアスが働くからでしょう。特に長年使ってきて愛着があるツールであればあるほど、バイアスは強く現れると思っています。

とはいえ、ここで引き下がるわけにもいかないため、次のフェーズとして、パートナーであるベテランデザイナーの1人に実際に使ってもらうように促しました。なぜこのデザイナーさんに照準を絞ったかというと、パートナーとはいえ、長年弊社の案件の多くのwebデザインカンプを任せており、社長も自社のデザイナーも信頼していたデザイナーであったからです。社長が信頼しているデザイナーが「XD良いね」と言ってくれツールをスイッチしてくれたならば、社内への浸透も早まるだろうという狙いもありました。

具体的には、私がディレクターとして担当した案件でそのベテランデザイナーさんに素直に「XDでデザインカンプを作って欲しい」と伝えました。当然使い慣れていないツールなのではじめは渋っていましたが、制作スケジュールに余裕を持たせ、比較的シンプルなテイスト系のものをお願いしたところ、実際にXDでデザインカンプを作ってくれたのです。その後データを共有してくれた際にも「食わず嫌いなところがあったけど、実際に使ってみると、軽くていいね。プロトタイプの機能もできることが多くて面白いからいろいろ調べてアニメーションとかも作っちゃったけど、これどう？」とこちらの期待以上のものを作ってくれました。

3. XDをより好きになってもらうために外部セミナーへ連れ出す

XDに興味を持ってくれたようなので、最後のフェーズとして一緒にXDのセミナー（All About XD）にそのデザイナーさんを一緒に連れて行きました。「こんなこともできるんだ」ということを感じてもらって、XDを好きになってもらうことを目的に一緒にいきましたが、それからというもの、そのデザイナーさんが作るデザインとプロトタイプは非常に良くできていて、お客さんにも現場で提案しやすくなりました。

ここまでいけば、現場の他のデザイナーは「あのデザイナーさんが使っているんだから」という空気感になってきます。ここからは一気に会社でXDを使ってくれる機会が増えましたし、その後行われた業務改善会議内で、今後はXDを使っていくというコンセンサスを取ることができました。

愚痴をこぼすだけでは何も変わらない

もちろんこの話はそのデザイナーさんとのエピソードであり、たまたま学習能力が高く、好奇心があったからこその固有の一例かもしれません。ただ私も前段階として、XDでできることを社内の会議で何度か伝えたこと、外部のベテランデザイナーさんとの関係性を築くために飲み会で話をしたり、ランチを食べにいったこと、他のデザイナーさんにも引き続き現場での使用を意識的に促した、草の根の活動がありました。そういった地道な行動が組織の標準デザインツールのスイッチングをさせており、私が行動したからこそ実現した結果だと自信を持っていえます。

なので、もし現場のツールを変更したいという方はまず、XDでできることを知ってもらうことが第一フェーズであり、はじめの一歩です。そこからは草の根でXDユーザーを増やしていくかもしくはトップデザイナーに直接働きかけるフェーズです。その組織やチームのトップデザイナーのスイッチングは何よりも有効なので、意識的に狙っていっても良いかもしれませんが、トップデザイナーだからこそ、バイアスが強かったりツールへのこだわりが強く難しい場合があります。そのような場合は仲が良かったり、関係性が良いデザイナー1人1人に直接促し、現場に取り入れていくようにしましょう。これはデザイナーだけではなくディレクターに頼んでも良いと思っています。（余談ですが、ディレクターもXDを使えた方がアイデアをクライアントと共有しやすいですし、細かいデザインの修正なら打ち合わせの現場でfixできることもあるので、オススメです。）自分で何も行動せずに「トップデザイナーさんがわかってくれない」と愚痴をこぼすだけでは何も変わりません。

ベテランデザイナーさんがポロっと口にした「食わず嫌いなところがあったけど」というのにスイッチングコストの本音が集約されていると思っています。やはり使い慣れたツールの方が作業が早いし、表現の幅や引き出しもあるし、そちらの方を使いたいのです。「新しいツールはよくわからないし、学習コストもかかるし、そんな時間はない」と思う人は多いですし、これはXDに限らずどんなツールや仕組みでも一緒だと思っています。

ただこの業界はツールやデザインの流行の移り変わりも早いですし、スイッチングできない人たちはどんどんと淘汰されていってしまいます。私はそれに危機感を持っていたので、実際に今の会社で標準のデザインツールを会社として全面的に切り替えるようにいろいろと画策して、現在は標準ツールとしてXDを使うようにしたという経緯です。
（※念のためですが、新しいツールや技術にスイッチングすることが全て良いといっているわけではありません。あくまでツール導入の目的があって、それが会社の売上や利益に貢献するかという視点が必要です。スイッチングすることは実際にコストであり、そのコストとスイッチングすることのメリットのバランスを考えることは必要です。）

最後に

私はプロトタイプが使えるXDで作るようになってから、クライアントへのデザインを見せる時の反応が明らかに変わりましたし、実装が終わってから「ここを直して欲しい」という修正依頼も少なくなりました。さらにいえば、打ち合わせで「この文章を差し替えて欲しい」や「写真とテキストのレイアウトを入れ替えて」や「ここの色味を少し濃くして」と言われたものを（軽いので）その場で修正して、fixできる点に非常にXDの強みを感じています。今までのツールだと重すぎてできなかったことです。XDを使うことでスケジュールが短縮化し、イメージの共有がしやすくなり、クライアントの便益にもつながっていると感じています。

もちろんXD自体はカラーマネジメントができなかったり、タイポグラフィの機能が弱かったり、課題もいくつかありますが、多くの場合、PhotoshopやIllustratorとコラボレーションすることで解決できると思っています。

今回はXD上げ上げの記事を書きましたが、ツールはあくまで手段にすぎません。今回の導入目的はあくまでweb制作のワークフローの効率化が図れ、最終的に会社の利益率アップにもクライアント満足度の向上にもつながるという目的をもってたまたまXDを制作現場に導入をしました。しかしFigmaやFramer、InVisionの方が優れていれば、今後スイッチングする可能性もあるということです。

まとめると、目的をもって方向性を見失わないことと、導入を決めたらあとは行動と人を巻き込む胆力が必要です。私の経験を通して、何か感じ取ってもらい、行動に移してくれる方がいれば幸いです。


この記事が気に入ったらサポートをしてみませんか？