初心者のためのAdobe XD 基本的な使い方

osawaです。
今日はデザイン業務で初めて使用したAdobe XDについてご紹介したいと思います。
今回は基本的な操作のご紹介なので、初心者の方も実際に触りながら見てみてくださいね🎵

1 Adobe XDについて
2 Adobe XDの使い方

Adobe XDについて

Adobeが提供しているWebサイト等のデザインツールです。
デザイン作成以外にも、プロトタイプを作成したり、デザインの共同作業をすることもできます。直感的に操作できることと、動きが軽いことからデザイン作業をする際によく使用されるツールとして知られています。
Adobe XDは2023年1月に単体販売が終了していますが、Creative Cloudコンプリートプランには引き続き提供されているので、こちらから利用を始めることができます。

Adobe XDの使い方

ガイド線を引く

横からガイド線を引きたいときは、アートボード左端にカーソルを持っていき、◀I▶マークになったらクリックしながら表示させたいところに移動させます。
(ちなみに右端にカーソルを移動させても◀I▶マークは表示されるので反対からもガイド線を引くことができます。)

以下のような線が表示できたらガイド線を引く作業は完了です！

また、縦からガイド線を引きたい場合は、横からガイド線を引いた時と同様の方法で、カーソルをアートボード上部に持っていき、◀I▶マークになったらそのマークをクリックしたまま移動させることで､引くことができます。

反対にガイド線を削除するときは、ガイド線をクリックしたまま左端、もしくは上端に移動させてください。これで、ガイド線を削除することができます！

以上でガイド線を引く作業と削除する作業は終了です。
こちらのガイド線はデザイン作業でよく使用するので、ぜひ試してみてくださいね！

画像や文字をロックする

画像や文字をロックするとは、デザイン作業をする上で動かしたくないオブジェクトを固定させることです。ロックされたオブジェクトは、移動や編集ができなくなります。(もちろん、ロックを外せば、移動や編集が可能な形に戻ります！)

作業としては、ロックしたいオブジェクトを選択したまま、右クリックをします。
その後、表示されたメニュー内の「ロック」を選択します。ロックを設定したオブジェクトの左上に鍵のマークが表示されていたらロック完了です。

こちらはショートカットキーでも簡単にロックすることができます。
ロックしたい画像やテキストを選択し、ショートカットキー「command」 + 「L」を押して試してみてくださいね🎵

反対にロック解除する場合は、ロック解除したいオブジェクトを選択し、右クリックします。その後表示されたメニューの中から「ロック解除」を選択するだけで、ロックを解除することができます。

ショートカットキーの「command」＋「L」でもロック解除を簡単にすることができるので、ぜひ試してみてくださいね！

編集したデータを共有する

最後に、社内メンバーや外部の方にデータを共有したい時の方法をご紹介します。
まず、Adobe XDの上部に「共有」というメニューがあるので、そちらをクリックしてください。
その後、右側の上から3つ目に表示されている箇所を「リンクを知っているすべてのユーザー」に変更し、「リンクを作成」をクリックします。
クリック後は、リンクが自動生成されるので、そのリンクをコピーし、共有したい人に渡せば、編集データを共有することができます！

共有する範囲を「リンクを知っているすべてのユーザー」ではなく、「招待されたユーザーのみ」という選択もできるので、時と場合によって使い分けてください。
また、リンク作成後、リンク更新することもできるので、ぜひ活用してみてくださいね！