1. HOME
  2. ブログ
  3. イメージを形にしやすい!? Adobe XDのご紹介!

イメージを形にしやすい!? Adobe XDのご紹介!

みなさま、こんにちは!

ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する

『いせ』です。

皆様お盆はどのように過ごされましたでしょうか?
私は感染拡大防止を考え、
帰省は控えて家でのんびり過ごしていました。

尚、弊社は昨日まで夏季休業とさせていただきましたが
本日から平常通り営業いたします。


さて、今回はAdobe製品 XD の
ご紹介をさせていただきます!

PhotoshopやIllustratorは
よく耳にするかと思いますが、
XDをご存じの方は少ないのではないでしょうか。

そこでXDはどんな機能が付いているか、
どういう点が便利なのかをご紹介します!

-目次-
1.Adobe製品 XDの概要
2.便利な「3D変形機能」の使い方を紹介!
3.便利な「コンポーネント機能」の使い方をご紹介!
4.便利な「コメント機能」の使い方をご紹介!

1.Adobe製品 XDの概要

まずXDの基本情報を押さえておきます。

・Adobeが販売しているベクターベースのプロトタイピング作成ツール。
・デザイン制作に主に使用。
・PhotoshopとIllustratorなどのCreative Cloudからの読み込みができる。
例)Illustratorで作成したオブジェクトをコピー → XDに直接ペーストが可能

デザイン制作といえば
IllustratorやPhotoshopが一般的かと思いますが、
XDも、Illustratorなどにはない機能があり
デザイン制作において活躍する便利なツールです!

XDの主な機能はこちら!

・3D変形
・コンポーネント
・コメント機能

他にも、XDには便利な機能が搭載されていますが
今回はこの3つの機能が、
いかに便利なのかご紹介してまいります!

2.便利な「3D変形機能」の使い方を紹介!

それでは、早速機能についてご説明していきます。

3D変形とは

文字や図形など
オブジェクトを移動または回転し、奥行きを加え、
遠近法を活用した作品に見せることが出来る機能です。

Illustratorにも3D機能が備わっていますが、

XDでは、CGのような
立体的なオブジェクトの作成ではなく
オブジェクトそのもの
3D化して遠近感を演出する機能となります。

3D変形と聞いたら編集が大変では?と
感じる方もいるのではないでしょうか。

しかし、実際は少ない操作で遠近感を演出できます!

操作方法
① 3D化したいオブジェクトを選択
② 操作画面右側にある3Dキューブアイコンと呼ばれる
箱のようなマークをクリックして3D変形を有効にする
③ オブジェクト中央に表示された、コントロール機能を使ってオブジェクトを回転・移動する

なんと、たったこれだけ!

私自身、
この機能をあまり使ったことはないのですが、
デザイン制作の幅が広がりそうな機能だと感じております!

3.便利な「コンポーネント機能」の使い方ををご紹介!

サイトのデザイン制作において
検索バーなど同じ形のオブジェクト
制作画面内の数か所に設置することは
よくあることではないでしょうか?

しかし、それらをコピー&ペーストした後、
デザインの変更が生じた場合、
その都度、同じオブジェクトを
修正する手間が発生してしまいますよね。

そういう時、XDでは

一度作成したオブジェクトを「コンポーネント」すると
デザインの修正があっても、
コピー&ペーストしたほかのオブジェクトにも
自動的に反映されるのです!

そのため、修正などの反復作業時間の
大幅削減が可能です!

さらに、コンポーネント化したいときは
オブジェクトを右クリックして
「コンポーネントにする (Ctrl+k) 」を
押すだけなので操作も簡単!

私もよくこの機能を使いますが、
サイトのワイヤー制作の時では
ヘッダーやフッターなどの修正
このコンポーネントが大いに役立ちました!

4.便利な「コメント機能」の使い方をご紹介!

・3D変形
・コンポーネント

この2つの機能をご紹介しましたが、
XDの機能で一番便利な機能

「コメント機能」について、

・何が便利なのか
・コメントの記入方法
2点ご紹介します!

一体何が便利なのか?

コメント機能とは簡単に説明しますと、

共有したいXDをリンク作成することで
XDを持っていない人でも、
リンクを共有すれば
WEB上でコメントを載せることが出来る機能です!

例えば、
作成中のデザインに関して誰かに意見を聞きたいとき、

IllustratorやPhotoshopでは
データ書き出し→保存→共有
というように工程を踏んでいました。

しかし、意見というのはすぐには来ないもので
待っている間にデザインを変えたら
再度、上記の工程を踏み共有を行う必要があり
手間がかかります。

ですが、XDでは

データ書き起こしなどの手間を省くことができます。
リンクを作成することで簡単に共有ができ、
リアルタイムでコメントを記入・閲覧することが可能です!

また、一度リンクを共有すれば
意見を待っている間にデザイン変更しても、
「リンクを更新」することで再送しなくても
最新の状態を見てもらうことができます!

私自身、この機能は時間短縮に便利なため
大変重宝しています。

コメントの記入方法

では、実際にXDのリンクが送られてきた場合、
どのようにコメントを記入するのか説明していきます。

まず共有されたリンクを開きます。
そうすると画像のような画面が開きます。

画面右上のピンマークをクリックして
各当する場所に押し、コメントを記入します。
そうすると、コメント欄に表示されます。

しかも
共有した側であるAdobeアカウントを持っている人は
コメントされたときに通知も来るので
すぐにチェックすることができます!

Adobe製品は一見操作性が難しいですが
一度使えば、とても便利だと実感します。


いかがでしたでしょうか?

今回はXDの機能についてご紹介しました。
XDを使う際や機能比較などのお役に立てますと幸いです。

過去の記事ではPhotoshopのご紹介もしていますので、
是非そちらもチェックしてみてください♪

今度はIllustratorのご紹介もしていきたいと思います!

最後までお読みいただきありがとうございました。

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2021年8月
« 7月   9月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031