webデザイナーになりたい場合、Adobeソフトを覚えましょう。覚えるソフトは、以下の3つです。
- Adobe Photoshop(フォトショップ)有料《※必須》
- Adobe Illustrator(イラストレーター)有料《※必須》
- Adobe Dreamweaver(ドリームウィーバー)有料《※必須》
制作の流れは、PhotoshopやIllustratorでデザインカンプを作成し、Dreamweaverでコーディングするのが一般的です。
もちろん、それ以外のソフトも使いますが、Adobeソフトを使う割合は圧倒的に高いです。(Adobeソフト:その他ソフト=8:2くらい)
今回は、Photoshop・Illustrator・Dreamweaver以外で覚えておいたほうが良いソフトもあわせて紹介しますが、まずは、この3つのソフトが使えれば、webデザイナーに必要なソフトのスキルとしては十分です。
それでは、webデザイナーになるために必要なソフトについて、詳しく見ていきましょう。
もくじ
デザインソフト:Photoshop・Illustrator
- Adobe Photoshop(フォトショップ)有料《※必須》
- Adobe Illustrator(イラストレーター)有料《※必須》
- Sketch(スケッチ)macのみ 有料
webデザイナーになりたい場合、まずはPhotoshopとIllustratorを覚えましょう。PhotoshopとIllustratorは、制作現場で一番一般的なソフトだからです。

余力があれば、macのみですが「Sketch(スケッチ)」を覚えておいても損はないです。Sketchとは、Bohemian BVが開発する、簡単で高機能と話題のソフトです。最近は、Sketch(スケッチ)を導入する企業も増えています。ですが、まだまだAdobeが圧倒的なシェアを誇りますので、先に覚えるべきはPhotoshopとIllustratorです!
PhotoshopとIllustratorの特徴
Photoshopは写真の編集に特化したソフトですが、Webデザインを作る際にも使われています。Illustratorは、その名の通りイラストを描くことに特化したソフトです。
PhotoshopとIllustratorの使い分け
- デザインカンプ作成(どちらかと言うとPhotoshopが多い)
- ロゴ作成(どちらかと言うとIllustrator)
- 写真編集(Photoshop)
- イラスト作成(どちらかと言うとIllustrator)
- チラシや名刺など、紙媒体のデザイン(Illustrator)
デザインカンプを作る際は、一般的にはPhotoshopを利用することが多いですが、Illustratorだけで作成することもできます。
Illustratorは、どちらかと言うとチラシや名刺のデザインなどといった、紙媒体を制作する際に強いソフトです。
実際のweb制作では、Illustratorで作成したロゴやアイコンを、Photoshopで作成したデザインカンプに読み込むことが多いです。
個人的には、PhotoshopよりもIllustratorの方が、操作が簡単で取っ付き易いと思います。ただ、webの制作現場ではPhotoshopを使う機会のほうが多いので、覚える優先順位としてはPhotoshopのほうが高いです。

Adobe Photoshop Elementsは、Photoshopの一部機能が使えるライトモデルです。趣味で使うなら良いですが、仕事で使うには機能が不十分です。webデザイナーを目指すなら、Photoshopを覚えるようにしましょう。
コーディングソフト:Dreamweaver
- Adobe Dreamweaver(ドリームウィーバー)有料《※必須》
- Adobe Brackets(ブラケッツ)無料
コーディングソフトは、Dreamweaver一択です。web制作で必要な機能がほぼ全て揃っているからです。

Dreamweaverの特徴
Dreamweaverは、テキストエディタとしての機能の他、FTPソフトとしての機能も備わっています。(Dreamweaverから直接サーバーへファイルのアップロード・ダウンロードができます。)
その他にも、コードが間違っているときにエラーを表示してくれる機能や、ソースコードを整形してくれる機能など便利な機能がたくさん備わっています!
ちょっと難しい話になりますが、SASS/SCSSをコンパイルする機能も標準搭載されています!
昔のDreamweaverしか知らない人で、「Dreamweaverなんて使えない!」「コーティングできない素人が使うソフトじゃないの?」などと言う人もいますが、今はかなり進化していますので、躊躇せずDreamweaverを使いましょう!
ただし、Dreamweaverをデザインビューを使うのはやめましょう。デザインビューを使えば、コードの知識が無くてもwebサイトが作れてしまいますが、webデザイナーになるためにはHTML/CSSを正しく理解し、コードの手打ちが出来る必要がありますし、コードをきちんと書かないと検索エンジンにも引っかかりにくくなるためです。(=SEO対策的に不利)
ホームページビルダーは、誰でも簡単にwebサイトが制作できる初心者向けのソフトです。プロ向けのソフトではないため、制作現場ではほとんど利用されていません。(制作会社以外では、使っている会社もあるかもしれません。)どこの会社へ行っても通用するwebデザイナーになりたいのであれば、Dreamweaverを使いましょう。
無料エディタなら「Brackets」がおすすめ
コーディングソフトは、Dreamweaver一択ですが、とは言え、Adobeソフトは高いため、Dreamweaverを購入してくれない企業もあります…。そのため、Dreamweaver以外のエディターに慣れておいても損はないと思います。


