Adobe XDノススメ~この1年のアップデートのハイライト~

 data-srcset
2020年1月に行われたAdobe XD ユーザーグループ名古屋 vol.4で、「アプデ情報セッション」に登壇させていただきました。Adobeさんの公式ブログを読んでその内容を報告するだけ、とゆー他人の褌で相撲を取れる美味しい登壇枠ですw

こういう機会でもないとなかなか勉強したがらないジブンの尻を叩くつもりで担当させていただきましたが、本来は、発表内容が特にない方(=筆者自身もそうなのだが)にも登壇の機会を得ていただくために設けられた枠です。XDのことをもっと知りたい!という初心者の方こそ、次回以降、是非ともチャレンジしてみてください。ヒトの話を聞くだけよりも、知識が頭にこびりつきます!

この1年で、Adobe XDが更に更に使いやすいWeb制作ツールとして進化してきました。登壇で発表した内容を元に、この1年の間に追加されたステキな新機能、そしてコーダー的にしんぱいな新機能などなど、筆者の偏見を大いに交えてご紹介します。
目次

Feature Requestsについて

Adobe XDで新たに実装された機能は、ユーザーの声に基づいているものがたくさんあります。要望を投稿・閲覧できるのがFeature Requestsページです。自分が欲しい機能について、他の方がすでに要望を出している場合も多いので、まずはそれを探し(大変ですが)、同様のモノがあれば投票しておくとよいでしょう。

XD勉強会ではプレゼン用の資料をXDで作る方が多いので、今回こそ筆者もそうしようかと思ったのですが、動画の埋め込みができないので諦めました。ちょうど動画に関する要望が一覧の一番上に上がっていたので、早速投票しておきました。

因みに、これらの要望には、実装状況ごとに色の異なるタグが添えられています(これ以外にも何種類かあります)。

FEATURE-UNDER-REVIEW 必要かどうか検討中
FEATURE-IN-THE-BACKLOG そのうち実装作業開始予定(予定は未定)
FEATURE-STARTED 実装作業が進行中
FEATURE-COMPLETED 実装が完了\(^O^)/

FEATURE-COMPLETED のページを見てみると、つい最近実装されたばかりの機能に、Adobeから完了の旨が言及されています。

存在に気づきにくいけど、使える機能

スポイトツールのショートカット

ものすごーくジミな新機能。登壇準備中に初めてその存在に気付きました。2019年2月のアップデートで追加されたようです。というか、IllustratorやPhotoshopの場合はツールバーの中にスポイトツールが入っていて、スポイトアイコンの上にマウスオーバーするとショートカットが表示されるので特に覚えていなくてもその存在に気付けるのですが、XDのツールバーにはスポイトツールがないので、敢えて言われないとわからないんですよね…

操作方法はIllustratorやPhotoshopと同じで、オブジェクトを選択した状態でショートカットキーI(アイ)を押すと、スポイトツール(拡大鏡的なモノ)が起動します。ツールの中心を拾いたい色に合わせてクリックすると、選択中のオブジェクトにその色が適用されます。

プロトタイプのグリッド表示

これも登壇準備中に知った機能です。2019年7月のアップデートで追加されました。

「リンクを共有」で生成したプロトタイプ及びデザインスペックの左上に表示されているファイル名をクリックすると、全てのアートボードが一覧表示され全体を俯瞰することができます。さらにはアートボード名で絞り込みをしたり、リンクされているアートボードのみを表示したりと、とても便利に使えるようです。

これを知らなかっただけで、随分時間を無駄にしていたカモ。

環境に無いフォントの自動読み込み

XDのファイル内に「環境にないフォント」が使われている場合、アセットパネル上に明示されます。また、そのフォントが使われている箇所もハイライト表示できるので、とっても便利。フォントの置換作業もIllustratorに比べて簡便でわかりやすいです。

環境にないフォントの一覧が表示される
右クリックでメニューが表示される
ファイルを開くとAdobe Fontsは自動的にアクティベートされ、環境にないフォントの一覧から消える

2019年3月のアップデートで、フォント周りの機能が更に強化され、「環境にないフォント」がAdobe Fontsに含まれているものである場合は、ファイルを開いたときに自動的にアクティベートされるようになっています。

Illustratorのフォント置き換えはとっても使いにくいので、同じ仕様にしてくれないかなーと期待しています。それ以前にIllustrator製のデザインカンプがこの世から消滅して欲しかったりなんかして…

コーダーが喜ぶ新機能

XDがコーダーフレンドリーなワケ

XDのデザインカンプからコーディングするととっても楽ちんなのですが、その理由をつらつらと考えてみるに、コーディングに必要な情報を取得しやすいから、ということに思い至りました。

