- これから学習を開始する人
- 初期費用をなるべくかけたくない人
- 最低限のスキルを学びたい人
こんにちは、兼業Webエンジニアのまさひろです。世の中には多くのロードマップがありますよね。
今回お伝えするのはぼくが実際に初案件を獲得するまでに勉強したことをもっとそぎ落とし、短時間かつ低価格で学習するためのロードマップです。
最初に一番大切なことをお伝えすると、このロードマップは案件を獲得するうえで必要最小限のスキルを身につけることに重点を置いています。
じゃあ、なんの役に立つンゴ？
ぼく自身、正しい知識や制作方法を学ぶならスクールやコミュニティに入るのが良いと思っています。そのほうが早く効率的に学べますからね。
ただ、どうしても金銭的な問題でスクールの費用が出せない人やいきなり課金するのに抵抗がある人もいるはず。
なのでまずはこのロードマップの手順で学習し、案件を受注しお財布に余裕が出てから本格的に勉強するかどうかを決めてほしいと思います！
そして、ぼくは最初ここに書いた内容のスキルで受注しましたが、お客様に喜んでいただくことができました。
安心して進めてもらえればと思います。
- 稼ぐために必要最低限の学習をする
- 稼いだお金でスキルアップ
学習準備
学習する内容を確認
まずは全体像とゴールの確認です。最終的にはこんな感じのサイトが作れるレベルを目指します。
これはWordPressでSnowMonkeyというテーマを使い作成しました。大体3時間くらいで作っています。
このくらいのものが作れると5万円の案件が取れるレベルなので2つ受注したら10万円稼げますね。
では作るためにどんな学習をするのかというと以下の通りです。
- HTML/CSS/jQueryを解説を見ながら書く（約50時間）
- HTML/CSS/jQueryを使ってデザインカンプを元に制作（約50時間）
- WordPressのテーマを使ったサイト作り（約100時間）
時間はおおよその目安ですが、なるべくこの通りにやることがおすすめです。
学習あるあるなのですが、不安から同じ場所を何度も繰り返して復習する方が多いようです。
時間を決めてどんどん先に進みましょう。どのみち案件ではググりながら進めますので、暗記する必要はありません。
学習サービスの登録
最初に学習に必要なサービスを登録します。月額1,000ほどかかりますが、書籍で学習するより圧倒的にコスパが良いので迷わず有料会員になりましょう。
プログラミング学習サービスの代表格ですね。ここで学ぶのはHTML/CSS/jQueryです。
非常にたくさんの講座があり「もっと勉強したい！」という気持ちになりますが、そこはぐっと抑えて必要なものだけを学んでいきましょう。
最低限の知識を得て、案件を獲得できるようになったらまた戻ってきたらOKです。
学習の計画をたてる
これがかなり重要です。いつまでに何を終わらせる必要があるのか、これを意識しているかどうかで日々の学習効率が大きく変わります。
まずは1日の中で使える時間を考えましょう。
例えば、
| 平日 | 休日 |
|---|---|
| 朝起きて仕事に行くまで：2時間 | 午前中：3時間 |
| 仕事の休憩中：30分 | 午後：5時間 |
| 仕事終わり：2時間 | |
| 合計：4時間30分 | 合計8時間 |
このように自分がどれくらい学習時間が確保できるのかを計算しましょう。そして、この計画は多少きつめに設定してください。
もちろんご家族と過ごす時間など大切な時間は確保していただきたいのですが、ずるずると続けてしまうと結果的に大事な時間が削られてしまうことになります。
1日に使える時間が決まったらなにをいつまでに終わらせるのかを決めます。
いったんこの記事全体を読んでやることリストを作ると可視化されて分かりやすいと思います！
やめることを決める
時間が足りないと思っている人は以下のようなことをしていませんか？
- Twitterを見続けてしまう
- なんとなくYouTubeを見続けている
- 暇つぶし系のアプリを開いている
はい、全部過去のぼくです！笑
このときは勉強しなきゃと思いながらもついつい他のことをしていました。
なので、いらないアプリやエンタメ系のYouTubeのお気に入り登録など全部削除しました。
数年間育てたパワプロアプリもさよならしました…
矢部くん、君のことは忘れないよ…
おかげでやる気スイッチが入ったのと無駄な時間がなくなったので学習のエンジンがかかったかと思います。
使える時間は有限です。一日の無駄な時間を洗い出してみましょう。
STEP1：Web制作の基礎を学ぶ
ここからは具体的に学習の手順を紹介します。そして、最初に理解してほしいのがこのステップのゴールです。
やみくもに進めても常に不安が残るので、なにが出来たらOKなのかを理解した状態で進めていきましょう。
解説を見ながらサイトを１つ作る
HTML/CSSを学ぶ(Progate)
最初に始めるのはProgateです。学習の構成が「スライドで学ぶ→実際に手を動かす」となっており初心者にわかりやすく進めやすいのが特徴です。
ここで勉強するのは「HTML＆CSS」の道場以外です。
道場コースはそれまでに学習したことが身についているのかを試す「実力試験」のようなものです。
実力試験なら受けたほうが良いんじゃないンゴ？？
確かに学んだことが身についてるのか試すのは大事です。ただ、Web制作ではほとんどの場合わからないことはググって解決します。つまり、暗記する必要がないんですね。
道場コースは覚えたコード以外を書くと不正解となり、同じコードが再現できるかどうかが求められます。なので、ここでつまづくよりもさっさと進めたほうが効率的です。
その代わり少なくても2周やりましょう。
- 1周目：とにかく手を動かす（暗記しない！全体像を理解する）
- 2周目：理解を深める（コードの用途を理解する）
HTMLは文章に意味をもたせるのね、CSSは装飾のために使うのね！というところが理解できていればOKです。
HTML/CSSを学ぶ(ドットインストール)
Progateで基本を理解したらドットインストールの「ウェブサイトを作れるようになろう」をやりましょう。ここでもHTML/CSSを中心に学びます。
あれ？さっきもHTML/CSSはやったンゴ？
そうです、やることは同じなのですがドットインストールは「テキストエディタ」を使って自分のPC上で作っていきます。
講座の「HTML/CSSの学習環境を整えよう」で「Visual Studio Code」をインストールします。
このテキストエディタはWeb制作をするうえで相棒といえる存在です。また、様々な拡張機能もあるのですが、今回は「なるべく短期間」を目指すので一旦スルーします。
ここでも動画を見ながら手を動かしていきましょう。一つの動画が約3分と短めなのですが、最初は全く手が追いつきません。
何度も繰り返し見ながら作る感覚を身に着けていきましょう。
何度も繰り返し動画を見ながら手を動かす
この講座の最後に「ウェブサイトを公開しよう」というものがありますが、これはスルーでOKです。
実際の案件ではエックスサーバーのようなレンタルサーバーにアップロードすることが多いので、学習ロードマップの後半に解説します。
デベロッパーツールを学ぶ
デベロッパーツールとはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や適応されているCSS、表示画面の変更などを確認することができます。
実務では必ず使用するツールなので使い方を覚えましょう。
おすすめは「しまぶーのIT大学」で解説されているこちらの動画です。
CSSの変更やスマホ、タブレットの画面変更の方法などが理解できたらOKです。
- 動画を1回見る
- ドットインストールで作ったサイトでデベロッパーツールを開く
- CSSをアレンジしてみる
実際に使ってみることが大事なので、文字サイズを変えたり色を変えたりしてアウトプットしていきましょう。
HTML/CSSを学ぶ(youtube)
この時点で簡単なサイトなら作れるようになっているはずです。確実にレベルアップしているので自信をもって進めていきましょう。
このタイミングで見てほしい動画が「Webの神様」の動画です。
この動画では初心者が失敗しやすいポイントやCSSの大事なポイント「flex-box」などを中心に視聴していきましょう。
模写についても解説してくれていますが、現段階では一旦スルーでOKです。
すでに身についている知識もあるので1.5倍から2倍速で再生し、覚えていないところの解説が出てきたらじっくりと見るという使い方がおすすめです。
倍速で見ながら復習＆足りない知識をインプット
これでHTML/CSSの学習は完了です！
この本で作れるサイトはデザイン的にもおしゃれで作る楽しさが高まります。
デザインの観点からの解説もあるので書籍で勉強するのが好きな方はこちらがおすすめです。
jQueryを学ぶ(Progate)
jQueryとはサイトに動きをつけるためのものです。
スマホでよく見かける三本ラインのメニュー（ハンバーガーメニュー）もjQueryを使用して作られています。
ただ、ここはしっかり学ぼうとすると時間がかかってしまうので文法や構造を理解する程度で構いません。サクサク進めましょう。
今回もProgateにお世話になります。学習するのは「jQuery学習コース」の「初級編」「中級編」です。道場と上級編はスルーでOK。
jQueryの全体像を理解する
jQueryを学ぶ(youtube)
今回もWebの神様の動画で学びましょう。
ここでは自分のPC上でjQueryを実装する方法を中心に学んでいきます。
- HTMLファイルにjQueryを読み込ませる方法
- ハンバーガーメニューの実装方法
この2つが分かればOKです。
ぼくはここでつまずきました…繰り返しやって身に着けましょう！
手を動かしならなんとか実装する
初心者向けに作られており、講義と演習の構成で学習しやすい作りになっています。
STEP２：模写コーディング
ここからが本当の闘いです。というのも、何人もの初学者がここで壁にぶちあたりあえなく脱落していきました。
それが「模写の壁」！！
模写とはデザインを元にコードを書いて同じように再現することです。これができれば簡単なサイト制作やコーディングの案件が受注できるレベルです。
しかしながら、最初は何から手を付けていいのか分からない状態です。手が止まり学習のモチベーションも下がってしまいます。
そこで今回も挫折しないためのゴールを決めます。
ググって解決する力を身に着ける
模写を完成させるじゃないンゴ？
もちろん、技術力を高めるために完成させるのは大事です。ですが、完璧を求めて途中で投げ出しては意味がありません。
今までは動画を見ながら同じように作っていましたが、今回は自分で考え調べながら作るという段階。
なので、ググって解決する練習だと思って取り組んでみましょう。
ちなみにぼくはググって出てきた記事の中で一番わかりやすかったものをスプレッドシートに記録していきました。
| HTML | テーブルの使い方 | https://○○ |
| CSS | flex-boxの使い方 | https://□□ |
そのうちよく使うものが分かってくるので最初は分からないものは全部記録して、よく使うものは色を変えるなど自分が探しやすいように工夫してみましょう。
模写の方法を理解する
いきなり始めても良いのですが、どのように模写を進めればよいのか全体像を理解しておくと学習しやすいです。
今回も「Webの神様」の動画でインプットします。
どのように進めていけばよいのか理解できたらOKです。
ちなみに再生リストに「実践編」と「iSara」の模写動画もあるのですが、こちらは一旦スルーします。
理由は、今回のゴールが「ググる力を身に着ける」なのでなるべく考えながらコードを書いていくためです。
模写のイメージがついたら早速実践していきましょう！
模写を始めよう
模写をするサイトを決めたいところですが、ネット上に公開されているサイトを選んで模写するのはまだ少し難しいかと思います。
そこで、こちらのサイトを利用します。
なんと無料でコーディングの素材を配布してくれています。
また、adobeのXDの導入方法やGoogleフォントの使い方の記事もあるので実務に近い練習ができます。
PENGINE BLOGさんの記事内にも書いていますが、最初は答えを見ながらでもOKです。
2周目以降は自力でググりながら学習することで「ググり力」が身に付きます。
今まで学んできた内容で作成できる内容なので自信がある人はいきなり模写してOK。とにかくググりつつ手を動かしましょう。
- 1周目答えを見ながらコード書く
- 2周目ググりながらコード書く
これができたら実務がこなせるレベルです！頑張りましょう！
STEP３：WordPressを学ぶ
ついにここまでやってきましたね。これがクリアできればある程度の案件を受注可能なので最後まで頑張っていきましょう！
WordPressはとても奥が深いです。一から作ることもできますが、多くの学習時間が必要です。
今回の目的は「短期間で稼ぐスキルを身につける」なので一から作ることはせず、WordPressのテーマを使ったサイト制作を学びます。
テーマを使ってポートフォリオを作る
ポートフォリオとは営業する際に必要になる「自分のスキルや実績を証明する」ものだと考えてください。
WordPressでデモサイトを作り、制作実績として掲載し営業するための準備をしましょう。
ローカル環境の構築
まずはWordPressを扱うための準備をしましょう。自分のPC上にWordPressをインストールするための無料のソフトウェアを使用します。
ここで紹介されているLocal by FlywheelはWordPressの案件ではよく使うので必須スキルですね！まずはインストールができればOKです。
実際の案件やポートフォリオはレンタルサーバーを使用しますが、学習段階ではまだ契約する必要はありません。ポートフォリオが完成したら契約しましょう。
テーマを使ったサイト制作
WordPressにはテーマというものがあり、無料のものから有料のものまで幅広くあります。
テーマによってカスタマイズのしやすさや機能が様々なのではじめは使いやすいものを選ぶ必要があります。
そこでおすすめするのが「Snow Monkey」のテーマです。
こちらは有料のテーマで年間16,500円の費用がかかりますが、一度購入するとクライアントのサイトがいくつでも制作可能です。
テーマによっては数万円の費用を払っても一つのサイトしか利用できない等の制限があります。
その点、Snow Monkeyは年間のサブスク契約で無数のサイトが利用できこと、初心者でも扱いやすいテーマであることが魅力です。
でもいきなり課金するのは怖いンゴ
そんな方は試用版の利用をおすすめします。
試用版ではコピーライトが変更できない以外は全て同じ機能が利用できます。
申し込みから数日後に制作者の方からファイルを送ってもらえるので案件獲得するまでは試用版を利用するのもありです。
ぼくも初案件を獲得するまでは試用版を使ってました！
Snow Monkeyを使ってみよう
それでは実際にSnow Monkeyを使ったサイトを使っていきましょう。
まずは「ともすた」さんのyoutubeでインプットしましょう。
ここではWordPressの基礎的な扱い方と、SnowMonkeyの基本を学びましょう。
※AWSを使って環境構築していますが、事前に作っている環境で進めてOKです！
そしてこちらの記事もかなり参考になります！
一通り作るときっとこんな状態になってます。
めっちゃ簡単にサイト作れるやんけ！！
そうなんです、WordPressのテーマを利用することで簡単におしゃれなサイトが作成できます。
ですが、今までやってきたWeb制作の基礎知識や模写での経験があるからこそ簡単に感じます。
また、実務では細かな調整も必要になるのでコードを書いてきた知識が必ず役に立ちます。
ポートフォリオを作成する
あと一息で基礎学習が終了です！最後は自分のポートフォリオを作成しましょう。
ポートフォリオの考え方で参考になるのはこちらの記事です。
ここで理解してほしいのはポートフォリオを作るさいの考え方です。ポートフォリオは相手にどのような印象を持ってもらいたいのかで作り方が変わります。
また、単にスキルを並べただけの自己紹介のようなものもNGです。
Pinterestで「ポートフォリオ Webデザイン」で検索するとたくさん出てきます！
最初はポートフォリオに載せる実績がないので、練習でデモサイトを作成し掲載しましょう。
ポートフォリオを公開する
最後にポートフォリオをネット上で見れるようにしましょう。
自分のサイトをネット上で見れるようにするにはサーバーが必要です。ぼくはエックスサーバーを利用しています。
利用者数が多く、困ったときのサポートが充実していることが魅力です。
サーバーの契約方法はこちらで詳しく解説しています。
サーバーを契約すると無料でドメインが一つ作れるので自分のサイトを公開するドメイン名を決めましょう。
ドメインとはこのサイトでいうabenoblog.netのことです！
サーバー内でWordPressのインストールが出来たら、ローカル環境で作ってきたサイトを移行します。
案件でも納品するときに使用することが多いプラグインなので覚えておきましょう！
最後に
お疲れ様でした！これでWeb制作で稼ぐための最低限のスキルは身についたかと思います。
僕はこのレベルで営業をはじめ、1か月で10万円以上受注が出来ました。
案件を受注してもスキルが足りないことを痛感する毎日ですが、そのたびにググったり人に頼ったりして解決してきました。
初案件が一番大変です。すべてが初めてのことなので不安だらけですからね。
でも、せっかく身に着けたスキルも使わなければ1円にもなりません。
ぜひ勇気を出して営業してみましょう！！
このロードマップの目的は「稼いだお金でスキルアップ」でした。
Web制作が楽しい、もっと勉強したいと思ったら教材を購入したりスクールに通うなどしてスキルをつけていくと良いかと思います！
稼いだお金でスキルアップする
ここからはコミュニティやスクール、おすすめ教材の紹介です！
デイトラ
個人的に一番おすすめです。
このロードマップでは触れなかったWordPressのテーマを作るところが学べるので、出来ることが一気に広がります。
Twitter上でもつぶやかれている人が多く、横のつながりが増えるのも魅力ですね。
Web制作コースを見るchot.design
Progateのデザインバージョンといった感じ。
月々1,000円の有料会員になればAdobeツールやFigmaなどのデザインツールやノーコードで制作できるSTUDIO、制作のテクニックなど幅広く学べます。
正直コスパ良すぎです。
chot.designを見るUdemy
Web制作に限らず多くの講座を購入できます。
通常20,000円くらいの金額設定ですが、ほぼ毎月あるセール時では90%オフで買えます笑
一気に買いすぎると積んじゃうので必要なものだけ購入しましょう。
たにぐちまことさんの講座です！VScodeの詳しい使い方が学べます。
WordPress開発マスター講座
こちらもたにぐちまことさん。WordPressの開発といえばこれです。
未経験からwebディレクターになる！プロが教える超短期型育成コース
クライアントとの打ち合わせに必要な案件定義や競合分析などが学べます。
スキルハックス
迫さんが運営されるプログラミンスクールです。これをおすすめする理由は転職サポートがついているコースがあるから。
エンジニアとして転職するレベルのスキルがあれば正直どこでも働けますね。
今回はぼくが初案件を獲得するまでに勉強した内容を今風にアレンジしてお伝えします！