こんにちは、Webディレクターのちゃんれみです。
私が所属するWeb事業部では、今や制作に欠かせない存在となったツールAdobe XD。最近では共同編集機能まで追加され、どんどん使い勝手が良くなっています。
そして以前から他のWeb制作会社の方々がどのように使っているのか、もっと良い活用法はないのか、気になっていました。
そこで今回、アドビの担当者の方にご協力いただき、Adobe XDを愛用している制作会社4社合同で「XD×Webディレクター座談会」を開催させていただきました！
 |
ファシリテーター：株式会社LIG Webディレクター ユニットリーダー兼チームリーダー ちゃんれみ2016年にWebディレクターとしてLIGにジョイン。受託のWebサイト制作をメインに、自社のロゴやWebサイト（LIGブログ）などのディレクションを担当。 |
|---|
 |
Adobe XD担当：アドビ システムズ 株式会社 マーケティングマネージャー 轟 啓介アドビのWebツール全般のマーケティングを担当。その他、Adobe MAX Japanの統括やAdobe Japan Blogの運営、Creative Cloud道場の番組ディレクター、UX道場主宰も兼任。 |
|---|
Adobe XDを使う理由
ちゃんれみ：ではまず、みなさんどんな場面でAdobe XD（以下XD）を使っているのか、以前はどんなツールを使っていたのか教えていただけますか？
栄前田：私はスピード感を持ってプロトタイピングできるツールを探していて、XDはPROJECT COMETの頃から注目していました。前はProttを使っていたんですが、画面数が多いと重くなってパフォーマンスが落ちてしまって……。XDが使えるようになったタイミングですぐ切り替えました！ 直感的に使えて、問題なく移行することができました。
 |
有限会社リズムタイプ 代表取締役 ディレクター 栄前田 勝太郎映像制作会社、Web制作会社を経て2002年にフリーのディレクターとして独立、2005年に有限会社リズムタイプを設立。BtoB向けのWebサイト／Webサービスの構築に関わる。 ※詳細プロフィールは記事の終わりに掲載しています |
|---|
ちゃんれみ：私もβ版から使っています！ もともとAdobe Photoshop（以下Photoshop）を使っていたので、ショートカットキーの使い心地も違和感がなくて、すぐ慣れることができました。Photoshopより軽いし、ワイヤーフレームに特化した機能もどんどん追加されたので、今はメインで使っています。
益子：私はマーケターやディレクター目線から画面設計やワイヤーフレームをクライアントに提案するときに使っています。以前は グラフィックスソフトのAdobe FireworksやプレゼンツールのKeynote、PowerPointを使っていました。XDに乗り換えてから、2年以上になります。
 |
株式会社まぼろし 取締役CMO 益子 貴寛Webサイトの企画・設計業務、アクセス解析、ソーシャルメディア運用支援、リスティング広告運用、検索体験の最適化などのWebマーケティング業務、新サービスの立ち上げ業務など幅広く携わる。 |
|---|
白石：私はこのなかでは遅い方で、2018年11月に使い始めたばかりですね。広告代理店勤務なので広告運用とセットでWebディレクションをしています。お客様とのコミュニケーションに多くの時間をかけたいので、アウトプットにはあまり時間をかけたくなかったのですが、XDなら作業時間が短くすみ、デザイナーへの指示も伝わりやすいので重宝しています。
 |
