Webスキルを独学で勉強する方法！【挫折率87.5%の壁をぶち抜く勉強法】

（この記事は2022年3月23日が最終更新日です。）

 

なんと、Web学習を志した人のうち87.5%が挫折や行き詰まりを感じたことがあるというアンケート結果があります。

 

本記事では独学で以下のような自分のサイトを作れるようになって、副業を始めるまでの私が行った学習方法を紹介したいと思います。

 

私の場合は副業でWeb制作を行っていますが、選択肢が増えるので多くの自分に合った仕事のやり方ができるようになります。

 

少し長い記事にはなりますが、最後まで読んでもらえればあなたも。Webの仕事を獲得できる道筋が見えてくるようになります。

 

勉強する前に確認してほしい2つのこと

勉強する前に以下ことを確認しましょう。

自分で学ぶとなると費用（教材代）と時間がかかります。

 

目的をしっかり確認する

Webスキルを学ぶまえに『何のために学習するのか？』を改めて確認してみてください。

もしも自分のサイトを作りたいといった目的であれば自分で作る必要はなく外注することも可能です。

自社サイトを作るのはなかなかの費用がかかりますが、私にご依頼いただければ単純なものであれば３万円で作ることも可能です。まずはご相談ください。

Webスキルを身につけて稼ぎないということであれば『月何万円稼ぎたいのか？』を明確にしておきましょう。

目的を明確にすることでモチベーションが維持されます。

 

挫折する理由を理解する

冒頭にもある通り、87％近くの人は挫折を味わいます。

なぜ挫折してしまうのか、原因を知り対策することで挫折しにくい環境を作っておきましょう。

 

エラーが解決できなかった

プログラミングはエラーの連続です。

エラーが発生しない開発なんてありません。エラー解決に何日も学習が進まないといったこともざらにあります。

学習する中でどうしても解決できないエラーが発生してしまうこともあります。

 

そんな時に独学で学習していると助けてくれる人がいないのであきらめてしまう人が多いです。

 

質問できる環境がなかった

エラーを解決できないときに質問できる環境を用意しておきましょう。

最も頼りになるのは、プログラミングスクールの講師の方に質問することでしょうが、本記事では独学で！という思いがあります。

独学の場合は質問サイトに質問してみましょう。私が良く使うのは以下2つのサイトです。

 

 

必ず回答がもらえるわけではありませんが、質問の仕方を正しく行えていれば心優しいエンジニア先輩たちが助けてくれます。

 

モチベーションが続かなかった

プログラミング学習は本当に学ぶべきことが山ほどあります。

そして技術は進歩していくので学ぶことをやめることはできません。

そのため、ゴールが見えずひたすらエラー解決をし続けていることで次第にモチベーションが低下してしまい学習を辞めてしまう人が多いです。

そのために、『目的を明確にしておく』ことでゴールを設定するのはとても大切なことになります。

紙に目標を書いて、目に見えるところに貼っておくとモチベーション維持に効果的です。

シンプルですが効果があるので必ずやってみてください。

 

挫折しないためにWebデザインを独学で勉強するときの注意点

挫折しないためには、独学でWebスキルを習得するための注意点を紹介していきます。

 

①まとまった学習時間を取ること

Webスキルを習得するためには、生活面も見直す必要があるかもしれません。

Webスキルはとにかく頭を使います。そのため集中して学習する必要があります。

スキマ時間で学習を進めようとしても暗記をすればよいというわけではないのでなかなか難しいと私は思います。

 

②最低でも本は購入する

独学で勉強したいという人の多くはプログラミングスクールだと費用がかかるから独学という選択をしたんだと思います。

ネットに情報はたくさんあり勉強することも可能ですが、本だけは買ってほしいと思います。

本を購入すると、特典として教材用のサンプルコードが用意されていたり、しっかりと1から順を追って学習を進めることができるからです。

ネットだと自分で学習するコンテンツを判断しないといけないため、初心者にはハードルがかなり高いと感じます。

