Webデザイナーを独学で目指す時に必要なもの8つ【初心者は4つ準備すればOK】

当記事では、Webデザイナーを独学で目指す時に必要なものを解説しています。

「Webデザインの勉強をしたいけど、何から揃えたら良いか分からない…」
「必要なものを事前に知っておきたい」

という方は、ぜひ参考にしていただけたらと思います。

先に結論を述べますが、独学で学習をする段階であれば、以下4つのツールを用意しておけばOK。

Webデザインを専業で仕事にするのならもう少し揃えなければならい物もありますが、必要最低限は以上4つのツールです。

でも、せっかくならこの4つ以外にもどんなものが必要か知りたいですよね。

本文では、独学でWebデザイナーを目指す時に必要なものをもっと深掘って解説していきますね。

この記事を書いている人

4年制美大卒。デザイナー歴15年。

メーカーのインハウスデザイナーを9年経て、現在までフリーランスとして活動。
当サイト運営にあたり63社のWebデザインスクールを徹底調査しました！

スポンサーリンク

Webデザイナーを独学で目指す時に必要なもの

Webデザイナーを独学で目指す場合に必要なもの一覧は、以下の通りです。

ひとつずつ解説していきますね。

パソコン

パソコンはできるだけ高スペックのものを用意しましょう。

デザイン作業は同時に複数ソフトを立ち上げることがほとんどなので、低スペックだと途中でパソコンがフリーズして作業の妨げになってしまいます。

参考までに、必要最低限のパソコンスペックをご紹介しておきます。

メモリの増設は必須です。(別途料金がかかりますが)

私はメイン機をMac(メモリ16GB)、サブ機をWindows(メモリ8GB)で使っていますが、ソフトのサクサク感がまったく違うのでメモリは16GB以上に増設することをおすすめします。

ちなみに私は、以下のスペックのパソコンを使っています。

(6年前のパソコンですが、毎日パソコンを使っているにも関わらず今でもバリバリ動いてくれます！)

正直、16GBでも重たいな…と思うことがあるので、次にパソコンを買い換えるときはもっとグレードアップしようと思っています。

Macが良いかWindowsが良いかは、正直「好み」です！

一昔前のWebデザイナーは汎用性の高いWindowsを使っている人が多かったのですが、最近ではMacユーザーの方が増えています。

また理想を言えば、サイトの表示崩れの確認のためにMac・Windowsの両方を持っていた方が良いのですが、勉強をする段階ではそこまでこだわる必要はありません。

パソコンの性能よりも、デザインスキルやコーディング知識を覚えていく方が先決です。

自分が使ってテンションが上がるパソコンを使いましょう！

Adobeソフト

Photoshop・Illustrator・Dreamweaver・XDをはじめとしたWebデザインに必要なツールや、動画編集やFlashアニメーション制作など、クリエイティブに関する様々なサービスを提供してくれているAdobe。

簡単に各ソフトの役割をご紹介しますね。

Photoshop

Webデザイナーがデザインを組んでいく時は、「Photoshop」というデザイン編集ソフトを使います。

最終的に画像を「jpg」「gif」「png」などの拡張子に書き出せるものならPhotoshopを使わなくても良いのですが、Photoshopを使うデザイナーがほとんどなので、必ずマスターしておきたいソフトです。

Photoshopでは、Webデザインの現場では様々な場面で活躍してくれます。

Illustrator

Illustratorは、グラフィック・DTPの世界では必須ソフト。
Webデザイナーでも使える人は多いです。

主にロゴ制作やイラスト、紙媒体の印刷物をデザインする時に使います。

Webデザインの場合は、ロゴ・アイコン・イラスト作成の時に重宝します。

ちなみに私は、グラフィックデザイナー→Webデザイナーになったので、PhotoshopよりもIllustratorの方が得意なため、バナーやTOPイメージ画像の制作はいまだにIllustratorで作ることが多いです。

Illustratorは、最初の難易度はPhotoshopよりも難しいのですが、慣れてしまえばPhotoshopよりもインターフェイスの使い勝手が良いと、個人的には思っています。

Adobe XD

UI/UXデザイン用に開発され、最近Web業界でも主流のソフトになりつつある「Adobe XD」。

主に骨子作成(ワイヤーフレーム)に使ったり、情報共有ツールとして使われることが多いです。

Adobe XDは2016年に開発されたツールで、PhotoshopやIllustratorに比べたら歴史も浅いソフトです。

しかし、その使い勝手の良さからここ数年でメキメキと頭角を現してきました。

特にWebデザインは、プロジェクトとして取り組まれることが多いので、「共同作業ツール」として業界に浸透していき、今ではPhotoshopと同時進行で学ぶ人も多いです。

Photoshopが使える人であれば、ある程度のデザインの部分はソフトの機能を覚えれば良いだけなので、難易度自体は高くありません。

