おすすめの転職サイトを徹底比較!あなたに合った転職サイトが見つかります!

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

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

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

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

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

▽今すぐおこづかいが稼げる!仕事探しアプリの最高峰

会員数140万人のお仕事アプリ。毎日、1,000件の新しい仕事が掲載されてすぐにでも応募可能。デザインやイラスト作成お仕事も多数あります。すき間時間を利用した副業・在宅でのおこずかい稼ぎに最高です。利用は無料です。

CrowdWorks for Worker 副業・在宅ワーク

CrowdWorks for Worker 副業・在宅ワーク
無料
posted with アプリーチ

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

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

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

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

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

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

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

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

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

MicrosoftOffice

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

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

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

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

また、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デザイナーになる方法」も合わせて参考にしてみてください。

1位:ワークポート

ワークポートは、IT・インターネット業界専門の人材紹介会社。12年間で1万人もの転職支援実績があります。業界に詳しい専門のコンサルタントは、その知識に加えスピード感があると評判。無料セミナーや転職に役立つ管理ツールも充実しています。IT業界を目指すなら、登録必須といえる転職エージェントです。Webデザイナーにおいては、クリエイター専用のページがあり、デザイナーからディレクターまで、細かく分類されていて、求人を探しやすいです。

2位:リクルートエージェント

日本最大の転職エージェント。1977年の創業以来、30万人以上の転職成功実績、10万件越えの求人数があり、質、量ともに圧倒的な強さです。リクルートエージェントでは、営業職についでWeb系の求人が多いです。そのバックボーンを活かして、企業のWeb担当者から制作会社まで幅広い職種を取り扱っているのが強み。

3位:レバテックキャリア

IT・Web業界に特化した転職専門サービス。質の高いキャリアコンサルタントと転職先で活躍するエンジニアのネットワークが強み。顧客の目的を叶えるための徹底したサービスで、業界内でも評判がよく、快進撃を続けています。専門だからこそ、業界の傾向と実績を考慮して、Webデザイナーとしてのあなたのスキルを引き出してくれるでしょう。PhotoshopやIllustratorといったソフト別、プログラム言語別でも求人が分類されています。

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

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

 - 転職活動