どうも、Web男子のら猫です。
Webに興味があってWebデザインをやってみたいけど、デザインソフトを持っていないという方。
基本的にWebデザインはデザインソフトで作ります。
代表的なデザインソフトはAdobe社の「Photoshop(フォトショップ)」や「Illustrator(イラストレーター)」。
ただ、手に入れるにはそれぞれ月額3,000円くらいかかります…
ちょっと高く感じちゃいますね。
そんな方におすすめなのが、同じくAdobe社のWebデザインソフト「Adobe XD(アドビーエックスディ)」。
高機能なのになんと無料なんです!(太っ腹)
そこで今回は「Adobe XD」の概要やメリット、導入方法、ちょっとした便利機能まで紹介していきますね。
目次
Adobe XDって何??
「Adobe XD」はウィキペディアによると、
Adobe XDは、アドビシステムズが販売しているベクターベースのプロトタイピング作成ツールである。
だそうです。
簡単に言うと、
Webサイトを簡単にデザイン・レイアウトできるソフトです。
できることはPhotoshopに似てるかな。
ちなみにAdobe XDはだいぶ前からあったのですが、実は僕も最近使い始めたというw
デザインはいつもフォトショなんだけど、
効率化のためにAdobe XDを使いこなしたい٩( 'ω' )وということで使ってみてる#一度挫折したけど#だいぶ出遅れ感 pic.twitter.com/AN2wLOOypE
— のら猫@のらくらし (@nora_nekooooo) 2019年5月19日
Adobe XDはどんなことができるの?
Webサイト(パソコン・スマホ)のデザインとレイアウトが作れます。(さっき言った)
…以上。
簡単に言うと、写真や文字、図形を組み合わせて自由にデザインを作ることができるんです。
![Adobe XDのデザインサンプル](https://media.andco.group/wp-content/uploads/sites/3/2d30a6f6473982ffb4b8badb548ea12ca36e77b2db99b9ced4a3cb2c837bf238.gif)
他にも色々とできることがあるのですが、ひとまずAdobe XDで使える便利機能をちょっとだけ紹介しますね。
繰り返しコピーできる(リピートグリッド)
好きな部分を自由に繰り返しコピーできちゃうんです。(縦横)
![](https://media.andco.group/wp-content/uploads/sites/3/f4e1e967cb17ac5b8ca07834d1eddcea6c472d7dfddb2391e8373293884fe1bc.gif)
これホント便利。
しかも、大きさとか余白とか感覚的に操作できるので簡単。
僕はこの機能に惚れてAdobe XDを使い始めたといってもいいですw
登録パーツを使い回しできる(アセット機能)
作ったデザインパーツ(ボタンとか)を登録しておけば、いつでも同じパーツを呼び出せるんです。
![アセット](https://media.andco.group/wp-content/uploads/sites/3/39f08706e30a5fec6637cd79862c214fa4f35cf7540afe816a5aa9f335e9b709.gif)
これもすごい便利だ。
パーツをたくさん登録しておけば、ほとんど手間なくデザインを量産できちゃいますね。
Adobe XDでデザインした完成イメージ(更新予定)
すごく分かりにくいかもしれないですが、完成イメージとしてはこんな感じ。
なんとかできた
(写真とかは消してあります)というかXDかなり便利。 pic.twitter.com/8nwgB6YmE0
— のら猫@のらくらし (@nora_nekooooo) 2019年5月19日
ほんとごめんなさい。
Adobe XDのメリット・デメリット
そんなAdobe XDなのですが、使った感じのメリット・デメリットをまとめてみました。
- 無料なう
- 動作が軽い
- 操作性がいい
- 便利機能がある
無料は説明の必要がない最大のメリットですね。
Photoshop・Illustratorは動作が重い(パソコンによります)ですし、操作性は使い慣れてないと難しいです。
その点、Adobe XDはかなり軽くて、複雑な機能がないので簡単に使えます。
僕が初めて使ってみたときも、何となくの操作でデザインできましたよ。
- 写真の編集ができない
今のところ、僕が感じたデメリットはこれだけかも。
Adobe XDはちょっとしたこと(トリミングとか)はできるんだけど、写真の明るさや色の調整とかはできません。
調整したい場合は、Photoshopで編集してAdobe XDに貼り付ける感じですね。
ただ、初心者の方にはそこまで必要ないですので、特にデメリットとして感じないかと思います。
Adobe XDの導入するまでの手順
では、さっそく「Adobe XD」をパソコンに入れてみましょう。
今回は「Adobe XDの無料スターター(無料パックみたいな意味です)」をAdobeサイトからダウンロードしてみます。
といっても、手順としてはたったの2つだけ。
【手順1】Adobeサイトで「XDを無料で入手」
まずはAdobeサイトの「Adobe XD」ページに入って、一番上の「XDを無料で入手」というボタンをクリックしてください。
![Adobeサイト(XD)](https://media.andco.group/wp-content/uploads/sites/3/440d9a1686c253e326b3510762630b1d4db94d0eb729bd4c54fca41c146e47cc.jpg)
Adobeサイトは以下のリンクからアクセス。
自動的にダウンロードが始まります。
【手順2】「Adobe XD」をインストール
ダウンロードしたXDインストーラを起動して、「Adobe XD」をインストール。
![XDインストーラ](https://media.andco.group/wp-content/uploads/sites/3/05767b92453f790a089a4a2292abb132a1ca88ba37a062d26974357ab5157338.jpg)
インストールが終われば完了です。
いやーお疲れさまでした(?)。
まとめ
今回は「Adobe XD」の概要もろもろと導入手順までご紹介しました。
無料で使えるだけでもありがたいですね。(僕の時も欲しかった…)
操作性はPhotoshopに似ているのでAdobe XDを使い慣れていたら、Photoshopも使いこなせると思います。
次はAdobe XDの具体的な使い方とかを複数回に分けてご紹介できたらなーと思っています、
以上、のら猫でした。