タグから見つける

タグから見つける

職種を選択

事業領域を選択

Adobe XD好きのためのイベント Adobe XD Meeting #15 を開催しました！

こんにちは。デザイナーの町田(@macheri_me)です。

2018年4月13日(金)に弊社にてデザイナー向けイベント「Adobe XD Meeting #15」を開催しました。今回はそのイベントの様子をご紹介します。

Adobe XD Meetingとは？

Adobe公式コミュニティエバンジェリストの湯口りささん、北村崇さんによる「ほぼ毎月Adobe XD勉強会」が主催する勉強会です。
Adobe XDを用いたワイヤーフレーム・UIデザイン・プロトタイピングの知識・経験を参加者全員で共有しあい、最近の制作を取り巻くUXやそのツール・プロセスについて勉強することを目的にしています。
Adobe XDはまだ機能としてない不便なところも多いですが毎月ハイスピードな改善をリリースしているデザインツールです。この勉強会は名前の通りほぼ毎月開催されており、湯口さんによる今月のアップデート情報や参加者によるセッションを行なっています。
過去のセッションの様子はこちらからすべて閲覧することができます。

以前私もXDの不便な点とその解決法について登壇しました。スライドの中でで紹介しているベクターグラフィックのCCライブラリ未対応問題はすでに改善されています。すごいぞ！Adobe XD!

弊社のサービス開発においてAdobe XDを活用しているチームが多く、それがきっかけとなり今回弊社のオフィスにて開催することとなりました。

今回のテーマは"エンジニアとXDとUserVoice"
ディレクター・デザイナーによく注目をされているXDですがエンジニアも巻き込んで使うケースも徐々にでてきました。
今回はエンジニアさんと一緒に使う試みをされている方を中心にセッションをしました。後半は簡単な懇親会と参加者注目のユーザーボイス(Adobe XDの改善案を米国のXD開発チームに報告する機能)の投票大会を実施しました。

発表まとめ

1. Adobe XD 今月のアップデート情報 ： 湯口りささん

前述の通りAdobe XDはできないことも多いツールですが毎月というハイスピードで新機能が追加されています。湯口さんからは今月のアップデート機能の解説をしていただきました。

待望のパスワード設定機能

多くの人がこれを待ち望んでいたのではないでしょうか。
Adobe XDはURLを知っている人であれば誰でもどこでも共有することができる最大のメリットがあります。一方でセキュリティ面を強く気にする相手ですと利用NGと言われてしまうところも多かったかと思います。
今回のアップデートによりついにプロトタイプにパスワードをつけられるようになりました！これでセキュリティが厳しいところも問題なく使えます。パスワード設定は8字以上の英数字・小文字大文字が必要なため注意です。パスワード自動生成機能が欲しくなりますね…。ちなみに同じくURL発行するデザインスペックはまだ未対応のようです。

アセットパネルで絞り込み検索

これも私は強く望んでいたとてもありがたい機能です！
アセットはデザインデータが複雑になると非常に多くなり、欲しいものが一発で探し出せなかったりします。使いづらいなと思っていたところでした。今回のアップデートによって名前による検索が可能になりました。たくさんのオブジェクトが登録していたとしても名前で検索したら一発です。
シンボルにはまだ名前を設定&変更することができないため、ここももうすぐ改善されて便利になっていくのではないでしょうか。

アセットを検索してハイライト

またこれも私は強く望んでいたとても嬉しい機能です！
アセットに登録されたものは使用箇所を今までハイライトすることができませんでした。今回のアップデートによってハイライトをクリックすると使われている場所に色がつくようになりました。フォントなど細かいものが見つかりづらかったのですが非常に助かります。
キャンバスから使用中のアセットをハイライト、またその逆でアセットパネルから使用したオブジェクトのハイライトができます。

PhotoshopやSketchとの連携を強化

今までPhotoshopやSketchでデザインを作っていたものを前回のアップデートによりAdobe XDでも開けるようになりました。今回のアップデートではファイルを右クリックして「XDで開く」、もしくはドラッグ&ドロップで簡単にAdobe XDに取り込めるようになりました。Sketchに関しては画像のカラー調整・文字スタイル・ドキュメントのスウォッチなどを維持できるようになっています。
徐々に互換性が上がってきたことで、現在 PhotoshopやSketchを使われてるチームもAdobe XDへ移行しやすくなってきましたね！

2. システムの要件定義にもXD ： 池島 彩佳さん

全国各地に点在するチームメンバーとのコミュニケーションツール

池島さんの会社ではメンバー全員がフルリモートで全国各地にいます。そのため対面によるこまめなコミュニケーションが難しい環境にあります。そんな状況の中、開発にAdobe XDを導入したことでワイヤーフレームと要件定義を同時に進められるようになりました。

