Design Growth Academyで学ぶAdobe XD【現役受講生レビュー】

いん子

こんにちは、”アラフィフ副業の研究員”もりのいん子です(^○^)

こちらは、自らもバリバリ現役50代のいん子が五十肩に鞭打ってお届けする、50代の、50代による、50代のためのネット副業情報サイトです。

今回はオンラインWEBデザインスクールDesign Growth Academyの特集第二弾。

Design Growth Academyでは、WEBサイトやLPの制作などに使用するソフト、AdobeXD(アドビエックスディー)についても詳しく学ぶことができます。

なので今回の記事では、スクールの講義内容とあわせ、AdobeXDがどういうソフトで、何ができるのかについてもご紹介

Design Growth Academy現役受講生として、他サイトにはないナマの情報レビューをお届けして参りますゾv

この記事は、こんな人におすすめです。

  • WEBデザインスクールで実際にどんなことを教えているのか知りたい
  • Adobeソフトに関心がある
  • Adobe XDというソフトで何ができるか知りたい
  • Photoshopは使ったことがあるが、他のソフトは使ったことがない
  • 50代でも何かITスキルを身につけたい
スポンサーリンク
目次

Design Growth Academyで学べるAdobe XDとは?

Design Growth Academyでは最初にデザインの基礎知識を学んだ後、デザインに必要となる各種ソフトについても学んでいきます。

Adobe XDは、講義の8日目から16日目の9日間の講義で取り上げられていて、デザイン関連のソフトのなかで一番最初に学ぶソフトとなります。

配信される講義動画を見ながらWEBサイトデザインを作りつつ実際の操作方法を教わっていくのですが、デザインソフトの中でもXDについては、かなりしっかり時間を割いてるなあという印象を受けました。

ソフトをぶっちゃけ一言で表すならば?

ヤマネさん

いきなりエックスディーとか言われても、何ができるソフトなのかさっぱりイメージわかないなあ。

いん子

確かにアルファベットのソフト名だけでは、何もわからないかも‥

XDは、一言で例えるならデジタル版スクラップブックです!

ヤマネさん

スクラップブックって、あれか、写真や記事の切り抜きを好きなところにぺたぺた貼るノートのことか?

いん子

そうそうv

スクラップブックだから、もちろん直接文字も書き込めます。

それに加えて、素材サイトから持ってきた画像や、同じAdobe社のソフトPhotoshop・Illustratorで加工した写真やロゴ、イラストなどを持ってきて貼り付け、ひとつの作品にまとめあげることができるんです。

紙のノートと違ってデジタルなのでいくらでも綺麗に修正可能。

そして出来上がったものを画像として書き出しすればそのままネット上で使えるので、XDは現在、webデザイナーさんがwebサイトを作るのによく使われてます。

実際、webデザインやアプリ開発に便利な機能もたくさんあります。

操作ツールがシンプルなので、Adobeソフトのなかではダントツに使いやすい優れものと言えるでしょう。

できること

Adobe XDはWebサイトやLP、モバイルアプリの設計等に使用されています。

XDでは大きく分けて、3つのことができます。

  • サイト、LPデザインの作成
  • 動きの要素も含めたサイト全体像の共有
  • ブラウザ上で共有相手とデザインを確認
LDってなあに?

LPとは、ランディングページのこと。

ユーザーが最初に訪問(ランディング)するページで、基本的には縦長で1枚もののホームページを指します。

主に商品の購入やユーザー登録などのために作成されるホームページなので、必ず申し込みのためのボタンが設置されるのが特徴です。

いん子

実はいん子、デザインのお勉強始めるまで、LPという言葉があることさえ全く知りませんでした。
(^◇^;)

XDはWEBサイトやLPのデザインの制作に使われています

XDができる前は、デザイナーはWEBデザインをクライアント(サイト制作の依頼者)と共有する際には、画像をJPEGなどの形式に書き出して共有していました。

そのやり方は現在でも変わりませんが、Adobe XDを使用することで、実際出来上がったWEBページでクリックしたらどこへ行くのかとか、リンクボタンにカーソルが触れた時の動きなどの動きの要素についてもイメージを共有することが可能になりました。

XDが登場したことで、実際にブラウザ上でどのように動くか、以前よりもイメージをより伝えやすくなったのです。

またデザイナーさんが、制作チームのメンバーやクライアントと、ブラウザ上で制作途中のデザインを共有することもできるようになりました。

