Web制作

【初心者向け】Web制作を独学する方法【未経験でも仕事が出来る】

この記事では、

「Web制作初心者なんだけど、独学する方法が知りたい、、、」

「最低限仕事を獲得するにはどんなことをやればいいの、、、?」

こんな疑問にお答えしていきます。

本題に入っていく前に、軽く僕の自己紹介。

  • Web制作未経験から独学でエンジニアになった
  • Web制作を勉強するまでは普通の大学生だった

特に、才能があったわけでもなく普通の大学生だった僕が未経験から仕事を出来るようになったので、再現性のある方法です。

大体、3~4ヶ月ほどで学習完了出来ると思うので、量が多いと思うかもしれませんが、ご安心を。

というわけで、この記事では未経験からでも最低限仕事が出来るようになるための学習フローチャートについて解説していきます。

ちなみに、TechAcademy [テックアカデミー]というオンラインのプログラミングスクールでも学習可能です。(※無料体験&学割あり)

WordPressコースを受ければ案件を受けれるレベルにはなります。

「独学では挫折してしまいそう、、、」という方は、TechAcademy [テックアカデミー]を利用するのがおすすめです。

では、記事に入っていきます(/・ω・)/

この記事の内容
  • Web制作で学ぶべきこと
  • Web制作を独学するための学習フローチャート
  • 学習が終わったらポートフォリオを作ろう
  • ポートフォリオ作成後のルート【3つある】

WEb制作で学ぶべきこと


Web制作について学習するにしても、「何をやったらいいの、、、」なんて状況に陥っているかもしれません。

実際に仕事を出来るようになった僕からすると以下が出来れば大丈夫ですね。

Web制作で学ぶべきこと
  • HTML
  • CSS
  • JavaScript(JQuery)
  • PHP
  • Sass
  • SQL
  • Bootstrap
  • Flexbox
  • Emmet
  • SEO
  • WordPress

現時点では、何のことか分からないかもしれませんが、やっていく内に分かるようになります。

スキルレベルなどについては後述していきますが、大体3~4ヶ月ほどあれば全て出来るようになりますね。

「うわっ、、、やること多すぎ、、、」となっているかもしれませんが、実際にやってみると割とすぐ出来るようになります。

これほど短期間で仕事が出来るようになれるのってエンジニア以外には無いと思うので、かなりコスパ良いです。

では、具体的な学習フローチャートについて以下で詳しく解説していきます。

Web制作を独学するための学習フローチャート


学習フローチャートとしては以下の通り。

Web制作の学習フローチャート
  • Progateをやる
  • 開発環境を構築する
  • Emmetの学習をする
  • Bootstrapの学習をする
  • Flexboxの学習をする
  • Sassの学習をする
  • PHPを詳しく学習する
  • Photoshopの使い方を覚える
  • SEOの勉強をする
  • WordPressの学習をする

では、一つずつ具体的に解説していきます。

Progateをやる


Progateとは、オンラインの学習サイトですね。

現時点では14種類のレッスンがあり、色々なプログラミング言語について学ぶことが出来ます。

レッスンをクリアするごとにレベルがアップしていくので、ゲーム感覚でやれますよ。

とりあえず、Progateで以下のコースを2~3周しましょう。

  • HTML & CSS(初級~上級)
  • jQuery(初級~上級)
  • PHP(I~IV)
  • Sass
  • SQL

最初は無料で出来るのですが、途中から有料になってきます。

まずは無料でお試ししてみて、続けられそうだったら課金すれば良いかと。

有料会員を使ってみた感想については以下に書きました。

Progateは以下から無料でお試し出来ます。(アフィリンクじゃないので、ご安心を)

>>Progateを無料でお試してみる

開発環境を構築する

Progateはインターネット上でプログラミングが出来るのですが、実際に開発をするときにはパソコン上で行う必要があります。

それゆえ、開発環境を構築する必要がありますね。

開発環境と聞くと難しく感じてしまう方もいるかもしれませんが、全然大丈夫です。

具体的には、「エディタ」と呼ばれるメモ帳の強化バージョンみたいなものをパソコンにインストールするだけですね。

主要なエディタとしては、「Atom」、「Sublime Text」、「Visual Studio Code」の3つがありますが、個人的には「Sublime Text」をおすすめしたいです。

サクサク動いて使いやすいですね。

インストール方法については以下の記事を参考に。

「Sublime Text」のインストール方法

一応他のエディタのインストール方法も以下に置いておきます。

他のエディタのインストール方法

Emmetの学習をする

Emmetとは、コードを自動生成するツールのことですね。

コードを書く量をかなり短縮できるようになるので、生産性が爆上がりします。

