最新情報をお届けします！
「Adobe XD」はこう使うべし！Adobe XDに詳しい、「えびさん」こと海老江優太さんに解説いただきました！PM・ディレクターの方、必見です！
2017年に正式リリースし、最近より一層注目を集めている「Adobe XD」。
「デザイナーが使うツール」というイメージが強かったのですが、最近私の周りのディレクターやPMでも「Adobe XD」を使う人が増えています。
一方で、「Adobe XDを使ってみたいけど、いまいち使い方がよくわからない...」、「どう活用していったらいいの？」という声も。きっと、同じように「Adobe XD」気になるけどまだ使えていない方、たくさんいらっしゃるのではないでしょうか？
そこで、今回お話を伺ったのは、「Adobe XD」に詳しい「えびさん」こと海老江優太さん。ウェブ制作を専門とする株式会社ICSでフロントエンドエンジニアとして働く傍ら、あまりに「Adobe XD」の魅力に取り憑かれ、Adobe XDの最新機能の紹介動画を作ってTwitterで発信。さらに、使い方を分かりやすく「note」やオウンドメディア「ICS MEDIA」でまとめて発信したりしています。
AdobeXD 2020年10月の最新機能が2分で分かる動画を作りました！
— えび@XD芸人 (@pino_ebiebi) October 23, 2020
3D変形
CCライブラリの統合強化
自動高さ調整テキスト
その他多数#Adobe #AdobeXD #adobexd_study #最速XD #AdobeMAX
その他に関しては、記事で紹介します！ pic.twitter.com/OPwTfCT8Q1
そんな、Adobe XDマスターのえびさんに、【デザイナーじゃなくても知っておきたいAdobe XDの使い方】を伝授いただきました！
まだ使ったことのない方はもちろん、すでにAdobe XDを使っている方にもきっと新しい発見があるはず！ぜひ気になるところから読んでみてください。
もくじ
・デザインチェックが超楽ちん!｜「共有リンク」機能
・デザインの修正が倍速で終わる!?｜「共同編集」機能
・デザイナーへの戻し工程削減！｜「ドキュメントアセット」｜「アセットパネル」
・ワイヤーフレーム描かなくてOK｜「Quick Mockup」
・イラスト・画像を探す手間が省ける｜「unDraw」「PhotoSplash 2」
・作業効率が大幅にUP。絶対に覚えておきたい神機能｜「リピートグリッド」と「スタック」
プロトタイプだけじゃない！ホワイトボードにも、スライド資料にも使える！
・組織・チーム単位で使うとより一層便利に。
ウェブサイトやアプリのデザインチェックが、早く、正確にできる。これがAdobe XDを使う大きなメリットだと僕は感じています。Adobe XDにたくさん仕掛けが詰まっているので、ひとつひとつご紹介していきます。
まずはじめにご紹介したいのが「共有リンク」機能です。この機能では、URLが発行され、クラウド上でカンタンにデザインの確認ができるようになります。
デザインデータをメールで送ったり、ダウンロードしたり、ちょっとした手間が省けるのでいいですよ。
しかも、URL先からデザインへのコメントがスムーズにできるんです。
たとえば、デザインチェックを複数人にしてもらうとき、修正やコメントを集約するのって結構大変じゃないですか？Adobe XDだと、共有URLでみんな同じデータにアクセスし、デザインとコメントの紐付けが自動的にされるのですごく便利です。
コメント自体も、デザイン全体に対してなのか、細部に対してなのか、細かく紐付け可能。実際に修正するとき、「このコメントってどれに対してなんだろう？」と迷うことが少なくなります。
修正しているのに見ているデータが違い、「修正できてない」と言われてしまうことってよくあると思うのですが、Adobe XDはそれがなくなります。修正するとデータにすぐさま反映され、常に最新のデータをURLを知る全員が見ることができます。
デザイン修正をスピーディーにすすめる上で、とても便利なのが「共同編集」機能です。ひとつのファイルを複数人で同時に編集できるので、ひとりで修正作業するよりも速くすすめることができます。
たとえば、会議のときにもリアルタイムでデザイナーに編集作業に入ってもらって修正を反映していくこともできますし、一緒に編集することで認識のズレにも速く気付けます。
常に最新のデータが保存されていくので、修正するべきファイルを間違えることもありません。
ファイル単位でバージョン管理していると、たとえば今日いじるべきデータをいじろうとしたら間違えて昨日のデータをいじっていることってよくあるじゃないですか。そういう無駄な先祖返りを防ぐことができます。
しかもバックアップを取れる機能があるので、過去のデータにかんたんに戻すこともできます。ただ、30日後に消去されるので、30日以降も保存しておきたいバージョンはブックマークで保存しておくと、無制限にとっておけます。
デザインの修正が発生したときや、別案を検討するとき、本来だったらデザイナーに「戻し」をするケースが多いと思います。
大幅な、デザインの修正ならともかく、プロトタイプ段階での細かい色味調整とか、ボタンのカタチの変更とか、いちいちでデザイナーにお願いしている工数かかるもの。「Adobe XD」であれば、デザイナーにわざわざお願いしなくても、PMやディレクターがカンタンに対応できる機能がいくつかあります。
ひとつが、「ドキュメントアセット」です。この機能では、プロトタイプ全体のテーマカラー設定・管理することができ、一瞬で変更することができます。
たとえば、クライアントとの会議でデザインを確認しているとき、「べつのテーマカラーでも検討したい」とか「全体をもっと明るい印象にしてほしい」とか言われることよくありますよね。
Adobe XDであれば、「ドキュメントアセット」で色の設定を変更するだけで、全体のカラー調整がサクッとできちゃうんです。「戻し」の工程が一気に解消できるのでとても便利です。
カラーだけでなく、ボタンなど「コンポーネント」のデザインもカンタンに変更することができます。たとえば、ボタンのカタチをすべて「四角から角丸にしたい」となったら、ひとつひとつ修正しなくても、一括でデザインを変更することができます。
余談ですが、一括変更できる点は、エンジニアとしてもうれしいポイントです。一つ一つ手作業でカラーやカタチを変更していると、どうしても「ズレ」が出てきます。たとえば、ボタンの余白が左側は20ピクセルなのに、右側が19ピクセルになっているとか。
エンジニアとしては、意図的なのかミスで起きたのかわからなくなっちゃうんですね。Adobe XDのアセットで一括管理すると、微妙なデザインのズレがなくなるので助かります。
Adobe XDを使いこなす上で、ぜひ知っておいてほしいのが「プラグイン」です。機能を拡張してくれるもので、インストールすることで、さらに便利にXDを使うことができます。プラグインは、たくさん種類があるので、ぜひいろいろ調べてみてください。
ここからは、はじめてAdobeXDをさわる方向けにおすすめのプラグインを紹介していきます。
まず最初にご紹介したいのが、「Quick Mockup（クイックモックアップ）」です。このプラグインでは、ワイヤーフレームやモックアップをすばやくカンタンに作成することができます。
いくつかテンプレートがあり、選択するだけで、高速でXDがワイヤーフレームを描いてくれます。
さらにすごいのが、パーツのスタイルやステートの管理までしてくれるところ。たとえば、ボタンのデザインはクリックしたときにどう変わるのか、ホバーしたときにどう変わるのか。細かくステータスを考慮し、デザインをしなければなりません。こういったところもXDがカバーしてくれるので、非常に便利です。
ワイヤーフレームの土台ができるので、ディレクターさんがゼロから作る手間も減りますし、クオリティが高いのでクライアントもイメージがつかみやすい。あときれいなものが見れるので安心感もあるとおもいます。
イラストや画像を配置したいとき、ブラウザで検索する方が多いと思うのですが、探していると思いの外時間が経ってしまうことありませんか？
イラストや画像を「探す手間」を省けるプラグインがいくつかあるので、ご紹介していきます。
まずひとつ目が、「unDraw（アンドロ―）」です。Adobe XD上で、おしゃれなイラストの検索と読み込みができます。結構スマートな印象のイラストが引っ張ってこれるので、プロトタイプだけでなく、僕はスライド資料にもよく活用しています。
画像の検索と読み込みをしたい場合は、「PhotoSplash 2」というプラグインがおすすめです。著作権フリーの写真が一覧ででてきて、選択するとすぐにデザインに反映できます。ただし、サインインの必要があるのと、一部機能は課金が必要なので注意が必要です。
facebookとかTwitterなど、いわゆる「アイコン」素材は、「Icons 4 Design」というプラグインがおすすめです。いろんなサイトの商業利用フリーのサイトの中からキーワードに合うものを表示してくれるのでとても便利です。
「リピートグリット」と「スタック」、この２つはAdobe XDならではの基本機能です。使いこなせると、大幅に作業効率がアップするので、絶対に覚えておきましょう。
説明するよりも見てもらったほうがわかりやすいと思うので、実際にやってみますね。まず「リピートグリット」をやってみます。
たとえば、ブログの投稿の一覧ページをつくるとします。同じ要素を繰り返すとき、コピペを皆さんつかうと思うのですが、３つくらいならまだしも、10個とか並べないとしたらけっこう面倒ですよね。しかも、要素と要素の隙間を一つ一つ揃えていくのは骨の折れる作業です。このような工程を一気に解消できるのがリピートグリットです。
画面右上にリピートグリットていうボタンがあるのでこれをクリックすると緑のハンドルがつきます。このハンドルを引っ張ると、名前の通り選んだグリットをリピート（繰り返）してくれます。
また、リピートしたオブジェクトの間隔はマウス操作で、一括で均等に配置してくれます。編集機能を使えば、画像の変更もテキストデータの読み込みも全部一括でできるので非常に便利です。
リピートグリットは、一括でデザインを変更できるっていう利点でもあるんですけど、個別の対応ができないという弱点があります。たとえば余白を右と左で変えたり、一つのデザインだけ変えることもできません。
そこで、個別のデザインの変更をしたいときに使うのが「スタック」という機能です。リピートグリットではできなかった個別の余白管理ができます。
こういった、ブログの投稿の余白調整にも使えますし、ヘッダーのデザインで良く見られる横並びのSNSアイコンの余白調整もカンタンにできます。SNSアイコンを読み込んで、バラバラに出てきてしまったときに、一瞬で整えられます。
ここまでプロトタイプ作成を前提にAdobe XDの使い方をお伝えしてきましたが、じつは他にも活用方法がたくさんあります！
僕自身はよく「ホワイトボード」と「スライド資料の作成」に、Adobe XDを活用しています。
ホワイトボードとして使ってみたい方は、「Whiteboard」というプラグインがあるのでぜひインストールしてみてください。その名の通り、XDをホワイトボードのように使うことができます。
ブレストなどアイデア出しにも便利ですし、カスタマージャーニーマップとかフローチャートなどテンプレートも豊富です。
手書きができる機能もついているので、文字じゃ伝わらないとかイラスト書いてアイデアだしたり、関係性を矢印で整理したり、本物のホワイトボードのような活用もできるので便利です。
もうひとつの活用法は、スライド資料です。とくに専用のプラグインをダウンロードする必要もなく、プロトタイプのときにつかう「ページ遷移」を「スライドのページめくり」としても活用することで、パワポのようにスライド資料をXDでつくることができます。
また、XDにはカンタンにアニメーションがつくれる「自動アニメーション」機能があるので、リッチなスライドを手軽に作成できます。
発表し終わって参加者さんにスライドを共有するときでも、共有リンクを発行すればそのままブラウザで資料が確認できます。作る段階から共有する段階まで全てXDで完結できるのでおすすめです。
最後まで読んでくださりありがとうございます！
もし少しでも「Adobe XDを使ってみたい！」と思った方は、ぜひ開発チームや社内外のステークホルダーを巻き込んで、一緒にAdobe XDを使ってもらえると最大限に活用できるのではないかと思います。
データを共有できたり、同時編集できたり。ここまでお話してきたように、スマートにやり取りできることがAdobe XDの良さでもあるので、個人で使うよりはチームで使っていただけるとすごく活用いただけると思います！
取材 / 文 ＝ 野村愛
4月から新社会人となるみなさんに、仕事にとって大切なこと、役立つ体験談などをお届けします。どんなに活躍している人もはじめはみんな新人。新たなスタートラインに立つ時、壁にぶつかったとき、ぜひこれらの記事を参考にしてみてください！
経営者たちの「現在に至るまでの困難＝ハードシングス」をテーマにした連載特集。HARD THINGS STORY（リーダーたちの迷いと決断）と題し、経営者たちが経験したさまざまな壁、困難、そして試練に迫ります。
Notionナシでは生きられない！そんなNotionを愛する人々、チームのケースをお届け。
