【2023年/最新版】独学でWeb制作を習得・転職するまでのロードマップ【未経験OK】

書籍も各プログラミング言語別に数冊あるといいかもしれません。
Web制作界隈では有名な、こちらの書籍を紹介しておきます。

HTML/CSSでサイトを作ってみよう

基礎の部分はこの辺で十分かと思いますが、模写を始める前に見ておくべき動画があるので紹介しておきます。

Flexboxを1時間で学ぼう – HTML/CSS入門

FlexBoxはブロックを横に並べるというように理解していればOKでして、頻出なプロパティになるので必ず覚えておいてください。

ここまでできるようになると、徐々に楽しくなってくるフェーズですね。

模写でレベルアップをしよう

最初は、模写をやってみましょう。模写とはすでに存在しているサイトを真似しながら制作していくことです。
おすすめのサイトは下記になります。

CodeStep

CodeStepの入門〜基礎にあるレベル感のサイトが作れれば、HTML/CSSの基礎は理解できたカモって感じです。

ググる癖を身につける

ググる＝Googleで検索するということですね！あまり慣れないかもしれませんが、必ず「ググる癖」を身に付けておきましょう。

基本的にエンジニアや、Web系でお仕事をしている方の多くは、学習したことを常に覚えているわけではありません。むしろ「覚えていない」といったほうが正しく、いざという時はググって答えを見つけるといった感じです。

僕もしょっちゅうですが「リンク　下線　付けない方法」といった検索をして、「text-decoration:none;」という答えにたどり着く。なんてことはしょっちゅうあります。笑

これからプログラミングを学んでいく上で、多くの用語やプログラミング言語、英単語、数字、計算式など学習していくようになります。しかし、これらをすべて学ぼうとすると膨大な量になるので、サラッと学習するようなイメージで、いざと言う時はググって学ぶようにしていきましょう。

模写の次はデザインカンプがおすすめ

模写の次はデザインカンプがおすすめですね。

デザインカンプとは、サイト制作者とのイメージを共有するために必要であり、よく「カンプ」とも呼ばれたりします。「こういったサイトを作ってください」とデザインツールを用いて作られたサイトで、コーディング側はその見た目通りに制作することとなります。

※デザインツール代表例：XD、Illustrator、Photoshop、

デザインカンプが良い理由は下記の通りですね。

制作会社と仕事する時はデザインカンプがほとんど
デザインカンプ通りに再現することでスキルが劇的に上がる
ゼロからサイト制作をするので、実務的な内容にほぼ近い

上記のように、実務ではほぼ必須だからですね。

最短で確実を目指すのであれば、模写を２〜３つほどやって基礎を学んだら、デザインカンプからのコーディングにチャレンジしていきましょう。

しょーごさんのnoteがおすすめ

こちら、なんと無料で学べます。神ですね。

【入門】XDデザインカンプからのコーディング練習【無料です】

こちらでコーディングの一連の流れを学べるのやっておきましょう。

基本的な動きを理解したらOK

基本的に模写やデザインカンプもそうなのですが「完璧を求めない」ことが大切になります。例えば下記の通りです。

横並びにならない、、
マージンを当てたのに効いてくれない
レイアウトが崩れてしまう、、

実は、いま活躍されているコーダーさんも過去に上記のような、落とし穴にハマっていたりするので心配する必要ナシです。

冒頭でもお伝えした通り、完全に理解して先へ進もうとせず、５〜６割の理解度で十分です。また、30分以上かけても分からなかったら一旦飛ばすのもOKです。３歩進んで２歩下がるようなイメージで進んでいくようにしましょう。

実際にサーバーにアップしてみよう！

模写やデザインカンプをしたら、自分が作ったサイトをネットに公開してみましょう。

このサーバーまでアップする一通りの手順を覚えることができれば、実際のクライアントのサイトもネット上に公開することができます。

【超入門】初心者向けレンタルサーバーを借りてみよう！【エックスサーバー】

【初心者向け】コーディングしたWebサイトを公開までしてみよう！【FTP不要・Web制作】

この手順通りに進めば、サイトをネット上に公開することができます。

しかし、動画で紹介されているサーバー、ドメインに関しては両方「エックスサーバー」で取得するのがおすすめです。

