今更ですが独学で０から始めフリーランスコーダーとして稼げるようになるまでのプロセスを紹介したいと思います。
俗にいうロードマップというやつですね。
もちろん万人に合うとは限りませんの素直にスクールなどに通うのが一番良いとは思いますが、
「そんな時間も、金もないぜ！」という方に向けて参考の一つとしてご覧いただければと思います。
僕自身、文系大学を卒業してから30歳過ぎるまでプログラミングの経験もなくパソコンは業務でポップやシフトを作成するくらいの技術くらいしかありませんでしたがこの話が誰かの参考になれば幸いです。
また今回は独学というテーマですのでプログラミングスクールやメンターなどについては言及しないのでご了承ください。
1.HTMLとCSS のインプット
書籍から入るかWebサービスから入るか迷う方も多いと思います。
書籍は電車や休憩中などのスキマ時間に自分のペースで学習できると言う点がメリット。
一方Webサービスの方は解説があるので理解しやすくイメージも掴みやすいと言う点がメリットですが、
ある程度まとまった時間がある時に腰を据えて必要があります。
(Progateはスマホでもできましたがいかんせん使い辛かった記憶が…)
もちろん一番良いのは両方を組み合わせてやることだと思います。
ここからは自分が使ってきた書籍やコンテンツを紹介していきます。
書籍
今はもう鉄板オブ鉄板になったこちらの一冊
こちらを読みながらHTMLやCSSでできることをインプットしていきます。
PCが触れる環境であれば実際に手を動かし、見よう見まねでコードを書きましょう。
「テキストが表示された！」とか「色が変わった！」のレベルで大丈夫ですので自分でできたと言う成功体験とできることのイメージ化が大事です。
Webサービス
Progate
プログラミング学習をする人であれば必ず出会うサイト。
こちらの良い点はテキストエディタでコードを書くとリアルタイムに反映されるところです。
まさに「プログラミングしてんなぁ」という気持ちになります。
まずこちらの有料会員になってHTML &CSS初級、中級コースをしっかり身につけるのが良いと思います。
また人によっては「何周もするのは無駄だ！無駄無駄！」と言う人がいますが個人的には無駄では無いと思います。
「わからなくなったら検索」→「わからなくなったら検索」といったことをするならここの段階では反射でできるくらい染み込ませる方が後の時短につながります。
もちろん完璧は無理だしこれからも検索だらけになりますがここの段階では算数でいう公式を覚える段階だと思って学習します。
また「道場コース」というものもありますがまだこの段階ではかなり難易度が高いと思われるのでスルーでも大丈夫です。
もちろんできる人はどうぞ！
dotinstall
こちらはProgateと双璧をなすと言っても過言では無いdotinstallですが、
Progateと比べると難易度が一つ二つ上がる印象があります。
ですのである程度Progateで理解力をあげてから始めるのが良いです。
手応えがある分、学習を終える頃には相当な自信がつくことだと思います。
また一つのレッスンが約3分ということで電車などの移動や待ち時間などで復習ができるという点が素晴らしいです。
余談ですが解説の男性の声が優しくて眠くなるという事もあるのでお気をつけください。
私クラスになるともうASMRとして聴ける域に到達しました。
2.模写サイトでコーディングスキルをアウトプット
書籍と動画で身につけたスキルをもって「いざサイトをつくろう！」と息巻いてる段階だと思いますが、
「ではどうぞ」と言われても何からやって良いかわからないと思います。
そこで次のステップでは模写コーディングというものをやります。
ここで自信をつけたらもう次は実案件という段階ですので僕は「模写 コーディング」などで検索してでてきたものを片っ端からやってました。
正直ここの段階はめちゃくちゃやりました。
noteとかで有料のやつも買ったりしてやりました。
最近では模写コーディングというものがだいぶ認知されてきた様で、多くのサイトで模写コーディング用のデザインデータが無料で配布されております。
Codejump(旧Codestep)
未経験からWebデザイナーへ(ねこポンさんのサイト)
こちらの２つのサイト様はなんと無料でデザインデータを配布してくれております！
世知辛い世の中になってきましたがいい人もいるものですね！
ありがたやありがたやと心の中で呟きながらコーディングさせていただきましょう
いきなり模写コーディングが難しければ先ほど紹介した「Progateの模写コース」やdotinstallの模写レッスンをやるのも良いかと思います。
こちら解説があるので幾分取り組みやすいです。
3.WordPressの学習
ある程度コーディングや簡単なサイトが作成できる様になれば次はそのサイトをWordPress化してみることに挑戦します。
なぜかというとHTMLとCSSのコーディングのみというお仕事のご依頼は２割くらいしか来ず、
「WordPressで対応できますか？」というご依頼がほとんどだからです。
ですのでこのあたりで合わせてWordPress化の学習も始めようということです。
ブログ
こちらの方のブログにWordPress化の手順が詳しく書かれてます！(華麗な宣伝)
冗談はともかく基本的なWordPress化の手順はちゃんとできる様になってますので一度流れに沿ってやってみることをオススメします。
動画
アキユキさんのYoutube動画
WordPress化といえばこの方で、自分の師匠だと思っております。(勝手に思ってる)
こちらの動画が無料なのは本当にありがたく助かりました。
一連の講座を通して学べば大方WordPressに関しての理解力は上がりハードルはグッと下がると思います。
またWordPressのみならず仮想案件やWebデザインに関する動画などこれから役に立ちそうな動画も多く上げておりますので他の動画も参考にされると良いかなと思います。
書籍
自分自身、図書館や書店、kindleなどでWordPressに関する書籍かなり読み漁りましたが、
一番実務で役に立ちそうだと思った一冊がこちら。
ボリュームはありますが実践形式でプラグインの使い方も学べるのでオススメさせていただきます。
以上をやればHTMLサイトをWordPressにできるスキルまで身につき、あとはもう実践あるのみという段階になっていると思います。
4.コーディングスキルを上げる
ここからはさらにもう1ランク２ランクコーディングスキルを上げたいという方向けのお話しになります。
プロの「引き出し」を増やすHTML+CSSコーディングの教科書
タイトル通りですがコーディングの引き出しが増えます。
こちらは難易度が高い箇所もありますが、
実務でよくあるパターンを学習できるので一読しておくと「あ！これあの本で見たやつだ！(進研ゼミ風)」と言った感じになりお仕事を受ける際に余裕がでます。
Web制作者のためのCSS設計の教科書
CSSでは「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」ということが重視されます(急に吹くコーダー風)。
この書籍では以上４つを満たすためのクラス名の付け方やプロパティの付け方が学べます。
どちらかというと手を動かすよりは座学といった感じで眠気が増す事もありますが身につけておくとコーディングの時短などに繋がるのでオススメです。
5.サイトに動きをつける
お次はJavaScriptという言語を使いサイトに動きを出します。
スライドショーやふわっとでてくるやつとか、昨今のWebサイトでは必ず出てくるアレです。
JavaScriptは「the プログラミング」という感じではあり最初はとっつきにくいかもしれませんが、
Webサイトで使う分ならJavaScriptを簡略化したjQueryというものを学習すればOKです。
もちろんJavaScriptを学習しても問題ありません。
できることはあまり変わらないので。
jQueryの学習法としてはHTMLやCSSと同じ様にProgateやdotinstallで勉強を始めるのが一番だと思います。
このjQueryは基本的な使い方さえなんとなくわかればgoogle先生やchatGPTなどで動きのキーワードを入力すればすぐ出てきますので繰り返し勉強しなくとも大丈夫です。
あとはそのコードを自分のサイトに合わせて変更すればすぐ使えます。
この時にどこを変更したら良いかわからない場合は勉強不足ですのでその時は復習をしましょう。
最後に書籍を紹介させていただきたいですがこちらの書籍はブームを作ったと勝手に思っており、
自分のつけたい動きを辞書の様に引くだけで実装できるので手元にぜひ置いておきたいです
6.このあとは…
今回の記事は学習法ですので実際の案件の取りかたや営業まではお話しません。
他の人も言っている事ですが
ココナラやクラウドワークスなどのクラウドソーシングサイトに登録したり、制作会社に営業をかけたりして0→１を達成することだけだからです。
ですがこれが本当に難しい。
運の要素が強いと思います。
ちなみに私は営業電話やメールは一切送ったことはありません。
たまたまココナラでお仕事のお話を頂けたのがスタートでした。
ここで１件お仕事が頂ければコーダーとしての歯車は動き出すと思います。
なんとか一件取れる様に頑張りましょう！
7.さいごに
独学で始めても、文系がダメとか、理系ならプログラミングができるとかは関係ないです。
第一歩を歩むことで大きな変化を生むことができます。
この話が、同じ道を志している方の助けになれば幸いですしこのブログの存在価値となります。
ここまでご覧いただきありがとうございました！
コメント