Webデザイナー必見!AdobeXD導入方法を画像付きで解説

ロードマップ

「Webデザイン作成ツールのAdobeXDを導入したいけど、どうやってやればいいのかわからない…」
「プランが何個かあってどれを契約すればいいの?」

Webデザインの勉強中によくAdobeXDの名前を耳にすることが多いと思いますが、どのプランが良いのかどうやって導入すればいいのか、わかりにくいと思います。

そこで本記事では以下についてまとめました。

  • WebデザインでのAdobeXDの活用方法
  • AdobeXDの料金
  • AdobeXD購入方法から導入、起動まで

この記事をみるだけで、Webデザインで使用するAdobeXDを取り入れる意味を理解し、導入から起動するまで一緒に進めて行くことができます。

Webデザイナーとして仕事をスムーズに進めるAdobeXDを導入して仕事の幅を広げていきましょう!

ぜひ最後まで読んでみてください。

WebデザインでAdobeXDを取り入れたほうが良い理由

Designed by Creativeart / Freepik

Webデザインでヒアリング後に、まず作成するワイヤーフレームからAdobeXDを使用すると、以下の利点があります!

  • Webに詳しくないクライアントでも安心
  • 共同編集可能
  • ワイヤーフレーム作成からデザイナー、コーダーまで共有がしやすい

デメリットは有料のツールということです。

デメリットを踏まえても取り入れた方が案件をスムーズに進めていけるのでメリットをみて、そのまま一緒に導入していってください。

Webに詳しくないクライアントでも安心

AdobeXDを持っていない人でもアクセスできるのが特徴です。

データを書き出して送ったりせずともワイヤーフレームからデザインまで、共有されたURLをクライアントがクリックするだけで実際の画面と同じように見ることができるのでWebに詳しくないクライアントでもワイヤーフレームやデザインの確認を簡単にする事ができます!

共同編集可能

共同者を追加という項目があり、共同編集したい人を追加すると、リアルタイムで同時に編集する事ができます。

チームでの作業や会社内での管理、今どこまで進んでいるかなど、お互いの作業状況がわかるのが安心です。

共有がしやすい

共有URLを発行する事でディレクター→デザイナー→コーダーまで簡単に共有することができます。

共同編集ではなく共有することで、コーダーは数値だけを簡単に図れる事でデザインを崩すことなくコーディングしやすくなります。

AdobeXDの使用プランを選択しよう

Designed by Creativeart / Freepik

実際にAdobeXDを導入する前に料金プランを把握していきましょう!

自分にあったプランを契約してみて下さい。

  • 料金プランの種類
  • 単体プラン
  • コンプリートプラン

料金プラン種類

Adobe XDを使用するには2つのプランがあります。

どちらのプランも14日以内の解約ですと全額返金されるので、試しに使用してみるのもいいと思います。

単体プラン

AdobeXDのみを試してみたい方は、とりあえず単体プランが良いと思います。

月々1,298円〜使用できるのでお試しで使用するにも手を出しやすい価格です。

XD単体プランはドキュメント履歴を30日間さかのぼる事ができます。

Adobe XDだけを一年間使用する事が決まっている場合は年間プランにするとさらに安くなります!

コンプリートプラン

Webデザイナーを目指して勉強中の方など、Photoshop・IllustratorとともにAdobeXDも使用したい方はコンプリートプランがおすすめです!

上記の3つ以外、画像内概要に記入されている20以上のアプリも使用することができます!

コンプリートプランは ドキュメント履歴を60日間さかのぼる事ができます。

AdobeXDの導入方法解説

Designed by Creativeart / Freepik

プランが決まったら実際に導入していきます!

今回は単体プランで説明していきますので、とりあえず試してみたい方も一緒に導入してみて下さい。

Adobeプラン選択画面

プランの選択

  1. 単体プランの購入するボタンをクリック
  2. メールアドレスを入力
  3. 支払い手続きへをクリック

支払い

  • クレジットカード情報を入力
  • 右下の赤線の所に先程入力したメールアドレスを入力(今後のログインアドレスになります。)
  • 注文するをクリック

パスワード設定

  1. 赤枠四角のパスワードを設定をクリック
  2. 次画面にパスワードを入力し続行をクリック
  3. インストールが始まります。
  4. これで導入完了です。

Webデザイナーが解説!AdobeXDの起動から新規作成画面

Designed by Creativeart / Freepik

インストールが完了したら、起動して新規ファイルを作成していきましょう!

AdobeXDの起動から画面の見方

AdobeXDのアプリをダブルクリックして起動しましょう!

起動すると上の画像のような画面がでてきます。

前回作成したものがある場合は、赤枠の最近使用したものから選択して起動することもできます。

新規ファイルの作成

 

スマートフォンサイズやWEBサイズがあらかじめ選択できるようになっているので、作成するものに合わせてクリックするだけです。

上部の赤枠内のマークを押すと更に細かい種類のサイズが見れますので、作成サイズにあったものをクリックしてください。

今回はWeb1920サイズをクリック!

作業を開始できるWeb1920サイズのアートボードが作成されました!

まとめ|Webデザイナー必見!AdobeXD導入方法を画像付きで解説

Designed by Creativeart / Freepik

本記事では、Webデザインで使用するAdobeXDについて以下の内容をご紹介しました!

  • WebデザインでAdobeXDを取り入れたほうが良い理由
  • AdobeXDの使用プランを選択しよう
  • AdobeXDの導入方法解説
  • Webデザイナーが解説!AdobeXDの起動から新規作成画面

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

AdobeXDを取り入れる意味を理解し、導入し新規作成画面まで一緒に進めて行くことができたと思います。

Webデザイナーとして仕事をスムーズに進めるAdobeXDを導入して仕事の幅を広げていきましょう!

コメント

タイトルとURLをコピーしました