プロ御用達!Webデザイナーの必須ソフトと業務効率化に役立つソフト

Web制作は複数のソフトを使って作業します。

必ず使うものもあれば、用途に応じて使うソフトもあります。

プロのWebデザイナーはどんなソフトを使って作業をしているのでしょうか?

今回は、Webデザインに必須のソフトに加え、業務効率化やスキルアップにも繋がるソフトの種類について紹介します。

Webデザイナーの必須ソフト

まずは、Webデザイナーなら必ず使っているソフトを確認しておきましょう。

Adobe Photoshop

Photoshop 公式サイトキャプチャ

画像の編集・加工・作成をするグラフィックソフトです。

Webデザインでは、画像編集やバナー制作~デザインカンプまでビジュアルデザインを作成するプロセスで利用する必須のソフトです。

画像加工ソフトは他にもたくさんありますが、プロが使うツールとしてPhotoshopはデザイン業界の実質的なスタンダードです。

「もっと安いソフトはないの?」と思うかもしれませんが、残念ながら、Photoshopは必要不可欠だと考えてください。

フリーランスデザイナーなど一人で制作を完結する場合、Photoshop以外のソフトを使えることもありますが、それ以外の場合はAdobe製品の使用が当たり前なのが現状です。

Adobe Illustrator

Illustrator 公式サイトキャプチャ

Illustratorは絵や図などを描くためのソフトで、ドローイングソフトと言われます。

印刷物の制作現場では定番のソフトです。

Webデザインでは、イラスト、アイコン、ロゴ等のオブジェクト(パーツ)を作成する際に使用します。

なので、WebデザインではPhotoshopがメイン、Illustratorがサブのような役割です。

これは、PhotoshopとIllustratorでそれぞれ得意とすることが違うのであって、Webデザインとの相性という点でPhotoshopが使いやすい、という意味です。

Photoshopはビットマップ形式、Illustratorはベクター形式、と扱えるフォーマットも違います。

ソフトを実際に使ってみると、2つのソフトの違いは感覚的に理解できるでしょう。

IllustratorもPhotoshopと同様、プロ御用達のツールとしてほぼ独占的なシェアを誇っています。

フリーランスデザイナーなど一人で制作を完結する場合、Illustrator以外のソフトを使えることもありますが、それ以外の場合はAdobe製品の使用が当たり前なのが現状です。

FTPソフト

FileZilla 公式サイトキャプチャ

FTP (File Transfer Protocol) とは、サーバーとの間でファイルの送受信をするための通信規格です。

その通信規格を用いて、サーバーにファイルをアップロードしたり、サーバーからファイルをダウンロードしたりするのが、FTPソフト(FTPクライアントソフト)です。

基本的にはファイル転送をするだけの用途なので、ソフトの操作は難しくありません。

以下のようなソフトが定番アプリです。

Dreamweaver(後述)にはFTP機能も付いています。

各種Webブラウザ

Firefox 公式サイトキャプチャ

Webページを閲覧するためのソフトがWebブラウザですね。

同じWebページでも、ブラウザによって表示崩れを起こしたり、表示が微妙に違うことがあるため、Webデザイン業務では主要なブラウザでの表示確認が必須です。

主要なブラウザは、Google ChromeFirefoxSafariMicrosoft EdgeInternet Explorerです。(2019年時点)

SafariはMacのみ、Microsoft EdgeとInternet ExplorerはWindowsのみで使えるブラウザで、OSに標準インストールされています。

Google Chrome デベロッパーツール
Google Chrome デベロッパーツール

各ブラウザにはデベロッパーツール(Webインスペクタ)が付いていて、Webページのデバッグ・検証によく使います。

Adobeソフトを安く購入する方法

AdobeのソフトはWebデザイナーに必須のソフトです。

現在はAdobe Creative Cloud というサブスクリプション型のサービスで、Adobeの全ソフトが使えるコンプリートプランの年間契約で税込7.2万円程度、PhotoshopとIllustratorの単体プランは年間契約でそれぞれ税込み2.8万程度かかります。

