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

おすすめ記事

現役webデザイナーおすすめ！転職（求人）サイト＆転職エージェント

2019年5月6日

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

制作の流れは、PhotoshopやIllustratorでデザインカンプを作成し、Dreamweaverでコーディングするのが一般的です。

もちろん、それ以外のソフトも使いますが、Adobeソフトを使う割合は圧倒的に高いです。（Adobeソフト：その他ソフト＝8：2くらい）

今回は、Photoshop・Illustrator・Dreamweaver以外で覚えておいたほうが良いソフトもあわせて紹介しますが、まずは、この３つのソフトが使えれば、webデザイナーに必要なソフトのスキルとしては十分です。

それでは、webデザイナーになるために必要なソフトについて、詳しく見ていきましょう。

デザインソフト：Photoshop・Illustrator

webデザイナーになりたい場合、まずはPhotoshopとIllustratorを覚えましょう。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のほうが高いです。

私は個人的には、イラレの方が好きです。。。

コーディングソフト：Dreamweaver

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

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

Dreamweaverの特徴

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

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

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

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

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

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

Adobeも買ってくれないなんて、ケチな会社め・・・チッ（舌打ち）

どこかから舌打ちが聞こえたような気がするにゃ

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

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

英語ってだけで鳥肌にゃ・・・（猫だけど）

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

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

FTPソフト：FileZilla or FFFTP

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

私はFileZillaを使っています！直感的で使いやすいソフトです。

FTPソフトの特徴

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

どんな時に使う？

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

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

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

Microsoft Office：Word・Excel・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スライド

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カレンダーなどと一緒に使って、慣れておきましょう。

その他おすすめソフト

ここでご紹介するソフトは、覚えていたら尚良しくらいのものですので、余裕があればで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以外のブラウザもインストールしておく必要はあります。

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

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

2019年4月2日

まとめ

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

こう見るとものすごくいっぱいありますが、冒頭でもお伝えしたとおり、ほとんどの作業はPhotoshopとIllustratorとDreamweaverで行います。（企業によっては例外もあります）

求人でも、PhotoshopとIllustratorとDreamweaverが必須条件の会社が多いですので、webデザイナーになりたいのであれば、まずこの３つを覚えましょう！

Photoshop→Illustrator→Dreamweaverの順で覚えるのがおすすめです。

それ以外のソフトは、余力があれば少し触って慣れておく程度で大丈夫です。

Adobeソフトをゴリゴリ使うので、今はソフトを完璧に使いこなすことが出来なかったとしても、「Adobeソフトを使うのが楽しい！」と思える方はwebデザイナーに向いていると思います！私自身、Adobeソフトが大好きです(^^)ぜひ、どんどんソフトに触って、楽しみながら覚えていきましょう！

おすすめ記事

現役webデザイナーおすすめ！転職（求人）サイト＆転職エージェント

2019年5月6日