【Webデザイン】Webデザインに必要なソフトは3つ！これさえ覚えればWebデザイナーになれる！

今回は、Webデザインに必要なソフト3つと、あったら便利なソフトをご紹介します。
ソフトを覚えてWebデザイナーを目指そう！

Webデザインに必要なソフト

最初にお伝えしちゃいます。
Webデザインに必要なソフト3つは、

• Adobe Photoshop（フォトショップ）
• Adobe Illustrator（イラストレーター）
• Adobe Dreamweaver（ドリームウィーバー）

です！

この中で必須なのがフォトショップです。
フォトショップと聞くと、画像や写真の加工をするイメージですが、それだけではなく、ページ全体のデザインもできちゃいます。

イラストレーターでもできるのですが、どちらかというとロゴやイラストなど作成するイメージです。

「じゃあイラストレーターだけでも良くない？」と思うかもしれませんが、圧倒的にフォトショップを使っている制作会社が多いので、フォトショップでデザインするのが必須になります。

ドリームウィーバーはコーディングするためのソフトです。
これでなくても良いのですが、同じAdobe製品で、使いやすいためおすすめです。

Photoshop（フォトショップ）

まずは何と言ってもフォトショップです。
フォトショップで作成したファイルは「psd」というもので、これはフォトショップでないと編集することができません。

先ほどお伝えした通り、ほとんどの制作会社がフォトショップを使っているので、たとえば、「このデザインもう少し明るくしてもらえる？ファイルはこれね」と言われてpsdをもらっても編集することができないのです。

昔からイラストレーターを使っていて、psdファイルを見るたびに嫌な気持ちになるデザイナーさんもいるくらいです。

と言っても同じAdobe製品なので使い方は似ているので、デザイナーさんでどちらかしか使えないという方は少ないと思います。

なので、フォトショップは必ず覚える必要があると思っておきましょう。

Illustrator（イラストレーター）

誰もが知っているイラストレーター、デザインといえばこのソフト！というイメージが強いですが、実はWebデザインには意外と使わなかったりします。

どちらかと言うと、ロゴやイラスト、チラシなどの紙媒体を制作する際に使うソフトです。

もちろんロゴやイラストがあるホームページもあり、こういったものはイラストレーターの方が得意なのですが、簡単なものであればフォトショップで十分です。

イメージで言うと、ロゴ単体でお金になるようなクオリティであればイラストレーター、そこまでではないロゴはフォトショップ、と言った感じでしょうか。

またイラストレーターは、上達するまでかなり時間が掛かります。
（僕があまり得意ではないからそう思うのかも）

イラストレーターとフォトショップどちらも使えるに越したことはありませんが、初めはフォトショップから覚えるのをおすすめします。

Dreamweaver（ドリームウィーバー）

このソフトはあまり聞いたことがないかもしれませんが、ドリームウィーバーはコーディングするためのソフトです。

コーディングするためにはテキストエディターが必要で、テキストエディターであれば何でもできるのですが、フォトショップと同じAdobe製品で使いやすいため、多くの方が使っていると思います。

特徴としては、

• コーディングしながらデザインビューで確認できる
• タグの予測変換をしてくれる
• サイトデータを指定してサイト丸ごと編集できる
• gitやサーバーとの連携ができる

です。

特にコーディングしながらデザインビューで確認できるのがとても便利です。
書いたコードが一瞬でどのような表示になるかわかります。
さらにデザインビューでもコーディングできちゃいます。

ただ、デザインビューでコーディングすると、htmlやcssの理解ができず、上達が遅くなってしまいます。
コーディングはコードビューで行うようにしましょう。

あったら便利なソフト

ここまでは必要なソフトをご紹介しましたが、ここからはあったら便利なソフトをご紹介します。
ほぼ必須なソフトもあるので、ご参考になれば幸いです。

Google Chrome

これは説明不要だと思いますが、Googleが提供するWebサイトを閲覧するためのブラウザです。
圧倒的にシェア率が高いブラウザなので、Windowsの方もMacの方も、Google Chromeをデフォルトブラウザにすることをおすすめします。

また、htmlコーディングする際も、検証ツールがとても便利です。

→Google Chromeダウンロード

FileZilla

FileZillaはFTPソフトで、サーバーにファイルをアップロードすることができます。
FTPソフトは他にもいくつかありますが、FileZillaはWindows・Mac、どちらとも無料でダウンロードすることができ、使用している方も多いのでおすすめです。

→FileZillaダウンロード

Pngyu

Pngyuは、PNG形式の画像を圧縮してくれるソフトです。
画像はそのままだと容量が多く、ページの表示速度に影響するので、出来れば圧縮して容量を抑えるようにしましょう。

こちらもWindows・Macで無料でダウンロードできるのでおすすめです。

→Pngyuダウンロード

WinArchiver Lite

Macユーザー向けのソフトで、ファイルをzip化する時に使用します。
Macのデフォルト機能でzip化をすると、Windowsで解凍した際に文字化けやゴミファイルができてしまうので、このソフトを使ってzip化するようにしましょう。

→WinArchiver Liteダウンロード

MAMP

MAMP（マンプ）とは、「Macintosh」「Apache」「MySQL」「PHP」の頭文字をとったもので、パソコンがWebサーバーとなり、ローカル環境で開発ができるようになります。

「ちょっと何言ってるか分からない」と聞こえそうですが、簡単に言うと、いちいちサーバーにファイルをアップロードしなくても確認しながら開発できるようになります。

htmlやcssはローカル環境で動作しますが、php等はサーバーで動作するので、このようなソフトをインストールする必要があります。

→MAMPダウンロード

最後に

今回は、

• Webデザインに必要なソフト3つ
• あったら便利なソフト

についてご紹介させていただきました。

この中でもフォトショップは必須になるので、まずはフォトショップから覚えましょう！