・これからWebデザインを独学で学びたい人
・Webデザインを素早く学びたい人
・Webデザインで副業をしたい方
・Webデザインを学んで転職or就職したい方
・Webデザインを独学で学びたいが何をしていいか分からない人
もくじ
webデザインの独学方法を現役Webデザイナーが紹介！【これだけ読めばおk】
まず手短に、Webデザインの学び方を紹介していきます。
【Step1】Webデザインの独学に必要なものを揃える
【Step2】Webデザイン独学・スクールメリット&デメリットを知る
【Step3】Webデザインに必要なスキルを知る
【Step4】Webデザイン独学方法【教材＆本】を知る
【Step1】Webデザインの独学に必要なものを揃える
【Step1】Webデザインの独学に必要なものを揃える
Webデザインをするためには、Webデザインをするための機材を買う必要があります。
例えば、パソコンやデザインツールなど
【Step2】Webデザイン独学・スクールメリット&デメリットを知る
【Step2】Webデザイン独学・スクールメリット&デメリットを知る
独学で学ぶにしても、これから学ぶ方法が自分に合っているのか
他の学び方も知っておいてから、独学をするのがおすすめでしょう。
【Step3】Webデザインに必要なスキルを知る
【Step3】Webデザインに必要なスキルを知る
Webデザインをするためには、必要なスキルがあります。
具体的には、プログラミングやデザインスキル、デザインツールなど
Webデザインの独学をする上で何が必要なのかを、把握しておきましょう。
【Step4】Webデザイン独学方法【教材＆本】を知る
最後に、Webデザインを独学するための本や教材は何がおすすめなのかを知りましょう。
自分で教材を探すよりかも、名の知れた良質な本や教材で勉強するのが一番でしょう。
それでは、それぞれを詳しく説明していきます。
Webデザインの独学に必要なもの
それでは、Webデザインの独学に必要なものを紹介していきます。
パソコン【Webデザインに必要なもの1】
パソコンはWebデザインをする上では必須でしょう。
一応おすすめのパソコンを紹介していきます。
持っている方も、新しく乗り換えてもいいかも知れません。
【MacOS】MacBook Pro13
WebデザインおすすめのパソコンはMacBook Pro13インチです。
スペックも高くて、画質も超綺麗なのでおすすめです。
僕もMacBook Pro13インチを使用しフリーランスWebデザイナー兼ブロガーとして活動しています。
キーボードとマウスもあったほうがいいですよ
あと、Webデザインをするならキーボードとマウスはあったほうがいいですよ。
MacBookにもキーボードは付いてますが、外付けのキーボードでやるのがいいと思います。
【Windows】サーフェス
Windowsの方が言い方は、surfaceでもいいと思います。
デザインも、スッペクもMacBookに近いですし、持ち運びもできるのでおすすめですね！
デザインソフト
次に必要なのは、デザインソフトです。
Webデザイナーは、Webのデザインとコーディングだけをする思うかも知れません。
実は、PhotoshopやIllustratorを使って、ロゴや画像を加工したりしてホームページなどを作ります。
しかし、デザインソフトはWebデザインに必要なプログラミングを学んだ後からの購入でもおkです！
Webデザイン独学・スクールメリット&デメリット
続いて、Webデザインを独学で学ぶのとスクールで学ぶ場合のメリットデメリットを紹介していきます。
Webデザインの学習ににかかる時間
まずは、Webデザインのかかる時間を紹介していきます。
| 独学 | スクール |
| 200~400時間 | 100時間 |
独学で学ぶ場合は、平均として300時間ほどかかると僕は思います。
実際に僕もフリーランスとして活動し始めたのは、300時間ほどWebデザインについて学んでからでした。
もしかしたら、これ以上かかるかも知れません。
一方スクールではWebデザインの学習時間は100時間ほどだとされています。
プログラミングスクールだと、圧倒的に学習時間が短いですね。
Webデザインスクールのメリット&デメリット
Webデザインスクールのデメリット
Webデザインのプログラミングスクールのデメリットは、やはり値段が高いことでしょう。
平均的なプログラミングスクールの相場は「28万円」
Webデザインスクールのメリット
メリットは、やはり最短でWebデザインを学べることでしょう。
また、メンターがついていることがほとんどなので、挫折したりすることがなくなりスムーズにプログラミングを学ぶことが可能です。
Webデザイン独学のメリット&デメリット
Webデザイン独学のデメリット
Webデザインの独学のデメリットは、学習するのに時間がかかること
そして、相談できる人がいない場合は挫折して勉強をやめてしまう可能性があることです。
Webデザイン独学のメリット
Webデザインの独学のメリットは、やはり安く学ぶことができることでしょう。
また、自分のペースでプログラミングやデザインなどを学ぶことができるので、仕事終わりや学校終わりなど自分の好きな時間に学ぶことが可能です。
Webデザインに必要なスキル【4選】
続いて、Webデザインをする上で必要なスキルを紹介していきます。
Webデザインに必要なスキルは以下の４つです。
HTML,CSS
JavaScript,Query
デザインスキル
デザインツール
それぞれ詳しく説明していきます。
HTML,CSS&JavaScript,Query
Webデザインをするためには、プログラミングの知識が必須です。
Webのデザインなのでやはり、Web上で何かを作る必要があります。
・HTML
・CSS
・JavaScript（jQuery）
・その他
上記のプログラミングスキルが必要になってきます。
簡単なWebデザインであればHTML,CSSでもできます
しかし、JQueryなどを学びもっと動的なwebのデザインをする必要があります。
そのため、Webデザインをするためにはプログラミングを学ぶ必要があります。
デザインスキル
Webデザインを学ぶにあたって、デザインについての知識が必要です。
Webデザインもデザインなので、どうやったらユーザーが使いやすいか、見やすいか、見たくなるのかなどのデザインの知識もある程度必要になってきます。
美しいデザインとはなんなのか、などを知っておくことでWebデザインにもその知識を生かすことができお仕事も取りやすくなります。
ダサいデザインより、綺麗で見やすいデザインの方がいいですよね！
デザインツール
Webデザインを行うあたって、イラストレーターやフォトショップの知識があった方がいいでしょう。
なぜなら、サイトに使う画像を加工したり、サイトのロゴを作ったりするのに必要になるためです。
具体的には、画像を明るくして見やすくしたり、画像の中に文字を入れたり
また、サイトのロゴを作ったり、テキストを作ったりするのにフォトショやイラレの知識が必要になってきます。
Webデザイン独学方法【教材＆本】
あそれでは、お待ちかねのWebデザインの独学方法について紹介していきます。
独学で学ぶ方法は、買って勉強する方法とオンラインサービスで学ぶ方法があります。
HTML,CSSを独学する
オンラインサービスでHTML,CSSを独学する
オンラインでHTML,CSSを学ぶおすすめのサイトは２つあります。
以上のオンラインサービスは、ある程度無料で学ぶことができます。
しかし、応用編などを学ぶためには月々1000円ほど払う必要があります。
まずはじめに、学ぶとしたらプロゲートがおすすめです。
プログラミングをする環境構築などをしなくてもそのまま、ブラウザ上でプログラミングを学ぶことが可能です。
本や教材でHTML,CSSを学ぶ方法
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
WebデザインのHTM,CSSの基礎から実用的なところまで学ぶことができる良本です。
アマゾン評価も☆4.3とかなりの高評価です。
自分でWebサイトを作って見たり、PCとスマホ両方で見ても形が崩れないサイトの作り方など様々な知識が書かれています。
内容：1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
初心者の方でもつまずくことなく、Webデザインについて学べる本です！
HTML&CSSとWebデザインが1冊できちんと身につく本
プログラミングは実際に手を動かして覚えるもの！
この本は実際に手を動かしながら、HTML/CSSとWebデザインについて学べます。
内容：HTML&CSSとWebデザインが1冊できちんと身につく本
本書はWeb制作の基礎言語であるHTMLやCSSの書き方だけでなく、多くのWebサイトが採用している4つのレイアウト手法を学ぶことで、1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。
Webデザインに必要なレスポンシブ対応など様々なことが学べる！
JavaScript,Queryを独学
オンラインサービスでJavaScript,Queryを独学くする
JavaScript,Queryも以下の二つのオンラインサービスで学ぶことが可能です。
しかし、どちらも無料で学べるのは基礎の基礎までです。
それ以上学びたい方は、月額で課金して学ぶようにしましょう。
本や教材でJavaScript,Queryを独学する
jQuery最高の教科書
１からjQueryについて学べる良本です！
初心者の方でも気軽に学ぶことができるので、とりあえず学んでみたいと思う人には刺さる内容ではないでしょうか。
内容：jQuery最高の教科書
とことん丁寧×ステップアップ解説。だから、知識ゼロからでも本当によくわかる!jQueryをこよなく愛するトップクリエイターが基本的な仕組みから、実務で活かせる珠玉のテクニックまでを徹底詳解!経験に裏付けられた「わかりにくいポイント」を押さえた解説だから確かな基礎力と、実務で活かせる実践力を身につけられる!
初めての方でも１から学ぶことがでいるオススメの本です！
スラスラ読める JavaScript ふりがなプログラミング
こちらは、JavaScriptの基本的なことが書かれている本です。
jQueryはJavaScriptのライブラリなので、JavaScriptのコードの書き方を学ぶのにこの本は適しています。
内容：スラスラ読める JavaScript ふりがなプログラミング
コードが読めればプログラミングは楽しくなる!!基本をしっかり。目指したのは「究極のやさしさ」
タイトル通りスラスラ読めて、内容も理解しやしいJavaScriptの本！
デザインスキルを独学
デザインスキルは、主に本で学ぶのが一番でしょう。
デザインのおすすめの本は以下の通りです。
ノンデザイナーズ・デザインブック
Webデザイナーならほとんどの人が持っていると言っても過言ではない、デザインの本質が書かれている本です。
またアマゾン評価も☆4.1とかなりの高評価
Webデザインでも速攻で役にたつ知識が満載です！
内容：ノンデザイナーズ・デザインブック [第4版]
4つの基本原則。これを知るだけで、あなたのデザインはずっとぐっと、良くなります。プロで無くても、読みやすいデザイン、伝わるプレゼン資料、わかりやすいレイアウトを作りたい。そんなあなたのための、デザインの基本書。
Webデザイナーならほとんどの人が読んだことがあるであろうおすすめの本！
②Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
Webデザインのデザインで詰まった時はとりあえずこれを見ればおk！
僕もこちらの本を参考にWebデザインのデザインの勉強をよくしてます。
どんなデザインにしようかなど、迷ったらこれを参考にしながらデザインを考えます。
内容：Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集
本書は415点の厳選した良質なWebサイトを集めた見本集です。レイアウト、配色、フォント、素材、プログラムなど、ページを構成しているデザインパーツまで分解して解説しているので、Webサイトを見るだけではわからなかった「デザインの魅力の理由」がわかり、サイトの制作にもすぐに活用できます。
Webデザインをする上でこれを持ってないのは、、、Webデザイン人生を損している！
③なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
デザイン＝楽しいを実感できる新しいデザイン本です。
目で見てなるほどなぁと、思えるデザイン本
自分のWebサイトにも活用できるアイデアが盛りだくさん！
内容：なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
本や雑誌、ポスター、看板、チラシなど、日常には「デザイン」されたビジュアルが溢れている。そうしたデザインを実際に行うとき、デザイナーがどんなことを気にかけ、どんな基準で良し悪しを判断しているのか。それを視覚的に、極めて具体的にわかりやすく説明した本
見るだけで、良デザインについて学べて自分のサイトに活かせる！
④いちばんよくわかるWebデザイン きちんと入門
Webデザインをする上で必要なレイアウト４つの原則とレスポンシブWebデザインが学べる！
内容：いちばんよくわかるWebデザイン きちんと入門
この1冊でWebデザイナーに必須の基礎知識が網羅できる!これからはじめる人、一気に学びたい人へ一生使えるWebデザインのテクニック集!絶対に外せない!レイアウト4つの原則とレスポンシブWebデザイン。今日から使える!配色の基本と、実例デザインの配色見本集。ユーザーの心を動かす!写真と図版の使い方、タイポグラフィの選び方。フレックスボックス、インタラクション、マーケティングの知識まで。
Web制作に関する全てのジャンルについて書かれている！
デザインツールを独学
デザインツールを学ぶ場合も、参考書を買って学ぶのがオススメです。
①Illustrator しっかり入門
先ほどのフォトショップと同じシリーズのイラストレーター版！
こちらの本はアマゾン評価が☆4.4とかなりの高評価。
初心者に優しい解説で、スラスラと学ぶことが可能な一冊でしょう。
内容：Illustrator しっかり入門
基本の「き」から1つずつ、Illustratorの使い方とアートワークの作成方法を解説。
人気クリエイターが教える「手を動かしながら学ぶ授業」です。
初心者でも簡単にIllustratorについて学ぶことができる良本！
②Photoshop しっかり入門
参考書は好き嫌いが多いですが、個人的にはとても見やすい内容の良本です！
しっかりとフォトショップを学べるのでおすすめです。
画像が多めなので理解しやすいいい本でしょう
内容：Photoshop しっかり入門 増補改訂版 【CC完全対応】[Mac & Windows対応]
基本の「き」から1つずつ、Photoshopの使い方とデジタル画像の基礎知識を解説。
人気クリエイターが教える「手を動かしながら学ぶ授業」です。
画像多めで、初心者でも理解しやすい本です！
まとめ：webデザインの独学方法を現役Webデザイナーが紹介！【これだけ読めばおk】
本記事は「webデザインの独学方法を現役Webデザイナーが紹介！」について書きました。
それでは最後に、本記事をまとめます。
Webデザインを独学する上で必要なもの
①パソコン
②デザインソフト
Webデザインをする上で必要なスキル
①プログラミングスキル
②デザインスキル
③デザインツール使用スキル
Webデザインを独学で学ぶ方法
①オンライサービスで学ぶ
②参考書を購入して学ぶ
ではでは！
ぜひWebデザインの勉強をしてみて実際にWebデザインで稼いでみてください！
Webデザインの独学方法を知りたい、できればWebデザインの独学のメリットデメリットも紹介してほしい！
また、Webデザインに必要な機材や、必要なスキルなどもきちんと教えてほしいです！