書籍のおすすめは以下の2冊

この本はAmazonでもNo1の書籍。

カフェのWebサイトをつくる想定で1から丁寧に教えてくれるので間違いない1冊です。

 

次の書籍はWordPress学習になるので少しハードルは上がりますので1つ目に紹介した本を学習し終えて進めるのが良いかと思います。

世の中の3分の1はWordPressでできたWebサイトと言われています。

副業で稼ぎたい場合はWordPressの理解は必須かと思います。

 

紹介した2冊ともサンプルコードがあるので、学習につまづいたらサンプルコードを見て答え合わせができるので挫折する可能性はグンと下がるかと思います。

 

③アウトプットして制作実績を増やす

学習を進めていく中で大切なのはアウトプットして他の人に見てもらうことです。

アウトプットすることは『質問できる環境を作る』ことにもつながります。

また仕事をもらう際に信用を得るため・技術力を示すためにもポートフォリオが必要になってきます。

ポートフォリオとは？

「作品集」であり、自分の職種（あるいは転職希望職種）における実績や力量を評価してもらうために作成する資料

 

勉強すべき4つのスキル

Webデザインを学ぶうえでどのようなことを学ぶ必要があるのでしょうか？

結論からいうと以下の4つです。

 

それぞれどのようなものかを紹介していきます。

HTML/CSS

HTML（ホームページにテキストや画像などを配置するための言語です。）はマークアップ言語とよばれ、ホームページにテキストや画像などを構成するためのプログラミング言語です。

HMTLは初心者でも習得しやすいプログラミング言語だといえます。

 

CSS（Cascading Style Sheets）は、HTMLで構成されたホームページの背景を変えたり画像の位置を調整したり様々な装飾をするためのプログラミング言語です。

 

HTMLとCSSを組み合わせてホームページを作成します。

この2つのプログラミング言語さえマスターしてしまえばホームページを作ることができ、仕事を獲得することも可能です。

 

HTMLとCSSを学ぶ際におすすめの書籍が

WordPress

HTMLとCSSさえマスターしていればホームページは作ることができます。

しかし、WordPressというホームページを管理するためのソフトを使用できないと仕事が少ないのが現状です。

WordPressはPHPでできていて、WordPress化するためにはPHPの知識も必要になってきます。

 

WordPressを学ぶのにおすすめの書籍が

PHP

PHPはWebサイトの制作に特化しているプログラミング言語です。

先ほど紹介したWordPressもPHPでできており、ホームページを制作する上では定番です。

先ほど紹介した書籍の中でも学ぶことができます。

 

Javascript/jQuery

Javascriptはホームページに『動き』を付けたいときに必要になります。

jQueryはJavascriptのライブラリで初心者でも使いやすくしたものと考えてもらえればOKです。

CSSでも動きはつけることができますが、Javascriptをマスターした方がより高度な動きをつけることができるので余裕があれば学ぶことをおすすめします。

 

Javascriptを今すぐ自分のサイトで使いたいという方は以下のサイトがオススメです。

コピペで使用できるので初心者でも簡単に使うことができます。

 

一緒に勉強すると役立つスキル

ここからは先ほど紹介したスキル以外に学びたいスキルは以下の4つ

 

それぞれどのようなものかを紹介していきます。

 

Photoshop/Illustrator/XD

Photoshopは画像素材（商品の写真など）を作成・編集するのに使用するデザインソフトです。

Illustratorはロゴを作成するために使用するデザインソフトです。

XDはサイト全体のデザインを作成する際に使用するデザインソフトです。

 

こちら3つのソフトはAdobeの製品で1つのパッケージプランを契約をすれば使用することができます。

Adobe高いですが、、、Webデザインをするなら契約は必須です。

 

SEO

ホームページを作る目的な何でしょうか？

ほとんどの場合がネットから集客だと思います。

