【現場でわかった】webデザイナーになるために覚えるべき主流のソフト

独学でwebデザイナーになる

【現場でわかった】webデザイナーになるために覚えるべき主流のソフト

悩んでいる人
・イマドキのwebデザイナーってどんなソフトを使っているの?
・未経験なんだけど、webデザイナーになるために最低限必要なソフトを知りたい

こんな質問にお答えします。

web業界は流行り廃りがはやいもので、時代によって現場で使用するソフトも変わっていきます。
そこで本記事では、

ゆーし
webデザイナー2年目で、現在24歳

・年間でweb業界の会社3社(1社webディレクター、2社webデザイナー)勤務

・副業で10社以上の会社と取引

上記を経験した僕から、若者目線でwebデザイナーが使っている主流のソフトを紹介します。

後半では、未経験からwebデザイナーになりたいと思っている方へ、独学で覚えるべき最低限のソフトを紹介させていただきますので、最後まで読んでいただければ幸いです。

 

web制作における主流のデザインソフト

webデザイナーが必須で使うデザインソフト

・Photoshop
・Illustrator

webデザイナーは主にこの2つのソフトを使用してデザインを制作します。

ゆーし

web業界の会社3社を経験していますが、webデザイナーはPhotoshopをメインに使う人が100%でした。

Illustratorは紙出身のデザイナーがメインで使うところを稀にみますが、Photoshopメインのwebデザイナーはそこそこベテランの方でもあまり使い方に慣れていない人もいるくらいです。

副業でもPhotoshop、Illustratorでの納品形式が多いですね。

 

 

PhotoshopとIllustratorの使い分け

では、この両者はどう違うのでしょうか。
実務では大まかに以下のように使い分けています。

PhotoshopとIllustratorの使い分け方

・Photoshop:webサイト全体のデザイン、バナーの作成、画像加工
・Illustrator:アイコン・インフォグラフィック(図版)の作成

Photoshopをメインにwebサイト全体のデザインを作りつつ、アイコン素材を作成・アレンジする場合にだけIllustratorを使うといった感じで使い分けます。

使い分けるといっても、現場のwebデザイナーはできるだけPhotoshopで完結するようにデザインをする傾向が多いです。

Photoshopでデザインを完結させたい理由

・PhotoshopとIllustratorを同時に開くとPCが重くなる
・互換性があるにしろ、異なるソフトを行き来するのはストレス
・アイコンやイラストは既存の素材をそのまま使うことが多い

こういう理由で、実務でIllustratorを使うのはほとんど稀です。1つのwebサイトを制作する上での両者の使用頻度の割合は、Photoshop:Illustrator = 9:1くらいです。

先ほどベテランの方でもあまり使い方に慣れていない人もいると申したのも、できるだけPhotoshopで完結するようにデザインを制作しているからなのです。

ですので、覚える優先度でいえば、圧倒的にPhotoshopでしょう。未経験でwebデザイナーを目指している方は、独学のうちにIllustratorを使いこなせる必要はないと思います。

悩んでいる人

ふーん、じゃあIllustratorは必須じゃないのでは?

と思うかもしれませんが、現場では複数の素材サイトから寄せ集めたアイコンやイラストのテイストを統一させたい時にIllustratorをよく使います。

現場ではこんな時にIllustratorが使われます

線の太さや丸みの統一などの細かい調整にIllustratorは必要不可欠なので、それほど頻繁には使用しませんが、webデザイナーには必須のソフトというわけです。

 

 

覚えておくべきよく使う機能

では、実務でよく使うPhotoshopとIllustratorの機能を紹介します。

Photoshop

画像加工

クライアントからもらった素材やフォトストックの素材をそのまま使うと、全体のデザインの色味や雰囲気と合わない場合があるので、適宜加工する必要があります。

画像加工でよく使う機能

・調整レイヤー

指定したレイヤー(画像やシェイプ)の上から明るさや色相を調整できます。
画像の色味を調整したいときに使います。

調整レイヤー

レイヤースタイル

指定したレイヤー(画像やシェイプ)にシャドウをかけたり、境界線をつけたりできます。
レイヤーに+αでデザインを加えたいときに使います。

レイヤースタイル

・色域指定

