【2020年決定版】はじめてWebデザインを始めるならこれ!初心者必見のWebデザイン用のソフトウェア

WEBデザイン
ヒロ
ヒロ

こんにちは!デザイナーのヒロです。

Webデザインをこれから始めたいけど、どのソフトウェアが良いかわからない…

そんな方のために、おすすめのWebデザイン用ソフトウェアがこの3つです!

  • Photoshop
  • Illustrator
  • Adobe XD

この3つのソフトウェアの使い方を覚えるのが、Webデザイナーとしてのスタートです!

ひとつひとつご紹介しますね。

Webデザインから写真のレタッチまで、幅広くどんなデザインにも使えるPhotoshop

Webデザインに限らず、デザイナーが使うソフトウェアで有名なのは、やはりPhotoshop(フォトショップ)ではないでしょうか?

Photoshopは、アメリカのソフトウェアの会社「Adobe(アドビ)」から出ている、写真を加工したり、レタッチ(補正)したりできるソフトウェアです。

写真加工だけでなく、ブラシ機能でお絵かきができたり、フォント(文字)を入れたりできるので、Webデザインやグラフィックデザインをする時によく使われたりします。

また、Photoshopは日本だけでなく世界的に多くのデザイナーに使われているので、まさにデザインをする上でスタンダードとなるツールです。

ロゴデザインやフライヤーなどの制作で使える、ベクター形式のIllustrator

もう1つ、覚えておきたいソフトウェアが「Illustrator(イラストレーター)」です。

IllustratorもAdobeという会社が出しているソフトウェアで、ベクター画像を作成して編集することができます。

「ベクター画像」という聞き慣れない言葉が出てきましたね。

ベクター画像の対となる言葉で、「ビットマップ画像」があります。

ベクター画像は、

点と線の情報が数値化して、コンピュターに描画させている画像のことです。

画像を大きくズームしたりしても、コンピュータが常に計算しているので、ベクター画像がボケたり、粗くなったりすることはありません!

反対に、ビットマップ画像は、点の集まりで構成される画像です。

小さな点それぞれが色を持っているので、きめ細かい鮮やかな画像を表現することができます。なので、写真はビットマップ画像がぴったりです!

写真を大きくズームすると、点が集まっていることがわかります。

つまり、Photoshopは、ビットマップ画像を加工・編集するソフトウェアでもあります。

Illustratorは、ビットマップ画像ではなく、ベクター画像を加工・編集することができます。

ベクター画像は、いくらズームしても粗くなったりすることがないので、

いろいろな制作物に入るロゴのデザインなどは、Illustratorが合っています。

また、フライヤー(チラシ)やポスターなど、紙に印刷しなければならないデザインは、ビットマップ画像ではなく、ベクター画像の方がきれいに印刷できます。

Webデザイナーは、実際にはWebデザインだけでなく、バナー・サムネイル・フライヤー・ポスターなど、幅広くデザインを依頼される傾向があります。

なので、Illustratorも覚えておくと、仕事の幅も広がって良いでしょう。

UI制作に特化したソフトウェア Adobe XD

最近では、Adobe XD(アドビ エックスディー)で制作されたWebデザインも見るようになってきました。

Adobe XDも、Adobeから出ているソフトウェアで、WebデザインやアプリなどのUserInterface(ユーザーインターフェース、UI)に特化しています。

アートボードと呼ばれる、デザインする範囲を示すキャンバスをいくつも作成できたり、

プロトタイプを使えば、デザインに設置したナビゲーションを実際にクリック・タップして、違う画面に移動する様子を確認したりすることができます。

その他にも、アニメーションを設定したり、複数人でデザインを調整できる機能があったり、PhotoshopやIllustratorにはない機能がたくさんあるソフトウェアです。

ただし、Adobe XDは、ビットマップ画像の加工・調整はサポートしていないため、

写真の補正などは、Photoshopなどの別のソフトウェアで行う必要があります。

また、Illustratorのような印刷をサポートした機能もありません。

3つどちらも使うなら、コンプリートプラン。1つしか使わないなら、単体プランかフォトプラン。

