web制作会社で4年ぐらいフロントエンドエンジニアをしつつ、副業でコーディングだけで毎月1〜3万ぐらいの収益を得ています。
僕自身、web制作に関するスクールや専門学校を出ていません。
学校やスクールをでなくても、独学でweb制作について勉強し、コーディングで収益を得るまでのロードマップを紹介します。
独学でweb制作!コーディングで収入を得る
スクールで学ぶという選択もありますが、web制作は、独学でも学ぶことができます。
ここでは、独学でweb制作についてのスキルを身につけて収益を得れるようになる方法を紹介します。
web制作に必要な物はなに?
web制作で必要なものはPCです。
PCとインタネット環境さえあればすぐに取り掛かることができます。
PCが必要なのは何となく分かるけど、PCでも一般的にwindows、Macの2つの選択肢があります。
どちらも選べば良いのかわからないという方にはMacをおすすめしています。
これは人によって意見が分かれそうですが、個人的にはMac一択です。
なぜMac?というところですが、web制作においてはブラウザのSafariが使えるから!
昔はwindowsでもSafariが使えたんですが、今では使えなくなりました。
そもそもSafariって何よと思う方もいるかも知れないので説明すると、Safariとはブラウザのことです。
ブラウザは有名なものだとGoogle Chrome、Internet Explorer、Firefox、Edgeなどがあります。
これらのブラウザを通してwebサイトを閲覧します。
このブラウザってみんな違うんですよね…Google Chromeが好きで使っている人、何も考えずwindows標準のEdgeを使っている人…
最近では少なくなってきましたが、このブラウザが違うことでwebサイトの見え方が違う場合があります。
ブラウザで見え方が変わらないようにコードを書く必要がありますが、windowsではSafariでどう見えるかのチェックができません。
これがMacを選ぶ1つ目のメリットだと僕は思います。
2つ目は、WebエンジニアがほぼMacを使っているから。
web制作から初めてwebサービスを作りたくなったり、システムを作ったり、スマホアプリを作ったりとステップアップをした際にみんなが使っているMacだと都合がいいです。
不具合が出た際にMacの人が多いので周りに聞きやすい、ネットで調べても同じ状況になっている人を見つけやすく問題解決がしやすいメリットがあります。
なのでこれからPCを選ぶという方、PCをにこだわりのない方はぜひMacの購入を検討してみてください。
Macのどれがいいのかというとメモリを16GB積んでいるものであれば、最近のスペックであれば問題ないです。
初めに学ぶのはHTML、CSS
コーディングで副業、フリーランスをやっていくには、webサイトをデザイン通りに作れる必要があります。
まずは、動きのないサイトでいいので、デザイン通りにサイトを作れるようになりましょう。
基礎を学ぶには、プロゲートやドットインストールがおすすめです。
はじめは基礎でやっていてもあまり面白くありませんが、全体の把握とこんな感じのタグがあるんだなと思ってもらうぐらいで良いと思います。
基礎を学ぶ際は、どうやって作られているのかが重要で、1つ1つのタグを完全に覚える必要はありません。
よくプロゲートを◯周した!とか全部制覇したとかいっている方がいますが、同じことを何周してもそこだけ覚えても仕方ないです。
僕もはじめはドットインストールで学びましたが、やったのは1つの「webサイトを作ってみよう」みたいなのを一周しただけです。
あとはひたすら調べて、実装、調べて実装を繰り返していたらいつの間にかできるようになっていました。
web制作について勉強できるオススメのYouTubeチャンネルを紹介しているので、是非参考にしてみてください。
JavaScriptを学ぶ
サイトに動きをつけれるようになりましょう。
近年HTMLとCSSだけで作られているサイトはありません。
スクロールするとふわっとコンテンツが出てきたり、ボタンを押すと表示されるなどアニメーション要素は必須になります。
こちらを学ぶ際にもまずは、プロゲートやドットインストールがおすすめです。
web制作ではまだまだjQueryが使われることも多いので、合わせて学習してみてください。
3.WordPressを学ぶ
web制作ではWordPressが使用されていることが非常に多いです。
webサービスを作る場合には、使用されない場合が多いですがコーポレートサイトやLPの案件を取るにはもはや必須と言っても良いかもしれません。
ここでは0から自作のWordPressテーマを作れることを目標にします。
おすすめの書籍はこちら「WordPressオリジナルテーマ制作入門」。
オリジナルのWordPressテーマの作り方を学ぶことができます。
4.CSS設計を学ぶ
上記まででなんとかなりますが、ここからはプラス要素として補足しています。
「CSS設計」という言葉を知っていますか?
webサイトは作って終わりではありません。
作ってから運営して育てていく。作るのはスタート地点で、そこから日々更新やメンテナンスが行われます。
その際に、とりあえず見た目だけできてるサイトで中のコードはぐちゃぐちゃのサイトだと更新がしずらかったり、CSSを新たに書いても何故か反映されないという問題が起きてきます。
その破綻したCSSを作らないためにCSS設計の勉強が必要になります。
・Web制作者のためのCSS設計の教科書
CSSは書けるけど、CSS設計ってなんぞやって方は一回読んでほしい。
「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」を意識して書く必要があります。
いろいろな方法がありますが、まずはこちらを読んでみるのがおすすめです。
5.Sassを学ぶ
最近生のCSSだけで書いてあるサイトをあまり見かけなくなりました。
現在制作会社で4年ほど働いている中でもみんな使用しているのはSass。
いまのweb制作の現場ではもう必須と言っても良いかもしれません。
・Web制作者のためのSassの教科書
この本では、Sassとは何なのかどうやって使えば良いのか、詳しく説明されています。
生のCSSで書くよりもより便利にCSSを書けるので、ぜひ制作に取り入れてみてください。
6.ポートフォリオ作り
WordPressでポートフォリオを作成します。
WordPressじゃなくてはダメということはないですが、
・上記で上げたオリジナルテーマを作ること
・今後自分がやった案件で公開していいものは、ポートフォリオの実績に加えやすいこと(管理が簡単)
・ブログ機能をつけて自分の学んだスキルなどを発信できる(発信するとSEOも学べたり、どんな事ができる人なのかわかってもらいやすい)
の3点がかなえられると思うからです。
このポートフォリオを作る際に、デザインを全くやったことがない人・やらないと決めている人はどうするかということですが、
・自分でポートドリオぐらいは挑戦してデザインしてみる
・ココナラなどデザインだけ制作を依頼する
とよいでしょう。
僕の場合、初めは自分でデザインして全部自分で実装しました。
(デザイン経験はなし)
案件を取る
一番簡単なのは、知り合いから仕事をもらうことです。
最初はかなり安い金額になることが予想できますが、金額より実績を取るべきです。
友達から仕事をもらう際は金額は安くする代わりに実績公開の許可をもらうようにするのがオススメ。
ただ、無償でwebサイトを作るというのやめたほうが良いです。
お金が発生しないと責任も発生せず、お互いなぁなぁになって結局完成しなかったりする可能性が高くなります。
そんな友達はいない!という方は、ランサーズやクラウドワークス、ココナラなどを通して案件を獲得するのが一番簡単かと思います。
ただ実績がないとなかなか案件を取れないので、ポートフォリオのクオリティが重要になってきます。
基本的にはやりたい案件に応募する形になるので、各サービスに合わせて記事を作成しようと思います。