今後はもっと需要が伸びていくソフトなので、今からWebデザインを勉強する人は忘れずに学習しておきたいソフトです。

Dreamweaver

Dreamweaverは、HTML・CSS・JavaScriptなどを使ったコーディング入力を補助してくれるソフトです。

コーディング自体は言語の羅列なのでメモ帳さえあればできてしまうのですが、

「いちいちコードを覚えてられないし、入力する手間がめんどくさい」といった状況から、これらコーディングソフトを使う人がほとんどです。

なお、今回紹介したソフトは「Adobe社」が提供する有料ソフトとなります。

購入は必須ですので、必要経費として捻出するようにしてください。

ちなみに、Photoshop・IllustratorなどのAdobeソフト20種類が使い放題の「Adobe Creative Cloud」というプランがあるのですが、誰でも格安で手に入れることができる方法があるので、気になる方は以下の記事を読んでみてくださいね。

>>更新OK！Adobe CCを安く買う方法をAdobe歴19年のデザイナーが徹底解説

テキストエディタ

先ほど紹介した「Dreamweaver」のようなコーディング(プログラミング)を補助するソフトのことを「テキストエディタ」というのですが、有料・無料問わずにテキストエディタは世の中にたくさんあります。

代表的なツールは以下の通りです。

Adobe CCを購入する方は、そのままDreamweaverを導入することをおすすめします。

(私もDreamweaver使ってます！)

Visual Studio Codeは無料で使えるツールとして人気が高いので、こちらもおすすめです。

教材

Webデザインを学習する場合、

Webデザイン専門のスクールに通う
独学で学ぶ(教材を購入)

といった2択になると思います。

教材費をかけたくない人はネット上で無料情報を集めて独学に励むのですが、手間も時間もかかるし分からないことがあっても聞く人がいないので、挫折してしまう人が多いです。

なので、挫折をせずに最短ルートでスキルの習得が可能な「スクールで学ぶ」方法が、個人的にはおすすめです。

最近はオンラインで完結するスクールも多いので、場所と時間を選ばない学び方ができる点も、学生のみならず社会人・主婦などいろんな層からの人気を呼んでいます。

無料でWebデザインを学ぶ方法も紹介しているので、詳しくは以下の記事をチェックしてください。

>>無料あり！費用が安いWebデザインスクールおすすめ厳選

フォント

デザイナーにはフォントが必須。

パソコンに元から装備されているフォントもいくつかあるのですが、選択肢が少ない上にダサい(！？)フォントが多いので別途フォントを用意する必要があります。

特にWindowsは、標準装備されているフォントが少ないです…。

Adobeを契約すれば「Adobe Fonts」が無料で使えますし、「Googoleフォント」は誰でも無料で使うことができるので、こちら2つを経由してフォントのバリエーションを増やしておきましょう。

なお「モリサワフォント」と言ってプロのデザイナー御用達のフォントがあるのですが、1年間で54,780円の利用料金がかかるので、初心者の場合は「Adobe Fonts」「Googoleフォント」でも十分に対応できます。

素材集

Webデザインを行う場合、イラスト・アイコン・画像などの素材集があると便利。

水彩・色鉛筆・クレヨン ふんわりやわらか手描き素材集 (デジタル素材BOOK)

created by Rinker

¥2,618 (2024/04/25 19:28:56時点 Amazon調べ-詳細)

• Amazon
• 楽天市場
• Yahooショッピング

書籍を購入しても良いのですが、オンラインからダウンロードできるサービスもあるので、こちらもおすすめです。

ちなみに私は、自宅に20冊近く素材集を所持しています。

他にも「AC写真」などの有料素材サイト(一部無料あり)もおすすめです。

ドメインとサーバー

オリジナルのWebサイトを作るには、「ドメイン」と「サーバー」の契約が必要です。

ドメインとは、https://〇〇〇〇〇〇.comのようなアドレスのこと。

サーバーとは、サイトデータを格納しておく場所のこと。

インターネット上で、ドメインが「住所」・サーバーが「土地」と表現したら分かりやすいでしょうか。

サーバー設定のやり方などは、Webデザイナーになると覚えなければなりません。

ドメインは安いもので1円〜取得することができ、サーバーは月100円〜借りることができます。

自分のポートフォリオサイトを作る際は、実際に自分がドメインやサーバー契約をする機会があるので、こちらは必要経費となります。

(クライアント運営のWebサイトの場合は、費用はクライアント持ちになります。)

Webデザイナーを独学で目指す場合に必要なものまとめ

Webデザイナーを独学で目指す場合に必要なもの一覧を、最後にもう一度まとめます。

最初から全部揃える必要はありませんが、

パソコン
Photoshop
テキストエディタ
教材

は必ず用意してからWebデザインの学習をスタートしてくださいね。

当記事を少しでも参考にしていただけると幸いです。

>>Webデザイナーになるために必要最低限のスキルと使うソフト