- Webデザインに必要なソフトが知りたい
- プロのWebデザイナーはどんなソフト使ってる？
- どのソフトを覚えれば良いか分からない
Webデザイナーに無くてはならない仕事道具がWebデザインソフトです。色んなソフトがあり、何を覚えれば良いか迷ったりしていませんか？
この記事ではWebデザイナーとして必須と呼べる3つのソフトをご紹介。
それぞれソフトウェアの特徴と習得すべきポイントを紹介しているので、これからWebデザイナーを目指す人、Web制作の勉強をする人の参考になれば幸いです。
この記事の目次
Web制作に必要な3つのWebデザインソフト
WebデザイナーがWeb制作の必要なものは、PCと制作ソフトです。
カンプ
さすがにWebデザイナーを目指すんであれば、パソコンは持っているよね。
パソコンがなければWebデザイナーにはなれないので、早急に安いパソコンを購入するかスクールに通うしか選択肢がありません。
主に制作で使うソフトはAdobe社のこの3つ
- Adobe Photoshop （アドビ フォトショップ）
- Adobe Illustrator（アドビ フォトショップ）
- Adobe Dreamweaver（アドビ ドリームウィーバー）
他にも「InDesign」など色んなAdobe製品がありますが、まずはWebデザイナーの基本となるソフトがこの3つと覚えておきましょう。会社によって使用するソフトが違ってきますが、Photoshop、Illustrator、Dreamweaver、この3ソフトはどこの会社も共通だと思ってください。
Webデザイナーの求人が多い転職サイト「ワークポート」で求人をチェックしてみると
応募資格のほとんどに「Photoshop」「Illustrator」「Dreamweaver」が必須なのが分かるかと思います。
カンプ
さらに必須の度合いでいえば、
Photoshop＞Illustrator ＞ Dreamweaver
Adobe（アドビ）とは？
Adobe Systems（アドビ システムズ） 通称Adobe（アドビ）は、本社はアメリカ合衆国カリフォルニア州サンノゼ市にあり、Photoshopを始めIllustrator、Dreamweaverなど数々の画像・映像を加工・編集ソフトを手がける世界最大のソフトウェアメーカーです。
社名は設立者であるジョン・ワーノック(John Warnock)の自宅の裏に流れていたAdobe Creek Riverという川の名前に由来しています。
Adobeとは、スペイン語で
- 「日干しレンガ」
- 「泥のレンガ」
という意味です。
参照：sitebook
カンプ
Webデザイナーと深い関係があるのがAdobeのソフトウェアなんです
以前はAdobe FireWorks（アドビ ファイヤーワークス）というソフトがあり（PhotoshopとIllustratorの間の様なソフト）、Photoshopと肩を並べるほどの人気がありましたが2013年に開発が終了。
実は僕もメインはFirewWorksを使っていて、今でも使用しているWebデザイナーは多いかもしれません。
しかし、前述した通り開発は終わってますし、Creative Cloudにも含まれていないので、これからWebデザイナーを目指す人はPhotoshopを勉強しておくのが良いでしょう。
Adobe Photoshop (アドビ フォトショップ)
略称は「フォトショ」と呼ばれている写真加工ソフト。
無料ツール・無料ソフトで画像編集ソフトはたくさんありますが、プロのWebデザイナーはPhotoshopが必須になってくるでしょう。
理由としては他のソフトと比べて機能、編集性能が桁違い。
画像編集ソフトで右に出るものはいません。
Photoshopでできる事
- 写真補正・写真加工
- 切り抜き(パス抜き)
- 写真のリサイズ
- Webバナーの作成
- Webページのデザイン
Adobe Illustrator (アドビ イラストレーター)
略称は「イラレ」と呼ばれているグラフィック系ソフト。
Adobe Illustratorはベクターデータを扱うのに優れています。
ベクトルデータ（画像）とは、写真画像と違い拡大縮小しても画像が粗くなったり、ガタガタになりません。なぜなら、ベクトル画像の線や色は、どの位置でどの様な描画をするか、全てのソフト内でリアルタイムで計算されて出力されているという特徴があるからです。
Illustratorでできる事
- イラスト作成
- ロゴデザイン
- アイコンデザイン
- Webパーツ作成
写真、画像加工が得意なPhotoshopに対し、Illustratorはイラストやオブジェクト部分の制作に優れています。
しかし、ここで伝えておきたいのがWebデザイナーはイラストを描けなくても良いという事。イラストレーターと呼ばれる職業がある様に、WebデザイナーはWebサイトをデザインするお仕事です。
勿論、Illustratorは使いこなしイラスト制作ができれば強みにはなりますが、制作現場でもイラストに関しては外注のイラストレーターに頼んだり、素材サイトから入手するケースが多いです。
Webデザイナーであれば最低限、Illustratorでロゴデザインとアイコンデザインができれば十分かと思います。実際の現場でもPhotoshopとIllustratorの使用割合は8：2なので、優先的に使い方をマスターしたいのはPhotoshopの方ですね。
Adobe Dreamweaver (アドビ ドリームウィーバー)
DreamweaverはHTML・CSSのコーディングの作業を効率化してくれるテキストエディタの上位ソフト。
Webデザイナーが作成したWebページのデザインデータを元にHTML・CSSでコーディングしていきホームページを構築していきます。Dreamweaverを使う事で、Webサイトをプレビューで確認しながらコーディングできるので、作業効率が飛躍的にアップします。
WordPressのPHPやJavascriptといったプログラミング言語でも使えます。
テキストエディタの上位ソフトといった様に、Dreamweaverはコーディングの効率化ソフトなので、コーディングはメモ帳やテキストエディターでも可能です。
Dreamweaverを使わず、メモ帳やテキストエディタで作業しているWebデザイナーもいます。
おすすめのテキストエディタ
Windowsであれば
- Crescent Eve（無料）
- TeraPad（無料）
- 秀丸（有料）
Macであれば
- CotEditor（無料）
- mi（無料）
- TExtWangler（無料）
いってしまえばコーディングができればパソコンに常備されているメモ帳でもOKなんです。
なので、Dreamweaverは使う機会があれば、触っておく程度で大丈夫です。それよりもHTMLやCSSの「コードを書く」練習をする方がいいでしょう。
想像以上に高いWebデザインソフト
WebデザイナーにとってAdobeソフトは必要不可欠なソフトです。
ソフトの性能としての欠点はほとんどありません、唯一ネックなのが値段が高いという部分。
１つのソフト平均価格が40,000円〜90,000円。
カンプ
プロが使うソフトなだけあって、めちゃくちゃ高い…
Webデザイナーになりたければ、勉強するのに必須ですが、どうしても金額に値が張るので学生がお金がない人は買う事ができませんでした。
Adobe Creative Cloud
しかし、ここ数年前から「Adobe Creative Cloud」が導入され、これまで買い切りだったAdobe製品が定額制にシフトチェンジしました。
一番安い「Creative Cloudフォトプラン」であれば、月額980円からPhotoshopが使い放題！
↓商品の詳細はこちら↓
「Creative Cloud単体プラン」なら月額2,180円でPhotoshop、Illustrator、Dreamweaver、など他12ソフトが使い放題。さらに学生ならフォトプランと同じ月980円から利用できます！
↓学生版の詳細はこちら↓
Creative Cloudの登場でAdobeソフトの敷居がグッと縮まりました。
独学で勉強しAdobeのソフトを購入できるほどお金に余裕の無かった僕は色々調べた結果、WEB制作に特化したFireworksだけ購入。出費は60,000円ほどでしたね（汗）
Fireworks(ファイヤーワークス)でグリッドや定規を表示する方法・ショートカット
カンプ
僕の時代では全て買い切りだったので良い時代になったなと感じます
（クラウドサービスになった背景にはコピー製品の対策も１つの理由だと思う）
全てのWebデザインソフトを使えないとWebデザイナーになれない？
そんな事はありません。
カンプ
基本的にPhotoshop、illustratorをメインに使っている制作会社が多いです。
求人募集でもこの2つを使えるのが必須条件に入ってるところがほとんどです。
しかし、会社によって使用するソフトが増えたり、違ったりするので一概にこれだけを覚えておこうとは言い切れません。
しかし、Webデザイナーとして一番重要なソフトは「Photoshop」です。
IllustratorやDreamweaverは使えなくてもまだ何とかなりますが、Photoshopだけは使える様になっておかないとWebデザイナーになる事はできないでしょう。
なので、どのソフトから覚えればいいんだろと悩んでいる人はPhotoshopの使い方から覚えて下さい。
Webデザイナーがよく使うソフトまとめ
- Photoshop、Illustrator、Dreamweaverは必須
- Webデザイナーで一番重要なソフトはPhotoshop
- 「Adobe Creative Cloud」なら月額980円から利用可能
- 最終的には、勤務している会社の環境に合わせる事になる
理想は3つのソフトを全て操作できるようになるのが良いですがそうなるには時間とお金がかなり必要になってくるので…とりあえず初心者が優先的に覚えるべきソフトはPhotoshopです。
求人の応募資格には「Photoshop、Illustratorが操作できる人」と記載されているのが多いですが、PhotoshopでWebデザインできるスキルがあればIllustratorを使えなくても採用に通る可能性は十分あります。
制作会社からすればWebデザインを作れる人が欲しいわけです。「Webデザイナー面接の成功術」でも説明してますが、自分のスキルをアピールするのはポートフォリオサイトしかありません。所詮ソフトは仕事の効率化、自分のスキルアップのツールでしかありません。
いくらバットの振り方が上手でも、
試合でヒットを打てなきゃ意味ないですよね？
ソフトを操作できる力も必要ですが、最終的にWebデザインができる、コーディングができないとWebデザイナーにはなれません。
話を聞くとWebデザイナーになるのは厳しいと感じるかもしれませんが、正しいやり方と勉強をすれば実務経験がない未経験でもWebデザイナーになる事ができます。
カンプ
僕も未経験からWebデザイナーになる事ができたので大丈夫！諦めなければ絶対にWebデザイナーになれます！頑張って下さい！
関連記事 未経験からwebデザイナーになるには？独学で勉強した全てを公開
未経験OK！の転職エージェントランキング
Webデザイナーに転職するには、転職サイトや、キャリアコンサルタントがサポートしてくれる転職エージントに登録するのが一般的です。
しかし、転職エージェントだけでも1万社以上もあるといわれており、初めて利用する人はどの転職エージェントを選べば良いか分からないですよね。
当サイトではWebデザイナーに強く、さらに未経験OKのおすすめ転職サイトをランキング形式で紹介します。
また、未経験でWebデザイナーを目指すなら「独学で未経験からWebデザイナーになるためにやった全てを公開」も合わせて参考にしてみてください。
WORKPORT（ワークポート）
僕も実際に登録していますが、3日に一通の頻度でメールでたくさんの求人情報を届けてくれます。
あまりきめ細かくこちらの希望に合わせてはくれませんが、とにかく量だけは豊富なので、自分の行きたい企業が選びやすいです。
マイナビエージェント
実は、大手と比べると『登録者が少ない』転職エージェントなんです。 一見、デメリットに感じる人もいるかもしれませんが、登録者が少ない分、1人1人の転職希望者にかける時間は大手よりも多く取ることができます。サポートが丁寧な分、利用者満足度が高いというのが最大のメリットと言えるでしょう。
マイナビエージェントのキャリアアドバイザーは、さまざまな職種を専門とするスタッフです。未経験の職種でも、その仕事の実情などについてしっかりサポートしてくれるのが特徴。
ProEngineer（プログラマカレッジ）
は、通常なら数十万円はするプログラミングの講座を無料で開催し、さらに就職支援までしてくれるエージェント。正社員就職率96.2%は驚異の数字を誇ります。求人数は3000件以上で、就職先もサイバーエージェントグループやチームラボ、IMJなど有名企業が多いです。 フロントエンドエンジニアやプログラミングに強いWebデザイナーになりたいなら、無料なのでぜひトライしてみてください。もしエンジニアの素質があるなら、年収もグンとアップします。