おすすめの無料エディタは、Bracketsです。Bracketsは、Adobeが提供しているエディタです。
Bracketsは直感的に使えるエディタで、なんといっても最初から日本語対応しているところがポイントです。他のエディタだと、英語対応しかしていない場合も多いので、英語が苦手だとその時点で拒否反応を示してしまう人も多いです。その点、Bracketsなら安心して使えますね。

また、いろいろな便利な機能を追加できる拡張機能が多いのもポイントです。Dreamweaverと比べると、Bracketsは後から機能を追加しなければいけないのが若干めんどくさいですが、搭載されている機能が少ない分Dreamweaverよりもサクサク動きます。
Bracketsはダウンロードしてすぐ使えますので、ぜひ使ってみてくださいね!
FTPソフト:FileZilla or FFFTP
- FileZilla 無料
- FFFTP(Winのみ) 無料
※上記、どちらか使いやすいほうでOK。

FTPソフトの特徴
FTPソフトとは、制作したウェブサイトのファイルを、サーバーにアップロードするためのソフトです。逆に、サーバー上にアップロードされているファイルを、ローカル(自分のPC)上にダウンロードする際にも使われます。
どんな時に使う?
- サーバーへファイルをアップロード
- サーバーからファイルをダウンロード
どれくらい使えたほうが良い?→基本だけでOKです
サーバーの設定ができ、ファイルのアップロード・ダウンロードが出来ればOKです。難しいことは無いので、安心してください。
Microsoft Office:Word・Excel・PowerPoint
- Microsoft Word(ワード)有料
- Microsoft Excel(エクセル)有料
- Microsoft PowerPoint(パワーポイント)有料《イチオシ!》

Word・Excel・PowerPointの特徴
Wordは文書作成、Excelは表計算、PowerPointはプレゼンテーション用のソフトです。Webデザイナーの場合は、ちょっと違う使い方をする場合もありますので、下記にて詳しくご紹介いたします。
Word・Excel・PowerPointの使いどころ
- ワイヤーフレーム
- サイトマップ
- 提案資料
- その他資料
Microsoft Officeはクライアントにワイヤーフレームやサイトマップを見せる時などに活躍します。
(もちろん、別のソフトを使ってワイヤーフレームやサイトマップを作ってもOKです。)
また、PowerPointは結構万能で、社内外に提出する提案資料作成時にもよく利用されます。操作方法も直感的で簡単です。
とは言え、webデザイナーがMicrosoft Officeを使って難しい作業をすることはほぼないと思いますので、ご安心ください!例えば、webデザイナーがExcelのマクロをばんばん使って仕事をする、といったことはまず無いでしょう。(一部の鬼畜な会社ではあるかもしれませんが・・・・・・・)


どれくらい使えたほうが良い?→基本だけでOKです
基本操作だけ出来ればOKです。
Google系ソフト:Gmail・Googleドキュメント・Googleスプレッドシート・Googleスライド
- Gmail 無料
- Googleドキュメント(Wordとほぼ同じ機能) 無料
- Googleスプレッドシート(Excelとほぼ同じ機能) 無料
- Googleスライド(PowerPointとほぼ同じ機能) 無料