そこで検索結果で上位表示するためにいろいろな対策を行う必要があります。その対策がSEOになります。

SEOの最低限の知識はWeb集客をするうえで学習しておいて損はないでしょう。

 

ちなみに、表示される順位によってクリックされる可能性はかなり違います。

1位と2位でもかなりの違いがあるのが分かるかと思います。

 

SEOを学ぶのにおすすめの書籍が

この書籍はマンガでSEOの知識を学ぶことができるので、本を読むことが苦手な方にもおすすめです。

 

SNS

SEOと並行して、FacebookやTwitterなどのSNSの運用もしておくといいでしょう。

 

SEO対策は結果がでるまでに長い時間がかかることがほとんどです。

それに対してSNSはバズれば短期間で集客することができます。

現在ではTikTokでも企業アカウントが数多く見受けられます。

 

アクセス分析

Google Analyticsなどのアクセス解析ツールを使い、ホームページのアクセス数や滞在時間、離脱率などの数字を把握しておくことも大切です。

 

ホームページは作ってからの運用が大事になってきます。

運用のスキル、つまりアクセス分析ができると運用の案件を獲得できるようになります。

運用案件は長期間にわたるものが多いので安定した副収入を得ることができます。

 

Webデザインの効率のいい学習の流れ

ここからは効率の良い学習の流れを紹介していきます。

①動画学習でざっと全体像を確認（インプット）

書籍でしっかりとした学習に入る前に、動画教材を使用し全体像をつかんでおくと学習効率が上がるので、以下の動画を一度目を通しておくとよいでしょう。

 

デザイン編

 

コーディング編

 

WordPress編

 

②実際に手を動かす（アウトプット）

流れがつかめたら書籍などを参考に一度、簡単なホームページを作成してみましょう。

実際に作ってみないと分からないことはたくさんあります。

ブラウザのバージョンが参考資料と違ったり、様々な問題が発生するでしょう。

Twitterや質問サイトでアウトプットしつつ、少しづつでよいので学習を進めることをおすすめします。

 

③オリジナルで何かを作る

次にデザインからオリジナルで作ってみるとよいでしょう。

基礎スキルが身についていても仕事を得るにはポートフォリオが必要なことがおおです。

オリジナルでポートフォリオを作ってみることをおすすめします。

 

④基本をきちんと復習

ポートフォリオの作成過程でも多くの学びがあると思います。

分からないところは復習することを繰り返して基礎スキルを身につけていきましょう。

 

⑤応用や実践的な勉強

ある程度、簡単なホームページが作れるようになったら『動きをつけてみる』『WordPress化』してみるといった感じで学習範囲を広めていきましょう。

具体的にはJavascriptの学習、PHP、WordPressの学習を進めていきましょう。

 

おすすめのサイト

おすすめの学習サイトは以下になります。

どれも無料で学習できるコースが用意されているので1つは登録しておくとよいでしょう。

 

Progate

 

CodeMonkey

 

ドットインストール

 

paiza

 

Webデザイン独学だと、転職までどのくらいの期間が必要？

多くのスクールが、4〜6ヶ月くらいになります。長いと1年のスクールもあります。

スキルを習得して転職のための制作物を作るの合計で6〜8ヶ月くらい。

独学の場合だとその1.5倍ぐらいの期間を見積もるべきでしょう。

1年ですね。

 

お仕事をしながらだと、時間がかかることはありますが。すでに会社を退職して時間のある方は、もしかするともっと早くできるかもせいれません。

 

Webデザイン独学でもフリーランスになれるのか？

スキルさえ学んでしまえばフリーランスなることは難しいことではありません。

今の時代、様々なプラットフォームで仕事を見るけることができます。

継続して仕事を得るためにもまずはしっかりとしたスキルを身につける必要があります。

 

独学でもしも挫折しそうな場合はスクールに通うことも考えてみてはいかがでしょうか。

WEBデザインの最適なスクールは「人によって違う！」

