【保存版】WEBデザイン独学 完全マニュアル!

WEBデザインの独学方法を解説した記事のトップ画 WEBデザイン
ナカジ

この記事ではWEBデザインを独学する方法について解説していきます。

  • WEBデザインを独学するための具体的な方法を知りたい!
  • 初心者がWEBデザイナーになるまでの手順を知りたい
  • デザインスクールや美術学校に行かなくてもいいの?

そんなWEBデザイン初心者に、デザインを学ぶ手順やプロになるコツを現役のデザイナーが分かりやすく解説していきます。

目次

WEBデザインって、どんなデザイン?

WEBデザインとは、WEB上のデザイン全般のことです。

具体的にはWEBサイト・ECサイトの商品ページ・バナーなどです。

WEBサイトの参考例

WEBサイト
引用:MASKMAN

ECサイト 商品ページの参考例

バナーの参考例

WEBデザインを学ぶには?

WEBデザインには、ざっくり言って『美術やデザインなどのクリエイティブな知識』『プログラミングなどのプログラムを作る知識』が必要です。

まずはプログラミングの基本HTMLとCSSから学ぶといいでしょう。

HTMLとCSSを学ぶ

コンピューターは、人間の言語をそのまま打ち込んでも理解できません。

ですのでWEBサイトを作る際は、コンピューターが理解できる言語を使って指示をします。

その際に利用するのがHTMLやCSSです。

HTMLとは?

HTMLはマークアップ言語と呼ばれるもので、文章の役割を表す言語です。

例えば、この記事の「HTMLとCSSを学ぶ」は見出しですが、それをコンピューターに見出しだと伝えるのがHTMLです。

HTMLは下記のようにして記入します。

HTMLの例

CSSとは?

CSSはスタイルシート言語と呼ばれるもので、色、サイズ、装飾などを指定する言語です。

「HTMLとCSSを学ぶ」の見出しの装飾やサイズを指定するのがCSSで、例えば、下記のようにサイズを指定します。

CSSの例

プログラミングを独学する方法

ザクっと触りだけ解説しましたが、人によって自分に合ったプログラミングの学び方はあると思います。

本を読むだけで覚える人、誰かから学んだ方がいい人など状況や予算によっても変わってきます。

ここからはプログラミングにおすすめの勉強方法を解説していくので自分に合った勉強方法を探してください。

プログラミングを本で学ぶ

HTMLとCSSの独学におすすめの本

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本の表紙

★★★★☆ 4.5
kindle:2,178
単行本:2,420

\試し読みをクリック!/
この本の無料サンプルはこちら

プログラミングが学べる本はこちら→【2022年最新版 プログラミングにおすすめの本】初心者が読むべき参考書!

プログラミングをオンラインで学ぶ

【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK! ゼロからわかるWebシステム開発

【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK! ゼロからわかるWebシステム開発

★★★★☆ 4.6
受講料:27,800

\Udemyで人気のプログラミング講座/
【HTML,CSS,JS,PHP,Git,Docker】プログラミング初心者OK! ゼロからわかるWebシステム開発 icon

Progate

プログラミングのオンライン講座 progate

無料プラン:0
プラスプラン:1,078

\初歩的なレッスンを無料で受ける/

プログラミングをスクールで学ぶ

RUNTEQ(ランテック)

プログラミングスクールのRUNTEQ(ランテック)

月額:21,000円〜

\無料相談はこちら/

プログラミングスクールを比較したい時は別記事にまとめているので、参考にどうぞ→【社会人におすすめのプログラミングスクール!】コスパのいいスクールの選び方!

WEBデザイナーのデザインソフト

バナーや画像などをデザインする時に必要なものがデザインソフトです。

WEBデザイナーに必要なデザインソフトはIllustratorとPhotoshopです。

他にもソフトは色々あるのですが、まずはIllustratorとPhotoshopの操作を覚えるといいでしょう。

Illustrator

Illustrator 無料

単体プラン 月額利用料:2,728

\7日間の無料体験はこちら/

Photoshop

photoshop 無料 版

フォトプラン:1,078円/月
単体プラン:2,728円/月

\7日間の無料体験はこちら/

他にもWEBデザイナーが使うデザインソフトを知りたい場合は別記事を参考にしてください→【プロのデザイナーが使うソフト】クリエイター別デザインソフトまとめ!

デザインソフトを独学する方法

デザインソフトを本で学ぶ

デザインの学校 これからはじめる Illustratorの本

Illustrator 本

★★★★☆ 3.8
kindle:1,965
単行本:2,068

\試し読みをクリック!/
この本の無料サンプルはこちら

Illustratorが学べる本は別記事にまとめているので参考にどうぞ→【2022年最新版 Illustratorにおすすめの本】初心者が読むべき参考書!