エックスサーバーより格安なサーバーもありますが、その分のデメリットも多かったりします。特に厄介なのが、トラブルが起きた時に情報が出てこないことだったりします。なので、定番であるエックスサーバーを選んでおけば良いでしょう。

サーバー解説について、こちらをどうぞ。

実際にアンケートをしてみました

✅サーバーについてアンケート✍️

WEB制作とかブログをしている方にお聞きしたいのですが、どのレンタルサーバーを利用していますか？

また、過去に使って良かったと思うサーバーなどもあれば教えていただけたら嬉しいです🙇‍♂️

— かん @ オフもく会×WEB制作 (@minimal_kan) July 26, 2021

注意！アップロード時に必要な３点を解説

とはいえ、一般的に見れるようにすると、実際にサイトに訪れた方は「本物だ！」と勘違いしちゃいますよね。

ネット公開するときの注意点は下記の３つです。簡単なのでしっかりやっておきましょう。

模写やデザインカンプと分かるように明記すること
noindexをheadタグで読み込ませる
Basic認証をかける

模写やデザインカンプと分かるように明記すること

仮に、訪れたユーザーが本物と間違えないように、必ず「これは模写です」「実在しないサイトです」と明記しておくことが大切です。

メインビジュアルに架空のサイトです、などのワードを入れる
タイトルタグに模写などと明記する
メタディスクリプションにも明記する

大袈裟にやるぐらいがちょうど良いかもです。ユーザーがサイトに訪れた場合、分かりやすい部分に明記しておきましょう。

noindexをheadタグで読み込ませる

こちらはGoogleのロボットにこのサイトをスルーしてくださいね。って伝える役割のようなものです。

ざっくりな解説ですが、スルーされることで検索した際に表示されないようにできたり、サイト自体はネット公開されてるけど、URLを知ってる人のみが訪れるようにできるよって感じです。

やり方は非常に簡単で、ページに直接記載する方法でして、下記のソースコードをHTMLのタグ内に記述するだけです。

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ここにタイトルだよ</title>
    
<!--↓こんな感じに入れるよ↓-->

    <meta name="robots" content="noindex" />
</head>

これで完了です。頻繁に使われることが多いので覚えておきましょう。

Basic認証をかける

最後にBasic認証もかければ完璧です。
サイトにIDとPASSを設定することで、通常のユーザーが訪れないように設定できます。

また、エックスサーバーであれば簡単です。こちらの»【エックスサーバーでBASIC認証をかける方法】を見れば１分ほどで出来ちゃいます。

分かりやすいサイトはこちら

ベーシック認証（Basic認証）とは？設定方法と注意点・エラーになる原因を解説

これで完璧です。お疲れ様でした！

ここまでくれば、実際のサイト制作からネット公開までの一通りをできるようになれました！

そろそろ月５万円も見えてくる頃です！＼(^^)／

ブログも一緒に始めてみよう

プログラミングをやるなら、同時にブログも始めておきましょう。基本的にブログは、WordPressというシステムを利用して開設することがほとんどです。

「WordPress、、なにそれ？」と、思うかもしれませんが、最近だと一般の方でも手軽に扱えるほど便利で簡単なツールになっているので、手軽に始められるのがメリットです。

WordPressというシステムを利用しておくことで、今後必須であるワンランク上のサイト制作では頻繁に使われるため、学習始めのうちから慣れておくことをおすすめしています。

具体的な解説は、後半に出てくるWordPress編で紹介しますので、ここでは割愛させていただきますが、ブログ自体は手軽かつ低コストで始められるので、やっておくべきですね。

ブログのメリット

サーバーやドメインの知識が付く
WordPressでサイト制作できれば高単価案件を獲得できる
ブログ運営をすることでWebマーケティングのノウハウが貯まる
ライティングスキルも身につくためLP案件なども獲得しやすくなる

ざっくりですが、このような感じです。始めたては学習のアウトプットに使うだけでも十分ですね。

一応、デメリットも紹介しておきます

操作に慣れるまでは大変
カスタマイズする場合はPHPなどの知識が必要
サーバーやドメインでの初期費用に数千円〜１万円前後が必要

