プロも使用！Webデザインに必要な主流のソフト

※当サイトはWeb広告を利用しています

「Webデザインをしたいけど、どんなソフトを勉強したらいいの？」「プロのWebデザイナーはどんなソフトを使っているの？」

様々なデザインソフトがあり、これからWebデザインを学ぶのであれば、このような疑問があるでしょう。

とはいえ、主流は決まっています。それをマスターすれば、プロのWebデザイナーとしても通用するというソフトがあるんです。

このページでは、実際にWebデザイナーとして制作会社で働く私が、Webデザインに必要な主流ソフトを紹介します。

Webサイトを公開するまでの流れ

ただ羅列しただけでは、分かりにくいので、実際にWebサイトを制作して、公開するまでの流れに沿ってみていきましょう。

一般的には、以下のような流れになります。

（1）企画・サイト設計→（2）コンテンツ制作・原稿確認→（3）Webデザイン→（4）コーディング（HTML、CSS）→（5）ブラウザで確認→（6）サーバーにアップロード（公開）

Webデザイナーといえど、企画やサイト設計から関わることもありますし、HTMLコーディングまでの仕事をすることもあります。

会社の体制によりますが、プロジェクトを進めるにおいて、全体像を知っておいた方がよいデザインにつながります。ざっくりとでもいいので、おさえておきましょう。

それぞれの工程で必要となるソフトが異なりますが、ここさえおさえておけば、プロの現場でも通用します。次項からは、具体的にソフトを紹介していきます。

（1&2）企画・サイト設計〜コンテンツ制作・原稿確認

デザインに入るまでの工程です。ここでは、Office系のソフトを使います。

MicrosoftOffice

ビジネスにおいては定番ですね。これはどんな職種でも当たり前のように使います。最低でもExcel、Word、PowerPointを開ける環境は整えておきましょう。

クライアントからくる原稿は、ほとんどOffice系ソフトで作られているため、やりとりがスムーズになります。

制作においても企画書や見積書、スケジュール表、サイトマップ、コピーライティングといった場面でよく使います。これらをWebデザイナーが作成することもよくありますよ。

しかし、バージョンやファイル形式の違いでファイルを開けないときがあり、緊急を要するときはすごく困ります。そんな時は、大替えとしてフリーソフトのApache OpenOfficeやGoogleドキュメントが便利。無料で利用できますし、テキストだけでも抽出できると思います。

また、MicrosoftOfficeは高価であるため、フリーランスや趣味の範囲ならApache OpenOfficeでも事足ります。とはいえ、業界標準ですので、買うにこしたことはないです。

Adobe PDF

ソフトやOSの差異によりどうしてもファイルが開けないことがあります。それをどんな環境でも開けるようにするのがAdobe PDFです。

他にも機密書類にパスワードをかけたり、Webサイトからダウンロードする文書をPDFにしたりと、活躍の場は多いです。そこで必要になるソフトは2つです。

Adobe Acrobat Reader DCは、PDFを開くためのソフト。無料でダウンロードできます。
Adobe Acrobat Reader DC公式Webサイト

PDFを作成、編集にはAdobe Acrobat Pro DCを使います。PDFの保護やファイルの統合、リンクの埋め込みなど高精度の編集ができます。カタログやチラシといった印刷物をWeb用の原稿として使うことも多くあり、重宝します。

（3）Webデザイン

Webデザイナーの肝となるデザインを作成するソフトを紹介します。レイアウトやイラスト作成、写真補整など用途に応じて使い分けましょう。

Adobe Photoshop

Webデザインの王道ソフトがAdobe Photoshop（アドビ フォトショップ）です。 多くのWebデザイナーがメインで使用しており、私もその一人。使わない日はありません。

本来、Photoshopは、画像編集ソフトなのですが、Webデザインと非常に相性がいいのです。Webデザインは、最終的に画像として書き出され、HTMLにでコーディングされます。