共有方法は、XD上の「リンクを作成」のボタンをポチッとするのみと、実に簡単。

作成されたリンク先をお知らせすることで、共有相手にブラウザ上でデザインを確認してもらうことができるのです。

「ここをこう直したらいいんじゃないか」などのコメントを加えてもらうことも可能。

ちなみに、相手がAdobeのIDを持っていなくても問題なく閲覧できます。

特徴

Design Growth Academy 入学レポXD編

Adobeの他ソフトでできるような様々な画像加工ができないぶん、XDの機能はごくシンプル。

動作が軽いので、ストレスなくサクサクと使えるという特徴があります。

Photoshopのように、作業途中で動作が重くなり処理速度が遅くなることはありません。

また、プラグインを使えばさらに便利に使えるようになります。

ワイヤーフレーム作りに最適

ワイヤーフレームというのは、サイトの設計図のようなもの。

実際に制作する前にワイヤーフレームというワンクッションを置くことで、サイトに盛り込むべき内容の大まかな配置と、タイトルや文字の量、画像配置などを決めてクライアントや制作に関わるチーム仲間と共有し、サイトの出来上がりのイメージのすり合わせを行うわけです。

XDでは、便利なツールを使って簡単に素早く、このワイヤーフレームを作成することができます。

いん子

ワイヤーフレームって、こんな感じのもんですv

ヤマネさん

なるほどー!
確かにサイトの案も、ただテキストを並べるだけよりよか、こうやって図にした方が見てすぐわかる感じはするね〜。

いん子

ワイヤーフレームで配置と文面を決めておけば、あとはこのワイヤーフレームのコピーに画像を貼り付けていけば、実際にサイトデザインが出来上がっちゃう。

サイトデザインの下書きとしても使えるので便利なんです。

どこで手に入るの?

AdobeXDは、Adobe社の公式サイトで購入できます。

Adobe XD単体プラン:月々プラン 1,298円/月 もしくは年間プラン(一括払い)10,978円/年 (税込)

もしくはAdobe CC(コンプリートプラン)で購入することもできます。

Adobe CCの中にXDも含まれているので、コンプリートプランをお持ちの方なら追加料金なし、無料でダウンロードできます。

店頭でのパッケージ販売はありません。

いん子

Adobe CC購入の場合、実は公式サイトよりめっちゃお得に安く買うことができる裏技があります!

Adobe CCをお安く買い求める裏技については、こちらの記事で詳しく解説しています(^○^)

Design Growth Academyで学ぶAdobe XDのメリット

Design Growth AcademyではWEBデザインに必須となるAdobe社のソフト群のうち、まずはAdobe XDを最初に学びます。

それは、XDの機能がシンプルで、学習するに当たっても一番ハードルが低いから。

操作が簡単なので、初心者でも割と直感的に操作できて、覚えやすいのです。

意外と、XDを最初に学ぶWEBデザインスクールは多くはありません。

なかには、PhotoshopとIllustratorのみを学習範囲としているスクールも。

Design Growth AcademyではXDをWEBサイト・LPを作るメインツールとして位置付け、重点的に教えていく方法をとっていますので、初心者でも効率よくサイト・LP制作の技術を身につけることができるというメリットがあります。

いん子

XDが他ソフトに比べ簡単なのは、操作に使うツールを見てもわかりますよ。

ヤマネさん

へー、XDのツールって、たったこんだけなんだ‥

いん子

同じAdobe社のPhotoshopと比べると、ずいぶんメニューが少なめでしょ?

ヤマネさん

覚えなきゃいけないことも少なめそうだね
(^○^)

XDがあれば、ほぼ単独でLDやWEBサイトのデザインを作ることも可能。

ただ、画像の加工や文字の細かな配置まで行う機能はないので、細かなデザイン周りを調整するには、やはりPhotoshopやIllustratorなどの他Adobeソフトが必要になってきます。

実は、Photoshop・Illustratorも同じAdobe社製のソフトなので、基本的なツールの使い方やショートカットなどはXDとほぼ同じ。

XDを覚えてからなら、同様の操作パネルなので、やや難解な両ソフトもより早く理解できるという隠れた利点もあるんです。

Design Growth AcademyのAdobe XD教材はどんな内容?

Design Growth Academyでは、Adobe XDについて主に以下のようなことを学習します。