IllustratorやPhotoshopのように余計なパネルがなく、色、要素のサイズ、文字サイズ等CSSファイルに書き込む情報がプロパティインスペクタで即座に取得できる画面設計になっているのです。要素間の距離の把握もしやすい。テキストの取得も楽です。また、アセットパネルでサイト全体で使われている色と文字スタイルを一覧できるのも助かります。Sassの設定ファイルまたはCSS変数にまとめ易いので。

時折、無闇矢鱈と異なる文字サイズ、そして一見同じ色に見えなくもない異なるカラーコードが幾種類も使われているデザインカンプをいただくことがあるのですが、そういうときは「えっと、これらの違いには何か重要な意味があるんですか?」と訊ねるところから仕事を始めなければなりません。

今後は、アセットパネルの存在によってデザイナーの方の意識が変わり、本当に必要な差異のみを残した無駄のない設計をしていただけるようになって、上記のような問い合わせが一切不要になればいいなーと夢想する今日このごろ…

クリップボード上にSVG情報を含めて保持できるようになった

このアップデートによって、IllustratorとXDの間でお互いにコピペできるようになったそうです。

また、SVG形式で画像を書き出すことも可能になりました。書き出し時に「最適化済」にチェックを入れれば、ソースコードを圧縮した形で書き出してくれます。また、svgタグ内にwidth属性とheight属性も含めて書き出されるため、SVG形式の画像をWebページに埋め込んだ時、親要素のサイズいっぱいに広がってしまうことはなく、アートボードで作成したサイズで表示されます

その他、イロイロな書き出しオプションがあります。詳細は公式ブログの連載記事Adobe XDをもっと使いこなすヒント!をご参照ください。

2019年3月のアップデートで追加された機能ですが、筆者がXDを頻繁に使い始めた頃には既に実装済みで、あって当たり前の機能だったので、つい最近までSVG書き出しができなかったという事実に驚きました。

CSSコードスニペット

コーダーには嬉しい新機能、なんとCSSのソースコードを取得できるようになりました\(^O^)/

とりわけ、値が複雑なグラデーション背景のコードを取得できるのは大変助かります。プロパティインスペクタからは線形グラデーションの角度を数値として取得することができないですし(筆者が知らないだけカモ)。

とはいえ、要素のCSSをまとめて一気に取得する場面は余りなく、実はそんなに使っていません。また、アプリでファイルを開いているときにはCSSコードスニペットは表示されず、共有モードで「開発」オプションを選んでリンクを共有した時、すなわちデザインスペックでのみ表示されるので、ローカルファイルを開いて使うことが多い方にはますます使い道がないかも。

リピートグリッドの範囲より大きい長方形が内包された要素が重なっていて、グラデーションの塗りの要素にアクセスできない状態になっていた

ところで、この機能のリリース時には、一つ問題がありました。デザインスペックではレイヤー一覧を表示することができないので、他の要素で完全に覆われている要素は選択することができず、したがってCSSコードも取得できなかったのです。

そんな珍しいことそうそうあるかい、と思われるかもしれませんが、この機能がリリースされた2019年8月直後に請け負った案件で、まさにそのようなファイルをいただいてしまい、肝心なところでこのステキ機能を利用できませんでした。

重なったレイヤーにアクセスできる

CSSコードスニペットが登場してから2ヶ月後、2019年10月のアップデートで「デザインスペックでは重なり合った下位の要素にアクセスできない問題」が解決されました\(^O^)/

右クリックメニュー、またはキーボードを使用すれば、下層のレイヤーにアクセスできるようになりました。

動画のように、要素の上で右クリックすると、その地点に存在する要素の一覧が表示されます。一覧から該当の要素をクリックすると、その要素が選択された状態になります。

キーボードを使って選択するには、CmdまたはCtrlキーを押しながらアートボードをクリックし続けてください。その地点に存在する要素が、上から順に一つずつ選択されていきます。

あと1ヶ月早く、この機能をリリースしてほしかったですwww

コーダーに危機感を抱かせる新機能((((((((;゚Д゚))))))))

描画モード

2019年10月のアップデートでIllustratorやPhotoshopに備わっている描画モードがXDでも使えるようになりました。

デザイナーの方にとっては朗報だったと思うのですが、コーダー的にはちょっと危機感を感じています。なぜなら、CSSで表現する色、すなわちテキストカラーや背景色などの色情報を取得すべき要素には描画モードは使っていただきたくないからです。