そのため、画像の取扱いに優れているPhotoshopでの作業は効率がいいのです。ブラシやグラデーションを使ってクリエイティブなこともできますし、スライスや書き出しといった作業もしやすいです。

もちろん写真の補整もできるため、デザインが効率よくできます。

しかし、Photoshopは高価です。プロになりたければ勉強するのに必須ですが、どうしても買えない場合や個人利用のブロガーなどであれば、一般ユーザー向けの「Adobe Photoshop Elements」がおすすめ。

Adobe Photoshop Elementsは、Photoshopの機能の一部が使えるライトモデルです。よほど特殊なことをやらないのであれば、十分に使えるソフトです。それでいて価格は、1万円前後と安いです。

フリーソフトであればGIMPも有名。無料で使えるわりに高機能なため、Photoshopの代替ソフトとしてよく名前が上がります。個人利用であれば問題ないでしょう。

それとAdobe FireworksというソフトもかつてはPhotoshopと肩を並べるほどの人気でした。今でも使用しているWebデザイナーは多いかもしれません。しかし、残念ながら2013年に開発が終了してしまいました。

そのため、これからWebデザイナーを目指す人はPhotoshopを勉強しておくのがよいでしょう。

Adobe Illustrator

ベクターデータを扱うのに優れているのがAdobe Illustrator（アドビ イラストレーター）です。

ベクターデータとは拡大・縮小しても劣化しないデータのこと。イラストやロゴのようなオブジェクトの制作に適しています。印刷物（名刺やチラシ、ポスター）も得意でDTPデザインでは最もスタンダードなソフトです。

Webデザインにおいては、ベースはPhotoshopで、イラストのような部分的なオブジェクトはIllustratorで作るといった使い分けをします。両者は相性がよく、コピー＆ペーストで移動できるのです。

DTP出身のデザイナーは、IllustratorでWebデザインする人もいますが、データの変換やスライス、画像の書き出しのことを考えるとPhotoshopの方がおすすめです。別のデザイン会社で制作したデザインをHTMLコーディングすることもありますが、Illustratorのデータだと面倒なのですごく嫌です笑。

なので、先程書いたような使い分けをするといいですよ。覚えておいて絶対に損はありません。

使うかもしれないソフト

頻繁には使いませんが、たまに使うのが「Adobe Flash Professional」と「Adobe InDesign」です。

Flashの方は、その名の通りFlashを制作できるソフト。一時期、流行しましたが、スマホで見られないという理由で、徐々に姿を消しています。

代わりにJavaScriptやjQueryといったプログラミング言語が使われており、スキルとして身につけたいならこちらのほうが、役立つと思います。

とはいえ完全に消えたわけではないので、過去データの修正やFlashが適している制作物で、使う可能性もあります。

Adobe InDesignページデザインとレイアウトに適しているソフト。パンフレットやカタログのような冊子デザインでよく使われます。Webデザインでは使いませんが、ごくたまに、原稿として支給されたデータを開くことがあります。

Webデザイナーを目指すならすべてが揃ったお得なセット

Adobe Creative Cloudのコンプリートプランならここで紹介したAdobe Photoshop、Adobe Illustrator、Acrobat DC、Adobe Flash Professional、Adobe InDesignと後ほど紹介するAdobe Dreamweaverがセットになっていてお得です。

Webデザイナーを目指すなら持っていても損はありません。スキルを身につけておけば、どんな制作会社に入っても必ず役に立つでしょう。

（4）コーディング（HTML、CSS）

Webデザイナーでもコーディングをすることがあります。明確な役割分担がされていたり、カリスマデザイナーでなければ、兼任することのほうが多いでしょう。

Adobe Dreamweaver

高機能なコーディングソフトがAdobe Dreamweaver（アドビ ドリームウィーバー）です。

コードヒントやあらゆるツールのおかげで、コーディングが素早く、楽にできます。私も長年メインで使用しています。WordPressのPHPファイルやJavaScriptといったプログラミング言語でも使えます。

