こんにちは、森和恵です。不要不急の外出を控え続けて、一か月以上が経ちましたね。
せっかく時間があるのだからと、手つかずだったことに時間を振ってみました。
ということで今回は、昨年夏より追いかけていなかったAdobe XD（V23～V28）のアップデート情報を調べてみました。
●Adobe XDとは画面レイアウトに特化したソフト
Adobe XDとは、ディスプレイに表示する画面をレイアウトすることに長けたソフトです。
【デザイン、レイアウト、プロトタイプをすばやく作成、共有 | Adobe XD】
https://www.adobe.com/jp/products/xd/details.html
XDは、同社のIllustratorによく似た操作感ですが、リピートグリッド・コンポーネント・ステート・レスポンシブサイズ変更など、ウェブサイトやアプリの画面を作るのに便利な機能を持ち合わせています。
日本の制作現場では、PhotoshopやIllustratorを用いてデザインカンプを作ることが多いと聞きますが、これらと比較してXDの方が「機能が少ない分、操作の習得が早い（学習コストが低い）」、「ソフトの動作がとにかく軽い」、「デザインデータの共有がしやすい」などの利点があり、利用者が急増しています。
XDをまだ使ったことない方、どんな感じのソフトかをざっくり知りたい方は、次の動画をご覧になってみてください。
【Adobe XD 入門 解説動画】
※3月29日までの期間限定公開
また、XD22（2019年8月）までのアップデートについて、次の再生リストで動画を公開しています。
【［検証］Adobe XDアップデート】
https://www.youtube.com/playlist?list=PL7LtdGFp5DwR6RVe3q0p7Y8fia-iExJnU
●XDのアップデート情報を収集するには、この3つをチェック！
XDはアドビソフトの中では歴史の浅いソフトで、機能追加や改善が活発に行われています。昨年は、9回のアップデートがありました。
XDの新機能を追いかけないでしばらくほおっておくと、がらっと様変わりするので、定期的に新機能の確認をおすすめします。
アップデート情報は、次の3つのURLから情報をチェックしておけばOKです。
▼最新機能 | Adobe XD
https://www.adobe.com/jp/products/xd/features.html
※正式にリリースされた2017年10月から、新機能が年表のように紹介されています。
▼新機能の概要 | Adobe XD の最新リリース
https://helpx.adobe.com/jp/xd/help/whats-new.html
※新機能の詳細を確認するには、こちらのリンクをみるのがおすすめです。
▼[連載] Adobe XD アップデート - Adobe Blog
https://blogs.adobe.com/japan/serialization/adobe-xd-update/
※アドビスタッフや有識者によるコラムが掲載されています。
●XD23 では「ブレンド機能」が追加
2019年10月のアップデートでは、バージョン23になりました。
【Adobe XD 2019年10月アップデートリリース！ - Adobe Blog】
https://blogs.adobe.com/japan/cc-web-xd-october-2019-update-blend-modes-shortcuts-more/
バージョン23の新機能の目玉は、「ブレンドモード」でした。
ブレンドモードとは、重なったレイヤーにおける「色の合成」機能です。Photoshopでは、レイヤーの「描画モード」と呼ばれています。
例えば、ブレンドモードを「乗算」で重ねると、ふたつのレイヤーの色を掛け合わせるため、色が濃くなります。
この機能が加わったことで、表現力がアップし、他のソフトとのデータ互換がより近づきました。
また、［shift］＋矢印キーで、選択オブジェクトを10pxづつ移動できるようになったり、［ctrl］（［command］）キーを押しながらクリックで順次背面のオブジェクトを選べるようになったりと、Illustratorと同じような操作が加わり、作業効率がアップしています。
●XD24は、大型アップデート！
2019年11月のアップデートでは、バージョン24になりました。
【Adobe XD 2019年11月アップデートリリース！ - Adobe Blog】
https://blogs.adobe.com/japan/cc-web-xd-november-2019-update-coediting-more/
Adobe MAX 直前のアップデートということもあって、多くの機能が追加されました。
○コンポーネントのステートによる、ホバートリガー指定が可能に
オブジェクトにホバー（：hover）状態が指定でき、ボタンにマウスが重なったときに色を変更するなど、ホバーに対するインタラクションが可能になりました。
○オブジェクトに複数のインタラクション（動き）
例えば、オブジェクトを「タップ（クリック）した時」と「特定のキーを押した時」の両方で画面遷移をするなど、ひとつのオブジェクトにインタラクションを複数指定できるようになりました。
○XDからCCライブラリへの「追加」が可能に
XDではCCライブラリからの読み込み専用でしたが、コンポーネント、グラフィック、カラー、グラデーションおよび文字スタイルを、CCライブラリに追加ができるようになりました。
※ただし、追加した情報の編集はできないので、登録したっきりになります。ちょっと残念。
○「共有ボタン」が「共有」タブに
右上にあった「共有ボタン」が、左に移動し「共有タブ」となりました。
共有機能では、プロトタイプ公開時に「ホットスポットのヒント、コメント、ナビゲーション制御、全画面表示、デザインスペック」の閲覧権限を自由に変更できるようになりました。
例えば、「プレゼンテーション」では「閲覧は自由にできるが、コメントはつけられない」、「デザインスペック」では「閲覧もコメントもできるが、全画面表示ができない」のように閲覧権限を選択できます。
○クラウドドキュメントの共同編集
クラウドに公開したXDドキュメントを、招待した複数人で編集ができるようになりました。現在β版での提供ですが、今後より一層のバージョンアップが期待されます。
○XD26 では「コンテンツに応じたレイアウト」が可能に
2020年1月のアップデートでは、バージョン26になりました。
【Adobe XD 2020年1月アップデートリリース！ - Adobe Blog】
https://blogs.adobe.com/japan/cc-web-xd-january-2020-content-aware-layout-plugin-apis/
バージョン26の新機能の目玉は、「コンテンツに応じたレイアウト」でした。
「コンテンツ対応のレイアウトの作成」とは、グループ化されたオブジェクトのパディング（余白）を固定し、レイアウトを保つ機能です。
例えば、前面のテキストオブジェクトと、背面の四角形で作成したボタンをグループ化し、プロパティの［パディング］をオンにすると、「コンテンツに応じたレイアウト」機能が有効になります。
この機能が有効になっていると、文字を追加してテキストオブジェクトが長くなるのに合わせて、背面の矩形オブジェクトも長くなり、グループ内の余白が保たれます。
その他の追加として、多角形ツールに「スター比率」が加わって、「星型」のオブジェクトが描けるようになりました。
○XD28 では、「アンカーリンク」が可能に
先日（2020年3月）のアップデートでは、バージョン28になりました。
【Adobe XD 2020年3月リリース！ - Adobe Blog】
https://blogs.adobe.com/japan/cc-web-xd-march-2020-audio-prototyping-anchor-links-more/
バージョン28の新機能の目玉は「アンカーリンク」でした。
「アンカーリンク」では、同じアートボード内のオブジェクトの位置へ移動するリンクが設定できます。
これにより、ランディングページなど縦に長いウェブページのデザインで、ページの途中にリンクさせられます。
また、タップ時に「オーディオを再生」させたり、「複数のアクション」が指定できたりするようになりました。
この機能追加によって、「ボタンをクリックしたときに音を馴らしつつ、画面遷移させる」というインタラクションが指定できます。
その他、細かいけれどできたら超便利な「右クリックで画像を置き換え」たり、「エリア内テキストの高さの自動調整」もできるようになっています。
……というわけで、今回はここまで。
別件で忙しくて、夏～秋までXDのバージョンアップをまったく見ていなかったのですが、かなり大きく変化していて驚きました。
これまでのアドビソフトと異なり、ユーザーの声を聞きながら「みんなが便利に使いやすくなるように改善している」様子がわかって、楽しいですね。
学習コストが発生するのでバージョンアップを躊躇してしまうことが多い中、XDのバージョンアップはいち早く試したい！ とみんなが思う気持ちがよくわかります。
ではまた、次回お目にかかりましょう！
(^^)
【 森和恵 r360studio ウェブ系インストラクター 】
mail：r360studio@gmail.com
YouTubeチャンネル：https://youtube.com/r360studio
サイト：http://r360studio.com/