あろうことか、Adobeさんの公式動画で、テキストに描画モードを使うアイデアを紹介してしまっています(O_O)(1分45秒らへん)。動画内では白いテキストにオーバーレイを適用していますが、その結果は不透明度を下げるのと大して違わないような…

テキストに描画モードを適用した例

テキストカラーや背景色を取得する要素に描画モードを適用していただきたくないワケをご説明します。

前図では、単色要素の上に白いテキストを配置しています。下の段のテキストには描画モード「除外」を適用してあります。下の段のテキストのカラーコードをプロパティインスペクターから取得すると、全て上の段と同じで、白になっています。この例のように背景が単色の場合は、スポイトツールを使ってカラーコードを取得することもできるのですが、細いテキストや小さいテキストの場合は、目一杯拡大しないと正確な色を読み取れないので、めんどくさいですよね。

背景にパターンを使っている場合、その上に載せた要素に描画モードを適用すると、スポイトツールでも色を抽出することができません。次図では、上の段は黄色い角丸長方形の不透明度を下げてあり、下の段は同じ色の要素に「乗算」を適用しています。

後者の場合は描画モードを使用するのではなく、茶色っぽい背景色の不透明度を下げることで、同じような状態になるようにしていただきたいのです。

実はCSSにmix-blend-modeという描画モード用のプロパティがあり、それを使用して、下の段のデザインを再現することは可能です。が、案の定、IEとエッジが対応していません…

クライアントとの間で了解が取れており、IEとエッジについてはデザイン通りの見た目にならないことを承知の上で、かつ可読性が確保できる状態ならばmix-blend-modeを使用しても構いませんが、当面は使用は控えたほうが良さそうです。

背景にパターンを敷いている場合は、スポイトツールでも背景色を取得できない…orz
描画モードを設定した画像を書き出すときは要注意(゚д゚)!

画像に対して描画モードを使用するときも注意が必要です。

有色のアートボード上の画像に描画モードを適用し、画像単体で書き出すと、白背景の上に乗った写真に描画モードが適用された状態の画像が書き出されてしまいます。アートボートと同じ見た目になるように書き出すには、背景色と同色のオブジェクトと画像をグループ化しておかなければなりません。

これまでIllustratorやPhotoshopのデザインカンプに於いて、不用意に描画モードを使われて、デザイナーに殺意を覚えたことが少なからずあるのですが、XDには描画モードがなかったので、余計なことをされない!と喜んでいました。ですので、今後同じことが度々起こるのではないかと危惧しているワケなのです。

Web用のデザインカンプをつくるときは気をつけてくださいね(^^)/

コンポーネントのステート

プロトタイプを作る方にとって喜ばしい機能が2019年11月のアップデートで追加されました。ホバーしたとき等、何かアクションを起こした時の要素の変化を、とてもわかりやすく、簡単に実装することができるようになりました。

Photoshopのデザインカンプでホバー時の状態を表現する

IllustratorやPhotoshopのデザインカンプの場合は、レイヤーを分けてホバー時のデザインを別に作ってくださるデザイナーさんが多いです。ホバー時のレイヤーは非表示の状態にしてあることが多く、見落とさないようにレイヤーに色を付けておいてくださいます。それでも見落としますwww

XDではこういったものをプロトタイプで動きとともに表現することができるので、どのようなモノを実装したいのか、直感的に伝えられますよね。ただし、コレまでは細かな動きをプロトタイプに作り込むのは結構めんどくさかったと思います。

例えばトグルスイッチを表現する場合は、オンとオフの状態2種類のアートボードを作って、プロトタイプモードでアートボード間を行き来するように設定する必要がありました。こういった細かい動きを実装したい部分がたくさんあると、アートボードをいくつも作らなくてはならず、大変だったはず。それが、ステートの機能が追加されたことによって、一つのアートボードで同様の動きを実装できるようになりました。

ステート機能実装前のプロトタイプの作り方

次の動画では、ホバー時にマイクロインタラクションを付けた事例を紹介しています(1分37秒辺り)。この動きをWebページで実装するとなると、ちょっとめんどくさい気がしますが…

また、3分10秒辺りを見ていただくと、ステートの機能が実装される前は、プロトタイプづくりがどんなに大変だったかがわかります。トグルスイッチやハートアイコン、それぞれがオンとオフの状態のすべてのパターンのアートボードを用意して、それらをつなげてプロトタイプを作っていたんですね。アートボードを21個作って表現していたものが、一つのアートボードで済むようになったそうです。

こんなステキなステート機能に、どんな恐れを抱いているかというと…ステキな動きを簡単に作れすぎて、実装不可能もしくは大変めんどくさいステキなエフェクトが提示されやしないかと恐れおののいているワケです。

