Web制作は複数のソフトを使って作業します。
必ず使うものもあれば、用途に応じて使うソフトもあります。
プロのWebデザイナーはどんなソフトを使って作業をしているのでしょうか？
今回は、Webデザインに必須のソフトとお得に購入する方法、業務効率化やスキルアップに繋がるソフトについても紹介します。
Webデザイナーの必須ソフト
まずは、Webデザイナーなら必ず使っているソフトを確認しておきましょう。
Adobe Photoshop
画像の編集・加工・作成をするグラフィックソフトです。
Webデザインでは、画像編集やバナー制作～デザインカンプまでビジュアルデザインを作成するプロセスで利用する必須のソフトです。
画像加工ソフトは他にもたくさんありますが、プロが使うツールとしてPhotoshopはデザイン業界の実質的なスタンダードです。
「もっと安いソフトはないの？」と思うかもしれませんが、残念ながら、Photoshopは必要不可欠だと考えてください。
フリーランスデザイナーなど一人で制作を完結する場合、Photoshop以外のソフトを使えることもありますが、それ以外の場合はAdobe製品の使用が当たり前なのが現状です。
Adobe Illustrator
Illustratorは絵や図などを描くためのソフトで、ドローイングソフトと言われます。
印刷物の制作現場では定番のソフトです。
Webデザインでは、イラスト、アイコン、ロゴ等のオブジェクト（パーツ）を作成する際に使用します。
なので、WebデザインではPhotoshopがメイン、Illustratorがサブのような役割です。
これは、PhotoshopとIllustratorでそれぞれ得意とすることが違うのであって、Webデザインとの相性という点でPhotoshopが使いやすい、という意味です。
Photoshopはビットマップ形式、Illustratorはベクター形式、と扱えるフォーマットも違います。
ソフトを実際に使ってみると、2つのソフトの違いは感覚的に理解できるでしょう。
IllustratorもPhotoshopと同様、プロ御用達のツールとしてほぼ独占的なシェアを誇っています。
フリーランスデザイナーなど一人で制作を完結する場合、Illustrator以外のソフトを使えることもありますが、それ以外の場合はAdobe製品の使用が当たり前なのが現状です。
FTPソフト
FTP (File Transfer Protocol) とは、サーバーとの間でファイルの送受信をするための通信規格です。
その通信規格を用いて、サーバーにファイルをアップロードしたり、サーバーからファイルをダウンロードしたりするのが、FTPソフト（FTPクライアントソフト）です。
基本的にはファイル転送をするだけの用途なので、ソフトの操作は難しくありません。
以下のようなソフトが定番アプリです。
また、Dreamweaver（後述）にはFTP機能も付いています。
FileZillaの使い方については別記事で解説しています。
FTPクライアントの定番！FileZilla(ファイルジラ)の使い方
各種Webブラウザ
Webページを閲覧するためのソフトがWebブラウザですね。
同じWebページでも、ブラウザによって表示崩れを起こしたり、表示が微妙に違うことがあるため、Webデザイン業務では主要なブラウザでの表示確認が必須です。
主要なブラウザは、Google Chrome、Firefox、Safari、Microsoft Edge、Internet Explorerです。（2019年時点）
SafariはMacのみ、Microsoft EdgeとInternet ExplorerはWindowsのみで使えるブラウザで、OSに標準インストールされています。
各ブラウザにはデベロッパーツール（Webインスペクタ）が付いていて、Webページのデバッグ・検証によく使います。
Webデザイン業務を便利にしてくれるソフト
Webデザイナーの必須ソフトを紹介してきましたが、他にも制作業務を便利にしてくれるソフトがたくさんあります。
作業の効率化やさらなるスキルアップに役立つ代表的なソフトを紹介します。
必須ソフトの習得とWeb制作の基本スキルが身についた後、必要に応じて使っていきましょう。
ローカルサーバー環境構築ソフト
Webサーバーはインターネット上にあるサーバーのことを指しますが、サーバー環境を自分のPC上に設置することを「ローカルサーバー環境」とか「ローカル (開発) 環境」などと言います。
家庭内ネットワークや社内ネットワークのことを「LAN (Local Area Network)」と言いますが、そのローカルと同じ意味合いです。
WordPressはPHPというプログラム言語を動かせるサーバーがないと機能しないため、wordpress制作でローカルサーバー環境が必要です。
難しそうなイメージがありますが、ソフトを使えば簡単にローカルサーバーを構築できます。
最近では、WordPress環境構築用のLocal by Flywheelというソフトも、操作が簡単で人気があります。
プロトタイピングツール
プロトタイピングツールを使うと、Webサイトの動き（アニメーション）なども含めてデザイン案を作成できます。
そもそもは、アプリやWebサービスの開発で行われるプロトタイピングですが、Webサイトの制作でもプロトタイピングツールが利用される機会が徐々に増えてきています。
Adobe XD、Sketch (Mac) 、Figma、inVision Studio、Prott 他、様々なプロトタイピングツールが登場しています。
AdobeコンプリートプランならXDも使えるので、追加費用なしで利用できます。
Adobe Dreamweaver
Webサイト作成用ソフトです。
コーディングツールやオーサリングソフトなどとも言われます。
HTML、CSS、JavaScript、WordPressのコードなどの効率的な作成・編集から、サイトのファイル管理、FTP機能など、サイト構築における総合的な機能を持った制作ツールです。
Dreamweaverは、PhotoshopやIllustratorのように業界シェアを独占しているソフトではありません。
なぜなら、そもそもコーディングはテキストエディタさえあればできてしまうからです。
後述しますが、他の高機能なテキストエディタを愛用しているデザイナーの方もいます。
そのため、あえて必須ソフトとしてあげませんでしたが、Dreamweaverが定番ソフトであることは違いありません。
Dreamweaverは、あくまでHTML・CSSなどの知識とスキルがあるプロ向けのソフトです。
知識がないアマチュア向けに、ホームページ・ビルダーなどの作成ソフトがありますが、その手のソフトとはコンセプトが異なります。
つまり、「Dreamweaverを使えればHTML・CSSなどの知識はなくてもOK」ということではないので混同しないようにしましょう。
AdobeコンプリートプランならDreamweaverも含まれているので、追加費用なしで利用できます。
高機能テキストエディター
コーディング作業に高機能なテキストエディターを使っている人も多くいます。
各種プログラミング言語に対応した様々なプラグインがあり、自分好みの機能を選んで追加できるのが人気の理由です。
どちらかと言うと、エンジニア・プログラマーの方が使うソフトの印象ですが、デザイナーの方にも愛用者がいます。
Dreamweaverは高機能ゆえに、UIが複雑だったり、動作が重たいなどのデメリットもあります。
制作に慣れてくると、シンプルにソースコードを記述していくスタイルの方がやりやすく感じる人もいるため、テキストエディターも人気があるのです。
また、コーディング作業を効率化するための拡張技術が発達してきたことも影響していそうです。
デザイナーの典型的な使い方としては、SassやEmmetの記法によるコーディングがあげられます。
なお、SassやEmmetはDreamweaverでも利用できます。
Dreamweaverよりもカスタマイズ性が高く、さらに柔軟にコーディング環境を構築できるため、高機能テキストエディターが支持を得ています。
CUI（後述）を同時に利用することもできます。
有名なエディターに Sublime Text、Atom、Visual Studio Code などがあります。
Webデザイナー向けのソフトとして Brackets、coda といったコーディングツールもあります。
CUI (character user interface)
普段パソコンを使う際に「マウスを使ってアイコンをクリックして、キーボードの入力もして～」と操作しますが、これは GUI (Graphical User Interface) と呼ばれるインターフェースの操作です。
対して、CUI (character user interface) はキーボードのみでテキストを入力して操作するインターフェースを指します。
「黒い画面」とか「コマンドライン」による操作、と言えばわかりやすいでしょうか。
昔々のPCのインターフェースはCUIでした。
Windowsにはコマンドプロンプト、Macにはターミナルという標準ソフトがインストールされています。
GUIがあるのになぜCUIを使うのかと言うと、CUIは単純作業の自動化や一括処理、PCに備わっている機能をダイレクトに呼び出す、といったことが得意だからです。
Web制作業務においては、タスクランナーやGitを使った開発環境の構築などでCUIを使用します。
どちらかと言うと、エンジニア向けのスキルで、少し敷居は高いイメージですが、CUIの応用範囲は広いので、知っておくと何かと便利です。
Adobeソフトをお得に購入する方法
AdobeのソフトはWebデザイナーに必須のソフトです。
現在はAdobe Creative Cloud というサブスクリプション型のサービスで、Adobeの全ソフトが使えるコンプリートプランの年間契約で72,336円です。
決して安い金額ではありませんね。
実は、Adobeのソフトをお得に購入できる方法があります。
デジハリONLINE Adobeマスター講座は、ソフトと使い方の学習講座がセットになっていて、72,336円 → 39,980円と約45％OFFの値段で購入できる非常にお得なサービスです。
購入するソフトはアカデミック版（学生・教職員個人用）となっていますが、ソフトそのものは通常版と全く同じです。
デジタルハリウッドがAdobe認定の「プラチナスクールパートナー」なので、アカデミック版を提供できる仕組みです。そのため、社会人の人でも問題なく購入できます。
Webデザインに使うソフトまとめ
Webデザイナーに必須のソフトは次の4つだけです。
- Photoshop
- Illustrator
- 各種Webブラウザ
- FTPソフト
上記のソフトがあれば、基本的にWeb制作はできます。
次のステップとして、WordPress制作用にローカルサーバー構築ソフトを導入したり、コーディングツールを活用した制作ができるようになるとよいでしょう。
ここまでできれば、立派なWebデザイナーです。
プロトタイピングやCUIは、必要に応じて覚えていけば十分です。
細かなものも見ていけば、他にも様々な便利なソフト・ツール等はありますが、探し始めるとキリがなかったりもします。
ソフトは手段でしかありません。
業務内容や自分が目指すキャリアに応じて、必要なソフトを選択していけるとよいでしょう。
コメントをどうぞ