Photoshop、Illustrator、Adobe XD。

3つのソフトウェアをご紹介しましたが、どのソフトウェアを使えば良いのでしょうか?

さまざまなデザインに汎用的に使えるのは、PhotoshopとIllustratorです。

この2つは、使い方をマスターしておきましょう。

Adobe XDも、最近のWebデザインで使っているデザイナーが増えているので、こちらも追って覚えておいて、損はありません。

なので、これから初めてWebデザインを始める方は、

Adobeの「Creative Cloud(クリエイティブ クラウド)コンプリートプラン」を、まずは購入するのがおすすめです。

Creative Cloudとは、

Adobeが開発したいろいろなソフトウェア使えるサービスです。

様々なプランがありますが、「コンプリートプラン」の場合、

Photoshop・Illustrator・Adobe XD をすべて使用することができます。

また、いろんなフォントが使えるAdobe Fontsや、100GBのクラウドストレージなどもついてくるので、このプランひとつで、多くの準備が完了します。

「コンプリートプラン」の価格は、以下のとおりです。(2020年5月現在)

コンプリートプラン

プラン名月々年間
年間プラン(月々払い)5,680 円68,160 円
年間プラン(一括払い)5,480 円65,760 円
月々プラン8,980 円107,760 円
※表示価格はすべて税別

年間プラン(一括払い)がお得ですね!

ただ、もしIllustratorしか使わない・Adobe XDしか使わないと言う方は、「単体プラン」が費用が安くおすすめです。また、Photoshopの場合は「フォトプラン」が、単体プランよりも安く設定されているので、こちらを選びましょう!(2020年5月現在)

フォトプラン(20GB)

プラン名月々年間
年間プラン(月々払い)980 円 11,760円
年間プラン(一括払い)980 円11,760 円
※表示価格はすべて税別

Photoshop – 単体プラン

プラン名月々年間
年間プラン(月々払い)2,480 円29,760 円
年間プラン(一括払い)2,180 円26,160 円  
月々プラン3,480 円41,760 円
※表示価格はすべて税別

Illustrator – 単体プラン

プラン名月々年間
年間プラン(月々払い)2,480 円 29,760 円
年間プラン(一括払い)2,180 円26,160 円  
月々プラン3,480 円41,760 円
※表示価格はすべて税別

Adobe XD – 単体プラン

プラン名月々年間
月々プラン1,180 円14,160 円
年間プラン(一括払い)1,180 円14,160 円
※表示価格はすべて税別

また、アプリケーションが重複していなければ、複数プランの契約も可能なようです。

  • フォトプラン(20GB)年間プラン
  • Illustrator – 単体プラン 年間プラン(一括払い)
  • Adobe XD – 単体プラン 年間プラン(一括払い) 

を購入した場合、合計金額は¥55,680となり、

コンプリートプラン 年間プラン(一括払い)より、¥10,080 お得です。

少し手間がかかりますが、ぜひ試してみてください。

ヒロ
ヒロ

いかかでしたか?

実は、Adobeのソフトウェア以外にも、「Sketch」や「Figma」と言った、様々な長所をもったデザイン用のソフトウェアが、他にいくつもあります。

ただ、今回ご紹介したAdobeのソフトウェア「Photoshop」「Illustrator」「Adobe XD」は、世界的なシェアの多さや、企業のサポート、他のソフトウェアも一緒に使えるプランなどから、世界的にスタンダードなデザイン用のソフトウェアになっています。

Adobeのソフトウェアの使い方を覚えることが、Webデザイナーとしての第一歩と言っても過言ではないでしょう!ぜひ、試してみてくださいね。

この記事を書いた人
ヒロ

新卒でWeb制作会社にWebデザイナーとして入社→アートディレクターにキャリアップ → 7年後、事業会社でプロダクトデザイナーとして勤務。キャリア10年以上のベテランデザイナー。マンガを愛している。

ヒロをフォローする
WEBデザイン
スポンサーリンク
ヒロをフォローする
WEBデザインハイスクール

コメント

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