【独学可】Webデザインを無料で学べる学習サイトと勉強法|Web制作に必要なスキルを解説

【独学可】Webデザインを無料で学べる学習サイトと勉強法|Web制作に必要なスキルを解説プログラミング

Webデザイン(ホームページ制作)は、お金をかけずに無料で独学することが可能です。

この記事では、Web制作に興味がある方に向けて以下の疑問にお答えします。

  • Webデザインって具体的に何を学べばいい?
  • どのスキルから勉強したらいい?
  • どれくらいのレベルまで学べば稼げるようになる?
  • 無料で出来る独学方法を知りたい
  • 勉強のロードマップが欲しい

私も2018年に無料で出来る勉強法を使って、Webデザインスキルを習得。カフェやアパレル、地元企業のホームページ制作の仕事が出来るようになりました。

Webデザインを勉強したい方はぜひ参考にしてみてください。

 

【最短】副業で稼げるWebデザインスクール5社を比較| Web制作スキルがオンラインで身についておすすめ

【厳選】副業で稼げるWebデザインスクール5社を比較| Web制作スキルがオンラインで身についておすすめ
この記事では、Webデザインを副業にして稼ぎたい人に向けて「オススメのオンラインWebデザインスクール」を紹介します。 Webデザインで稼ごうと多くの人が独学でチャレンジしますが、90%近くの人...

 

【Web制作の仕事をするためには何が必要? 学ぶべきスキルを解説】

【Web制作の仕事をするためには何が必要? 学ぶべきスキルを解説】

あなたはWebデザインについてどれくらい知っているでしょうか?

勉強を進める上では全体像を把握することが重要です。大きな目標を小さな目標に細分化し、着実にその目標をクリアしていくことでWebデザインスキルを習得できます。

まず初めに、Web制作の仕事に必要なスキルセットを解説します。これからどういう道のりでWebデザインスキルを身につけていくのか、イメージしながらご覧ください。

 

・Webデザインで稼ぐために学ぶべきスキル

Webデザインスキルというものは、実は様々なスキルから成り立っています。

HTMLWebサイトの構造を入力する言語
CSS構造に装飾を加える言語
JavaScriptWebサイトに機能をつけるプログラミング言語
jQueryJavaScriptを簡単に使えるフレームワーク
BootstrapHTML、CSSを簡単に使えるフレームワーク
WordPressWebサイトを簡単に作れるサービス
PHPWordPressで使われるプログラミング言語
adobe Photoshop画像編集ソフト
adobe Illustratorデザイン制作ソフト
adobe XDWebサイトのワイヤーフレーム作成ソフト
SEO検索エンジン最適化のノウハウ
セールスライティング商品を売れるようにするための文章術

この他にも、コードを入力するテキストエディタの使い方や、作ったWebサイトをインターネット上にアップロードする方法も覚える必要があります。

ホームページ制作はこうした様々なスキルを組み合わせて行います。これらを総称して「Webデザインスキル」と言うのです。

サッカーのスキルと言ったときにドリブルやシュート、パスやセンタリングなど様々なものがあるのと同じイメージです。

Webデザインと近いものとしてプログラミングというものがあります。

実はプログラミングでもHTMLやCSS、JavaScriptといったものを学ぶ必要があるので、違いがわからない方もいらっしゃるかもしれません。

プログラミングとWebデザインは「目的」「要所」「必要なスキル」の3つが異なります。

【目的】
プログラミング・アプリやWebサービスを作ること
・業務効率化や自動化のためのシステムを開発すること
Webデザイン・ホームページを作ること
【要所】
プログラミング「この場合はこの動作を行う」といった自動化の仕組みを作ること
Webデザインクライアントの希望するデザインをヒアリングしてその通りのサイトを作ること
【必要なスキル】
プログラミング・アプリやシステムの画面(UI)デザインスキル
・プログラミング言語の習得
Webデザイン・Webサイトのデザインスキルプログラミング
・各種ツールを使ってデザインを形にするスキル

このような違いがあります。簡単に言うと、Webデザインよりも難しいのがプログラミングと言うことです。

Webデザインを学ぶ上では、プログラミング言語の習得は基本的に必要ありません。プログラミング言語は初心者の多くが挫折するので、そこを避けて通れるのはメリットでしょう。

