#12「Adobe XDを通じたUIデザイナーとUI開発者間のコミュニケーション」

UIデザイナーとUI開発者間のコミュニケーションを円滑にするためにはどうすればいいのか。Adobe XDで便利な機能やプラグインの紹介を通して、開発者とデザイナーで対談しました。

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

橋本
こんにちは。
青野
こんにちは。
橋本
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのPodcastです。司会は橋本が務めさせていただきます。今回のゲストはアートディレクションチームの青野さんです。よろしくお願いします！
青野
よろしくお願いします！
橋本
では早速なのですが、今回青野さんはゲストとしてはじめてテックラジオに参加されたということで、最初に軽く自己紹介からよろしくお願いします。
青野
はい。アートディレクターの青野です、よろしくお願いします。主な業務はお客様からご依頼いただいたWebサイトのリニューアルや立ち上げの際のデザインの提案を行っています。今回テーマにもなっているAdobe XDについては制作で使用しておりまして、日々得たナレッジを社内の勉強会やSNSで発信しています。
橋本
はい、ありがとうございます。今日はそんな青野さんとAdobe XDを通じたUIデザイナーとUI開発者間のコミュニケーションについてお話ししていこうと思います。
青野
はい。
橋本
当社では開発者もAdobeのライセンスを提供されていて、デザイナーがPhotoshopだとかXDで作成したデザインデータを直接確認することができます。最近だと結構XDの連携が多い気はしますね。
青野
そうですね。開発者がコーディングするときにエディターを選んでいくように、デザイナーもPhotoshopやXDなどデザインツールの選択肢があります。ただここ数年ではXDが全社的にメインツールに置き換わりつつありますね。
橋本
なるほど。やっぱりWebデザインってなると画面遷移だとかインタラクティブな動きがあったりするのでそれをプロトタイプ機能などで表現できるっていうのがやっぱり強いですよね。自分はデザインもちょっと興味があってデザインツールの使い方に割と理解がある方なんですけど、開発者でそういった人ってあんまり多くはないと思うんですよ。とくにXDとかアップデートが頻繁に行われてて、その機能もどんどん追加されていくので…。
青野
うんうん、そうですよね。今日はそのあたりもちょっとお話しできるといいのかなーという風に思っています！
橋本
はい。ということでまず最初に、開発者がXDからコーディングの作業するときに便利な機能やオススメのプラグインについてご紹介していこうと思うんですが、青野さんには事前にいくつか開発者にオススメできそうなものをチョイスしていただきました。では早速お願いします！
青野
はい。まず1つ目はXDにデフォルトで搭載されているデザインスペックという機能です。これはデザインデータをクラウド上にアップすることでデザインを構成する数値をブラウザ上から取れる機能になっています。具体的にはオブジェクトのサイズ、そして要素間の余白、カラーやテキストをワンクリックでコピーすることができます。つまりコーディングをする上で必要な情報がまとめて取得できるので、とても便利になっています。
橋本
自分も最近この機能の存在を知ったんですけど、クラウド上にアップしたデータを閲覧するリンクをただ発行するだけではダメで、XD側の共有リンクの設定の部分で、開発者を設定しないとデザインスペックとして先ほどの機能が閲覧できないんですよね。ただやっぱり使えると各情報の取得が楽で、Adobeのアカウントを持ってない人もデザインスペックのリンクを共有されれば使えるのが本当に便利だと思いました。
青野
はい。このデザインスペックは長らくベータ版だったんですけども最近正式なリリースもされたのでこれからのアップデートにも期待しています。
他にもXDにはさまざまなプラグインがあるので、今回は3つだけカスタマイズできるようなプラグインをご紹介しようと思って用意してきました。では早速なんですけども、1つ目ですね、「Gradient Angle」というものがあります。こちらは名前の通りグラデーションの角度を獲得できるプラグインになっています。グラデーションは最近でも使われるようなデザイン表現なので、使いどころが意外とあったりします。2つ目は「Texts Selector」です。こちらは選択したオブジェクトの中からテキスト部分のみを選択し直してくれるようなプラグインになっています。背景や写真の上にテキストが乗っているようなデザインであったり、複雑なグループ化がされているデザインのケースでテキストだけをコピーしたい時に役立ちます。3つ目は「Placeholder Image」です。こちらはダミー画像を簡単に作成できるプラグインです。デザインの段階で写真素材が確定していない場合などに、ダミー画像を作成して実装を進めることができます。こちらで3つ以上になります。
橋本
はい、ありがとうございます。いやぁ、なんか今あげていただいた3つどれも刺さるなーと思って聞いてました（笑）。今までコーディングでデザインを参照する時にプラグインをあんまり使うことがなかったので、今後直接XDファイルをいじる機会があった時はその3つを試してみようと思います。
青野
はい、是非お試しください！
橋本
話は変わるんですが今回このAdobe XDの話をするにあたって、自分以前にこのテックラジオで一度そのXDに関するテーマでお話ししたことがあるんですよ。
青野
はい、もちろん聴きました。XDがVSCodeと連携できるようになったという話でしたよね？
橋本
あっ、そうです！開発者とデザイナー間のコミュニケーションをより円滑にできる拡張機能だなと思って話していたんですけど、やっぱりお互いに直接話し合ってここをこうしてほしいなだとかを伝えることもコミュニケーションを円滑にする上で重要だと思うんですよ。
青野
はい。まさにそこがとても重要だという風に自分はいつも思っています。
橋本
そこでここからはちょっと開発者とデザイナーが話し合う場ということでせっかくなので、開発者である自分からいくつかデザイナーの方にデザイン作成時にお願いしたいっていうことを青野さんを通じてお話ししていこうと思います。まぁ、なんかちょっと図々しい感じなんですけど（笑）
青野
はい（笑）
橋本
その後は逆に青野さんから開発者の方にお伝えしたいことをお話しいただければと思います。
青野
はい、分かりました。よろしくお願いします。
橋本
お願いします。ではまず自分からですけど、最初にコンポーネントの扱いについてです。ページを設計する上でマークアップやCSSの命名をパーツ単位で行うことがあって、パーツをモジュールとかコンポーネントと呼んで管理しています。このモジュール、コンポーネントのまとまりごとにデザインでもまとめておいてもらえると助かるなぁっていう話なんですが、デザイン側でコンポーネントとしてまとめられてると同じ機能を持ったコンポーネントで後々違うデザインが発生するっていうことが少なくなるんじゃないかなって思うんですよ。それが結果的にコーディングするときに余計なモジュールを作ってしまうのを防ぐことにもつながりますし、開発者もコンポーネントの通りにまとまったパーツとして設計ができるので、それがよりスムーズな連携って言える気がするんですよね。
で、その次にOSに依存したフォントは使用しないで欲しいっていう点です。これはたとえばMac OSの標準フォントであるヒラギノとかはWindowsに入ってないので、ヒラギノフォントが使われたデザインをWindowsで確認するってなるとフォント違いでデザインが崩れてしまうみたいなことがよくあったりするんですよ。で、これで厄介なのがそのフォントが存在しなかったとしてもそのXD側で勝手に置換されてデザインが反映されてしまうので、開発者が気付けない点なんです。そうなると微妙にデザイン違いのまま設計しかねないのでそこは注意していただく必要があるかなって思いました。
最後はさまざまな場合を想定したデザインになっているかについてです。これは数字やテキストなどのデータが動的に増えるページの場合に、データがない状態のパターンとかデータが最大値の振る舞いについてとか、どうなるかっていうコメントがあると設計時に悩む時間とかデザイナーへの確認とか手戻りが減るので、そういった先を見据えた対応があるとかなり助かります。自分からは以上になります。
青野
はい、ありがとうございます。まさに今いろいろといただいたところはデザインデータを作るうえでも重要なポイントだなぁと思って聞いていました。モジュール、コンポーネントのまとまりごとに作成することもそうなんですけど、コンポーネントの命名のルールが共有できているとよりスムーズに連携できるのかなという風に感じました。あとはシーンによってデザインが変わる場合の想定のところなんですけども、デザイナー側が各パターンで想定していくことはもちろん大事ですけども、すり合わせを行っていくような、実際に会って話したりといったコミュニケーションもポイントになりそうですね。
橋本
うんうん。
青野
はい、では次は逆に、デザイナーが開発者にXDからコーディングする時にお願いしたいことですが、まずはステートについてです。XDには「ステート」という状態別にデザインの見た目を定義できる機能があります。たとえばですが、ボタンのデザインを作成する場合通常時とマウスオーバーした時、そして非活性でクリックできない時の見た目を定義しておくことができるんですよね。ただこれが少しややこしくて、クリックして1つ1つ見ていかないとステートが実際に設定されているかというところを確認することができないんですよ。なので、複数の状態が予想されるようなデザイン要素は是非クリックして確認していただくといいのかなと思っています。これはもちろんデザイナーがわかるように目印をつけたり口頭で補足したりすることが重要なのですが、開発者の方にもこういった特性があるよっているところ理解していただくことで円滑にやりとりができるかなと思いました。
もう1つですがよくあるパターンとしては、色や余白などの細かい作り込みがビジュアルデザインには欠かせないという話です。たとえばサイトのメインカラーが決まっている場合でもポイントでメインカラーを使って行く場合と背景に敷いていく場合で、面積によって色を少し変えていたりすることがあります。余白でいうと基本はルール化していくのですが、周りの用途に合わせてイレギュラーな部分を作ってデザインのバランスを取っていたり、といったようにちょっと細かい部分になるんですけども、意図的にバランスを設計している部分があるのでそういった意図を汲んでいただけると一緒に良いものが作れるのかなと思いました。ちょっとここはどうしてもお互い専門性が高い分野なので共通言語を増やしていくであったり片方がこう抱え込まず十分な意思疎通をとっていくことが大切なのかなという風に思っています。先ほど紹介したデザインスペックもそうですけど、XDではそういったコミュニケーションを円滑にしてくれる上でも役立っていますよね。自分もこれで以上になります。
橋本
はい、ありがとうございます。ステートに関しては知っているのと知らないのとで、デザイナーへの確認とか、作業する上でもったいない時間が大幅に変わってくるのでぜひ覚えておきたいところだなって思いました。あと色の変化についてなんですけど、これまでもいろいろ制作をしてきて、似た色だけどこの部分微妙に色違うなみたいなことが何回かあって、そういう部分でさっきの話を聞いて、デザインはデザインでそういった見せ方の工夫があるんだなっていう自分の中で新たな気付きがあったんですよ。なのでこういう細かい部分の意図を知るためには直接デザイナーと開発者がそれぞれ互いに制作している横で観察したりだとか質問したりしてそのデザインを作る過程とか意図、またそのコーディングする過程とか着眼点っていうのをお互いに理解し合うことがやっぱり必要なのかなって思いました。
青野
そうですね。まさにそこが一番結局は大事なのかなという風に思っています。そういったこう、デザイナーと開発者のやり取りの先に良いサイトが作れたりですとか、コミュニケーションが生まれるのかなというような気がしています。
橋本
はい、そうですね。
はい、ということで今回のミツエーテックラジオでは、Adobe XDを通じたUIデザイナーとUI開発者間のコミュニケーションについてお話ししました。青野さん的に今後XDで期待してることって何かあったりしますか？
青野
えーっと、そうですね～、やっぱりこう自動アニメーションの機能があるんですけども、その拡張については気になっています。で、すでにだいぶ充実している機能なんですけども、自動アニメーションというのが、今までデザインツールで表現が難しかった動きですね、インタラクションであったりアニメーションっていうところデザイナーが簡単に作成できるようになりました。ただ、まぁ今度というか将来に向けてはそのアニメーションの動きを作った上でどうやって実装していくのかというような実装しやすくするための数値の連携であったり、そういったアップデートを期待しています。
橋本
うんうん、確かにアニメーション関連でデザイナーから開発者への連携ってその捉え方とか表現が難しい部分の1つだなって思ってるので、そこがより連携しやすくなる機能は、やっぱり欲しいですね。
青野
はい。
橋本
最後にミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI 開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行なっていますのでチェックしてみてください。また、このポッドキャストはApple Podcast、Google Podcast、Spotifyで配信していますのでお好みのプラットフォームでフォローいただけると最新のエピソードをすぐ視聴できます。こちらも是非ご活用ください。
それでは今日はこの辺で！ありがとうございました！
青野
ありがとうございました！