デザインの学校 これからはじめる Photoshopの本

デザインの学校 これからはじめる Photoshopの本 [2022年最新版]

★★★★☆ 3.5
kindle:1,965
単行本:2,068

\試し読みをクリック!/
この本の無料サンプルはこちら

Photoshopが学べる本は別記事にまとめているので参考にどうぞ→【2022年 最新版!Photoshopにおすすめの本】初心者が学べる参考書!

IllustratorとPhotoshopをオンライン講座で学ぶ

Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる総合Illustratorコース

UdemyのIllustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる総合Illustratorコース

★★★★☆ 4.4
SALE価格:2,400
受講料:26,800

\Udemyで人気のIllustrator講座/
Illustrator 基礎からプロレベルまで 完全ですべてをゼロから最短で学べる総合Illustratorコース icon

Illustratorを学べるオンライン講座は別記事にまとめています→【Illustratorのオンライン講座】無料で学べるおすすめの講座は?

最新Photoshop  23時間の動画と演習でPhotoshopの全てを完全マスター 初心者がプロを目指すコース

Illustratorを学べるオンライン講座は別記事にまとめています→【【Photoshopのオンライン講座】無料で学べるおすすめの講座は?Illustratorのオンライン講座】無料で学べるおすすめの講座は?

IllustratorとPhotoshopの基本操作は公式サイトで学べる

Adobeのデザインソフトは公式サイトで基本の操作方法を無料で学べます。

Illustratorの基本操作解説ページ

Photoshopの基本操作解説ページ

Photoshopの使い方 ことはじめ

講座視聴料:0

\Photoshopを無料で学ぶ/
PhotoshopことはじめStep1:色調補正の方法

デザインを独学で学ぶ

個人的な意見ですが、独学だけでプロレベルのデザインをできるようになるのは難しいと思います。

理由としては、プロのデザイナーの多くが数年かけて美術やデザイン教育を受けてデザイナーになりますが、独学の場合そういった基礎を学ばないので基礎がなく仮に就職できても仕事の成長が遅いのです。

実際にデザインの現場でも、そういった人はクライアントの要望に応えることができないので、自分には才能がないと思い数ヶ月で仕事を辞める人が後を絶ちません。

それを念頭に置いて独学するならデザインの基礎からしっかり学んでください。

デザインの独学におすすめの本

コンセプトが伝わるデザインのロジック

デザイン 本

★★★★☆ 4.1
kindle:2,090/単行本:2,200

\試し読みをクリック!/
この本の無料サンプルはこちら

500円OFFで購入できる!

上記の本は美術予備校のOCHABIが監修している本です。

OCHABIはトップのクリエイターを排出する美大向けの予備校なので、内容も分かりやすく勉強になります。

デザインの本は別記事にもまとめているので参考にどうぞ→【2022年最新版!】デザインの勉強におすすめの本!初心者が読むべき参考書は?

コンセプトが伝わるデザインのロジックはebook japanで会員登録をすると500円OFFで購入できます。

ebook japan

\70%OFFチケットが6枚もらえる無料の会員登録はこちら!/

デザインにおすすめのオンライン講座

本より動画で学びたい人には、オンライン講座がおすすめです

未経験からプロのWebデザイナーになる! 

Udemyの未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

★★★★☆ 4.3
受講料:27,800

\Udemyで人気のWEBデザイン講座/
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース icon

デザインを本格的に学ぶ

デザインを本格的に学びたいなら有名美術大学進学がもっともベストです。

予算がない。今から試験対策などできない。って人は専門学校がいいでしょう。

専門学校も予算・時間的に厳しいといった社会人の多くはデザインスクールを選ぶ人が多いです。

デザイナーに人気の美術大学

多摩美術大学

デザイン大学 おすすめ

偏差値:37.5〜55.0
共通テスト得点率:61~82%

\無料で図書券がもらえる/
スタディサプリ進路で資料請求

デザイナー向けの美大は別記事にまとめています→【美大コンプ解消!】社会人が一般大学から美大・美術大学院に進学する方法!

デザインにおすすめの専門学校

桑沢デザイン研究所

デザインにおすすめの専門学校は別記事にまとめているので参考にどうぞ→【働きながら学びたい!】夜間のデザイン専門学校!

WEBデザインにおすすめのデザインスクール

インターネット・アカデミー

WEBデザインスクール インターネットアカデミー

月々:7,630円〜
料金:274,800円〜

\WEBスキルを本気で学ぶ/

WEBデザインにおすすめのスクールは別記事にまとめています→【実績が凄すぎる!】社会人におすすめのWEBデザインスクール

WEBデザインを独学するためのパソコン

WEBデザインを独学するにはクリエイター向けのハイスペックパソコンが必要です。

