前回の記事、『Webデザイナーがよく使うソフトを業務シーン別に解説』では、普段Webデザイナーが業務シーンに応じてどのようなソフトを使っているのかをご紹介しました。
本記事では各ソフトについて、より詳しく解説します。
Webデザイナーがよく使っているソフト一覧
Webデザイナーが日々の業務で、頻繁に利用するソフトをまとめると、大体以下のようなソフトをメインで使用しています。
- Adobe Illustrator（アドビ イラストレーター）
- Adobe Photoshop（アドビ フォトショップ）
- Adobe Fireworks（アドビ ファイアーワークス）
- Adobe Animate（アドビ アニメイト：旧名 Adobe Flash/アドビ フラッシュ）
- Adobe Dreamweaver（アドビ ドリームウィーバー）
- テキストエディタ
- FTPツール
- 各種Webブラウザ（PC、スマホ、タブレット）
- Word、Excel、Power PointなどのMSオフィス系
今回は、グラフィック系ソフトからコーディング用ソフト、テキストエディタのソフトについて解説していきます。
「Adobe（アドビ）」とは？
前述のリストでは何やら「Adobe」という単語を目にしますよね。Webデザイナーが使用するソフトの中でも、最も利用頻度や種類が多いものというとAdobeのソフトになりますので、まずAdobeについて解説します。
Adobeの本社はアメリカにあり、正式な会社名は「Adobe Systems（アドビ システムズ）」と言います。
また、Adobeはソフトのみを開発する企業としては世界最大級の会社で、Web制作関連のみならず、印刷や映像関連などのクリエイティブ系ツールを開発・販売しています。
Webデザイナーやクリエイティブ系の職に就いたら、Adobe系ソフトの習熟は必須です。なぜなら「みんなが使っているから」です。
職場で複数のWebデザイナーが作業をする際、同じソフトが使えなければチームで作業できませんし、社外の方との連携やお客様が持っている過去の編集データやロゴデータなども大体はAdobeのソフトで作成されているので、ソフトが無いと仕事になりません。
Webデザイン、画像作成、写真加工に使うソフト
Adobe Illustrator（アドビ イラストレーター）
略して『イラレ』とも呼ばれるグラフィック系のソフトです。
このソフトの最大の特長は「ベクトル画像を作成できる」という点です。
ベクトル画像は、写真画像と違って、拡大縮小しても画像が粗くなったり、ガタガタになりません。なぜなら、ベクトル画像の線や色は、どの位置でどのような描画をするか、全てソフト内でリアルタイムで計算されて出力されているという特長があるからです。
逆に、後述するフォトショップと違い、写真の加工や編集については、全く出来ない訳ではありませんが、ソフトの性質上、ほとんど役に立たないと考えた方がいいです。
イラストレーターの使いどころ
拡大縮小しても画像が荒くならないので、ロゴや地図、グラフなどの図版作成に向いています。
また、ワイヤーフレームの作成、トップページや中ページのデザイン案の作成、メニューやボタン等の画像を作成する際にも、イラストレーターを使う方もいます。
後述のフォトショップと合わせて、Webデザイナーの２大標準グラフィック系ソフトの一つです。
Adobe Photoshop（アドビ フォトショップ）
略して『フォトショ』とも呼ばれるグラフィック系のソフト。
このソフトの最大の特長は何と言っても「ビットマップ画像の処理や作成に秀でている」点です。
ビットマップ画像は、写真画像のように一度出来たものは、その情報で固定されるという特徴があり、拡大縮小をすると画像が荒くなります。
フォトショップはこのビットマップ画像の処理が得意で、色の調整や切り抜き、フォトショップ形式のファイルからjpgやgifなどのファイル形式に変換する際、綺麗に出力することが可能です。
フォトショップの使いどころ
写真の加工や編集はフォトショップが向いています。また、ボタン画像などのパーツ作成にもよく利用されるソフトです。
イラストレーター同様、ワイヤーフレームの作成やトップページ、中ページのデザイン案をフォトショップで作成される方もいます。
前述のイラストレーターと合わせて、Webデザイナーの２大標準グラフィック系ソフトの一つです。
Adobe Fireworks（アドビ ファイアーワークス）
ファイアーワークスは、もともと「マクロメディア」というアメリカの会社が開発・販売していたソフトでしたが、2005年にAdobeに買収され、Adobeブランドとなりました。
ファイアーワークスの最大の特長は「Web用の画像作成に特化している」という点です。
イラストレーターやフォトショップの始まりは、印刷物用のデザイン作成を目的として開発されたソフトですので、多機能、高機能である反面、Web用には不要な機能も多いです。
その点、ファイアーワークスはWeb用の画像に特化しているので、イラストレーターやフォトショップと比べて細かい設定ができなかったり、書き出しの精度に若干劣るところはあるものの、慣れると操作が簡単なので「画像作成のスピードが断然早く」なります。
ファイアーワークスの使いどころ
ファイアーワークスは、イラストレーターの特長である「ベクトル画像」の作成とフォトショップの特長である「ビットマップ画像の加工や処理」が両方ともそれなりにできます。
そのため、フレームワーク作成からデザイン案作成、写真加工、ボタン画像の作成まで、ファイアーワークス１本で全て完結することも可能です。
私も基本的にファイアーワークスをメインとして使用しています。ロゴ作成や、細かい地図などの図版はイラストレーターを使い、あとは全てファイアーワークス、というのが多いです。
グラフィック系ソフトはどれを使うべきか？
Webデザインを学び始めた初心者の方にとっては、これらのグラフィック系ソフトは結局、どれを使うべきか迷うかもしれません。
Web制作会社に就職できた場合は、その会社が使用しているソフトに合わせるしかないのですが、Webデザイナーを目指している方が、どのソフトを勉強しようかという場合は、今後は、イラストレーターとフォトショップを中心とした方が良いのではないかと考えています。
というのも、ファイアーワークスの開発が終了となったので、今後、いつまで使い続けられるか分からない状況だからです。
ファイアーワークスは開発終了…
私はマクロメディア時代からファイアーワークスを愛用しており、Webデザイナーの中でもファイアーワークスをメインでWeb制作されている方は意外と多いです。
やはり慣れると作業効率が非常にいいので、時間に追われるWebデザイナーにはとてもありがたいソフトなのです。
しかし、残念ながら2013年にAdobeからファイアーワークスの開発を終了するというアナウンスがありました。
現在のAdobe製品は「Adobe Creative Cloud」という月額課金制のアプリとなり、契約するとAdobeの製品がたくさん使えるようになりますが、ファイアーワークスも今のところ含まれています。
「開発終了するなら、ファイアーワークスをオープンソースとして公開してほしい」という署名活動が海外で起きたくらい、根強いファンがいるソフトなので、そう簡単には無くならないとは思うのですが、しかし、いつまで使い続けられるのか不透明ではあります。
これからWebデザイナーを目指す場合は、本当は初心者こそファイアーワークスの方がとっつきやすいと思うのですが、フォトショップとイラストレーターから学習していった方が、就職先で使っている会社も多く無難であるのと、「ファイアーワークスが使えなくなるかもしれない」という将来性を考えても、こちらの方がいいのではないかと思います。
イラストレーターとフォトショップの使い分け
ロゴやグラフ、地図などの拡大縮小が頻繁にあるような画像はイラストレーターを使うことが多いです。
前述の通り、イラストレーターは写真の加工や編集がほとんどできませんので、そのような場合はフォトショップ一択になります。
デザイン案やボタン画像作成などでは、作成する画像の性質によってイラストレーターとフォトショップを使い分けますが、Webデザイナーによっては、イラストレーターばっかり使っている人、フォトショップだけを使う、という人もいます。
どちらかというと、デザインが好きなWebデザイナーほど、フォトショップをメインとしている方が多いように思います。
あとは個人的な好みや慣れで、どちらかのソフトばかり使っているという感じですね。
また、会社の環境によって使うソフトを合わせざるを得ないことが多いので、自然と使うソフトも会社の環境によって決まっていく、というのもあります。
リッチコンテンツ作成に使うソフト
Adobe Animate（アドビ アニメイト：旧名 Adobe Flash/アドビ フラッシュ）
『Flash Professional』というアニメーションや動画を作成するツールがありましたが、2016年２月より、『アドビ アニメイト』という名称に変更となりました。
一昔前のリッチメディアの代表と言えばFlashだったのですが、iPhoneやiPad、MacでFlashがサポートされなくなり、これらのデバイスではFlashが表示されなくなりました。
また、近年は「モバイルファースト」と言われるほど、Webサイトはスマホ向けの表示を中心に考えて制作するようになってきており、そのような中でFlashはスマホで表示されない訳ですから、Flashコンテンツの制作が少なくなってきています。
最近では、アニメーションなどのリッチコンテンツは「HTML5」や「WebGL」と言った新しい技術で表現されるようになってきました。アニメイトはこれらの制作にも使えるソフトになります。
ただ、イラストレーターやフォトショップほど必要とされる機会が少ないため、これからWebデザイナーを目指す方は、勉強の優先順位としては、まずはイラストレーターとフォトショップを中心に学習し、そこにアニメイトの学習をすれば、他の求職者との差別化になるでしょう。
HTML、CSS、javascript、php等のコーディングに使うソフト
Adobe Dreamweaver（アドビ ドリームウィーバー）
ドリームウィーバーは、ファイアーワークス同様、以前はマクロメディアで開発・販売されていたソフトです。
当時から業界でも『ドリームウェーバー』と発音する人がたくさんいて、ものすごく違和感があったのを覚えています。正確には『ドリームウィーバー』です。
HTMLやCSSなどのコーディング作業は、Windowsであれば『メモ帳』のようなテキストエディタでも可能ですが、ドリームウィーバーはWeb制作に特化しており、コードの記述やファイルの管理で便利な機能があるため、コーディングに関してはWebデザイナーに広く支持されているソフトです。
ただ、コーディングに慣れてくると、ドリームウィーバーの機能が無くても事足りるように感じることもあり、後述のテキストエディタをメインにしてコーディングするようになる方もいます。
私も現在では、ドリームウィーバーはCSSの入力補助的にしか使わなくなってきました。無ければ無いでも、全然仕事は可能です。
テキストエディタ
「テキストエディタ」とは名前の通り、「テキストファイルを作成するためのソフトの総称」です。
Windowsでは最初からインストールされている『メモ帳』もテキストエディタです。
Webデザイナーが使うテキストエディタは、Windowsではシェアウェアの『秀丸（ひでまる）』が有名ですが、私はフリーの『EmEditor（イーエムエディター）』を利用しています。
あまり難しいことはしていないので、手軽にサクサク使えるEmEditorが私にはちょうど良かったのですが、フリーでもWeb制作を考慮したテキストエディタはたくさんありますので、いろいろ試してみるのがおすすめです。
ホームページビルダーなどを使わない理由
Web制作のためのソフトはドリームウィーバーやテキストエディタ以外にも、『ホームページビルダー』などがあります。
しかし、プロのWebデザイナーはまず使いません。
理由は、無駄なタグや特殊なタグが入ることがあるからです。ホームページビルダーなど、最近のバージョンでは昔ほど無駄なタグや特殊なタグが入らないという話もありますが、不必要なタグは表示崩れやエラーの原因になるので、使いたくないんですよね。
それらのソフトは素人さんが、多少の表示崩れがあってもOKという前提で作るもので、プロのWebデザイナーのように、表示崩れは許されないというケースには合わないのです。
Webデザイナーがよく使うソフトまとめ
- グラフィック系ソフトは、イラストレーターとはフォトショップを中心に使う
- Web用画像作成はファイアーワークスも根強い人気だが、開発が終了
- Flashの作成は少なくなってきている
- コーディングソフトはドリームウィーバーが基本だが、テキストエディタだけでも可
- 最終的に、大体は勤務している会社の環境に合わせることになる
本記事ではグラフィック系、コーディング、テキストエディタのソフトについて解説しました。
業務シーン別に使用するソフトについてや、FTPツール、各種Webブラウザ、MSオフィス系のソフトについては以下の記事をご覧ください。