しかし、無理に使わなくてもコーディングは、メモ帳やテキストエディターでも可能です。WindowsではCrescent Eve（無料）やTeraPad（無料）、秀丸（有料）、Macでは、mi（無料）やCotEditor（無料）が有名です。コーダーやプログラマーは各々好きなものを使っていますね。

なのでDreamweaverは使う機会があれば、触っておく程度で大丈夫です。それよりもHTMLやCSSで「コードを書く」ということを勉強しておきましょう。

（5）ブラウザで確認

コーディングが終わったWebデザインは必ずブラウザで確認します。ブラウザとは、Webサイトのコードを解析して表示してくれるソフトのこと。ブラウザによって、表示方法が微妙に異なるため、表示崩れやプログラムが動作しないこともあるのです。

世界的にシェアが高いブラウザは、
・Google Chrome
・Mozilla Firefox
・Internet Explorer
・Safari
の4つ。すべて無料ですのでインストールしておきましょう。（Internet ExplorerはWindowsのみ）

また、スマホやタブレット用のWebデザインであれば、必ず実機のブラウザで確認するようにしましょう。

例えば、文字の詰め幅や大きさなどの見た目が、Photoshopでデザインしたものと異なって見えることがありますよ。

（6）サーバーにアップロード（公開）

コーディングが完了したらいよいよ公開です。公開するには、FTPソフトを使って、データをサーバーにアップロードします。

FTPソフト

有名なソフトは、以下の4つです。
・FileZilla（Windows、Mac）
・WinSCP
・Cyberduck（Windows、Mac）
・Fetch（Mac）

特殊な使い方を想定していなければ、どれも性能はほとんど同じです。画面の見やすさや操作性で選んでみましょう。ここにあげているものでは、Fetchのみ試用期間を過ぎれば有料になります。

どれかと言われればFileZillaが最も多く使われている印象があります。私も使っています。

まとめ

ここで紹介したWebデザインに必要なソフトと優先度をまとめます。

・MicrosoftOffice（Apache OpenOfficeでも可）
・Adobe PDF（必須）
・Adobe Acrobat Reader DC（できれば）
・Adobe Photoshop（必須）
・Adobe Illustrator（必須）
・Adobe Flash Professional（できれば）
・Adobe InDesign（できれば）
・Adobe Dreamweaver（テキストエディタでも可）
・ブラウザ：Google Chrome、Mozilla Firefox、Internet Explorer、Safari（必須）
・FileZilla（必須）

これだけあればプロの仕事ができます。Adobe製品は、高価ですが、今のところ業界標準ですね。月額払いになったので、以前よりは買いやすくなってますし、学生であればアカデミック版が安く買えます。まずは、体験版や代替えソフトで試してみてもよいですね。

なお、ソフトだけでなくパソコンのOSについての疑問もあるでしょう。それに関しては以下ページを参考にしてみてください。

一歩踏み込んで、ソフトの使い方を勉強したい人は、以下の記事も参考にしてください。

Webデザイナーに強いおすすめの転職サイトランキング

Webデザイナーに転職するには、転職サイトや、キャリアコンサルタントがサポートしてくれる転職エージントに登録するのが一般的です。

しましながら、転職エージェントだけでも1万社以上もあるといわれており、何を基準に選べばいいか分からないですよね。そこで、求人数、実績、サービス内容、評判などを総合的に判断して、Webデザイナーに強いおすすめの転職サイトをランキング形式で紹介します。

また、未経験でWebデザイナーを目指すなら「現役が教えます！未経験でもWebデザイナーになる方法」も合わせて参考にしてみてください。

さらに詳しくは「Webデザイナーに強い転職エージェントランキング」もご覧ください。

Webデザイナーだけではなく、Web/IT業界全般の職種に関わる求人なら「IT・Web業界に強い転職エージェントランキング」も参考にしていただけます。