Webデザインを独学しようをソフトを調べていて「使われるデザインソフトはたくさんあってどれを使えばいいのかわからない」「Adobeを契約するって聞くけど、他のソフトでもいいのかな？」と思っていませんか？
この記事では、WebデザイナーがWebデザインする時に使用する必須のAdobeソフトをご紹介します。
Webデザイナーになるためには、いろいろな技術やアプリを覚えなければいけないのですが、最低でも3つ、多くて4つのソフトを覚える必要があります。
Webデザインの現場で必要なAdobeのソフトと、それぞれの特徴とマスターするポイントをご紹介していきますので、独学のするのに役立てていただければと思います。
現場利用しているAdobeのWebデザインソフトはこの4つ！
Webデザイナーが制作現場で必要なAdobeのソフトは、Photoshop・Illustrator・Dreamweaver・XDの4つです。
2021年2月号のWeb Designingの特集記事内の「クリエイティブルーツの実情」のアンケートで、Webデザインの現場利用しているソフトがリアルにランキングされています。以下がアンケート結果になります。
Webデザイナー向けの雑誌「Web Designing」で特集されている、Web業界で働く方々に直接アンケートをとって様々なデータを集計した「Web制作白書2021」から、最前線の現場で日常的に利用している制作ツールアンケートを元にお伝えします。
利用しているデザインソフトの結果（複数回答可）
1位：Adobe Photoshop（67.9％）
2位：Adobe XD（62.6％）
3位：Adobe Illustrator （53.4％）
引用元：Web Designing、Web制作白書2021
となっており、上位をAdobeが独占しています！Photoshop・Illustratorは20年以上前からあるソフトで、Webデザインをするのに必要なソフトなので、独学するときには一番初めに使い方を学びたいソフトです。
この中で注目してもらいたいのが「Adobe XD」。Adobe XDは、2019年3月から提供が始まったプロトタイピング作成ソフトです。6割以上のWebデザインの現場で使われているので、この先、勉強しておいたほうがいいソフトです。
利用しているコーディングソフトの結果（複数回答可）
1位：Visual Studio Code/ビジュアルスタジオコード（35.1％）
引用元：Web Designing、Web制作白書2021
2位：Adobe Dreamweaver（26.7％）
3位：Sublime Text/サブライムテキスト（14.5％）
コーディングソフトも色々ありますが、Adobe Dreamweaverは2位になっています。自分が使いやすいエディタがコーディングしやすいと思いますが、Webデザインの現場ではまだまだDreamweaverを利用している企業が多いので勉強をして損はないですね。
アンケート結果からわかると思いますが、Webデザインをするのに必要なAdobeのソフトは、Photoshop・Illustrator・Dreamweaver・XDです。これから習得しようと思っている方は、迷わずこの4つを使えるようにしましょう。
では、それぞれのAdobeソフトのWebデザインの現場での使い方をお伝えします。
Adobe Photoshop（フォトショップ）
Adobe Photoshopは、画像加工や編集をするのに万能なアプリケーションです。写真の合成やレタッチ、Webデザインの場合はバナー画像やアイキャッチを作成、コーディングするのに必要な画像サイズに書き出しをするために使います。
Adobeの中で写真の加工合成ができるアプリはPhotoshopのみです。他のアプリを使うとしてもPhotoshopを併用する場面が多いです。
Adobe Illustrator（イラストレーター）
Adobe Illustratorは、イラストを描いたり、チラシやポスター、パンフレットなどのグラフィックデザインをするのに使います。データ形式の「ベクター形式」を扱えるので、印刷物のデザインやロゴの作成にIllustratorは必要です。
WebデザインをIllustratorで作成することもできます。ロゴのデータやアイコン、イラストを使ったデザインをする時、納品データが「.ai」のことがほとんどです。コーディングする時にも大きく書き出したいなどの用途が出てくるのでIllustratorを使うこともあります。
Adobe Dreamweaver（ドリームウィーバー）
Adobe Dreamweaverは、Webデザインのコーディング用のアプリケーションです。
コーディングのエディタは無料もありますが、DreamweaverはWeb制作をする歴史で長く使われいるので、現場でも使われ続けています。「ライブビュー編集」ができたり「コードのサジェストが表示」する補助機能が多くあるので、初心者さんには使いやすいアプリです。
Adobe XD
Adobe XDは、Webデザインのワイヤーフレームやプロトタイプの作成に特化したアプリケーションです。
動作が軽いのとUIデザインに便利な機能が豊富なのと、XDの機能がシンプルで直感的に操作ができるので、デザインを始めたばかりの方にも使いやすくできているため、登場してから利用ユーザーが急増しています。
複雑なデザインや、図形の作成、画像の合成などはできないですが、デザインを実際のWEBサイトやアプリの様に動すことができる「プロトタイプ」という機能があり、このプロトタイプを使って、デザインの作成段階からUI/UXなどを検証ができる様になるのが特徴です。
デザインソフト以外利用しているAdobeのソフトやサービス
Acrobat DC
デザインをするときには使用しないですが、PDFを閲覧や取引先とデータをやり取りするのに必要なAcrobatです。
Illustratorで作成したデザインデータをPDFにしたときに、編集されないように権限をかけたり、印刷解像度を変更したりするので、何かと出番が多いソフトです。
Adobe Font
Adobe Fontsはフォントサービスです。Adobe Creative Cloudを契約している方なら、15,000を超える高品質なフォントが追加料金なく無料で使用することができます！
注意点が2つあります。1つ目は、受託制作したクライアントのWEBサイトへの使用はNGです。2つ目はAdobeCCを解約したらこれらのフォントは使えなくなります。利用で設定していたフォントも非表示（デフォルト表示）になるので注意が必要です。
Adobe Stock
Adobe Stockは有料画像素材（ストックフォト）サービスです。5500万枚以上のロイヤリティフリーの画像が揃っています。Adobe Creative Cloud内から利用可能できてとても便利です。
有料素材サイトも色々ありますが、良い点は、素材の数・種類と、価格と繰越ができるという点です。使わないときは翌月に繰越ができるので、月々少量の良質素材をお安く使いたい人にはおすすめです。
Webデザインに必要なAdobeソフトはこの4つ！のまとめ
この記事の最初で紹介した「Web Designing」の「Web制作白書2021」で、AdobeCCを契約している企業は94%とアンケート結果が出ていました。
Webデザインをするのに必要なAdobeのソフトは、Photoshop・Illustrator・Dreamweaver・XDは、Adobe Creative Cloudを契約する他にありません。（個別で契約すると高くなりますよ！）
Webデザイナーを目指す・Webデザインとして仕事をしていくと決めたなら契約しないと仕事ができないと思ってください。必ずCreative Cloudを契約して勉強を進めていきましょう！