Webスキルを学ぶにしても、あなたのやりたいことによって学ぶ内容は変わってきます。

そのため必然的に最適なスクールも変わってきます。

まずは面談をおこなってみるのが良いでしょう。

 

独学とスクールの学習のメリット・デメリットを比較

WEBデザインの学習を「独学 or スクール」で学ぶ時、それぞれメリット・デメリットに違いがあるので比較してみよう。

 

「独学」のメリット・デメリット

• ［メリット］費用が少額で済む
• ［メリット］自分のペースで学習できる
• ［メリット］プレッシャーなく学習できる
• ［デメリット］モチベーションの維持が難しい
• ［デメリット］教材を自分で探して集める必要がある
• ［デメリット］どのステップで学ぶのか自分で調べる必要がある
• ［デメリット］疑問点やエラーなど全て自分で解決する必要がある
• ［デメリット］学習内容が正しいか不安になる
• ［デメリット］途中で挫折する可能性が高い
• ［デメリット］1年以上時間がかかる

 

「スクール」のメリット・デメリット

• ［メリット］お金を払うのでやるしかない
• ［メリット］一緒に学ぶ人がいるのでモチベーションが維持しやすい
• ［メリット］学ぶべき内容や教科書・動画がすべて用意されている
• ［メリット］疑問点を質問できるので、サクサク進む
• ［メリット］独学よりも短期で学習が終わる
• ［メリット］就活サポートなどがあるので仕事にしやすい
• ［デメリット］費用が高い
• ［デメリット］スクール選びで失敗するリスク

 

独学とスクールどちらがいいの？

こうやって比較すると費用がかかる分スクールの方が効率が良い学習方法だと言えるでしょう。

独学だと自分で教材を選んだり、エラー解決で時間がかかったりと何かと時間がかかります。そのため結果的に1年以上Webスキルの習得に時間がかかったということにもなりえます。

 

学生ならまだしも社会人の方にとって時間はお金よりも貴重なものです。

時間をとるか、お金をとるか自分と相談してみると良いでしょう。

 

スクールの選び方

スクールの選び方ですが、どこに重点を置くかは本当に人それぞれです。

そこで今回は料金と口コミに絞っておすすめスクールを消化していきます。

今回紹介するスクールは以下の4つ。

 

結論から料金の比較はこちら！！月額料金で記載しています。

 

おすすめNo1！ FREEKS

おすすめNo1のスクールは『FREEKS』です。

価格の安さも他のスクールと比べると安いですし、スクールでは唯一ではないかと思われるサブスクリプション型のスクールとなっています。

サブスクならスクールのデメリットである『スクール選びで失敗した』の場合でもやめることができるので安心です。

もちろん教育大切もばっちりです。

 

無料で説明会も開催しているので申し込んでみてください。

 

日本デザインスクール

続いておすすめなのが『日本デザインスクール』です。

12カ月のカリキュラムでしっかりとWebスキルを学ぶことができます。

Code ViIlage

続いておすすめなのが『Code Village』です。

日本デザインスクールとの違いは期間が6カ月のカリキュラムであることです。

DeBo（ディーボ）

価格を抑えて、Webスキルを学びたいかには『DeBo』がおすすめです。

ただし、注意してほしいことはディレクションスキルの学習コンテンツのためHTMLやCSSは学ぶことができません。

最後に

今回私が紹介した方法で独学で学ぶことができると思います。

自分の学習方法を振り返ってみて挫折しなかったポイントとしては本を信用してその通りに進めたことだと思います。

ネットで調べてどの情報を信じるか、どの順番で学習するかを迷うより1000、2000円を出して本を購入し、コツコツと勉強した方が効率的です。

もしも、その過程で挫折しそうになったらスクールに通うなりすればよいと思います。

 

もしも、Webスキルを身につければ個人で数十万円の単価の案件をこなせるのですぐに利益が上がると思います。

 

挫折しせずに頑張ってください！！