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

悩んでいる人

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

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

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

ゆーし

・webデザイナー2年目で、現在25歳

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

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

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

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

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

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

ゆーし

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

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

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

PhotoshopとIllustratorの使い分け

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

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

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

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

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

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

悩んでいる人

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

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

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

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

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

Photoshop

画像加工

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

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

マスク

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

実は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が提供するUIデザインツールです。Adobe IDをお持ちであれば無料で利用できるようです。

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

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

sketch

Sketch — The digital design toolkit

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

figma

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つです。

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ソフトはたくさんありますが、機能的にはほとんど変わらないので自分の使いやすいものを使いましょう。

僕はFileZillaを使ってます。

Officeソフト

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

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

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

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

クラウドソフト

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

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

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

機能面でいえば、

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

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

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

悩んでいる人

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

ゆーし

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

Dropbox

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

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

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

ゆーし

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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