事実、Adobe XD ユーザーグループ名古屋 vol.4のワークショップを担当されたゆるふわきよしさんが、それはそれはたくさんのステキなボタンのサンプルを用意してくださいました。15個もw

うーん、コレを全部CSSで表現しろっていう実務案件があったらたまらんなーという思いをよぎらせたのは筆者だけだったのでしょーか…。めんどくさがりなんです。おまかせって言われたら、不透明度を下げるだけで済ませちゃうヒトなんです…。ジブンでマイクロインタラクションを考えることなんかぜんぜんしないナマケモノなんです。

とはいえ、ステキなアイデアの詰まったファイルを配布していただけた稀有な機会なので、それらのステキなボタンをCSSで再現してみました。ゆるふわきよしさんにソースコードとともに掲載する許可をいただいていますので、気に入ったものがあったら、ご利用ください。

XDを使えば、ちょっとした動きを簡単に表現できるので、コーディングベースでは思いつかないような奇抜なエフェクトが今後生まれてくるかもしれませんね(内心ヒヤヒヤ…)。

See the Pen hover effect by keiko (@kamekon) on CodePen.default

エンジニア的に一番ゾクゾクっとくる機能

ドキュメント履歴

2019年11月のアップデートの中で、「共同編集」がAdobeさん的にはイチオシである気はしますが、色んな所で話されていて割と有名な話なので、ココでは割愛します。

