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