特定の色だけ抽出し、加工ができます。

色域指定

・コンテンツに応じた塗りつぶし

画像の高さや幅が足りないときに、勝手に不足分を補完してくれたり、不要な要素を自然に除去してくれる便利な機能です。
これはおそらくPhotoshopにしかできない代物ではないでしょうか。

コンテンツに応じる

コンテンツに応じた塗りつぶしその2

加工というと難しそうに聞こえますが、最近のPhotoshopはオート機能も充実してきているので、初心者でも簡単に始めることができますよ!

 

マスク

未経験の方はマスクという概念が理解しにくいかもしれません。
どういったときに使うかというと「特定の範囲を見えなくする」時に使います。

マスクでよく使う機能

・クリッピングマスク

シェイプの形に画像を切り抜きます。実際は画像を切り取っているわけではなく、シェイプの形以外の部分を見えなくしているというのがクリッピングマスクです。
webデザインでは決まったサイズの四角形に画像を当てはめることが多いので、ほぼ100%使用します。

クリッピングマスク

 

・選択とマスク

選択した範囲を切り抜きたいときに使います。こちらも切り抜くのではなく、選択した範囲外を見えなくするというものです。
普通の切り抜きと違い元画像は残したままにできるので、再編集しやすく、パスの切り抜きよりよく使います。
メインビジュアルやバナーでは、複数の素材を組み合わせて制作するので、複雑な切り抜きの際にはよく使いますね。

選択とマスク

 

実はPhotoshopでよく使う機能はこれだけです。ただ、よく使う機能だけ知ってても、実践しなければ身につきません。

Photoshopの独学は難しいと言われていますが正しい独学の仕方さえ知っていれば、誰でも最短2ヶ月でPhotoshopに慣れることができます。

以下の記事にPhotoshopの独学法をまとめましたので、気になる方はご覧ください。

 

独学でPhotoshopのスキルを身につけwebデザイナーになる方法

 

 

 

Illustrator

トレース

画像データをベクターデータに変換できる画期的な機能です。

ベクターデータとは

複数の点の位置とそれを繋いだ線や色などを数値で再現しているデータ。
拡大縮小してもボケないし、線の色や形を細かく編集できるというメリットがあります。
簡単なアイコンや企業ロゴはベクターデータで作成されることが多いです。

これをどう使うかというと...有料素材のアイコンをデザインに入れてみたい時、ウォーターマーク邪魔ですよね?
このトレース機能を使うと、有料素材のアイコン画像でも以下のことができるんです。

  • トレース機能の調整でウォーターマークがほぼ消せる
  • 後ろの白背景を透過できる
  • ベクターデータなので線の太さやカラーの変更ができる

トレース

トレース機能は完璧ではないので多少線ががたつきますが、デザインに当て込むには十分です。
※あくまでデザインカンプで使用する場合のみです。購入しないまま公開したら犯罪なので注意してくださいね。

 

シェイプ形成ツール

アイコンや線画イラストの一部をぬりつぶして、既存の素材をワンランクアップさせるのに使います。イラストの多いwebサイトでは使えるとかなり有利ですね。

シェイプ形成ツール

悩んでいる人

最低限覚えるにしても結構覚えることが多そうだなあ...

ゆーし

ツールの使い方を習得する一番の近道は、実際に手を動かすことです。
何度も使ううちにググらなくてもわかるようになっていきます。参考書を頭から読むよりまずは作品を作りましょう。

 

 

今デザインツールとして注目されているソフトとは?

最近では、UIデザインツールがデザインソフトとして注目されています。
UIデザインツールとは、Webサイトやアプリのユーザーインターフェース(UI)の制作に特化したデザインツールのことですが、簡単に特徴をいうとこんな感じです。

  • プロトタイプを作成できる
  • 複数人で同時編集ができる
  • ブラウザ上での共有が簡単

プロトタイプとは、webサイトの画面遷移、スライダーやボタンの動きなどの操作感を表現できるものです。
つまり、デザインも作れるし、デザインにまつわる作業も効率よくできるよってツールです。

悩んでいる人

こんなものあったら絶対こっち使うじゃん!

