1. Home
  2. クリエイターズMAGネット
  3. 第1回 Adobe XDについて知っておきしょう!修正や確認などWebの現場での時短も可能!今からでも全然間に合うXDのメリットデメリット紹介&モヤモヤ解消

第1回 Adobe XDについて知っておきしょう!修正や確認などWebの現場での時短も可能!今からでも全然間に合うXDのメリットデメリット紹介&モヤモヤ解消

Adobe XDについて知っておきしょう!修正や確認などWebの現場での時短も可能!今からでも全然間に合うXDのメリットデメリット紹介&モヤモヤ解消

Web制作が断然早くなる!
まずはとにかく知ってください、XDの素晴らしさ。

Adobe XDと聞いて、「ああ、あれね」とピンとくる方もいれば、まだまだ全然どんなアプリケーションかもイメージが付かない人も多いのではないでしょうか?

今回はそんなAdobe XDの最初の最初の超入門的な話から、Adobe XDを導入してみようかなとなってもらいたく、まとめて解説していきます。特にWeb制作の現場では使って損はないツールですので、ぜひこの機会にAdobe XDに触れてみてはいかがでしょうか。

第1回の今回は、XDが全然初めての方、初心者でなんとなく触っている方に向けた内容になっています。とにかくXDを知ってもらって、そのメリットや使い勝手の良さを実感してください。そして実際に仕事での現場で活用してみてほしいです。

Adobe XDはそもそも何をするもの?

それでは、XDについてどんなアプリケーションなのか、説明していきましょう。

<Adobe XDの画面>
<Adobe XDの画面>

Adobe XDの紹介文でよくあるのが、PhotoshopやIllustratorとは違って「効率的・直感的に操作ができるので、初心者でも簡単に使える」ツールというもの。そして共同作業にとても向いているといった説明がされることが多いです。

しかしこの説明ですと、なんとなく簡単に使えるツールだけど、「じゃあ実際に使おうかな」とまでいかない人も多いのかなとも感じます。PhotoshopやIllustratorで作れていたら尚更そう思われるのではないでしょうか?

もう少しXDを使うメリットについてわかりやすく表現しますと、以下のようなことが挙げられます。

  • デザイナーではない人(ディレクターや初心者)でも気軽に使えるデザインツール
  • 特にUI/UX制作に便利と言われているけど、Webサイトを作るのも容易
  • Webサイトは、パソコン・タブレット・スマートフォンの画面を作る場合でもとても簡単
  • ワイヤーフレームや簡単な資料を作るのにも便利
  • 作ったものを共有しやすく、ディレクターやクライアントにデザインチェックしてもらうのが楽
  • デザインチェック時に画面推移やボタンの動きなどが確認できる

いかがでしょう?
メリットたくさんのXD、便利で使いやすそうだと感じていただけたでしょうか。

実際何をするために使われてるの?

では、実際にどういうふうに使われているのかご紹介しましょう。Web制作の現場で見るとわかりやすいです。

<制作現場で役立つAdobe XD>
<制作現場で役立つAdobe XD>

1. デザイナーではない人が使えるのでディレクターも触れる!

XDの大きな特徴としては、PhotoshopやIllustratorにない手軽に作れちゃう便利さです。これは少し勉強すればディレクター職の人でも簡単に使えるツールです。

なので例えば「こういうふうに作って」というディレクターの指示もXDで作れて、それをそのままデザイナーに共有されて、続きを作れてしまいます。
簡単なものだとドラッグだけで作れてしまうので、ワイヤーフレームをディレクターが、そこからデザイナーが作り上げるといった、同じツールで完結できるので便利です。

2. UI/UXに特化してるだけでなく、WEBサイトが作れる!

ここが勘違いポイントで導入しない人も多いのですが、UI/UXの現場だけでなくWebサイトのデザインがこれで作れます。そんなことから普通にWeb制作会社で導入されているところも増えてきました。

前述したように、Webサイトは、パソコン・タブレット・スマートフォンのそれぞれの画面をとても簡単に作ることができます。レスポンシブのデザインが自動的に変換できる機能もあります。

3. 共有しやすく、デザインチェックが楽

XDの特別な特徴でいうと、共有性が高いところです。

PhotoshopやIllustratorでWebデザインを作成したら、ディレクターやクライアントにチェックしてもらうときには画像を書き出して、メールや共有アプリなどで見てもらうことになりますが、XDではオンライン共有ができ、デザインが表示されるURLを書き出してそのURLをチェックしてもらいたい人に伝えるだけで完了します。

一番の利点は、XDを持っていなくても確認することができるし、ブラウザで見るので実際のサイトに近いイメージでチェックすることができます。

またオンラインではセキュリティ面で不安な場合は、ページへの埋め込み共有もできるので、Basic認証などでパスワード保護してクライアントに見せることも可能です。

そして、リンククリックでページ移動もできますし、アニメーションの動きも確認できるので、本当に実際のWebサイトとしての動きを、共有・確認することができます。

デメリットもある

<XDのデメリットを知るともっと使えます>
<XDのデメリットを知るともっと使えます>

便利なXDですが、その反面で機能をギュッとシンプルにしている分、できないこともあります。そこをしっかり理解することで、さらにXDを使いこなすようになれます。

細かなデザインはできない

例えば、ボタンは作れますが、バナーを作るのには機能不足です。テキストも加工したものというのは作りづらく、あくまでブラウザ表示を考えたテキストの設計をする必要があります。

このことから、凝りに凝ったリッチなデザインには向きませんが、シンプルでスマホなどで見やすいWebサイトを作るには十分機能を発揮できるツールだというのがわかります。

XD、他にデメリットがあるかというと、とても細かいところで見ると個人で不満点はあるかもしれませんが、一般的に考えてこの程度しかありません。どんなデザインを作るかしっかり組み立てれば何も問題なくWebデザインに活用できます。

まとめ

今回は、Adobe XDで何ができるか、導入するに値するツールなのかについて解説しました。結論としては、ワイヤーフレームやシンプルなWebサイトにはとても有効なので、Web制作の現場、特にチームで制作する会社などで活用できるツールだと言えます。

第2回ではさらにXDの理解を深めるために、Webの現場で起こるモヤモヤなどを取り上げて、そこでAdobe XDがどう役立つかを解説していきます。

Webデザイナー、ディレクターを目指して勉強中の方、またクリエイターとして現職でバリバリ活躍しながらステップアップの転職をお考えの方にも知っていて損はないAdobe XDについてシリーズでお届けしますので、次回もお楽しみに!

また、Adobeの各ツールのスキルを活かした仕事をお探しのクリエイターの皆さんにお薦めなのが、トリサンクリエイター関西です。クリエイティブ職に特化して転職支援を行っており、大阪をはじめとした関西エリアに強い地域密着型の転職エージェントです。
ステップアップの転職を考えているクリエイターの方は、一度無料カウンセリングで相談してみてはいかがでしょうか。

トリサンクリエイター関西への相談はこちら

前田慎也

ライター:前田慎也

フリーランス歴12年のデザイナー・ディレクター。専門学校や職業訓練校での指導実績やセミナー登壇など多数。クリエイターの働き方稼ぎ方について共有する100名規模イベント「カセグーン」を主催するなどイベントの企画運営も行う、幅広いなんでもマルチクリエイター。

Latest Posts

クリエイターズMAGネットの最新記事

最新記事一覧へ
クリエイター・エンジニアの
転職サポートはこちら‼︎
無料登録