Adobe XDを導入してよかったポイント

  • 管理画面のUIデザインを作ることが多いがプロトタイプによって画面遷移の確認がやりやすくなった
  • Adobe XDの作業スピードの速さ。迅速にプロトタイプを作れるようになったことで遠隔地でもスムーズに確認できるようになった
  • 仕様をきっちりと残すための利用に適している
  • Adobe XDで作った画面を元に要件定義をきっちりと行ったため見積もりの制度が上がった

使ってみて不便だなと思ったAdobe XDの弱点ポイント

  • 通知方法を複数のメールアドレスに送る、チャットと連携など選べるようにして欲しい。現在はチャットと併用して都度通知しなければならない
  • 画面数が多いとどの画面なのか探すのが手間かかる。画面IDを検索できるようにして欲しい
  • 削除したページのコメントを残したい

これらの要望には参加者もみんな同意しているようでした。私もかつてワイヤーフレームのメモをコメント機能で残していたことがございました。その結果、うっかりその画面を作業の中で複製→ベースとなる方を削除したところコメントがすべて消えてしまい戦慄しました…。

3. うちの開発におけるXD利用法 : 関口和真さん

全員の開発環境がバラバラな開発チームでAdobe XDを使う方法について

Adobe XDはデザイナー限らず誰にでも使いこなせるほど簡単なツールです。関口さん自身もエンジニアなのですが業務でAdobe XDをよく活用しているとのこと。
スケジュールは常にタイトです。デザインとバックエンド開発を同時に作り始めるため、ワイヤーフレームを素早く作ってメンバー全員に共有する工夫が必要です。本来ならば全員にAdobe XDを導入して最適な開発環境を作りたいところ。しかしディレクターはWindows7（Adobe XD未対応）であり、一部のメンバーはAdobeのバージョンがCS6止まり。導入コストを考えると全員にAdobe XDを購入するのは非常に厳しい環境でした。

まずは使える人からAdobe XDを導入して少しずつ効率化を進める

そこでまずは関口さんから積極的にAdobe XDを活用し始めました。Adobe Illustratorで作られたワイヤーフレームをAdobe XDに移植し、プロトタイプ化したURLでメンバー全員に共有することにしました。プロトタイプURLさえ知っていればアカウント発行や追加コストをかけることなく共有できるというAdobe XDのメリットを活かしてますね！ほんの少しの工夫ですがAdobe XDによって手間がかかっていた共有が格段にやりやすくなりました。

コストや環境の問題により全員がAdobe XDを導入できないとしても、まず持っている人から利用を初めて少しずつ効率化を進めることが大事だとお話しておりました。

後半はユーザーボイスについて。そして懇親会

気になるユーザーボイスをチェックしてみよう

後半は再び湯口さんによるユーザーボイスの紹介。皆様はユーザーボイスについてご存知でしょうか？
Adobe XDではベータ版の頃からユーザーの声を非常に大事にしています。ユーザーの要望が強い順（要望に対して他ユーザーが同意と思うものには投票ができる）を優先に改善を行っています。
月１で改善されている新機能も多くはここの声から拾っている模様。もし使いづらいなと思う部分があったら積極的に書き込んでみると開発メンバーに届けることができます！

気になるユーザーボイス

↑このあたりは皆さんもあったらいいな！と思う機能たちかと思われます。ぜひ投票してみてください。ログインが必要ですがFacebookやGoogleアカウントで簡単にログインできます。

今回は珍しくユーザー同士の交流会を行ってみました

残りの時間は美味しいお菓子とサンドイッチ、ドリンクを片手にユーザー同士の交流会を行いました。
毎回このイベントに来ているAdobe XD大好きな常連さんもいれば初参加でこれからAdobe XDを使う方もいらっしゃいます。現在業務でつまづいているAdobe XDの個性的なポイントなどをどのように工夫しているか様々な人からノウハウを得ることができたようです。また、業務でどのようにAdobe XDを活用しているのか会社によって工夫しているポイントは違うため、私も他参加者様のお話が聞けてとてもいい参考になりました。

まとめ：環境に合わせてAdobe XDを工夫して使おう

弊社でもリモートワークを活用しているチームが多くコミュニケーション方法を対面よりも工夫する必要があるなと日々感じております。今回のお話でもあったように、全国各地に散らばるメンバーと認識を合わせるためには同じようにAdobe XDを用いて共有を工夫しておりました。すぐ導入したくとも環境やコスト面でできない、そんな場合はできるところから少しずつ効率化を始めることが大事だとお話いただきました。それによりAdobe XDがチームにどのツールよりもよい効果があることが実証できれば、導入も検討していただけることがあるかと思います。

Adobe XDは現在発展途上のツールです。これからどんな機能が登場するのか楽しみですね。
今後も毎月待望の新機能がリリースされ続けるかと思います。気になる方は是非とも、Adobe XD最新機能ページはブックマーク&チェックしておくことをおすすめします！