👉 独学で未経験からWebデザイナーになるためにやった全てを公開

これだけは覚えて欲しいWebデザイナーに必要な3つのソフト

これだけは覚えて欲しいWebデザイナーに必要な3つのソフト

 

  • Webデザインに必要なソフトが知りたい
  • プロのWebデザイナーはどんなソフト使ってる?
  • どのソフトを覚えれば良いか分からない

 

Webデザイナーに無くてはならない仕事道具がWebデザインソフトです。色んなソフトがあり、何を覚えれば良いか迷ったりしていませんか?

この記事ではWebデザイナーとして必須と呼べる3つのソフトをご紹介。

それぞれソフトウェアの特徴と習得すべきポイントを紹介しているので、これからWebデザイナーを目指す人、Web制作の勉強をする人の参考になれば幸いです。

 

Web制作に必要な3つのWebデザインソフト

Webデザイナーに必要な3つのソフト

WebデザイナーがWeb制作の必要なものは、PCと制作ソフトです。

lsamu

さすがにWebデザイナーを目指すんであれば、パソコンは持っているよね。

パソコンがなければWebデザイナーにはなれないので、早急に安いパソコンを購入するかスクールに通うしか選択肢がありません。

 

主に制作で使うソフトはAdobe社のこの3つ

  • Adobe Photoshop (アドビ フォトショップ)
  • Adobe Illustrator(アドビ フォトショップ)
  • Adobe Dreamweaver(アドビ ドリームウィーバー)

他にも「InDesign」など色んなAdobe製品がありますが、まずはWebデザイナーの基本となるソフトがこの3つと覚えておきましょう。会社によって使用するソフトが違ってきますが、Photoshop、Illustrator、Dreamweaver、この3ソフトはどこの会社も共通だと思ってください。

Webデザイナーの求人が多い転職サイト「ワークポート」で求人をチェックしてみると

ワークポートの求人を見てみる

応募資格のほとんどに「Photoshop」「Illustrator」「Dreamweaver」が必須なのが分かるかと思います。

lsamu

さらに必須の度合いでいえば、

Photoshop>Illustrator > Dreamweaver

 

Adobe(アドビ)とは?

Adobe(アドビ)とは?

Adobe Systems(アドビ システムズ) 通称Adobe(アドビ)は、本社はアメリカ合衆国カリフォルニア州サンノゼ市にあり、Photoshopを始めIllustrator、Dreamweaverなど数々の画像・映像を加工・編集ソフトを手がける世界最大のソフトウェアメーカーです。

社名は設立者であるジョン・ワーノック(John Warnock)の自宅の裏に流れていたAdobe Creek Riverという川の名前に由来しています。

Adobeとは、スペイン語で

  • 「日干しレンガ」
  • 「泥のレンガ」

という意味です。

参照:sitebook

lsamu

Webデザイナーと深い関係があるのがAdobeのソフトウェアなんです

Adobe Fireworks

以前はAdobe FireWorks(アドビ ファイヤーワークス)というソフトがあり(PhotoshopとIllustratorの間の様なソフト)、Photoshopと肩を並べるほどの人気がありましたが2013年に開発が終了。

実は僕もメインはFirewWorksを使っていて、今でも使用しているWebデザイナーは多いかもしれません。

しかし、前述した通り開発は終わってますし、Creative Cloudにも含まれていないので、これからWebデザイナーを目指す人はPhotoshopを勉強しておくのが良いでしょう。

 

Adobe Photoshop (アドビ フォトショップ)

Adobe Photoshop

Adobe Photoshop

略称は「フォトショ」と呼ばれている写真加工ソフト。

無料ツール・無料ソフトで画像編集ソフトはたくさんありますが、プロのWebデザイナーはPhotoshopが必須になってくるでしょう。

理由としては他のソフトと比べて機能、編集性能が桁違い。

画像編集ソフトで右に出るものはいません。

Photoshopでできる事

  • 写真補正・写真加工
  • 切り抜き(パス抜き)
  • 写真のリサイズ
  • Webバナーの作成
  • Webページのデザイン

 