しかし、逆にデザインセンスは必要になります。いくらツールが使えてもダサいデザインしか作れなければ稼げなさそうですよね。

そう聞くと「自分にはデザインセンスなんてないから向いていないかもしれない」と思う方もいらっしゃるかもしれません。しかし、安心してください。デザインは他の人が作ったものを見て真似ればいいのです。

Webデザインの業界では、トップオブトップの人以外は基本的に誰かのデザインを真似てWeb制作を行っています。

そういう意味ではデザインセンスは不要とも言えますので、デザインに自信がない方でも大丈夫です。

 

・学習後の稼ぎ方と案件の取り方

Webデザインスキルを身につけたら、稼げるようになりたいですよね。Webデザインスキルには大きく分けて2つの稼ぎ方があります。

  • 転職
  • フリーランス(副業)

1つはWeb制作会社への就職または転職です。

企業やお店に向けてホームページの制作や作り替えの提案を行い、クライアントの希望するWebサイトを作るという仕事です。独学のみの未経験でもポートフォリオ(作品例)次第で採用される確率は十分にあります。

もう1つの稼ぎ方が副業またはフリーランスとして仕事をする方法です。

Webデザインの仕事案件はクラウドソーシングサイトなどで多く募集されています。ホームページ制作丸ごとの案件もあれば、コーディングのみの仕事やバナー制作だけの仕事もあり、幅広い稼ぎ方ができます。

また、クラウドソーシング以外にもTwitterでDMをしたり、地元のお店に営業をして仕事を獲得している方も多くいらっしゃいます。

Webデザインの仕事なら副業で月に10万円以上稼ぐことは十分可能ですので、今からでも学ぶ価値のあるスキルと言えるでしょう。

 

【Webデザインのスキルを身につけるまでの学習ロードマップ】

【Webデザインのスキルを身につけるまでの学習ロードマップ】

Webデザインに必要なスキルと、スキル習得後の稼ぐイメージはできたでしょうか?

上述したようにいくつものスキルを身につける必要があるので、ここからは学習のおすすめロードマップをお伝えします。また、稼げるようになるまでの時間についても解説します。

 

・何から学べばいい?必要なスキルレベルの目安は?

Webデザインを習得するまでのロードマップは以下がおすすめです。

  1. テキストエディタ、HTML、CSS、Bootstrapのチュートリアルをこなす
  2. 既存サイトの模写を5サイト分やってみる
  3. デザインの本を一冊読む
  4. jQuery、WordPress、adobe XDについて学ぶ
  5. サーバーやドメインの契約とアップロード方法について調べる
  6. Photoshop、Illustratorについて学ぶ
  7. JavaScript、PHPについて学ぶ

実はWebデザインで稼ぐためには全てのスキルを完璧にマスターする必要はありません。

Webデザイン初心者の多くが勘違いしていることなのですが、やり方があると知ってさえいればあとはネットで調べながら作ればいいのです。

もちろん、全て頭に入っていて自由に使いこなせる方が作業スピードは格段に上がります。ですが、それは実践を繰り返す中で身に付いていくものでもあります。

世界中の料理を完璧に作れるようになってから料理人になる人はいませんよね。とりあえずキャベツの千切りができる状態になったらアルバイトを始めてみて、そこから色々と覚えていくものです。

Webデザインも同じように、HTMLのコードを書けるようになったらコーディングの仕事にチャレンジしてみる。それから他のスキルも身につけていくという感じで進めることがおすすめです。

独学で気をつけなければいけないのは、勉強に終わりがないことです。誰も「GO」と言ってくれないので、いつになったら稼ぐフェーズに移れるかわかりません。

十分副業できるくらいのスキルは身についているのに、いつまでも勉強ばかりしていたら意味がないですよね。

ある程度のレベル感まで達したら稼ぐフェーズに移りましょう。スキルは稼ぎ始めた後でも伸ばせます。

それぞれの稼ぎ方でのスキルの最低限の目安は以下の通りです。

  • コーディングの副業(クラウドソーシング):上記②まで
  • Webサイト制作の副業(クラウドソーシング):上記④まで
  • Webサイト制作(フリーランス):上記⑤まで
  • Web制作会社への就職&転職:上記①まで(未経験でも可能な場合もあり)