具体的な学習方法としては、下記リンクの動画を見ましょう。

Bootstrapの学習をする

既にProgateが終わっている方だったら、Web制作についての基礎の部分については出来ています。

次は、Web制作を行うにあたってかなり便利な「フレームワーク」について勉強していきましょう。

「フレームワーク」とは、制作の効率を大幅に上げるツールだと思っておけば大丈夫です。

僕が説明するよりも実際に使ってみた方が理解も早いので、早速学習していきましょう。

Web制作で使われる代表的なフレームワークは「Bootstrap」です。

具体的な学習ステップとしては以下の通り。

Bootstrapの学習ルート

では、具体的に解説していきます。

ドットインストールで基礎について学ぶ

ドットインストールとは、オンラインの学習コンテンツですね。

基礎的な部分については、ドットインストールでカバー出来ます。

具体的には、以下の講座を使いましょう。

ドットインストールのおすすめ講座

動画で分かりやすく解説しているので、すんなり理解することが出来ます。

Youtubeで「Bootstrap」のチュートリアルについて学ぶ

次は以下の動画を真似してコーディングしましょう。

英語の教材ではありますが、「Bootstrap」の使い方について学ぶことが出来ます。

英語が苦手な僕でも出来たので、臆せずやって大丈夫です。

Udemyで「Bootstrap 4 From Scratch With 5 Projects 」を学習する


Udemyとは、オンラインの学習サイトです。

動画で学ぶことが出来るので、すんなり理解出来ますね。

具体的には、「Bootstrap 4 From Scratch With 5 Projects」という講座をやりましょう。

5つのサイト制作を通して、「Bootstrap」について理解できる講座です。

Udemyはセール時に安く買うことが出来るのですが、1000円台なら迷わず買っていいですね。

働けば余裕で取り返せますし、僕の周りの結果を出している人で自己投資を渋る人はいません。

個人的にかなり役にたった教材の一つなので、胸を張っておすすめ出来ますね。

以下からページへ飛べます。
>>>Bootstrap 4 From Scratch With 5 Projects を見てみる

Flexboxの学習をする

「Flexbox」とは、レイアウトを整えるときに使う機能ですね。

とはいえ、ここまで学習してきた方だったらそこまで難しくないと感じるかと。

「Bootstrap」と重なる部分があるので、取っ付きやすいと思います。

具体的には以下の本がおすすめです。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

この本をやれば、Flexboxについては理解出来ますね。

HTML/CSSの復習も合わせて行うことが可能です。

実際に僕もやってみましたが、デザインが綺麗で分かりやすいと感じました。

感想については以下の記事でも触れています。

Sassの学習をする

Progateでもやったと思いますが、Sassをもう少し実践レベルで勉強しましょう。

具体的には、以下の本をやるのがおすすめです。

Web制作者のためのSassの教科書

Sassを導入する方法や、実際にどのような書き方をすれば良いのかなど、かなり詳しく書いてある本です。

Sassは一回慣れると、CSSで各意味が分からなくなるほど便利なので、やっておいた方が良いですね。

PHPを詳しく学習する

正直、Progateをやっただけだと、PHPについてほとんど理解できていない状態だと言えます。

また、後述するWordPressでもPHPは使いますし、理解も深まるので詳しく勉強しておいた方が良いです。

具体的には、Udemyの「PHP+MySQL(MariaDB) Webサーバーサイドプログラミング入門」で勉強しましょう、

エンジニアをやられている「たにぐちまこと」さんという方が作られた教材です。

実戦形式で学べますし、PHPってどんなことが出来るのかな?と思っている人にもおすすめ出来る教材ですね。

実際にやってみた感想については、下記の記事に書きました。

また、「たにぐちまこと」さんは本でもPHPの教材を出しているので、書籍派の方はそちらをぜひ。

よくわかるPHPの教科書

Photoshopの使い方を覚える

Web制作の現場では、Photoshopというデザインツールが良く使われていまして、学習はほぼ必須ですね。

コーダーでも簡単なデザインをしたりすることもあるので、きっちり学習しておきましょう。

具体的には、Udemyの「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース」で学習すれば良いです。

Photoshopの使い方を実践的に学ぶことが出来ます。

実際にWebサイトを作るところまで学べますが、Webデザイナーでないなら深いところまでやる必要は無いので、「実践Webデザイン」の部分はやらなくても大丈夫です。

講座のレビューを見たい方は以下の記事を参考に。

SEOの勉強をする

SEOとは、Googleの検索アルゴリズムのことですね。

まあ、Googleで検索をしたときに、上位で表示されるようにさせる技術くらいの認識で大丈夫です笑

