XDの2018年9月のアップデートが公開されました。今回のアップデートでは、レスポンシブデザインの制作を効率化する機能や、プロトタイプの遷移のトリガーにタイマーが追加されるなど、XDでできることの幅が更に広がるようなアップデートが含まれています。XDのアップデートによってどんなことができるようになったのか、アップデートの詳細をご紹介していきたいと思います。XDアップデートでは、下記のような機能や改善が追加されました。XDでできることの幅を広げるアップデートとなっていて、ぜひ制作フローの中で活用していきたい機能となっています。それぞれの機能についてご紹介していきましょう!レスポンシブリサイズhttps://helpx.adobe.com/jp/xd/help/whats-new.htmlWebサイトのデザインを行う上で、レスポンシブデザインの対応は必須です。XDでは、画面サイズごとのデザインを作成しなければなりませんでしたが、今回のアップデートで、要素の配置を崩さず、レスポンシブにサイズを変更できるようになりました。慣れるまでは少し時間がかかってしまいますが、一度使い方を覚えてしまえばレスポンシブデザインを効率よく作成することができるようになり、デザイン制作のプロセスを改善することができます。このようなスマホサイズのデザインをリサイズした場合にどのようになるのか見ていきましょう。タブレットサイズにリサイズした場合に、下記のようになります。画像にある通り、2つのカードのうち上側はレスポンシブリサイズを適用していて、下側は適用しなかった場合の表示です。レスポンシブリサイズを適用した場合は、カードの左右のマージンが一定に保たれていたり、四角のタグの表示も崩れずに表示できています。下側のカードは左右に引き伸ばされてしまっており、全体的にデザイン崩れてしまっていますね。このように、レスポンシブリサイズを上手く活用することにより、異なるデバイスのデザインを並行して進める場合に効率よくデザイン制作が作成できるようになります。テキストはそのままではサイズを変更することができませんが、SVGデータに変換して「幅を固定」「高さを固定」のチェックを外せば、サイズに合わせて自動で拡大ができるようになります。タイマートランジション(時限式トランジション)https://helpx.adobe.com/jp/xd/help/create-prototypes.htmlプロトタイプでの遷移のトリガーがこれまでは「タップ」だけでしたが、新たに「時間」をトランジションのトリガーに選択できるようになりました。XDのプロトタイプで再現できます。下記のようなループアニメーションを作成できるようになりました。XD上に入力した文章のスペルや文法に誤りがある場合に、それを分かりやすく表示してくれるようになりました。現時点ではまだ日本語に対応できていないようですが、英語などではスペルチェックが使えるようになっています。XD上でプロトタイプをブラウザで確認する時に、アートボードのサイズがWebサイズだった場合の表示方法が改善されました。Webブラウジングの体験に近づけるため、Webサイズのプロトタイプの場合は、プロトタイプの上端がブラウザ画面の上端に表示されるようになりました。ブラウザの画面幅よりも大きなアートボードをプレビューする場合には、画面サイズに合わせてアートボードが縮小して表示されるようになっています。現役デザイナーがおすすめする独学でWebデザインを勉強する最短の方法Webデザインを勉強したい!と思う人は多いかもしれませんが、学校で習う勉強と違って正解が1つではないため、決まった勉強法が無く独学で勉強することが比較的難しいです。日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。