最低限のWeb制作はこれくらいのレベル感で行うことができます。さらにPhotoshopやIllustratorなどので事案スキルを身につければ、より単価の高い仕事を請け負うことができるようになります。

まずはHTML、CSS、Bootstrapのチュートリアルを見ながらやってみることがスタートです。次章で勉強の始め方を解説します。

 

・働きながらでも可能? Webデザインで稼げるようになるまでの期間

Webデザインの勉強法を解説する前に、未経験からWebデザインの仕事ができるようになるまでの学習時間をお伝えします。以下がそれぞれのスキル習得の最低限の目安です。

  • HTML    :8時間
  • CSS     :12時間
  • Bootstrap  :3時間
  • jQuery    :5時間
  • WordPress :3時間
  • adobeXD  :1時間
  • Photoshop  :8時間
  • Illustrator  :8時間
  • JavaScript   :20時間
  • PHP     :20時間

これらが最低限の勉強時間の目安で、ここにさらに模写の時間が加わります。HTMLとCSSの基礎を学んだ状態だと、1つのサイトを模写するのにかかる時間は5〜10時間ほどだと思っておいてください。

JavaScriptやPHPはプログラミング言語の世界に入っていくので勉強時間は長くかかります。ですが、Webデザインで稼ぐためには必ずしも必要なものではありません。

まずはHTMLとCSSについて20時間ほど勉強してみると、Webデザインの骨格が見えてくるはずです。

20時間の勉強ということは1日1時間の勉強で1ヶ月弱です。それくらいの時間なら働きながらでも時間を作ることができるのではないでしょうか?

今から1ヶ月後をイメージしてみてください。今日から勉強をスタートしたあなたが1ヶ月後にはWebサイトを作ることができるようになっている。無理だと思っていたことができるようになっている。

そのときの感情を考えると、頑張ってみようという気持ちになるのではないでしょうか?

 

【Webデザインを無料で独学する方法|おすすめの学習サイトと本を紹介】

【Webデザインを無料で独学する方法|おすすめの学習サイトと本を紹介】

それでは、Webデザインのおすすめ独学方法をお伝えします。お金をかけずに独学する方法は以下の3つを活用することです。

  • 無料で利用できる学習サイト
  • YouTubeのチュートリアル動画
  • Webデザインの学習に役立つ本を図書館で借りる

それぞれ解説します。

 

・無料で利用できる学習サイト

Webデザインの勉強は本でやるよりも動画教材を使ってやる方がおすすめです。その理由はパソコン上の動きがわかるから。

本の場合はどうしても全ての動きをみることができません。この画像とこの画像の間に何が起こった!?というような急な変遷もあり、つまづいてしまうことが多くあります。

動画教材だと全て画面収録されており、講師と同じように動かせば問題なく進むことが可能。初めてWebデザインの勉強をする場合は動画教材を活用しましょう。

Webデザインが無料で学べるおすすめの動画教材は2つあります。

ドットインストールは有料版もありますし、Udemyも有料の教材が販売されています。しかし、ドットインストールの場合は無料版だけでも十分にHTMLとCSSを学ぶことができます。

まずは基本的な部分を学んでみて、さらにスキルを高めたい場合には月額課金をしてみても良いでしょう。

私もWebデザインの基本を学ぶ上ではドットインストールにもっともお世話になりました。JavaScriptの勉強までいった段階で初めて課金をしたので、初期段階であれば完全に無料で勉強できます。

もう1つの無料教材がUdemyです。Udemyは世界最大の動画学習プラットフォームとして、数多くの講座が用意されています。

Udemyは基本的に有料教材を購入する場なのですが、無料教材も配布されています。例えばWebデザインで検索し価格のタブから無料を選択すると、1000以上の無料教材が並んでいます。

これらは無料の会員登録をするだけで見られるようになりますので、「HTML入門」や「CSS入門」の無料教材で気になるものをみて勉強してみてください。

ちなみに、「Progate」というWebサービスも初心者向けによく紹介されますが、こちらはおすすめしません。

Webサイト上で問題を解く形式でWebデザインを学んでいけるのですが、そもそもテキストエディタを使わずに行うので実践的ではありません。

囲碁を覚えるために詰碁の本を読んでいる感じです。碁盤を用意して1から教わらないと、囲碁ができるようにはなりません。Progateをするくらいならドットインストールの方が断然おすすめです。

 