それよりも、エンジニア的にはドキュメントのバージョン管理ができるようになったことに、全身が震えるような喜びを感じますよ(*´∀`*)

Adobeさんイチオシっぽい「共同編集」を行うにはファイルをクラウドドキュメントとして保存しますが、そうすることで、もう一つできることが増えました。それがつまり、ドキュメントのバージョン管理です

アップデートが行われる前は、新規ファイルを作成した時、変更が発生すると、保存されるまでファイル名の右上にアスタリスクが表示されて、手動で保存するまで消えませんでした。そして、自動保存はされません(クラウドドキュメントではないローカルに保存したファイルを編集したときも同様の挙動になります)。

アップデート後は、新規ファイルを作成すると、勝手にクラウドドキュメントとして保存されるようになりました(ファイル名の前に雲のアイコンが表示されます)。変更が発生するとアスタリスクが表示されますが、すぐにクラウドに自動保存され、アスタリスクは非表示になります。

「内部エラーが発生しました」と告げながらフリーズする某ソフトウェアを目にして、呆然とするのと同じようなことは、今後決して起こりません\(^o^)/

オフラインの時、または別名で保存する時は、保存先を選べます。オフライン状態でクラウドドキュメントにしておくと、ネットが繋がったときにクラウドと同期されるようです。

2019年11月アップデート前、新規ファイルを作成時の挙動
2019年11月アップデート後、新規ファイルを作成時の挙動
オフラインの時、または別名で保存する時は、保存先を選べる

クラウドドキュメントをアプリで開くと、ファイル名の横に下向き矢印が表示されています。これをクリックすると、過去のバージョン一覧が表示されます。

過去のバージョン一覧

各バージョンのファイルを別ファイルとして開くことができます。

バージョンごとにファイルを別ファイルとして開ける

履歴は通常30日分しか保存されないのですが、バージョンに名前をつけておくと30日経っても消滅しなくなります。

ドキュメント履歴を筆者自身が使うことは余りなさそうです。ですが、この機能を使うことによって、非エンジニアの方々もバージョン管理の便利さに気付くきっかけになり、Web制作の現場に浸透していってほしいなあ、と思っています。未だに「gitってナニソレ美味しいの?」という顔をされることが多いのでw

バージョンに名前をつけておくとずっと保存できる

ディレクター・デザイナーに喜ばれそうな機能

CreativeCloudライブラリ連携の強化

これまで、イラストレータやフォトショップでCCライブラリに登録したコンポーネントをXDで使うことはできましたが、逆はできませんでした。それができるようになりました\(^O^)/

グループ名を付けてライブラリ内を整理することもできますし、色、グラフィック、文字スタイル、コンポーネントと、アセットの種類別に登録できるようにもなりました。

グループ企業でロゴやカラーを使い回すなど、大規模サイトを取りまとめているディレクターの方や、コンポーネントを整理して社内案件全てに使い回している制作会社の方には喜ばしい機能なのかなーと思います。

また、こういった機能を活用することによって、コンポーネントを意識したサイト設計の思想が浸透していく礎にもなるのではないかと、期待しています。

プロトタイプづくりの可能性が広がりそうな機能

複数のインタラクションのサポート

プロトタイプづくりの幅が広がりそうなのがこの新機能です。ひとつのオブジェクトに複数のインタラクションを定義できるようになりました。

次の動画では、カルーセルの動きを実装した用例が紹介されています。ドラッグしたときは横スクロール、クリックしたときは他のページに遷移と、一つの要素に対して異なる動きを設定しています。

とはいえ、コレ以外にどんな使い方があるのだろう…。ジブンで、プロトタイプを作ることがないので、ただただ謎が深まっていくばかりですが、きっと要望があったのでしょうね。今後なにかしら面白い用例が出てくるでしょう!

音声インタラクションの多言語対応

音声トリガー自体は以前からありましたが、2020年1月のアップデートで(ブログ記事には明記なし)、日本語を始め英語以外の複数言語でも機能するようになりました。
漢字仮名交じり文のトリガーをきちんと認識して音声に反応し、かつ漢字仮名交じり文スピーチ原稿も読み上げてくれます。

日本語音声は「たくみ」「みずき」から選べます(太郎と花子じゃないんだ…)。

Webサイトの制作現場では使用機会はなさそうですが、インタラクティブなプレゼン資料が作れそうな気もします。面白い用途を見つけて紹介してくれる方がそのうち現れてくれることでしょう。期待を込めて、参考リンクを掲載しておきます。

Illustratorを超えた機能\(^O^)/

星型シェイプの作成が可能に

2020年1月のアップデートで、XDがIllustratorにより近づきました。というか、超えてしまいました。なんと、星型シェイプの作成が簡単にできるようになったばかりか(今までできなかったんですね)、角丸の星が作れたり、星の頂点の数を変えたりもできるそうです。

これまた筆者が使用することは滅多になさそうではありますが、デザイナーの方の表現の幅が広がったのではないでしょうか。

グループ化した要素に余白が設定できるように(゚д゚)!

公式ブログでは「コンテンツに応じたレイアウト」と呼んでいますが、平たくいえば、要素にpaddingを設定できるようになりました。

文字数に応じて幅が増減するボタン、内包されるテキストの増減に応じて伸縮するコンテナ等が配置できるワケで、仮テキストを置いていたところに実際のテキストを入れたら収まらなくなっちゃったよーということが回避できるっぽいです。

ボタン等を固定幅のコンポーネントとして設計しているのか、文字数によって幅が可変のコンポーネントとして設計しているのか、その辺りをはっきり意識してデザインを制作してもらえるようになるのカモ。

CSSコードスニペットにはpaddingの設定は反映されないようで、ちょっと残念。ネガティブpaddingなどという、CSSではありえない仕様が存在するので、コードに反映するのが難しかったのかもしれません。

Web用制作ツールとして、どんどん便利になりそうなAdobe XD。ついにIllustratorを超える機能が現れたので、コレを機にWebデザイン制作ツールの乗り換えを検討してくれる方がどんどん増えることを切に願っております。

残念なお知らせ(O_O)

アップデートではいい事ずくめのXD界隈ですが、実は年末に、なんだか嫌なお知らせが来ていました。

今年の4月以降、スタータープランでは以下の3つのことができなくなるそうです。

  • リンクを共有
  • ドキュメントに招待
  • ローカル保存(ただし、クラウド保存、オフライン編集、クラウドからのコピーファイルのダウンロードは可能)

※該当箇所には「プレミアム」のタグが表示されます

※筆者はコンプリートプランは契約しておらず、XDは無料のスタータープランを使っています。

まず、共有用のリンクを生成することができません。

つまりデザインスペックを自分で作れません…すなわち、CSSのソースコードを取得する便利機能が使えなくなります。これまではスタータープランでも一つだけ生成できたのですが、それもできなくなるのでしょう。

また、デザイナーさんから受領したデザインカンプに関して問い合わせをする時に、プロトタイプのコメント機能を使用することがあったので、それが使えなくなるのはちょっと残念です。

いずれもデザイナーさんに用意してもらえばいいので、まあいいか。

そして、自分の作ったファイルに他の人を招待できない!すなわちAdobeイチオシの便利機能「共同編集」が使えない!

他の人から招待されれば共同編集には参加できるのでしょうか?

筆者の方から他のヒトを招待するようなファイルを作ることはまずないないので、まあいいか。

なんと!ローカルにファイルを保存できない!

Adobeの有料プランを一切契約していないと、2ギガ分しかクラウドストレージを使えないので、XDファイルを2ギガ分しか保持できないってことでしょうか?

フォトプランの契約があるのでまあいいか。

詳しくは公式サイトのドキュメントをご参照ください。