Adobe Illustrator (アドビ イラストレーター)

Adobe Illustrator

Adobe Illustrator

略称は「イラレ」と呼ばれているグラフィック系ソフト。

Adobe Illustratorはベクターデータを扱うのに優れています。

ベクトルデータ(画像)とは、写真画像と違い拡大縮小しても画像が粗くなったり、ガタガタになりません。なぜなら、ベクトル画像の線や色は、どの位置でどの様な描画をするか、全てのソフト内でリアルタイムで計算されて出力されているという特徴があるからです。

Illustratorでできる事

  • イラスト作成
  • ロゴデザイン
  • アイコンデザイン
  • Webパーツ作成

写真、画像加工が得意なPhotoshopに対し、Illustratorはイラストやオブジェクト部分の制作に優れています。

しかし、ここで伝えておきたいのがWebデザイナーはイラストを描けなくても良いという事。イラストレーターと呼ばれる職業がある様に、WebデザイナーはWebサイトをデザインするお仕事です。

勿論、Illustratorは使いこなしイラスト制作ができれば強みにはなりますが、制作現場でもイラストに関しては外注のイラストレーターに頼んだり、素材サイトから入手するケースが多いです。

Webデザイナーであれば最低限、Illustratorでロゴデザインとアイコンデザインができれば十分かと思います。実際の現場でもPhotoshopとIllustratorの使用割合は8:2なので、優先的に使い方をマスターしたいのはPhotoshopの方ですね。

 

Adobe Dreamweaver (アドビ ドリームウィーバー)

Adobe Dreamweaver

Adobe Dreamweaver

DreamweaverはHTML・CSSのコーディングの作業を効率化してくれるテキストエディタの上位ソフト。

Webデザイナーが作成したWebページのデザインデータを元にHTML・CSSでコーディングしていきホームページを構築していきます。Dreamweaverを使う事で、Webサイトをプレビューで確認しながらコーディングできるので、作業効率が飛躍的にアップします。

WordPressのPHPやJavascriptといったプログラミング言語でも使えます。

テキストエディタの上位ソフトといった様に、Dreamweaverはコーディングの効率化ソフトなので、コーディングはメモ帳やテキストエディターでも可能です。

Dreamweaverを使わず、メモ帳やテキストエディタで作業しているWebデザイナーもいます。

おすすめのテキストエディタ

Windowsであれば

Macであれば

いってしまえばコーディングができればパソコンに常備されているメモ帳でもOKなんです。

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

 

想像以上に高いWebデザインソフト

WebデザイナーにとってAdobeソフトは必要不可欠なソフトです。

ソフトの性能としての欠点はほとんどありません、唯一ネックなのが値段が高いという部分。

1つのソフト平均価格が40,000円〜90,000円

lsamu

プロが使うソフトなだけあって、めちゃくちゃ高い…

Webデザイナーになりたければ、勉強するのに必須ですが、どうしても金額に値が張るので学生がお金がない人は買う事ができませんでした。

Adobe Creative Cloud

しかし、ここ数年前から「Adobe Creative Cloud」が導入され、これまで買い切りだったAdobe製品が定額制にシフトチェンジしました。

一番安い「Creative Cloudフォトプラン」であれば、月額980円からPhotoshopが使い放題!

↓商品の詳細はこちら↓

「Creative Cloud単体プラン」なら月額2,180円でPhotoshop、Illustrator、Dreamweaver、など他12ソフトが使い放題。さらに学生ならフォトプランと同じ月980円から利用できます!

↓学生版の詳細はこちら↓

Creative Cloudの登場でAdobeソフトの敷居がグッと縮まりました。

 

思い出
当時はCreative Cloudがありませんでした。

独学で勉強しAdobeのソフトを購入できるほどお金に余裕の無かった僕は色々調べた結果、WEB制作に特化したFireworksだけ購入。出費は60,000円ほどでしたね(汗)