・YouTubeのチュートリアル動画

Webデザインの勉強には動画が良いとお伝えしました。動画といえばYouTubeですよね。YouTubeにもWebデザインのチュートリアルが数多く上がっており、もちろん全て無料で見ることができます。

完全初心者の場合は、YouTubeよりもドットインストールやUdemyの方が順序立てて体系的に学べるのでおすすめです。

しかし、世界中のWebデザイナーが自身のスキルを惜しみなく教えてくれているので、中級者以上にとっては勉強になる部分も非常に多いでしょう。

おすすめのYouTubeチャンネルは以下の3つです。

・HIROCODE

HIROCODEトップ

・Webの神様

Webの神様トップ

・アキユキWebデザイナー戦略室

アキユキWebデザイナー戦略室トップ


また、YouTubeにはコーディング以外にもデザインの考え方やAdobeソフト、プログラミング言語のチュートリアルも数多く上がっています。

必要に応じていろんなチュートリアルで勉強してみると良いでしょう。

 

・Webデザインを学べるおすすめの本

Webデザインの本を読む目的は「模写対象を探すため」です。基礎的な知識を学ぶなら動画教材が一番です。なので、基本を習得するための本はここでは紹介しません。

様々なWebサイトがカタログのようにまとまっているのは本の良いところです。模写の対象を探すという目的では非常に使えます。

基礎を学んだ後に作業に慣れたりデザインの引き出しを増やすために活用してみましょう。おすすめの本は以下の3冊です。

・Webデザイン良質見本帳
・Webデザイン良質見本帳第二版
・Webデザインアイデアレシピ

これらの本は定期的に見返す価値もありますが、お金をかけたくなければ図書館で借りるのも手です。

近くの図書館に置いていない場合でも、リクエストをして入荷してもらうことができますので、活用してみてください。

また、模写対象を探すためには「Pinterest」というサイトを使うのもおすすめ。

Webデザインというワードで検索すると、日本中のみならず世界中のサイトが出てきます。その中からスキルアップに繋がりそうなサイトを見つけて、模写をしてみてください。

 

【Web制作スキルを独学する上で重要な3つのポイント】

【Web制作スキルを独学する上で重要な3つのポイント】

Webデザインの独学方法をお伝えしてきました。この方法なら無料で勉強できてスキルを身につけられます。

しかし、Webデザインやプログラミングの独学は容易なものではありません。

慣れない英語、1つのミスで起こるエラーの数々、広すぎる勉強範囲。多くの人がチャレンジするも、稼ぐ前に挫折しているのも現実です。

Web制作スキルを身につけるためには重要なポイントが3つあります。

  • わからないところをすぐに聞ける環境
  • チュートリアルをこなすだけでなく自分なりのアレンジを試してみる
  • 目標の設定や勉強時間の確保を含めた決意

初心者は頻繁にエラーでつまずきます。問題の解決には何時間もかかることも。しかし、そうした問題のほとんどは経験者に質問したら一瞬で解決するものばかりです。

勉強を効率的に進めるためにも、すぐに質問できる環境は非常に重要です。

また、チュートリアルばかりこなしていると、いざ自分でサイトを作ろうと思ったときに何のアイディアも出てきません。

チュートリアルで学んだTipsについて、自分なりにアレンジを加えてみていろんな挙動を体験しましょう。習ったままやってみるのではなく、自分で考えてコードを書いてみることで本当の自分の力になります。

3つ目に大事なポイントが決意です。

Webデザインのスキルを身につけるには最低でも1か月から3か月は集中して勉強する必要があります。その間、エラーの解決策がわからなかったり、自分には向いていないかもというネガティブな気分になる瞬間も訪れます。

そうした悩みは初心者なので当然です。それを当然と理解して進み続けることが重要です。

キツイ思いをしながらでも3か月は本気で頑張る。そう決意することがWebデザインを習得する一番の秘訣かもしれません。

 

【稼ぐことがゴールなら独学は正直難しい|質問し放題のオンラインスクールが初心者には最適です】

【稼ぐことがゴールなら独学は正直難しい|質問し放題のオンラインスクールが初心者には最適です】

Webデザインを勉強したいと思っている方の中には、副業にして稼ぎたいと思っている方もいらっしゃるでしょう。