その通りですが、プロトタイプや共有の機能が充実している分、デザインとしての機能はPhotoshopやIllustratorと比べると劣ってしまいます。
ではなぜ、UIデザインツールが注目を浴びているのかというと、

  • 導線設計が複雑なアプリの開発
  • デザイン機能が充実
  • シンプルなデザインが流行し、Photoshopほど多機能なものでなくても制作が可能

他にも要因はあると思いますが、これらの理由からUIデザインツールの重要性、利便性が高まってきたのではないかと考えます。

では、デザインソフトとして注目されているUIデザインツールを3つ紹介します。

 

 

XD

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール

Adobe XD体験版ダウンロード | UI/UXデザインと共同作業ツール

Adobeが提供するUIデザインツールです。Adobe IDをお持ちであれば無料で利用できるようです。

無料版は制限がいくつかあるようですが、機能に差はないので、プロトタイプとはどんなものなのか、視覚的に理解するために一度使ってみるのもありです。

コンプリートプランを契約されている方であればXDもプラン内なので使えますよ。

 

sketch

Sketch — The digital design toolkit

Sketch — The digital design toolkit

オランダのBohemian Coding社が開発・販売するUIデザインツール

figma

Figma: the collaborative interface design tool.

Figma: the collaborative interface design tool.

こちらは無料なのでインストールしても損はないと思います。

 

その他にも、株式会社グッドパッチが開発した「prott」ユーザ数400万人超の「in vision」など、便利なUIデザインツールが増えてきており、今後もUIデザインツールの動きはどんどん変わってくるでしょう。

悩んでいる人
使えるようにならなきゃダメなの?
ゆーし
大規模プロジェクトや有名なUI/UX会社では、スタンダードになっているようですが、中小規模の制作会社や事業会社では、まだ馴染みがないようです。
僕の経験上、実際現場でUIデザインツールを使っている人は、僕だけでした。
webデザイナーがUIデザインツールを使うのが当たり前になるのはもう少し先の話なるかもしれません。

ちなみに、僕はXDをメインにデザインを作っています。

PhotoshopとXDの機能を徹底的に分析してみたので、PhotoshopからXDへデザインを移行しようか検討している方は読んでみてください。

【動画あり】XDとPhotoshopどっちが便利?現場で使う作業を徹底比較

 

 

macとwindowsで使用するデザインソフトは違う?

上記で紹介したデザインソフト、プロトタイピングツールのほとんどはmacとwindowsどちらでも制限なく使用できます。

異なるのは使用できるフォント、ショートカットキーなどのOSのデフォルトの設定なので、ソフトの機能自体に違いはありません。

 

ただ、「sketch」のみは、mac専用なので注意が必要です。

今後スキルアップしてプロトタイピングツールやUIデザインツールを使っていきたいと考えている方は、macを購入しておきましょう。

 

 

web制作における主流のコーディングソフト

webデザイナーがよく使っているコーディングソフト(エディタ)は以下の2つです。

webデザイナーがよく使っているコーディングソフト

・VS CODE
・Dreamweaver

 

 

VS CODE

2015年にMicrosoft社(マイクロソフト)がリリースした無料のHTMLエディタです。

おすすめポイント

・動作が軽い
・自動補完機能が優秀
・スタイリッシュなビジュアル

 

 

Adobe Dreamweaver

Adobeが提供するコーディングソフトです。

おすすめポイント

・フォルダをまたいで一括置換ができる
・独自のテンプレートファイルで効率よくコーディングできる

しかし、Dreamweaverはデメリットも多く、かなり動作が重い、独自のテンプレートを使うとDreamweaver以外のエディタでは作業しにくいです。
また、Dreamweaver特有のデザインプレビュー機能は、実務では全くと言っていいほど使わないです。

個人的な意見では、DreamweaverよりVS CODEをオススメします。

その他、Bracket、sublime、atom、サクラエディタなどがありますが、機能面・動作の軽さで比べると圧倒的にVS CODEですね。

 

 

webデザイナーがよく使う言語

一般的にwebデザイナーがよく使う言語は、HTML/CSS/Javascript(JQuery)の3つだけです。さらに、現場で一つ上をいくwebデザイナーは、Javascript/Sass/PHPも扱える人が多いです。