このような感じです。とはいえ、いずれ必要となるPHPの知識だったり、サーバーのレンタル等はWeb制作をする上で必ずかかってしまうコストなので投資と考えれば安いものです。

実は、たったの30分で始められます

ブログを始める上で多くの方が勘違いしている部分なので、解説しておきます。

基本的にブログを始めるとなると、サーバー開設やドメイン取得や紐付け作業といったちょっと面倒な一連の流れがあるのですが、最近だとクイックスタートという方法があり、これまでの一連の作業を、わずかたったの30分で始めることができちゃうんですね。

詳しくは、先ほどと同様に»【簡単】WordPressブログの始め方を40枚の画像で解説で紹介していますので、まずは思いきって始めてみましょう。
※ここでブログを始める人はわずか１％です。ブログスキルを付けて周りとガンガン差をつけちゃいましょう。

ここまで得たスキル

HTML／CSSの基礎
サーバー・ドメインの基礎

実務レベルのコーダーを目指していこう

ここから少しグッとレベルが上がります。
これまではマークアップ言語といって、基本的にVsCodeに打ち込んだコードがそのまま画面に反映されましたよね。

これから紹介するJavaScriptやjQueryは簡単に言うと、画面上に動きをごにょごにょ付けるといった感じです。ここから、さらにWeb制作が楽しくなってくるフェーズなので頑張って習得しましょう。

JavaScript、jQueryでプログラミングの世界に触れる

基本的な習得方法はやはりProgateか、ドットインストールがおすすめです。

基礎を終えた段階で、下記の教材で実際のサイト制作をしてみるのがおすすめです。

【2022年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）

上記の教材は、Udemyといってオンライン上で学べる動画講座となっています。基本的に有料がほとんどなのですが、毎月数回行われるセールによって、¥24000→¥1600のように90％前後でお得に購入できるようになっています。Web制作を学ぶ上でUdemyはスクールなどに通うより断然お得に学ぶことができるので、購入しておいて損はないですね。

僕自身もUdemyで頻繁に講座を購入しており、詳しくは【WEB制作×デザイナー向け】Udemyおすすめ優良講座まとめ【2021年/星４つ厳選】という記事で紹介しているので参考にしてみてください。

jQueryを優先的に学ぶべき

JavaScriptで基礎を学んだら、jQueryを優先的に学びましょう。jQueryとは「JavaScriptを簡単にしたフレームワーク」でして、JavaScript（通称JS）よりも簡単に習得することができるので、初心者の方にもおすすめなんです。また今後使われるWordPressもjQueryが使用されているので、このタイミングでぜひ学習しておきましょう。

jQueryとは何か?（はじめてのjQuery）

この１０本近くありますが、１〜２周ぐらいすればjQueryの動きが分かるハズです。なるべく動画を見つつ手を動かしていきましょう。

よく使われるパターンはこちら

スライダー
アコーディオン
モーダルウィンドウ
スムーススクロール
ハンバーガーメニュー

上記のような感じですね。

これらをjQueryで実装できるようになれば、念願のWeb制作会社とお仕事ができるといった感じです。もしくはココナラやランサーズ、クラウドワークスで案件が余裕で取れるようになります。

Sassを覚えて効率化を目指そう

ここからはCSSを効率化していくためにSassを学びましょう。Sassとはざっくり言うとCSSが楽に書けるという技法ですね。

SassはJavaScriptなどに比べて比較的かなり簡単に学べる言語なので、ここまでスキルを伸ばせた方なら余裕で習得できるので安心してください。

Sassではじめる CSSプリプロセッサー

またもやたにぐちまことさんです。本当に分かりやすいですよね。

動画でざっくり学んだら、書籍で学ぶのが良いかと思います。もっと網羅的に書かれているので一通り読んでおきましょう。

おすすめは下記の本になります

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

Web制作者のためのSassの教科書改訂2版

posted with ヨメレバ

平澤隆/森田壮インプレス 2017年09月

SassとJQueyを使ったデザインカンプをしてみよう

ここまで来たら、SassとjQueryを使ってサイト制作をしてみましょう。また同様に、下記のサイトが参考になります。

CodeStep

３〜４つ作れることができればレベルとして十分ですね。