サブスクリプションに移行する前のパッケージ販売時でも、全部入りのパッケージは40~50万程度の価格であったかと記憶しています。

そう考えると、6~7年に一回買い換えるのと同じくらいの金額なので、それなりに妥当性のある金額と言えるかもしれません。

パッケージ版と違い、常に最新バージョンのソフトが使える点はサブスクリプションならではのメリットです。

そうは言っても、やはりAdobeのソフトが高いことに変わりありません。

そこで、Adobeソフトを安く購入できる方法をご紹介します。

たのまなAdobe通信講座 バナー

たのまなAdobeトレーニング通信講座

たのまなAdobeトレーニング通信講座は、ソフトの学習講座とAdobeのソフトがセットになったサービスです。

なんと、税込39,980円でコンプリートプランの1年版を購入できます。
通常価格の40%以上の割引価格です。(2019年11月現在)

ただし、お得な価格で購入できるのはキャンペーン期間中です。

キャンペーンは定期的に行われていますが、通常価格で販売している期間もあるので、お得に購入するならキャンペーン期間を利用しましょう。

購入できるのはアカデミック版(学生・教職員個人用)となっていますが、ソフトそのものは同じです。

学習講座とのセットという意味のアカデミック版なので、社会人の方でも問題なく購入できます。

たのまな通信講座は、数少ない正式なAdobe認定パートナー企業が提供しているので、安心して購入できるサービスです。

Webデザイン業務を便利にしてくれるソフト

Webデザイナーの必須ソフトを紹介してきましたが、他にも制作業務を便利にしてくれるソフトがたくさんあります。

作業の効率化やさらなるスキルアップに役立つ代表的なソフトを紹介します。

必須ソフトの習得とWeb制作の基本スキルが身についた後、必要に応じて使っていきましょう。

ローカルサーバー環境構築ソフト

XAMPP 公式サイトキャプチャ

Webサーバーはインターネット上にあるサーバーのことを指しますが、サーバー環境を自分のPC上に設置することを「ローカルサーバー環境」とか「ローカル (開発) 環境」などと言います。

家庭内ネットワークや社内ネットワークのことを「LAN (Local Area Network)」と言いますが、そのローカルと同じ意味合いです。

WordPressはPHPというプログラム言語を動かせるサーバーがないと機能しないため、wordpress制作でローカルサーバー環境が必要です。

難しそうなイメージがありますが、ソフトを使えば簡単にローカルサーバーを構築できます。

有名なソフトにMAMPXAMPがあります。

最近では、WordPress環境構築用のLocal by Flywheelというソフトも、操作が簡単で人気があります。

Adobe Dreamweaver

Dreamweaver 公式サイトキャプチャ

Webサイト作成用ソフトです。
コーディングツールやオーサリングソフトなどとも言われます。

HTML、CSS、JavaScript、WordPressのコードなどの効率的な作成・編集から、サイトのファイル管理、FTP機能など、サイト構築における総合的な機能を持った制作ツールです。

Dreamweaverは、PhotoshopやIllustratorのように業界シェアを独占しているソフトではありません。

なぜなら、そもそもコーディングはテキストエディタさえあればできてしまうからです。

後述しますが、他の高機能なテキストエディタを愛用しているデザイナーの方もいます。

そのため、あえて必須ソフトとしてあげませんでしたが、Dreamweaverが定番ソフトであることは違いありません。

Dreamweaverは、あくまでHTML・CSSなどの知識とスキルがあるプロ向けのソフトです。

知識がないアマチュア向けに、ホームページ・ビルダーなどの作成ソフトがありますが、その手のソフトとはコンセプトが異なります。

つまり、「Dreamweaverを使えればHTML・CSSなどの知識はなくてもOK」ということではないので混同しないようにしましょう。

