webの話

これが無料?Adobe XDでWebデザインを簡単に作ってみよう!

これ無料?Adobe XDでWebデザインを簡単に作ってみよう!

どうも、Web男子のら猫です。

Webに興味があってWebデザインをやってみたいけど、デザインソフトを持っていないという方。

のら猫
のら猫
朗報です

基本的にWebデザインはデザインソフトで作ります。

代表的なデザインソフトはAdobe社の「Photoshop(フォトショップ)」や「Illustrator(イラストレーター)」。

ただ、手に入れるにはそれぞれ月額3,000円くらいかかります…

ちょっと高く感じちゃいますね。

のら猫
のら猫
できればお金をかけずにデザインやってみたい…

そんな方におすすめなのが、同じくAdobe社のWebデザインソフト「Adobe XD(アドビーエックスディ)」。

高機能なのになんと無料なんです!(太っ腹)

そこで今回は「Adobe XD」の概要やメリット、導入方法、ちょっとした便利機能まで紹介していきますね。

のら猫
のら猫
Windows・Macのどちらでも使えますよ!

Adobe XDって何??

「Adobe XD」はウィキペディアによると、

Adobe XDは、アドビシステムズが販売しているベクターベースのプロトタイピング作成ツールである。

だそうです。

のら猫
のら猫
うん…何言ってるか分かんない

簡単に言うと、
Webサイトを簡単にデザイン・レイアウトできるソフトです。

できることはPhotoshopに似てるかな。

ちなみにAdobe XDはだいぶ前からあったのですが、実は僕も最近使い始めたというw

Adobe XDはどんなことができるの?

Webサイト(パソコン・スマホ)のデザインとレイアウトが作れます。(さっき言った)

…以上。

簡単に言うと、写真や文字、図形を組み合わせて自由にデザインを作ることができるんです。

Adobe XDのデザインサンプル
のら猫
のら猫
よく分からなかったらすみません

他にも色々とできることがあるのですが、ひとまずAdobe XDで使える便利機能をちょっとだけ紹介しますね。

繰り返しコピーできる(リピートグリッド)

好きな部分を自由に繰り返しコピーできちゃうんです。(縦横)

これホント便利。

しかも、大きさとか余白とか感覚的に操作できるので簡単。

僕はこの機能に惚れてAdobe XDを使い始めたといってもいいですw

登録パーツを使い回しできる(アセット機能)

作ったデザインパーツ(ボタンとか)を登録しておけば、いつでも同じパーツを呼び出せるんです。

アセット

これもすごい便利だ。

パーツをたくさん登録しておけば、ほとんど手間なくデザインを量産できちゃいますね。

Adobe XDでデザインした完成イメージ(更新予定)

すごく分かりにくいかもしれないですが、完成イメージとしてはこんな感じ。

のら猫
のら猫
僕もまだ使い初めでして…サンプルがない…(後日追加します)

ほんとごめんなさい。

Adobe XDのメリット・デメリット

そんなAdobe XDなのですが、使った感じのメリット・デメリットをまとめてみました。

のら猫
のら猫
Adobe XDのメリット
  • 無料なう
  • 動作が軽い
  • 操作性がいい
  • 便利機能がある

無料は説明の必要がない最大のメリットですね。

Photoshop・Illustratorは動作が重い(パソコンによります)ですし、操作性は使い慣れてないと難しいです。

のら猫
のら猫
どちらかというとプロ用ですからね

その点、Adobe XDはかなり軽くて、複雑な機能がないので簡単に使えます。

僕が初めて使ってみたときも、何となくの操作でデザインできましたよ。

のら猫
のら猫
Adobe XDのデメリット
  • 写真の編集ができない

今のところ、僕が感じたデメリットはこれだけかも。

Adobe XDはちょっとしたこと(トリミングとか)はできるんだけど、写真の明るさや色の調整とかはできません。

調整したい場合は、Photoshopで編集してAdobe XDに貼り付ける感じですね。

ただ、初心者の方にはそこまで必要ないですので、特にデメリットとして感じないかと思います。

のら猫
のら猫
つまり、Adobe XDは最高。

Adobe XDの導入するまでの手順

では、さっそく「Adobe XD」をパソコンに入れてみましょう。

今回は「Adobe XDの無料スターター(無料パックみたいな意味です)」をAdobeサイトからダウンロードしてみます。

のら猫
のら猫
有料版もありますが、できることは無料版と変わりません。

といっても、手順としてはたったの2つだけ。

【手順1】Adobeサイトで「XDを無料で入手」

まずはAdobeサイトの「Adobe XD」ページに入って、一番上の「XDを無料で入手」というボタンをクリックしてください。

Adobeサイト(XD)

Adobeサイトは以下のリンクからアクセス。

自動的にダウンロードが始まります。

のら猫
のら猫
できれば、Wi-Fiが繋がる場所でやりましょう

【手順2】「Adobe XD」をインストール

ダウンロードしたXDインストーラを起動して、「Adobe XD」をインストール。

XDインストーラ

インストールが終われば完了です。
いやーお疲れさまでした(?)。

のら猫
のら猫
めちゃ簡単ですね!

まとめ

今回は「Adobe XD」の概要もろもろと導入手順までご紹介しました。

無料で使えるだけでもありがたいですね。(僕の時も欲しかった…)

操作性はPhotoshopに似ているのでAdobe XDを使い慣れていたら、Photoshopも使いこなせると思います。

のら猫
のら猫
機能的にも、無料のデザインソフトとしては一番おすすめです。

次はAdobe XDの具体的な使い方とかを複数回に分けてご紹介できたらなーと思っています、

以上、のら猫でした。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です