当記事では、Webデザイナーを独学で目指す時に必要なものを解説しています。
「Webデザインの勉強をしたいけど、何から揃えたら良いか分からない…」
「必要なものを事前に知っておきたい」
という方は、ぜひ参考にしていただけたらと思います。
先に結論を述べますが、独学で学習をする段階であれば、以下4つのツールを用意しておけばOK。
① パソコン
② Photoshop
③ テキストエディタ
④ 教材
Webデザインを専業で仕事にするのならもう少し揃えなければならい物もありますが、必要最低限は以上4つのツールです。
でも、せっかくならこの4つ以外にもどんなものが必要か知りたいですよね。
本文では、独学でWebデザイナーを目指す時に必要なものをもっと深掘って解説していきますね。
この記事を書いている人

メーカーのインハウスデザイナーを9年経て、現在までフリーランスとして活動。
当サイト運営にあたり70校以上のWebデザインスクールを徹底調査しました!
スポンサーリンク
内容がサクッと分かる目次
Webデザイナーを独学で目指す時に必要なもの
Webデザイナーを独学で目指す場合に必要なもの一覧は、以下の通りです。
- パソコン
- Adobeソフト(Photoshop・Illustrator・XD・Dreamweaver)
- テキストエディタ(Dreamweaverでも可)
- 教材
- フォント
- 素材集
- ドメイン
- レンタルサーバー
ひとつずつ解説していきますね。
パソコン
パソコンはできるだけ高スペックのものを用意しましょう。
デザイン作業は同時に複数ソフトを立ち上げることがほとんどなので、低スペックだと途中でパソコンがフリーズして作業の妨げになってしまいます。
参考までに、必要最低限のパソコンスペックをご紹介しておきます。
メモリ:16GB以上
ハードディスク:500GB以上
メモリの増設は必須です。(別途料金がかかりますが)
私はメイン機をMac(メモリ16GB)、サブ機をWindows(メモリ8GB)で使っていますが、ソフトのサクサク感がまったく違うのでメモリは16GB以上に増設することをおすすめします。
ちなみに私は、以下のスペックのパソコンを使っています。
(6年前のパソコンですが、毎日パソコンを使っているにも関わらず今でもバリバリ動いてくれます!)
正直、16GBでも重たいな…と思うことがあるので、次にパソコンを買い換えるときはもっとグレードアップしようと思っています。
Macが良いかWindowsが良いかは、正直「好み」です!
一昔前のWebデザイナーは汎用性の高いWindowsを使っている人が多かったのですが、最近ではMacユーザーの方が増えています。
また理想を言えば、サイトの表示崩れの確認のためにMac・Windowsの両方を持っていた方が良いのですが、勉強をする段階ではそこまでこだわる必要はありません。
パソコンの性能よりも、デザインスキルやコーディング知識を覚えていく方が先決です。
自分が使ってテンションが上がるパソコンを使いましょう!
Adobeソフト
Photoshop・Illustrator・Dreamweaver・XDをはじめとしたWebデザインに必要なツールや、動画編集やFlashアニメーション制作など、クリエイティブに関する様々なサービスを提供してくれているAdobe。
簡単に各ソフトの役割をご紹介しますね。
Photoshop
できること | デザイン全般の作業 バナー制作 画像補正・合成 |
習得期間の目安※ | 1〜3ヶ月 |
ソフト料金 | 有料ソフト(月額2,728円) |
※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。
Webデザイナーがデザインを組んでいく時は、「Photoshop」というデザイン編集ソフトを使います。
最終的に画像を「jpg」「gif」「png」などの拡張子に書き出せるものならPhotoshopを使わなくても良いのですが、Photoshopを使うデザイナーがほとんどなので、必ずマスターしておきたいソフトです。
Photoshopでは、Webデザインの現場では様々な場面で活躍してくれます。
Illustrator
できること | グラフィックデザイン ロゴ制作 イラスト制作 チラシ制作 |
習得期間の目安※ | 1〜3ヶ月 |
ソフト料金 | 有料ソフト(月額2,728円) |
※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。
Illustratorは、グラフィック・DTPの世界では必須ソフト。
Webデザイナーでも使える人は多いです。
主にロゴ制作やイラスト、紙媒体の印刷物をデザインする時に使います。
Webデザインの場合は、ロゴ・アイコン・イラスト作成の時に重宝します。
ちなみに私は、グラフィックデザイナー→Webデザイナーになったので、PhotoshopよりもIllustratorの方が得意なため、バナーやTOPイメージ画像の制作はいまだにIllustratorで作ることが多いです。
Illustratorは、最初の難易度はPhotoshopよりも難しいのですが、慣れてしまえばPhotoshopよりもインターフェイスの使い勝手が良いと、個人的には思っています。
Adobe XD
できること | ワイヤーフレーム作成 情報共有ツール UI/UXデザイン |
習得期間の目安※ | 1〜3ヶ月 |
ソフト料金 | 有料ソフト(月額1,298円) |
※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。
UI/UXデザイン用に開発され、最近Web業界でも主流のソフトになりつつある「Adobe XD」。
主に骨子作成(ワイヤーフレーム)に使ったり、情報共有ツールとして使われることが多いです。
Adobe XDは2016年に開発されたツールで、PhotoshopやIllustratorに比べたら歴史も浅いソフトです。
しかし、その使い勝手の良さからここ数年でメキメキと頭角を現してきました。
特にWebデザインは、プロジェクトとして取り組まれることが多いので、「共同作業ツール」として業界に浸透していき、今ではPhotoshopと同時進行で学ぶ人も多いです。
Photoshopが使える人であれば、ある程度のデザインの部分はソフトの機能を覚えれば良いだけなので、難易度自体は高くありません。
今後はもっと需要が伸びていくソフトなので、今からWebデザインを勉強する人は忘れずに学習しておきたいソフトです。
Dreamweaver
できること | HTML・CSSの入力を補助するソフト |
習得期間の目安※ | 1ヶ月 |
ソフト料金 | 有料ソフト(月額2,728円) |
※習得期間の目安は、最低限のスキルをマスターする期間です。
極めるとなるとそれなりの時間がかかるのと、個人差があるので参考程度にとどめてください。
Dreamweaverは、HTML・CSS・JavaScriptなどを使ったコーディング入力を補助してくれるソフトです。
コーディング自体は言語の羅列なのでメモ帳さえあればできてしまうのですが、
「いちいちコードを覚えてられないし、入力する手間がめんどくさい」といった状況から、これらコーディングソフトを使う人がほとんどです。
なお、今回紹介したソフトは「Adobe社」が提供する有料ソフトとなります。
購入は必須ですので、必要経費として捻出するようにしてください。
ちなみに、Photoshop・IllustratorなどのAdobeソフト20種類が使い放題の「Adobe Creative Cloud」というプランがあるのですが、誰でも格安で手に入れることができる方法があるので、気になる方は以下の記事を読んでみてくださいね。
こちらもCHECK
-
Adobe CCを安く買う・更新する方法と最安料金【社会人・フリーランス・学生】
続きを見る
>>更新OK!Adobe CCを安く買う方法をAdobe歴19年のデザイナーが徹底解説
テキストエディタ
先ほど紹介した「Dreamweaver」のようなコーディング(プログラミング)を補助するソフトのことを「テキストエディタ」というのですが、有料・無料問わずにテキストエディタは世の中にたくさんあります。
代表的なツールは以下の通りです。
Visual Studio Code【価格:無料】
Dreamweaver【価格:2,728円/月】
Sublime Text【価格:USD $80】
Atom【価格:無料】
Adobe CCを購入する方は、そのままDreamweaverを導入することをおすすめします。
(私もDreamweaver使ってます!)
Visual Studio Codeは無料で使えるツールとして人気が高いので、こちらもおすすめです。
教材
Webデザインを学習する場合、
Webデザイン専門のスクールに通う
独学で学ぶ(教材を購入)
といった2択になると思います。
教材費をかけたくない人はネット上で無料情報を集めて独学に励むのですが、手間も時間もかかるし分からないことがあっても聞く人がいないので、挫折してしまう人が多いです。
なので、挫折をせずに最短ルートでスキルの習得が可能な「スクールで学ぶ」方法が、個人的にはおすすめです。
最近はオンラインで完結するスクールも多いので、場所と時間を選ばない学び方ができる点も、学生のみならず社会人・主婦などいろんな層からの人気を呼んでいます。
無料でWebデザインを学ぶ方法も紹介しているので、詳しくは以下の記事をチェックしてください。
こちらもCHECK
-
安い費用のWebデザインスクールおすすめ15選【無料あり】
続きを見る
フォント
デザイナーにはフォントが必須。
パソコンに元から装備されているフォントもいくつかあるのですが、選択肢が少ない上にダサい(!?)フォントが多いので別途フォントを用意する必要があります。
特にWindowsは、標準装備されているフォントが少ないです…。
Adobeを契約すれば「Adobe Fonts」が無料で使えますし、「Googoleフォント」は誰でも無料で使うことができるので、こちら2つを経由してフォントのバリエーションを増やしておきましょう。
なお「モリサワフォント」と言ってプロのデザイナー御用達のフォントがあるのですが、1年間で54,780円の利用料金がかかるので、初心者の場合は「Adobe Fonts」「Googoleフォント」でも十分に対応できます。
素材集
Webデザインを行う場合、イラスト・アイコン・画像などの素材集があると便利。
書籍を購入しても良いのですが、オンラインからダウンロードできるサービスもあるので、こちらもおすすめです。
ちなみに私は、自宅に20冊近く素材集を所持しています。
他にも「AC写真」などの有料素材サイト(一部無料あり)もおすすめです。
ドメインとサーバー
オリジナルのWebサイトを作るには、「ドメイン」と「サーバー」の契約が必要です。
ドメインとは、https://〇〇〇〇〇〇.comのようなアドレスのこと。
サーバーとは、サイトデータを格納しておく場所のこと。
インターネット上で、ドメインが「住所」・サーバーが「土地」と表現したら分かりやすいでしょうか。
サーバー設定のやり方などは、Webデザイナーになると覚えなければなりません。
ドメインは安いもので1円〜取得することができ、サーバーは月100円〜借りることができます。
自分のポートフォリオサイトを作る際は、実際に自分がドメインやサーバー契約をする機会があるので、こちらは必要経費となります。
(クライアント運営のWebサイトの場合は、費用はクライアント持ちになります。)
Webデザイナーを独学で目指す場合に必要なものまとめ
Webデザイナーを独学で目指す場合に必要なもの一覧を、最後にもう一度まとめます。
- パソコン
- Adobeソフト(Photoshop・Illustrator・XD・Dreamweaver)
- テキストエディタ(Dreamweaverでも可)
- 教材
- フォント
- 素材集
- ドメイン
- レンタルサーバー
最初から全部揃える必要はありませんが、
パソコン
Photoshop
テキストエディタ
教材
は必ず用意してからWebデザインの学習をスタートしてくださいね。
当記事を少しでも参考にしていただけると幸いです。
こちらもCHECK
-
Webデザイナーになるために必要最低限のスキルと使うソフト
続きを見る
>>Webデザイナーになるために必要最低限のスキルと使うソフト