AdobeコンプリートプランならDreamweaverも含まれているので、追加費用なしで利用できます。

高機能テキストエディター

Sublime Text 公式サイトキャプチャ

コーディング作業に高機能なテキストエディターを使っている人も多くいます。

各種プログラミング言語に対応した様々なプラグインがあり、自分好みの機能を選んで追加できるのが人気の理由です。

どちらかと言うと、エンジニア・プログラマーの方が使うソフトの印象ですが、デザイナーの方にも愛用者がいます。

Dreamweaverは高機能ゆえに、UIが複雑だったり、動作が重たいなどのデメリットもあります。

制作に慣れてくると、シンプルにソースコードを記述していくスタイルの方がやりやすく感じる人もいるため、テキストエディターも人気があるのです。

また、コーディング作業を効率化するための拡張技術が発達してきたことも影響していそうです。

デザイナーの典型的な使い方としては、SassやEmmetの記法によるコーディングがあげられます。

なお、SassやEmmetはDreamweaverでも利用できます。

Dreamweaverよりもカスタマイズ性が高く、さらに柔軟にコーディング環境を構築できるため、高機能テキストエディターが支持を得ています。
CUI(後述)を同時に利用することもできます。

有名なエディターに Sublime TextAtomVisual Studio Code などがあります。

Webデザイナー向けのソフトとして Bracketscoda といったコーディングツールもあります。

プロトタイピングツール

Adobe XD 公式サイトキャプチャ

プロトタイピングツールを使うと、Webサイトの動き(アニメーション)なども含めてデザイン案を作成できます。

そもそもは、アプリやWebサービスの開発で行われるプロトタイピングですが、Webサイトの制作でもプロトタイピングツールが利用される機会が徐々に増えてきています。

Adobe XDSketch (Mac)FigmainVision StudioPrott 他、様々なプロトタイピングツールが登場しています。

AdobeコンプリートプランならXDも使えるので、追加費用なしで利用できます。

CUI (character user interface)

ターミナル アプリアイコン

普段パソコンを使う際に「マウスを使ってアイコンをクリックして、キーボードの入力もして~」と操作しますが、これは GUI (Graphical User Interface) と呼ばれるインターフェースの操作です。

対して、CUI (character user interface) はキーボードのみでテキストを入力して操作するインターフェースを指します。

「黒い画面」とか「コマンドライン」による操作、と言えばわかりやすいでしょうか。

昔々のPCのインターフェースはCUIでした。

Windowsにはコマンドプロンプト、Macにはターミナルという標準ソフトがインストールされています。

GUIがあるのになぜCUIを使うのかと言うと、CUIは単純作業の自動化や一括処理、PCに備わっている機能をダイレクトに呼び出す、といったことが得意だからです。

Web制作業務においては、タスクランナーGitを使った開発環境の構築などでCUIを使用します。

どちらかと言うと、エンジニア向けのスキルで、少し敷居は高いイメージですが、CUIの応用範囲は広いので、知っておくと何かと便利です。

Webデザインに使うソフトまとめ

Webデザイナーに必須のソフトは次の4つだけです。

  • Photoshop
  • Illustrator
  • 各種Webブラウザ
  • FTPソフト

上記のソフトがあれば、基本的にWeb制作はできます。

次のステップとして、WordPress制作用にローカルサーバー構築ソフトを導入したり、コーディングツールを活用した制作ができるようになるとよいでしょう。

ここまでできれば、立派なWebデザイナーです。

プロトタイピングやCUIは、必要に応じて覚えていけば十分です。

細かなものも見ていけば、他にも様々な便利なソフト・ツール等はありますが、探し始めるとキリがなかったりもします。

ソフトは手段でしかありません。
業務内容や自分が目指すキャリアに応じて、必要なソフトを選択していけるとよいでしょう。

Webデザイナーに必要なスキルとスキルアップ項目まとめ

コメント

コメントを残す

*

ページ上部へ戻る