ASUE株式会社 Web戦略支援室 シニアコンサルタント 白石 達也顧客のWeb戦略策定から広告・Web制作・アクセス解析を絡めたWebマーケティング支援業務に従事。現在はリスティング広告運用に併せた、新規Webサイト制作やLP制作のWebディレクション業務を担当。 |
|---|
手書きの指示書が「読めない」と言われた
白石：以前はデザイナーにワイヤーフレームを作ってもらうときに、ExcelやPowerPointを使ってコンテンツ整理や指示書作成をしていたんです。でも作成には時間がかかるし、OfficeソフトはWindows機とMac機の互換性によってズレが生じて指示がうまく伝わらなくて。
ちゃんれみ：なるほど……。
白石：しかもExcelをPDFにするとそこでもズレて修正するのにまた時間がかかるし、手書きだと「読めない」と言われ……余計な手間が増えることがよくありました。でもXDならサッと指示書が書けて、URLで共有できるので「めっちゃ使いやすいやん！」となりましたね。意思疎通を阻む要因が2〜3個減った気がします。
ちゃんれみ：社内向けに指示書を別で作る手間も、PDFにする手間もはぶけると一気に楽になりますよね。 確かにXDは社内外すべてのコミュニケーションを円滑にしてくれます。
白石：ワイヤーフレームを作るだけでなく、デザインやWebサイトやLPの修正を指示する時にも活用できますしね。キャプチャを共有してコメントしたり、「このような感じに修正してほしい」というイメージをラフな感じで、しかもひとつのドキュメントで共有できるので、XDを使い始めて以降はデザイナーからあがってくるデザインが大きくブレることはなくなりました。
益子：XDだとシームレスにデザイナーやエンジニアとファイルのやりとりや指示が出せるのが良いですよね。だから画面設計はXD1本です。1週間のうち丸2日間……体感16時間くらい触っていますよ。XD LOVEですね（笑）。
業務効率3倍アップ 1日LP用ワイヤーフレーム3本分
白石：今まで1〜2万pxのLP用ワイヤーフレームを1本作るのに半日〜1日くらいかかっていましたが、今は1日で3本できるくらいのスピードになりましたよ！ お客様とのやりとりが効率化されたことも含めて全体で考えると業務効率は3倍くらいアップしたかもしれません。
益子：私も作業スピードとしては少なくとも2倍以上アップした気がします。体感としては3倍くらいかも。やっぱり思考とツールのスピードが同じ感じで進められるのが大きいですね。
ちゃんれみ：想像がカタチになるのが早いですよね。
栄前田：轟さんが今日着ているのTシャツの通りですね（笑）。
轟：（「DESIGN AT THE SPEED OF THOUGHT（思考の速度でデザインする）」と書かれたTシャツを嬉しそうに見せる）
ちゃんれみ：（笑）。でも本当に、今まで思考よりツールが遅れているとストレスになっていたんですが、XDでそれがかなり軽減された気がします！ ファイル数も半分以下になりました。提出用のファイルをPDFで書き出して、クライアントからの戻しがあって……という部分が削減されただけでも大きいです。
栄前田：クライアントの理解度も、倍以上になった気がします。やっぱり「見てわかる」というのは大きいですね。全体的なコミュニケーションコストも格段に下がりました。
クライアントだって一緒に考えたい、ただやり方がわからないだけ
栄前田：ここ2〜3年、外部に任せっきりではなく「一緒に考えたい」というクライアントが増えてきた気がします。うちはクライアントにも初期の段階からワイヤーフレームを未完成でも共有していて、ミーティングでもモニターを繋いでXDで作りながら話を進めているんです。
ちゃんれみ：かなり早い段階で共有するんですね。一緒に使っていて良かったことはありますか？
栄前田一緒に使っていると使いやすさがよく分かるみたいで「PowerPointと同じように使えるんですね。じゃあウチも買います！」と、クライアントがXDを購入されることがありました。しかも非IT企業の方だったりします（笑）。
ちゃんれみ：え〜そんなことも！ デザインツールを使っていなかった方でも、心理的なハードルはなかったんでしょうか。
栄前田：実際に目の前でカタチが出来上がる様子を見ているので、特にハードルはなかったと思います。XDは非デザイナーでも使えるぐらい敷居が低いのがいいですよね。XDを導入してクライアントを「巻き込む」ことができるようになりました。「ここが違う」とコメントされるだけでなく、自分で手を動かしていただける方が増えたんです。きっとやり方が分からなかっただけなんだと。
益子：今までお互い意見を出し合いながら作る、いわゆる「アジャイル」はツールの制約があってしにくかったですよね。でもXDが登場して、一緒に良いものを作っていくアジャイル型プロジェクト進行はやりやすくなった感じがあります。
ちゃんれみ：言葉だけでは伝わらないことも、一緒に作業すれば伝わりますよね。
益子：そうなんですよ。例えばクライアントに「テキストだけ用意してくださいね」と言ってスプレッドシートやフォーマットを用意しても、ビジュアルが想像できないから気乗りしてもらえないんですよね……。
ちゃんれみ：ありますあります。
益子：でもXDでワイヤーフレームを見せて「ここのテキストを書いてください」と伝えると、ビジュアルが見えるのでエンジンがかかってくれて、ちゃんと用意してくれます。
白石：極端な話、300文字の原稿と言われるとハードルが高いように思われちゃうんですが「この程度です」とビジュアルで見せると「このくらいだったら書けそう！」と思ってもらえますよね。
栄前田：ワイヤーフレームから完成形をイメージするのって、特殊技能だと思うんですよ。ワイヤーフレームだけで確認をとって、承認してくださいっていうのは、多くの人にとっては難易度が高いです。やっぱりある程度ビジュアライズされていないとクライアントもイメージができないですし、原稿が書きにくいですよね。
6〜7割の段階でも「とりあえず」送る
益子：社内でも早めにコラボやしやすくなりましたね。PhotoshopやIllustratorを使っていたときは、人に共有する際にある程度のレベルにしておきたい気持ちがあったんですが、XDなら6〜7割の段階でも「一旦、共有しちゃおう！」と思えるんですよね。
白石：とりあえず形にしてとりあえず送って、とか「とりあえず」が許される感じがありますよね。
益子：100%を目指してひとりが抱え込み、全体の作業が遅れるという状況も防げます。
栄前田：それは実感しますね。私もひとりで抱え込まず、コンセプトだけ作ってあとは他のスタッフに任せたりして、一緒にXDファイルを育てています。
白石：XDを「育てる」！ その観点はなかったです！
レイヤーをいかに整理するか、という美学
益子：プロジェクトによって、コンテンツ整理・ワイヤーフレーム・デザインというビジュアルに対する自分の作業深度を変えられるところも助かっています。みなさんに聞いてみたかったんですが、XDファイルの完成度はどの程度にしていますか？ レイヤー整理までやっていますか？
全員：そこまではやらないですね〜。
轟：Photoshop時代はレイヤーをいかに整理するか、っていう美学がありましたけどね。
ちゃんれみ：LIGでは、XDでワイヤーフレームを作成したあとに、デザイナーがPhotoshopデザインを起こして、エンジニアに渡しています。なので、レイヤーの整理はXDの時点では必要なく、デザイン時にPhotoshopでデザイナーが整理していますね。なので、あまりXDの時点ではレイヤーを意識せず作成することが多いです。
益子：でもXDファイルをそのままコーダーに渡すと「指示がわからない」と揉めることもありません……？
栄前田：あ〜わかります、私も言われたことあります！
益子：デザイナーと揉めることはないんですが、コーダーは細かく指示を入れないと作業するときに使えないらしいんです。コンテンツの指示なのか、レイアウトの指示なのかがあいまいになりがちな点は、XDを使う側も気をつけなければ、と。
栄前田：私はプロトタイプのコメント機能を指示代わりに使っていたりしますよ。
ちゃんれみ：私も。でも、コメント機能でも足りなくて、ワイヤーフレームの横に書くスペース作って書いちゃったりしています。せっかくデバイスの幅にキャンバスサイズを合わせて書き出せるのにもったいないですよね。
全員：そうそうそう！
ちゃんれみ：指示と画面の管理は分けたいので、コメント機能が充実してくれたら嬉しいですよね。プレビューがドキュメントになっていて、そのまま渡せば補足事項も全部伝わるぐらいになると助かります。
プレゼンツールもAdobe XDに代替される
ちゃんれみ：LIGでは自社イベントで、XDで作ったスライドで発表する登壇者を見かけることがあるんですが、みなさんはいかがですか？
益子：私もスライドとして使ったことがあります。必要なサイズにアートボードを切ってプロトタイプとして公開すれば、スライドとして活用できます。
栄前田：カスタマージャーニーを作るワークショップを実施した後に、XDでまとめて、プロトタイプ共有したことがありますね。スライドは毎回XDで作ろうと思いつつ、時間的な問題で挫折して、まだKeynoteです。
ちゃんれみ：私もこれまで作ったものを使い回すことが多いので、Googleスライドになっちゃってます……。
栄前田：そうなんですよね。早くXDでプレゼン用フォーマットを作らないと。
益子：作り込みが求められるページにはプレゼンツールよりもXDの方が向いてますよね。プレゼンツールのマスター機能よりも、XDのシンボル機能のほうが柔軟ですし、入れ込むオブジェクトのファイル形式にも幅広く対応しています。今後XDに代替されていく気がします。
ちゃんれみ：XDで作ると見た目もキレイですしね。
Adobe XDがすべてのUIをデザインする未来
栄前田：バージョニング機能と同時編集機能ができるようになるといいですね。あとiPadで使えるようになると嬉しいです。
白石：確かに、iPad上でペンを使ってXDに図形を描けたら便利ですね！
轟：ジェスチャーアクションで作業ができる、ペーパープロトタイピングのような形ですね。
益子：私はテキストの検索、置換機能が欲しいです！ あとオブジェクト単位だけじゃなくて、テキスト単位のリンクもできるといいですね。
轟：XDは今後もデザイナーtoデザイナー、デザイナーtoデベロッパー、デザイナーtoクライアントのコラボレーションを強化していくので、いろいろと調査して機能を追加していきたいですね。デバイスの画面にとどまることがなく、すべてのUIをデザインするようになっていくと思います。
全員：ぜひ！
まずは使ってもらいたい
ちゃんれみ：私はとてもいいお話ができたと感じているのですが、ご感想を伺えますか？
栄前田：もう3〜4時間ぐらいやりたいですね（笑）。他の会社の方とXDについて語り合うことがなくて、みなさんどう使っているのか気になっていたので、いい機会になりました。
白石：私も色々な使い方がわかって勉強になりました。特にXDを「育てる」というマインドは、XDの魅力を表す言葉として腹に落ちました。僕も3〜4時間ぐらいやりたいです(笑)。
益子：XDはPowerPointぐらいのスキルがあれば使えるようになるツールなので、もっと多くの人に知ってほしいですね。
栄前田：30分くらい使えばなんとなく使い方がわかってもらえますよね。
益子：PhotoshopのPSDファイルなどを読み込んだときの再現性もすごく上がったので、旧来の資産が生かせるという点はXDへの乗り換えを迷っている人には伝えたいですね。
白石：リスティング広告運用担当者など非Webディレクターの方にも、WebサイトやLPの効率的な改善に使えるのでXDをおすすめしたいですね。
ちゃんれみ：確かに、本当にもっといろいろな人に使ってもらいたいですね。轟さんがおっしゃっていたように、XDが全てのUIデザインに関わる未来もそう遠くないと感じます。みなさん、ありがとうございました！
|
有限会社リズムタイプ 代表取締役 ディレクター 栄前田 勝太郎映像制作会社、Web制作会社を経て2002年にフリーのディレクターとして独立、2005年に有限会社リズムタイプを設立。BtoB向けのWebサイト／Webサービスの構築に関わる。現在はさまざまなプロジェクトやチームの改善に関わりつつ、対話の場をつくることにコミットしている。 著書として『Webディレクションの新・標準ルール』、『Webディレクションの新・標準ルール システム開発編』、『Webサイト、これからどうなるの？ キーワードから探るWeb制作の未来像』、『できるところからスタートする コンバージョンアップの手法99』。好きなツールはAdobe XD。 |
|---|
|
株式会社まぼろし 取締役CMO 益子 貴寛1975年、栃木県宇都宮市生まれ。早稲田大学大学院商学研究科修了。Webサイトの企画・設計業務、アクセス解析、ソーシャルメディア運用支援、リスティング広告運用、検索体験の最適化などのWebマーケティング業務、新サービスの立ち上げ業務などに従事。著書に『Web標準の教科書』、『ウェブの仕事力が上がる標準ガイドブック』シリーズ、『いちばんよくわかるWebデザインの基本 きちんと入門』（共著）など。株式会社メンバーズキャリア技術顧問。全日本能率連盟登録資格「Web検定」プロジェクトメンバー。好きなツールはAdobe Illustrator。 |
|---|
|
ASUE株式会社 Web戦略支援室 シニアコンサルタント 白石 達也2008年、早稲田大学第二文学部卒業。Webディレクター歴10年、運用型Web広告プランナー歴5年。顧客のWeb戦略策定から広告・Web制作・アクセス解析を絡めたWebマーケティング支援業務に従事。eラーニングサービスのWebマーケティング講師なども務める。現在はリスティング広告運用に併せた、新規Webサイト制作やLP制作のWebディレクション業務がメイン。好きなツールはAdobe Photoshop。 |
|---|
|
株式会社LIG Webディレクター ユニットリーダー兼チームリーダー ちゃんれみ2008年頃よりWebデザイナー・コーダーとして制作の経験を積んだのち、2016年にWebディレクターとしてLIGに参画。受託のWebサイト制作をメインに、自社のロゴやWebサイト（LIGブログ）などのディレクションを担当。現在はプロデューサー・プランナー業務を中心に行っている。iPhoneやAdobe XDのように、これまで複数のツールを使わないとできなかったことを、コンパクトに実現できるものを愛している。 |
|---|
|
アドビ システムズ 株式会社 マーケティングマネージャー 轟 啓介1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野でJ2EEによるWebアプリ開発に携わるが、Adobe Flexとの衝撃的な出合いを機にリッチクライアントの世界へ。2008年4月、アドビ システムズ 株式会社入社。アドビのWebツール全般のマーケティングを担当。その他、Adobe MAX Japanの統括やAdobe Japan Blogの運営、Creative Cloud道場の番組ディレクター、UX道場主宰も兼任。家電や車など、世の中のデザインがヒドいもの全てを憎んでいる。 |
|---|