WEBデザイナーはMacを使用する方が多いですが、会社や個人によってはWindowsの方が快適な場合もあります。

おすすめのパソコンを紹介しておきます。

WEBデザインにおすすめのMac

デザイン 勉強

★★★★☆ 4.5
新品:274,800円〜
中古:78,000円〜

\中古のMacBook Proを探す/
ソフマップのMacBook Pro販売ページ

WEBデザインにおすすめのWindows

デザイナー おすすめ パソコン macbook pro

★★★★☆ 4.3
価格:153,780

\デザイン・イラスト・動画・3DCGなど用途別にパソコンを選ぶ/
マウスコンピューターの用途別販売ページ

WEBデザイナーを目指す人におすすめの求人サイト

デザイナーへの就職は独学の人にとっては狭き門です。

だからプロになるには色々工夫が必要ですが、重要なことの一つに求人サイトがあります。

独学の人が就職を目指すのにおすすめなのがクリエイター専用の求人サイトです。

例えばマイナビクリエイターはWEB系に特化したクリエイター求人サイトで便利です。

WENクリエイターの求人に特化したマイナビクリエイター

マイナビクリエイター

利用料金:0

\無料の会員登録はこちら/

マイナビクリエイターの口コミを見ていると独学の人は門前払いにあうケースも見かけます。

理由としては、ちゃんとした手順でデザイナーを目指していないので求人に応募できるレベルに達していないと判断されているからです。

一般的にデザイナーを目指す人は高校生から予備校に通って受験対策や勉強をはじめています。

業界に詳しくない方は一般の就職と同じように就活できるものと勘違いしてしまいます。

ちゃんと業界のことを勉強してから就職活動をすることをおすすめします。

デザイナーに就職するまでの基本的な進路は別記事でまとめているので、よく分からないといった方は参考にしてみてください→【0からわかる】デザイナーになるための進路『学生向け』

クリエイター専用の求人サイト

クリエイター専用の求人サイトは、スキルや実績がある人ほど優遇されます。

ただ初心者でも求人サイトに登録するとデザイン業界のことを学べたり、デザイナーの就職イベントにも参加できるので登録は必須です。

デザイナーにおすすめの求人サイトについても別記事でまとめているので、ぜひ参考にしてみてください→【普通の求人サイトじゃダメ!】未経験OKのデザイナー専用求人サイト!

WEBデザイナーに必須のポートフォリオとは?

デザイナーの面接を受けるにはポートフォリオが必須です。

ポートフォリオがないと、面接に行っても99%採用されないでしょう。

そこが一般の就活との大きな違いです。

デザイナーは実績、学歴、ポートフォリオで採用が判断されます。

独学の場合は実績、学歴がないので、ポートフォリオのクオリティを上げることがもっとも重要です。

ポートフォリオについては複数記事を書いているので、ぜひ参考にしてみてください→【ポートフォリオとは?】デザイナーの面接や美大の推薦入試で合格する方法!

WEBデザインを独学する方法まとめ!

ここまでWEBデザインの独学に関してまとめてきました。

HTMLやCSSなどは独学で学んでいけると思いますが、デザインに必要な美術の基礎を独学で身につけるのは難しいです。

実践で鍛えるのを勧める人もいますが、実際の現場は忙しく基礎を学ぶ時間などない会社がほとんどです。

いきなりフリーランスになるのも、おすすめはできません。

現場を知らないで、フリーランスをやっても権利関係など現場で学んでおかないことも多く仕事でミスがあった場合、賠償責任を問われる可能性もあるからです。

なぜ専門教育機関があるのか?
大手に就職しているデザイナーのほとんどが有名美大出身なのは何故なのかを考えると専門教育の重要性が理解できるかと思います。

デザイナーを目指すなら1度学校について考えてみて欲しいというのが私の意見です。

ただWEBデザイナーの場合はコーダーなどからスタートして徐々に実績を積み上げる人もい多いので、まだ独学に関して寛容なイメージがあります。

『WEBデザイナーになりたいけど学校に通う予算が取れない』といった人は独学で挑戦してみてもいいと思います。

途中で心が折れない限りはやっていける可能性はあるでしょう。

ちなみに転職でWEBデザイナーを考えている方は職業訓練を利用する方法もあります。

私の友人は職業訓練でお金をもらいながら銀行員→WEBデザイナーになりました。

その内容も別記事でまとめているので参考にどうぞ→【職業訓練でWEBデザイナーになれるのか!?】成功例と失敗例!

ぜひ自分の状況にベストな学び方を選択してWEBデザインを勉強してください。

✔︎関連記事はこちら

プロのデザイナーが使うデザインソフトをまとめた記事のトップ画像
webデザインスクール 主婦
プログラミングスクール 社会人