独学の段階でコーディングスキルも身につけたい!という方は、以下の記事で学習法まで細かく解説しているのでご覧ください。

webデザイナーを目指す人が最低限必要なプログラミング言語と学習法

 

 

FTPソフト

実務では、コーディングデータをサーバーにアップロードするためにFTPソフトを使用します。
サーバー?FTP?って方は、とりあえず

  • webサイトをインターネット上に公開するためにはサーバーにデータを置く必要がある
  • サーバーにデータを置くにはFTPソフトが必要

ってことだけ覚えておけば大丈夫です。
FTPソフトはたくさんありますが、機能的にはほとんど変わらないので自分の使いやすいものを使いましょう。

webデザイナーがよく使っているFTPソフト

・FileZilla
・FFFTP(Winのみ)
・winsCP

僕はFileZillaを使ってます。

 

 

Officeソフト

主にweb制作でよく使われるOfficeソフトはWord・Excel・PowerPointです。
使用するのは主にwebディレクターで、以下のような時に使用します。

web制作におけるOfficeソフトの役割

・PowerPoint:構成案の作成
・Excel:スケジュール、サイトマップの作成
・Word:ヒアリングシート、議事録の作成

webデザイナーはディレクターの作ったものを確認するだけなので、基本的な操作さえ知っておけば問題ないです。

将来的にフリーランスになりたいと考えている方は、自分で構成案やサイトマップを作ることになると思うので、会社員時代に慣れておくといいかもしれません。

macであればOfficeを導入していなくても「number」というデフォルトで入っているソフトで閲覧は可能です。データの作成もできますが、実際のOfficeでの見え方と少し変わってしまうので要注意です。

 

 

クラウドソフト

クラウドソフトはPCにダウンロードするソフトとは違い、オンライン上でいつでも、どこでも、誰でも共有ができます。
コロナウイルスの影響もあり、働き方の見直しが一層注目されるようになったのをきっかけに、クラウドソフトを利用する会社も増えたのではないでしょうか。
以下では、web業界でスタンダードになっているクラウドソフトについてもご紹介させていただきます。

 

 

Googleドキュメント・Googleスプレッドシート・Googleスライド

Officeソフトの代わりにgoogleドライブ系のソフトが主流になってきている会社もあります。

機能面でいえば、

  • Googleドキュメント=Word
  • Googleスプレッドシート=Excel
  • Googleスライド=PowerPoint

と考えていいでしょう。Officeソフトとの違いは、以下の通り。

Officeソフトと比べてgoogleドライブ系が優れている点

・googleアカウントさえあれば無料で使える
・リアルタイムで共有、同時編集ができる

今流行りのリモートワーク環境ではかなり本領を発揮します。

悩んでいる人

無料でOfficeと変わらない機能ならgoogleドライブでいいじゃん!

ゆーし

クライアントによってはOfficeソフトでの資料のやりとりを要求してくる場合があるので、フリーランスや副業を考えている人は、両方とも覚えておきましょう。

 

 

Dropbox

無料から使用できるオンラインストレージサービスです。
オンラインストレージとは、インターネット上でデータが保管できるスペースのことです。

メールで毎回画像素材や原稿のやりとりをすると抜け漏れや管理が大変です。Dropboxに素材の保管場所を作れば、クライアントと製作者の双方が常に確認できるので、抜け漏れもなく、管理がしやすいです。

googleドライブの共有でも同じようにできますが、googleアカウントを持っていないクライアントは使えないので、そのような時にDropboxを使用します。

ゆーし

制作会社のパートナーとして副業案件をいただいた時は、素材の共有をDropboxで行いました。

 

 

コミュニケーションツール

webデザイナーがよく使うコミュニケーションツールは以下の2つです。

webデザイナーがよく使うコミュニケーションツール

・slack
・chatwork

会社によってどちらを使用するかは別れますが、副業案件ではコミュニケーションツールの使用はマストなので、まだ使う予定がなくてもインストールしておきましょう。どちらも無料です。

ちなみに僕が経験した制作会社2社と事業会社ではチャットワーク、副業案件はスラックでやりとりというきれいなわかれ方をしています。笑

 

 

webデザイナーが使うソフトの値段は高い?

webデザイナーがたくさんのソフトを使用しているのはわかっていただけたでしょうか。