ここでは確実につまづくかと思いますが、誰でも最初はうまくいかないものです。また、ハマってしまう場所はほぼみんな一緒です。焦らずにコツコツと進めていきましょう＼(^^)／

ここまで得たスキル

HTML／CSSの基礎
サーバー・ドメインの基礎
Sassを使ったコーディング
JavaScript/jQueryの基礎
デザインカンプからのコーディング

WordPressを覚えて本格的なサイトを作っていこう

ここからは、本格的なサイトを作っていく段階になります。

HTML/CSSで十分に制作会社とお仕事できるレベルなのですが、世の中のサイトはWordPressで作られていることもあり、これでサイト制作ができるとめちゃくちゃ重宝されます。

ここを達成できれば１サイトで20万、30万〜の案件レベルを獲得することができようになります。

難易度もグッと上がるので、ここでつまづいたとしても、落ち込む必要ナシです。コツコツ行きましょう！
それでは早速見ていきましょうー！

PHPの基礎を覚えよう

ここではひとまず、PHPの基礎を習得します。

「え、WordPressじゃないの・・」と疑問に持つ人もいるかと思いますが、WordPressのシステムをカスタマイズするためにはPHPという言語が必要になります。

とはいえ、WordPressで使われるPHPは比較的覚えやすい言語でして、最初こそ難しいかもしれませんが、慣れればとても扱いやすい言語が特徴です。

ちゃんと学ぶ、PHP+MySQL（MariaDB）入門講座

PHPの基礎から概念を徹底的に解説してくれてます。PHPの基礎を学ぶには十分なので、あとはWordPressを触りながら覚えていきましょう。

WordPressの仕組みを知ろう

お疲れ様でした。ようやくWordPressへ入っていきます。多分PHPがどういったものなのかざっくり学べたはずです。

WordPressを学習していく上で、おすすめな教材を紹介します。

【2022年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）

またもや、たにぐちさんの教材です。世界一分かりやすい教材が、1600円で学べるのでおすすめですね。

WordPressの仕組みは地味に複雑でして、ここをしっかり学ばないと、実際のサイト制作でつまずきやすくなりがちです。なので、この教材で WordPressの概念をしっかりと理解し、基礎を学んでおきましょう。

冒頭でもお伝えしましたが、WordPress でブログを始めた方からすると、ある程度理解が進んでいる状態なので、この辺の学習のハードルはグッと下がると思います。

ボリュームのある講座なので、焦らずゆっくりと時間をかけて学んでいきましょう。

おそらく一周だけだと理解が不十分なままなので、この教材をテンポよく2週〜3週かけるぐらいの感覚で進めていくことをおすすめします。

ビジネスサイトを作って学ぶWordPressの教科書

posted with ヨメレバ

プライム・ストラテジー/カイエンソシム 2019年11月

上記の本でサイト制作までの一通りの流れを学ぶことができます。たにぐちさんの教材と同時に学ぶことで理解が爆速で進みます。

僕自身サイト制作するたびに新しい関数を覚えたり新規でプログラムを一から作ることもあるぐらいなので、学習はそこそこにしておいて、基礎的な部分から概念を理解できたらサイト制作をしてレベルアップをしていきましょう。

デザインカンプしたサイトをWordPress化してみよう

お疲れ様でした。ここまで来れば、WordPress化までの具体的な流れが理解できたはずです。

ここでは実際にデザインカンプしたサイトを WordPress化してみましょう
今までの学習でダントツで難易度が高いと思いますが、ここも焦らず丁寧にじっくり時間をかけて学習していきましょう。

WordPress化するサイトは、お好みのサイトで構いません。
とはいっても選ぶのは難しいですよね。なので、下記をおすすめしておきます。

【上級】XDデザインからのコーディング実践演習【WordPress実案件レベル】

本記事でも紹介した、しょーごさんのnoteですね。有料なのですが、レビューがあったり記述したコードのフィードバックをもらえたりと特典が満載です。また解答もいただけるので、安心して取り組むことができますね。

プロの「引き出し」を増やす　HTML+CSSコーディングの強化書

posted with ヨメレバ

エムディエヌコーポレーション 2021年11月29日頃