8日目:ソフトの概要、使用するメリットなど
9日目:基本操作説明
10日目からは、実際にXDを使って画像バナーを作り1回目の課題提出があります。
11日目:同じく画像バナー作成。素材サイトからの画像の取り寄せ・Illustratorのデータとの連携などの応用実務
12日目:WEBサイト作成時の情報設計について説明
13日目:XDを使いワイヤーフレーム作成
14日目〜15日目:13日目のワイヤーフレームをもとにWEBデザイン制作、ワークを効率化するプラグインについても説明
16日目:14〜15日目で制作したWEBデザインの、スマートフォン向けサイトを制作2回目課題提出。

この9日間で、Adobe XDの操作からワイヤーフレームの作成、サイトデザイン、スマートフォン向けサイトのデザインまで実務に求められる技術をピンポイントで習得できる内容となっています。

Design Growth Academyで学ぶAdobe XD教材の感想

Design Growth Academyでは、Adobe XDをメインのツールとして使い、部分的にPhotoshopやIllustratorで作ったパーツを組み合わせる形でWEBデザインをしていくように教えています。

つまり、加工が必要な画像やロゴなどはPhotoshopやIllustratorで作り、それらをXDの画面上でまとめ一つのサイトデザインとして完成させていくようなイメージ。

実際に学んだいん子の感想は、「Adobeのソフトを使えるようになりたいなら、まずXDから学ぶというのもアリだな!」というものでした。

(その点、Design Growth Academyのカリキュラム構成は理にかなってると言えます。)

いん子

うーんとね、Adobe XDを実際使った印象を例えるなら、めっちゃ自由度の高いCanvaみたいな感じに近いかな?

ヤマネさん

Canvaってアレだろ、簡単に画像や文字を組み合わせてバナーとか作れるって人気のWEB上のサービスだよね

いん子

XDもCanvaのようにほんとに簡単に操作できるし、そのうえphotoshopやIllustratorで別に作った素材を持ってきて重ねたり文字入れしたりと、自由にあれこれ加工できるからすごく便利なのよ。

ちなみに、パーツとして取り入れたPhotoshopなどの画像は、Photoshop上で修正すると即XD上のデザインにも反映されるなど、さすがAdobe同士でソフト間の連携は抜群

いん子のような初心者からしても、Adobe XDは操作系がシンプルにできてるぶん、「あれ、ここを加工するにはどのツールをどう使えばいいんだっけ」と悩むことなく、デザインに集中できるような気がします。

なので、何よりいじくるのが楽しい(笑)。

操作に悩むことなく、色々なデザインパーツをあちこちから引っ張ってきて、ワイヤーフレーム上に落とし込んでいく楽しさを味わえる。

そして、楽しみながら操作していくうちに自然とサイトデザインのキモも覚えてしまう

そんなところが、Design Growth Academyが提供するAdobe XD教材の優れた点だと思っています。

ただ、教材となる動画はどれも長いものが多いので、勉強はかなり多めの時間配分をする覚悟が必要でしょう

まとめ

今回は、「Design Growth Academyで学ぶAdobe XD【現役受講生レビュー】」と題して、オンラインWEBデザインスクールDesign Growth AcademyのAdobe XD講義についてレビューして参りましたが、いかがでしたか?

AdobeXDを活用することで、高いクオリティのデザイン制作をより効率的に行う実践スキルが身につきます。

手に職をつけたいアラフィフの皆様、ここは一つ勇気を出して、WEBデザインという新しい技術習得にチャレンジしてみるませんか?

XDは、Adobeソフトのなかでも一番初心者にやさしいソフトだと思います。

何より面白いですよv

今回はスクールで学ぶ講義のなかから、特にAdobeXDの教材内容を選んで取り上げましたが、Design Growth Academyでは他にもPhotoshopやIllustrator、またコーディングやUXなどについても幅広く学んでいけるカリキュラムを組んでいます。

いん子

現役受講生として、学習した内容については、引き続きガッツリとレポしていきたいと思いますのでどうぞお楽しみに〜v

私、いん子が受講中のWEBデザインスクールDesign Growth Academyについて特集した記事はこちらから

Adobe XD含めたAdobe社のソフトを格安で入手できる裏技については、こちらの記事で詳しく説明していますv

それでは今回も最後まで読んでくださってありがとうございます。

アラフィフ副業の研究員”もりのいん子でした(^^)

スポンサーリンク
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次
閉じる