Fireworks(ファイヤーワークス)でグリッドや定規を表示する方法・ショートカットFireworks(ファイヤーワークス)でグリッドや定規を表示する方法・ショートカット

lsamu

僕の時代では全て買い切りだったので良い時代になったなと感じます

(クラウドサービスになった背景にはコピー製品の対策も1つの理由だと思う)

Creative Cloudの購入はこちら ⇒

 

全てのWebデザインソフトを使えないとWebデザイナーになれない?

0212_011

そんな事はありません。

lsamu

勿論、全てを使える方が良いけど

基本的に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デザイナーになる事ができます。

lsamu

僕も未経験からWebデザイナーになる事ができたので大丈夫!諦めなければ絶対にWebデザイナーになれます!頑張って下さい! 

関連記事 未経験からwebデザイナーになるには?独学で勉強した全てを公開

 

未経験OK!の転職エージェントランキング

Webデザイナーに転職するには、転職サイトや、キャリアコンサルタントがサポートしてくれる転職エージントに登録するのが一般的です。 しかし、転職エージェントだけでも1万社以上もあるといわれており、初めて利用する人はどの転職エージェントを選べば良いか分からないですよね。 当サイトではWebデザイナーに強く、さらに未経験OKのおすすめ転職サイトをランキング形式で紹介します。 また、未経験でWebデザイナーを目指すなら「独学で未経験からWebデザイナーになるためにやった全てを公開」も合わせて参考にしてみてください。

WORKPORT(ワークポート)

ワークポート
求人数
(5.0)
求人の質
(5.0)
担当者の質
(4.5)
総合評価
(5.0)
ワークポートの総評
未経験から正社員のWebデザイナーになりたい場合は、『ワークポート』は登録必須の転職エージェントです。IT系にかなり強く、しかも案件数が膨大のため、未経験でも応募できる求人が数多く存在します。僕も実際に登録していますが、3日に一通の頻度でメールでたくさんの求人情報を届けてくれます。あまりきめ細かくこちらの希望に合わせてはくれませんが、とにかく量だけは豊富なので、自分の行きたい企業が選びやすいです。

ワークポートに 相談する【無料】

マイナビエージェント

マイナビエージェント
求人数
(4.0)
求人の質
(4.5)
担当者の質
(4.0)
総合評価
(4.5)
マイナビエージェントの総評
マイナビエージェントは転職エージェント業界ではリクルートやDODAに次いで業界3、4番手ですが、1位のリクルートや2位のDODAと比べると規模も扱う求人数も大きく引き離されているのが現状です。 実は、大手と比べると『登録者が少ない』転職エージェントなんです。 一見、デメリットに感じる人もいるかもしれませんが、登録者が少ない分、1人1人の転職希望者にかける時間は大手よりも多く取ることができます。サポートが丁寧な分、利用者満足度が高いというのが最大のメリットと言えるでしょう。 マイナビエージェントのキャリアアドバイザーは、さまざまな職種を専門とするスタッフです。未経験の職種でも、その仕事の実情などについてしっかりサポートしてくれるのが特徴。

マイナビエージェントに 相談する【無料】>>

ProEngineer(プログラマカレッジ)

ProEngineer
求人数
(5.0)
求人の質
(4.0)
担当者の質
(4.0)
総合評価
(4.5)
プログラマカレッジの総評
年間300人を輩出する完全無料IT研修&就活塾ProEnginnerは、通常なら数十万円はするプログラミングの講座を無料で開催し、さらに就職支援までしてくれるエージェントです。正社員就職率96.2%は驚異の数字です。求人数は3000件以上で、就職先もサイバーエージェントグループやチームラボ、IMJなど有名企業が多いです。 フロントエンドエンジニアやプログラミングに強いWebデザイナーになりたいなら、無料なのでぜひトライしてみてください。もしエンジニアの素質があるなら、年収もグンとアップします。

プログラマカレッジに 相談する【無料】

コメントを残す

メールアドレスが公開されることはありません。