【 Photoshop・XD 】Adobeツールからのコーディング方法を解説!

【2022年最新】AdobeXD無料・有料プランについて|ダウンロード方法も解説

 

コーディング課題を始めるためにXDをダウンロードしたい!

けど、どのプランで始めたらいいかわからない…

こんなお悩みがある方は必読です!

基本的に初学者さんは無料プランで問題ないのですが、その後の使い方によっては有料プランが必要な場合も。

情報追記

→2021年途中から、XDの公式無料プランは無くなりました。(7日間の無料体験版のみ)

XD単体プランか、他Adobeソフト一式利用できるコンプリートプラン、どちらかを選択することになります。

Adobe公式サイトはこちらから

この記事ではXDのプランや、ダウンロード方法について詳しくご紹介します。

かつてあった無料プランのダウンロードページにも変更があり、少々分かりづらいので、ぜひこちらの記事を参考にしてくださいね!

記事を読んでダウンロードが完了したら、さっそくXDを使ってデザインカンプからコーディングをしてみてください!

初めてコーディングをする方におすすめの動画もご紹介します♪

XDの特徴 

XDの操作画面

Adobe XDとは、Adobe社が提供するWeb制作やアプリ制作に特化したデザインツールです。

直感的な操作性でデザイン初心者にも扱いやすく、動作が軽いのが特徴。まずはXDで出来ることをご紹介します。

デザイン作成

ワイヤーフレームからデザインまで一括で作成できます。

とはいえ、画像の複雑な編集はやはりPhotoshopに任せたいところ。

XDからPhotoshopで画像を開けば、編集した画像はそのままXDに反映することができ、連携がスムーズに行えます。

共同作業

デザインデータを共有し、リアルタイムで共同作業を行うことができます。

またコメント機能もあるので、フィードバックをその場で貰うことも。個人はもちろん、チーム開発にもおすすめのツールですね!

プロトタイプ作成

アートボード同士をつないだり、アニメーションを付けてプロトタイプを作成できます。

実際にブラウザ上でどのように動くかイメージを伝えることが可能です。

XDのプラン紹介

XDのプランは次の2つ。

  • XD単体プラン(1,298円/月)
  • Creative Cloud コンプリートプラン(6,248円/月)

現在XDを利用するには、「XD単体プラン」か「コンプリートプラン」、どちらか選択することになります。

XDは有料化した?無料のスタータープランについて

XDのプラン比較
以前の公式サイト掲載プラン

以前の公式サイトでは、上のようなプラン構成が掲載されており、月額無料の「XDスタータープラン」含め3つありましたが、

XD公式プラン比較表
現在の公式サイト掲載プラン(出典:公式サイト

現在は無料の「XDスタータープラン」が無くなっています。

「XD単体プラン」か「コンプリートプラン」の違い

「XD単体プラン」と「コンプリートプラン」の違いは下記の通りです。

月額料金
・XD単体プラン:1,298円/月
・コンプリートプラン:6,248円/月
ドキュメント履歴の保存期間
・ XD単体プラン:30日間
・コンプリートプラン:60日間
利用できるCreative Cloudアプリ数
・XD単体プラン:XDのみ
・コンプリートプラン:PhotoshopやIllustratorなど含めた20以上利用可

デザインやコーディングで必要となる機能に差ははありません。

「XD単体プラン」「コンプリートプラン」どちらを選んだらいい?

選択したプランによってツールとしての機能に差が出るわけでは無いため、自分にとって必要な制作環境を考慮して選択すべきです。

コンプリートプランがおすすめなのはこんな人
  • 画像加工作業をしたい(要Photoshop)
  • イラスト作成・ロゴ作成をしたい(要Illustrator)
  • 動画作成やアニメーション作成をしたい(要Premiere Pro、After Effects)

他にもAdobe製品には魅力的なツールがたくさんあります。

デザイナー志望の方は、コンプリートプランがほぼ必要になるかと思います。

Web制作するにあたって、デザインカンプがPhotoshopやIllustratorで渡される場合もあるため、コーディングだけする方でもコンプリートプランは必要になる可能性は高いです。

とはいえ月額料金も高いので、学習中はXD単体プランで使い始めて、必要が出てきたときにプランを切り替えると良いかと思います!

XD単体プランは、7日間の無料体験期間があります。

Adobe公式サイトはこちらから

XDのダウンロード方法

さっそくダウンロードして使ってみましょう!

Adobeアカウント作成

XDを使う際はAdobeにログインしておく必要があります。

初めてAdobe製品を使う方は、アカウント作成しておきましょう。

XDアカウント作成画面

こちらからログイン画面に移動し、必要事項を記入したらアカウント作成をクリック。

本人認証のメールが届くので、リンクを踏めば作成完了です!

パッケージをダウンロード

XDのダウンロードはこちらからアクセスしてください。

XDダウンロードボタン1
XDダウンロードボタン2

プランのリストや、ヘッダー・本文内の「無料で始める」をクリックしてください。

XD決済画面1

決済画面にうつりますので、メールアドレスを入力して支払い手続きに進んでください。

最後まで進むとzipファイルがPCにインストールされます。

ソフトをインストール

xdインストーラー

インストーラーをダブルクリックし、手順にしたがってインストールしていきましょう。

使い方を学びながら早速コーディングしてみたい!という方は、こちらの動画がおすすめです★

まとめ

XDのプランの違いや、ダウンロード方法について解説しました。

シンプルな操作性なので、使い始めてみれば基本操作はサクッと覚えられると思います。

使い方はほぼOKだよ、と言う方はコーディング課題にぜひ挑戦してみてくださいね!!

【コーディング課題】XDからコーディングをしよう【初級編】
【Udemy】期間限定セール開催中!年内最高クラスの割引率!
こちらからチェック
【Udemyセール開催中!】年内最高クラスの割引率!
記事をチェック