【2019年最新版】webデザイナーになるために必要なソフト

webデザイナーになりたい場合、Adobeソフトを覚えましょう。覚えるソフトは、以下の3つです。

webデザイナーになるために最低限必要なソフト
  • 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は、制作現場で一番一般的なソフトだからです。

えりー
フォトショとイラレは無くてはならないソフトです!
Sketch(スケッチ)は余力があればでOK

余力があれば、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は趣味で使う時におすすめ

Adobe Photoshop Elementsは、Photoshopの一部機能が使えるライトモデルです。趣味で使うなら良いですが、仕事で使うには機能が不十分です。webデザイナーを目指すなら、Photoshopを覚えるようにしましょう。

コーディングソフト:Dreamweaver

おすすめコーディングソフト
  • Adobe Dreamweaver(ドリームウィーバー)有料《※必須》
  • Adobe Brackets(ブラケッツ)無料

コーディングソフトは、Dreamweaver一択です。web制作で必要な機能がほぼ全て揃っているからです。

えりー
私自身、Dreamweaverが大好きで、ほぼ毎日使っています。

Dreamweaverの特徴

Dreamweaverは、テキストエディタとしての機能の他、FTPソフトとしての機能も備わっています。(Dreamweaverから直接サーバーへファイルのアップロード・ダウンロードができます。)

その他にも、コードが間違っているときにエラーを表示してくれる機能や、ソースコードを整形してくれる機能など便利な機能がたくさん備わっています!

ちょっと難しい話になりますが、SASS/SCSSをコンパイルする機能も標準搭載されています!

昔のDreamweaverしか知らない人で、「Dreamweaverなんて使えない!」「コーティングできない素人が使うソフトじゃないの?」などと言う人もいますが、今はかなり進化していますので、躊躇せずDreamweaverを使いましょう!

 Dreamweaverのデザインビューは使わない

ただし、Dreamweaverをデザインビューを使うのはやめましょう。デザインビューを使えば、コードの知識が無くてもwebサイトが作れてしまいますが、webデザイナーになるためにはHTML/CSSを正しく理解し、コードの手打ちが出来る必要がありますし、コードをきちんと書かないと検索エンジンにも引っかかりにくくなるためです。(=SEO対策的に不利)

ホームページビルダーは使わない

ホームページビルダーは、誰でも簡単にwebサイトが制作できる初心者向けのソフトです。プロ向けのソフトではないため、制作現場ではほとんど利用されていません。(制作会社以外では、使っている会社もあるかもしれません。)どこの会社へ行っても通用するwebデザイナーになりたいのであれば、Dreamweaverを使いましょう。

無料エディタなら「Brackets」がおすすめ

コーディングソフトは、Dreamweaver一択ですが、とは言え、Adobeソフトは高いため、Dreamweaverを購入してくれない企業もあります…。そのため、Dreamweaver以外のエディターに慣れておいても損はないと思います。

えりー
Adobeも買ってくれないなんて、ケチな会社め・・・チッ(舌打ち)
にゃーご
どこかから舌打ちが聞こえたような気がするにゃ

おすすめの無料エディタは、Bracketsです。Bracketsは、Adobeが提供しているエディタです。

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

にゃーご
英語ってだけで鳥肌にゃ・・・(猫だけど)

また、いろいろな便利な機能を追加できる拡張機能が多いのもポイントです。Dreamweaverと比べると、Bracketsは後から機能を追加しなければいけないのが若干めんどくさいですが、搭載されている機能が少ない分Dreamweaverよりもサクサク動きます

Bracketsはダウンロードしてすぐ使えますので、ぜひ使ってみてくださいね!

FTPソフト:FileZilla or FFFTP

おすすめFTPソフト
  • FileZilla 無料
  • FFFTP(Winのみ) 無料

※上記、どちらか使いやすいほうでOK。

えりー
私はFileZillaを使っています!直感的で使いやすいソフトです。

FTPソフトの特徴

FTPソフトとは、制作したウェブサイトのファイルを、サーバーにアップロードするためのソフトです。逆に、サーバー上にアップロードされているファイルを、ローカル(自分のPC)上にダウンロードする際にも使われます。

どんな時に使う?

  • サーバーへファイルをアップロード
  • サーバーからファイルをダウンロード

どれくらい使えたほうが良い?→基本だけでOKです

サーバーの設定ができ、ファイルのアップロード・ダウンロードが出来ればOKです。難しいことは無いので、安心してください。

Microsoft Office:Word・Excel・PowerPoint

おすすめMicrosoft系ソフト
  • 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スライド

おすすめGoogle系ソフト
  • Gmail 無料
  • Googleドキュメント(Wordとほぼ同じ機能) 無料
  • Googleスプレッドシート(Excelとほぼ同じ機能) 無料
  • Googleスライド(PowerPointとほぼ同じ機能) 無料
えりー
Microsoft系ソフトよりも、むしろGoogle系ソフトを使えたほうが良いかも。。。

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です!

えりー
XD。。。ソフトの名前もカッコイイですね。

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の二択です。

えりー
私のイチオシは、GoogleChromeです!

webページが正しく表示されるか確認するためのブラウザチェックでは、Internet Explorer(IE)やWindows10から標準搭載されたEdge(エッジ)、macの標準ブラウザSafari等でもチェックを行いますので、Google ChromeとFirefox以外のブラウザもインストールしておく必要はあります。

ブラウザについては、下記関連記事でさらに詳しくご紹介していますので、ぜひご覧ください。

safari

【2019年版】webデザイナーを目指すならブラウザはコレを使おう!

2019年4月2日

まとめ

webデザイナーになるために必要なソフトは次のとおりです。

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ソフトが大好きです(^^)ぜひ、どんどんソフトに触って、楽しみながら覚えていきましょう!

ABOUTこの記事をかいた人

猫と気ままに暮らすフリーランスwebデザイナー。
芸術学科卒 → 超ブラック企業のホームページ更新担当(正社員) → 正社員よりも稼ぐフリーター → 制作会社(バイト→正社員) → フリーランス(今ここ)
苦労もたくさんしてきましたが、やっぱりwebデザインは楽しい!これからwebデザイナーを目指す人にもwebの楽しさを伝えたい!そんな気持ちで記事を書いています。