Webデザインに必要な主流のソフトから最新まで！おすすめソフトの紹介

こんにちは！GLUTのレオです。

Webデザインの制作には様々なソフトが使われています。

デザインを作成するグラフィック系のソフトからコーディングをするためのソフト。

作成したものをサーバーにアップロードするために必要なソフトなどがあります。

そこで今回はWebデザインをこれから始めようかと思ってる方向けに、Web制作の現場で使われている主流のツールからちょっとマニアックなソフトなどを紹介していきます。

Adobe製品

Webデザインをする上で必ずおさえておきたいソフトがAdobe製品です。

Adobeはアドビ株式会社が制作している製品で2020年の現在も、どこの現場でも使われているグラフィックに強いソフトです。

Adobeの製品はデザインを作成するソフトから動画を作成するソフトなど色々な種類があります。

全部は説明できないのですが今回はWebデザインでよく使われるソフトをご紹介していきます。

Photoshop

PhotoshopはWebデザインの現場ではモックアップと呼ばれるサイトデザインを制作したり、画像を加工してバナーを作成したりなどの使い方が一般的で、写真の加工に強いソフトで、ほとんどの制作現場で使われているソフトです。

Webデザインはテキストと写真で制作されているので写真の修正などの作業が発生するためPhotoshopは必須のソフトといえます。

Illustrator

Illustratorはイラストに強いツールでIllustratorもPhotoshopと使われ方は一緒でデザインやバナーの制作に使われる事がほとんどです。

Photoshoとの違いはIllustratorで作成した制作物は拡大・縮小をどんなにしても画質が劣化しないことから、ロゴ作成やアイコン作成時によく使われます。

Photoshopに比べると少し癖があり、慣れるまで使いにくいのでWebデザインの納品時はPhotoshopに比べると少ないと思います。

XD

XDはプロトタイプ制作ツールで、最近はXDでデザインを作られる方も沢山います。

XDの特徴はUI(ユーザーインターフェース)がとてもシンプルで画像加工などの機能がPhotoshopに比べると弱い一方で、アニメーションをつけられたり、ページの移動先を指定できたりとデザインに特化したツールになります。

お客様に見せる段階ではXDで作成した方がページの移動もできる為、イメージがつきやすくXDで提案する事がほとんどです。

Adobe以外のデザインソフト

近年ではAdobe製品以外にも多種多様なソフトが日々生み出され、Webデザインの世界で使われています。

Sketch

SketchはXDと似ていて、プロトタイプを作成できるソフトになります。

僕のお気に入りのソフトなのですが、納品時にファイルが納品できないこともあるので使う事は少ないのですが非常に素晴らしいソフトです。

UIが使いやすく、一度買うと永久に使えるので世界のWebデザインの現場でよく使われていますが、MACでしか使えないデメリットがありAdobeに比べると日本ではまだシェアがそこまで獲得できていません。

海外ではシェア率も高いので、海外の就職を目指している方はSketchも学んでおくことをおすすめします。

Figma

Figmaの特徴は無料で使えて最大の特徴はブラウザで共同で複数のデザイナーでWebデザインを進められることです。

無料版はプロジェクトの数に制限があったり、共有できる人数が制限されるので必要に応じて有料版に切り替えが必要です。

Affinity

Affinityはその価格から近年シェア率を大きく伸ばしているソフトです。

Adobe製品と似ているのですが、価格はAdobeに比べると非常に安く3000円程で永久に使えるソフトを手に入れる事ができますが、まだAdobeのシェア率には程遠く現場でつかわる事は少ないですが今後が楽しみなソフトです。

結局グラフィックのソフトは何を選んだらいいのか？

グラフィック系のソフトはAdobe製品から始めるのが一番です。

そのシェア率からほとんどの現場で使われるので、必ず覚える必要があります。

他のソフトはAdobeを使えれば問題なく移行できるのでグラフィックのソフトでまず最初に何を学ぼうか迷っている方はまずはAdobe製品を学ぶ事をおすすめします。

グラフィック以外のソフト

ここまではデザインによく使われるソフトを紹介していきましたがWebデザインの仕事は単にデザインを制作するだけではなくデザインを実装していく作業が必要になります。

デザインを実装していく作業の事をコーディングというのですが、このコーディングの作業はテキストエディタが使われます。

テキストエディタを使ってHTMLやCSSやプログラミング言語を書いていく作業が必要になります。

テキストエディタも色々な種類が出ているのですが、ここでは一つのテキストエディターを紹介します。

Visual Studio Code

Visual Studio Code通称VSCodeと呼ばれ、個人的には最強のテキストエディタだと思っています。

プラグインなども豊富で、テキストエディタをカスタマイズできるだけではなくコマンドラインの機能も使えるので作業が素早く行えます。

これだけ入れておけばコーディングに困る事はないのでコーディングを勉強する際は必ずインストールする事をおすすめします。

他のテキストエディタも強力なものが沢山あるのですが高機能すぎたりして使いにくい場合があるのでまず最初はVSCodeから始めてはどうでしょうか？

コーディングの後はFTPソフトが必要

デザインとコーディングのソフトをここまでで紹介してきましたが、最後に必要なソフトがFTPソフトです。

FTPソフトはコーディングで作成したHTMLをサーバーに上げるために必要なソフトで世界中のみんなに自分のページを見てもらうためにはサーバー上にコーディングの作業で作成したファイルをアップロードする必要があります。

そこで必要なのがFTPソフトです。

WinSCP

Windowsを使われている方WinSCPがおすすめです。

全ての機能を無料で使えて、昨日もとても使いやすく、動作も軽いため重宝されています。

FileZilla

FileZillaも無料で使えるツールでMACではWinSCPを使えないのでFileZillaを使う事をおすすめしています。

まとめ

いろんなソフトを紹介しましたが僕が使っている組み合わせは下記の組み合わせです。

クライアントによってソフトを使い分けているのですが、僕が一番使う組み合わせは以下のソフトが多いです。

それでは良いWebデザインLIFEを〜！