Gmail・Googleドキュメント・Googleスプレッドシート・Googleスライドの特徴
GoogleドキュメントはWord、GoogleスプレッドシートはExcel、GoogleスライドはPowerPointの代わりとして使えます。
Google系ソフトの良いところは、簡単に共有が出来ることと、複数人で同時編集が出来ることです。
正直、Microsoft OfficeよりもGoogle系ソフトのほうが使い勝手は良いと思います。ただ、クライアントはMicrosoft Officeしか使えない場合も多いので、両方使えるようにしておくのがベストです。
また、Gmailはほとんどの方がご存知だと思いますが、外出先でメールチェックが出来ることや迷惑メールカット機能が優れている等の理由で、導入する企業が増えています。こちらもあわせて使えるようにしておきましょう。
Gmail・Googleドキュメント・Googleスプレッドシート・Googleスライドの使いどころ
- ワイヤーフレーム(この中では、Googleスライドがおすすめ)
- サイトマップ(この中では、Googleスプレッドシートがおすすめ)
- 提案資料(この中では、Googleドキュメントがおすすめ)
- その他資料
- クライアントとのやりとり(Gmail)
どれくらい使えたほうが良い?→基本だけでOKです
基本操作だけ出来ればOKです。Googleアカウントを取ればすぐに使えますので、Googleドライブ(Googleのクラウドストレージ)やGoogleカレンダーなどと一緒に使って、慣れておきましょう。
その他おすすめソフト
- Adobe XD(エックスディー)
- Adobe Acrobat Pro(アクロバット プロ)
- XAMPP(ザンプ)
ここでご紹介するソフトは、覚えていたら尚良しくらいのものですので、余裕があればでOKです!

AdobeXD(エックスディー)
AdobeXDとは、PhotoshopやIllustratorよりも簡単に使えて、ワイヤフレームを作る際などに役立つソフトです。webデザイナーよりも、どちらかと言うとwebディレクターの方が使用頻度は高いかもしれません。
※ワイヤフレームとは、ウェブデザインを作る前に作る、サイトの設計図のことです。
Adobe XDは、操作をマスターする必要はありませんが、今後も制作現場で使われることが多くなることが予想されるソフトですので、少し触ってみて操作に慣れておきましょう。
ぜひ、履歴書にも使えるソフトとして記入しましょう。
Adobe Acrobat DC(アクロバット)
Adobe Acrobat DCとは、PDFを編集するためのソフトです。PDFを結合したり、クライアントと共有したりする時にAcrobat を使うことが多いです。Acrobat を使いこなせると、より仕事が捗ると思います。
XAMPP(ザンプ)
XAMPP(ザンプ)は、ローカル(自分のPC)上に、テスト環境を構築するためのソフトです。WordPressやPHPなど、サーバーにアップロードしないと確認ができないファイルをローカルで確認したい時に使います。
ブラウザ
ブラウザとは、webページを表示するためのソフトのことです。普段使うブラウザは、Google ChromeかFirefoxの二択です。

webページが正しく表示されるか確認するためのブラウザチェックでは、Internet Explorer(IE)やWindows10から標準搭載されたEdge(エッジ)、macの標準ブラウザSafari等でもチェックを行いますので、Google ChromeとFirefox以外のブラウザもインストールしておく必要はあります。
ブラウザについては、下記関連記事でさらに詳しくご紹介していますので、ぜひご覧ください。
まとめ
webデザイナーになるために必要なソフトは次のとおりです。
- Adobe Photoshop(フォトショップ)有料《※必須》
- Adobe Illustrator(イラストレーター)有料《※必須》
- Adobe Dreamweaver(ドリームウィーバー)有料《※必須》
- Adobe Brackets(ブラケッツ)無料
- FileZilla 無料
- FFFTP(Winのみ) 無料
- Microsoft Word(ワード) 有料
- Microsoft Excel(エクセル) 有料
- Microsoft PowerPoint(パワーポイント) 有料
- Gmail 無料
- Googleドキュメント(Wordとほぼ同じ機能) 無料
- Googleスプレッドシート(Excelとほぼ同じ機能) 無料
- Googleスライド(PowerPointとほぼ同じ機能) 無料
- Adobe XD(エックスディー)
- Adobe Acrobat Pro(アクロバット プロ)
- XAMPP(ザンプ)
- Google Chrome
- Firefox
こう見るとものすごくいっぱいありますが、冒頭でもお伝えしたとおり、ほとんどの作業はPhotoshopとIllustratorとDreamweaverで行います。(企業によっては例外もあります)
求人でも、PhotoshopとIllustratorとDreamweaverが必須条件の会社が多いですので、webデザイナーになりたいのであれば、まずこの3つを覚えましょう!
Photoshop→Illustrator→Dreamweaverの順で覚えるのがおすすめです。
それ以外のソフトは、余力があれば少し触って慣れておく程度で大丈夫です。
Adobeソフトをゴリゴリ使うので、今はソフトを完璧に使いこなすことが出来なかったとしても、「Adobeソフトを使うのが楽しい!」と思える方はwebデザイナーに向いていると思います!私自身、Adobeソフトが大好きです(^^)ぜひ、どんどんソフトに触って、楽しみながら覚えていきましょう!