稼げるようになることがゴールならば、正直独学はおすすめしません。独学が圧倒的に不利なポイントは「Web制作の仕事の進め方がわからないこと」です。

実際に仕事をするとなると、ただWebサイトを作る能力があるだけでは不十分。営業の仕方やクライアントの要望の聞き方、企業の秘密保護やサイトの受け渡し方法、その後の保守契約の仕方など、わからないことだらけです。

自分のサイトを作るだけなら誰にも迷惑がかかりません。独学で学んだ範囲で作れるものを作ってみれば良いでしょう。ですが、クライアントからお金をもらってサイトを制作する上ではあらゆる責任や業務が発生します。

Web制作会社に勤めていれば、そうした仕事の部分をOJTで学ぶことができます。しかし、独学だけだと実務の経験が圧倒的に不足するのです。

私も独学である程度のサイトが作れるようになったのはいいものの、その後の仕事の仕方が全くわかりませんでした。勉強中も何度も挫折しそうになりましたが、仕事が取れないことでもまた挫折しそうになったのです。

勉強したのに稼げなかったら意味がないですよね。

趣味で自分のサイトを作りたいという動機であれば問題はありませんが、Webデザインの仕事をしたいのであれば独学では難しいという現状があります。

では、どうすればWeb制作で稼げるようになるのでしょうか?

そのもっとも近道となる方法はWebデザインスクールを受講することです。

Webデザインスクールの多くは稼げる人材になることをゴールとしており、そのための最短ルートとなるカリキュラムが組まれています。遠回りになるような無駄な勉強が不要なので、独学よりも効率的に勉強を進めることができます。

もちろん、講師はいつでも質問に答えてくれたりサポートをしてくれたりするので、挫折しそうになることもありません。

また、Webデザインスクールの中には、卒業後の案件紹介やサポートがあるところもあります。先ほどお伝えした独学で学べない部分もサポートがあるので安心です。Web制作の仕事に慣れるまでは、プロのサポートがあることは本当に心強いですよ。

スクールを受講することでどうしてもお金はかかってしまいます。ネット上には無料の教材も充実しているので、自分で勉強を進められる人には不要でしょう。

しかし、Webデザインをスキルをなるべく早く身につけて稼げるようになりたい方や、独学で稼げるようになるか不安な方にとっては、Webデザインスクールの受講は有意義な勉強方法です。

無料教材を使って独学しても、結局稼げない状態に陥る人は大勢います。確かにお金はかかっていないので損はしていないように思えます。

ですが、役に立たないスキルのために費やした時間を見ると、大きくロスしたことになります。

稼ぐことがゴールなら、一刻も早くスタートラインに立てた方が良いですよね。

稼げるWebデザイナーになるためのオンラインスクールは以下の記事でも紹介しています。初心者向けの無料体験や相談会も行われていますので、気になる方はチェックしてみてください。

 

【厳選】副業で稼げるWebデザインスクール5社を比較| Web制作スキルがオンラインで身についておすすめ

【厳選】副業で稼げるWebデザインスクール5社を比較| Web制作スキルがオンラインで身についておすすめ
この記事では、Webデザインを副業にして稼ぎたい人に向けて「オススメのオンラインWebデザインスクール」を紹介します。 Webデザインで稼ごうと多くの人が独学でチャレンジしますが、90%近くの人...

 

この記事が少しでも参考になれば幸いです。

 

【Webデザイン 関連記事】

【オワコン?】プログラミングを勉強しても意味がないのはなぜ? これからの時代に必須と言われる理由

もう無理!?プログラミングは稼げない8つの理由|副業で初心者が稼げるほど甘くない

【注意】初心者にプログラミングは難しい? 独学する前に知っておくべき4つのこと

【5選】Webデザインの仕事に役立つおすすめ資格|Web制作に資格は必要?合格しても意味がない?

プロフィール
著者
NiSH

NiSHです。書店員時代にビジネス誌担当として全国Top5入賞。
退職後に独立し、ブックカフェ・ハンドメイド腕時計作り、アパレルブランド、ウェブメディアなどを運営。「自分の好きなことを仕事にする力」を磨いてきました。
このサイトでは、自分らしく生きていきたい人に向けて、参考になるキャリアの学びやおすすめの自己投資方法を発信していきます。

プログラミング
LIFE WORK CAFE