具体的には、以下の二つの本を読みましょう。

これからはじめる SEO内部対策の教科書

沈黙のWebマーケティング

一冊目は、どのような内部構造にすればSEOで上位表示されやすいサイトになるかを記した本です。

二冊目の「沈黙のWebマーケティング」は、SEOというより、Webマーケティングの本ですが、SEOを考えるに当たっても役に立つ本なので、読んでおいた方が良いですね。

ただ、「沈黙のWebマーケティング」に関しては、どちらかという抽象的な話になるので、買うかどうかはご自由にという感じです。

WordPressの学習をする

WordPressとは、ブログや企業のサイトで使われるソフトウェアですね。

具体的な学習法としては、2冊ほど本をやれば大丈夫です。

WordPressレッスンブック

created by Rinker
¥3,080
(2020/09/27 13:44:05時点 Amazon調べ-詳細)

初心者におすすめなのは、この本です。

WordPressのオリジナルテーマを作ることが出来ます。

基本的な部分については、かなり抑えられますね。

内容については割と簡単なので、すんなり理解できます。

やってみた感想については以下の記事に詳しく書きました。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書2

こちらの本は中級者向けの本となっています。

WordPressのカスタマイズなどを行えますね。

割と難しいので、「WordPressレッスンブック」をやってからの方が良いです。

やってみた感想については以下の記事に書きました。

学習が終わったらポートフォリオを作ろう


とりあえず、今までの説明で、学習は完了です。

次は、ポートフォリオの作成へ移っていきましょう。

ポートフォリオとは、成果物として自分がどれだけのスキルがあるのかを示すものですね。

具体的な作り方に関しては、下記記事に書いてあるので、そちらをご参考に。

【簡単】ポートフォリオサイトの作り方【デザイン知識は不要です】どうも、「なか」です。 この記事では 「ポートフォリオサイトが作れない、、、」 「デザインの知識がないから、サ...

ポートフォリオ作成後のルート【3つある】


ここまで来るのは、凄く大変だったと思います。

お疲れ様です。

この章で終わりになるので、あと少し頑張れば大丈夫です。

ポートフォリオ作成後のルートとしては、3つほどあって、具体的には以下の通り。

  • Web制作会社で働く
  • ランサーズやクラウドワークスで働く
  • Web制作会社に営業する

では、一つずつ解説していきます。

Web制作会社で働く

一番おすすめの方法はこれです。

何故かというと、独学で勉強しただけだとスキル不足だからですね。

実際働いてみると分かると思いますが、独学と比べた場合2段階くらい高いスキルが求められる感じです。

Wantedlyなどで調べれば、Web制作会社は見つかると思います。

ランサーズやクラウドワークスで働く

単価が安くても良いから、いきなり独立したいという方はこの方法がおすすめです。

まだ登録していない方は、以下のサイトに登録しましょう。

  • CrowdWorks(クラウドワークス)
  • ※国内最大級のクラウドソーシングサイト。駆け出しエンジニアは大体登録している。

  • ランサーズ
  • ※上記と同じく国内最大級のクラウドソーシングサイト。クラウドワークスと合わせて登録しておけば案件も見つかりやすい。

どちらも、無料で登録できます。

Web制作会社に営業する

少しハードル高いですが、この方法もあります。

ただ、この方法の場合、すぐ切られてしまう可能性があるので、そこは注意ですね。

具体的な方法については、以下の記事に書いてあります。

【エンジニア向け】制作会社への営業方法を解説【コミュ力不要】この記事では、 「制作会社へ営業したいんだけど、どうすればいいんだろう、、、」 「コミュ障だけど、大丈夫なのかな、、、」...

ちゃんと手順を踏めば、Web制作は出来るようになる

少々長い記事でしたが、ちゃんと一つずつこなしていけば、Web制作は出来るようになります。

とはいえ、挫折する人も多いのもまた事実。

僕と同時期に勉強を始めた人で、独学でWeb制作を出来るようになったのはかなり少なかったかなと思います。

そのため、挫折しそうならプログラミングスクールに通うのも全然ありかと。

この記事「おすすめのプログラミングスクール3社紹介【現役エンジニアが選ぶ】」でおすすめのプログラミングスクールを紹介しているので、挫折しそうな方はぜひ参考に。

というわけで、この記事はここで終わりとなります。

ありがとうございました。

おすすめのプログラミングスクール3社紹介【現役エンジニアが選ぶ】この記事では、 「おすすめのプログラミングスクールって何があるのかな、、、?」 「現役エンジニアが選んだプログラミングス...
RELATED POST