こんなに使用しているなら費用もかかりそうだし、一つひとつの値段も高いはず...と思うかもしれませんが、実際に費用として毎月支払う必要があるのは、以下だけです。

webデザイナーがソフトにかける費用

Adobe Creative Cloudコンプリートプラン:5,680 円 /月 (税別)

Adobe Creative Cloudコンプリートプラン公式サイト


今回紹介したそのほかのソフトは全て無料、または無料枠で十分な機能ですので、Photoshop、Illustrator、XDが利用できる有料のデザインソフトのみでOKということです。

 

 

独学でwebデザイナーになるために最低限必須のソフトって?

未経験の方で、とにかく最低限のスキルでwebデザイナーになりたいという方は、以下のソフトさえ使えれば十分です。

webデザイナーになるために独学で最低限覚えるべきソフト

・デザインソフトのPhotoshop
・コーディングソフトのVS CODE

未経験独学の場合は、最低限紙のポートフォリオさえ作れればOKなので、Photoshopだけで十分です。
その他のソフトは、webデザイナーとして入社したときに設備が揃っているので、その時に使いながら覚えいけば大丈夫です。

費用でいえば、独学の段階ではAdobe Creative Cloudコンプリートプランを契約する必要はなくPhotoshopの単体プランだけでもいいと思いますよ。

webデザイナーが独学で最低限かけるべき費用

Adobe Photoshopの単体プラン:2,480 円 /月 (税別)

Adobe Photoshop公式サイト


月額2,480円なので、家計にも優しいですね。
お金がないからと文句を言わず頑張りましょう。

もしこの記事を読んで独学を始めたい!と思ってくださった方は別記事で独学の方法について詳しくまとめていますので、ご覧いただきますと幸いです。

独学でwebデザイナーになるための完全ロードマップ【行動できない人へ】

 

 

まとめ

現場のwebデザイナーが普段どのようなソフトを使って、どのように使い分けているか、なんとなく理解していただけたでしょうか。最後に、webデザイナーになるために覚えるべきソフトとかかる費用について、要点をまとめましたのでご覧ください。

webデザイナーになるために覚えるべきソフト

  • Photoshop最低限覚える
  • Illustrator
  • UIデザインツール(XD/sketch/figma)
  • VS CODE最低限覚える
  • Dreamweaver
  • FTPソフト(FileZilla/FFFTP/winsCP)
  • Officeソフト
  • Googleドキュメント・Googleスプレッドシート・Googleスライド
  • Dropbox
  • slack
  • chatwork

webデザイナーのソフトにかかる費用

webデザイナーがソフトにかける費用
Adobe creative コンプリートプラン:5,680 円 /月 (税別)

独学で最低限かける費用
Adobe Photoshop単体プラン:2,480 円 /月 (税別)

今回紹介したソフトも、数年後には別のものがスタンダードになる可能性も十分あります。

使いやすいソフトを常に探すのも、スキルアップや流行についていくにはいいですが、未経験でwebデザイナーになりたいと思っている方は、どんなツールを使うかよりも、なんでもいいのでまずはたくさんアウトプットしましょう。

最後までご覧いただきありがとうございました!

 

人気記事

独学でwebデザイナーになるための完全ロードマップ【行動できない人へ】 1

ゆーし 新卒でweb制作会社のディレクターとして入社し、8ヶ月でwebデザイナーへ転職。 webデザイナー歴2年目 2019年12月からWebデザインの副業を始め、5ヶ月で100万円達成。 悩んでいる ...

【見本あり】デザインカンプの作り方とコツを現役webデザイナーの解説 2

未経験者からすると、デザインカンプはいわばあなたのデザインスキルをアピールする実績そのものです。 ポートフォリオに載せるものになるので、的外れなものを作りたくないですし、あわよくばいけてるデザインを作 ...

webデザインスキルを爆速で上げるトレースのやり方 3

悩んでいる人・Webデザインのトレースって意味あるの? ・デザイン力を効率よくスキルアップできるトレースの方法ってあるの? webデザインのトレースは、やり方次第でその効果は大きく変わります。 デザイ ...

-独学でwebデザイナーになる

Copyright© これだけデザイン , 2020 All Rights Reserved.