web制作で稼ぐ！っていうのがめちゃくちゃ流行ってますね。
SNSでスクールや学校にいく人が多いですが、正直web制作であれば独学で勉強して稼ぐことが可能です。
まわりにやっている人がいないとできない、全部教えてほしいという人はスクールや学校に行く価値はあると思いますが…その後が続く人が少ないかも。。。
すぐスクールではなく、どんな感じなのかある程度独学してみてスクールに行くかどうかを判断しても遅くないと思います。
今回は、やる気はある！一人で独学で勉強して、web制作で稼ぎたいけど、何から勉強すれば良いのかわからないという方向けの記事です。
web制作で独学で稼ぐまでのロードマップ
web制作は、独学でも学ぶことができます。
勉強して、web制作の副業やフリーランスを目指しましょう！
web制作に必要な物はPC
web制作をするのに必ず必要なもの。
それはPCです。
正直PCとインタネット環境さえあれば、それだけで学べ、稼ぐことができます。
PCが必要なのは何となく分かるけど、windows？Mac?どっちがいいのよって話ですよね。
これは人によって意見が分かれそうですが、個人的にはMac一択です。
なんでwindowsじゃなくMac？というところですが、web制作においてはSafariが使えるから！
昔はwindowsでもSafariが使えたんですが、今では使えなくなりました。
そもそもSafariって何よと思う方もいるかも知れないので説明すると、Safariとはブラウザのことです。
ブラウザは有名なものだとGoogle Chrome、Internet Explorer、Firefox、Edgeなどがあります。
これらのブラウザを通してwebサイトを閲覧します。
このブラウザってみんな違うんですよね…Google Chromeが好きで使っている人、何も考えずwindows標準のEdgeを使っている人…
最近では少なくなってきましたが、このブラウザが違うことでwebサイトの見え方が違う場合があります。
ブラウザで見え方が変わらないようにコードを書く必要がありますが、windowsではSafariでどう見えるかのチェックができません。
これがMacを選ぶ1つ目のメリットだと僕は思います。
２つ目は、WebエンジニアがほぼMacを使っているから。
web制作から初めてwebサービスを作りたくなったり、システムを作ったり、スマホアプリを作ったりとステップアップをした際にみんなが使っているMacだと都合がいいです。
不具合が出た際にMacの人が多いので周りに聞きやすい、ネットで調べても同じ状況になっている人を見つけやすく問題解決がしやすいメリットがあります。
なのでこれからPCを選ぶという方、PCをにこだわりのない方はぜひMacの購入を検討してみてください。
Macのどれがいいのかというとメモリを16GB積んでいるものであれば、最近のスペックであれば問題ありません。
「8GBでも十分では？」意見もありますが、近年のデザイン系のアプリが非常にメモリを食うので大いに越したことはありません。
PCを選べたらサブモニターも用意することで、学習効率・作業効率が爆上げします！
サブモニターとは、メインで使うモニターにプラスしてもう1台モニターを置いて作業できる画面を広げることができます。
広げることによって使える範囲が広がり、なにか資料を見ながら作業をしたり、片方のモニターで動画を見ながら片方でコードを書くなどができるようになります。
目標を決める
web制作といっても、WEBデザインだったり、デザインされたものをコードにする作業だったりが存在します。
ちなみにどちらもスクールに通う必要はなく、独学でも学ぶことができます。
デザインが得意だけど、コーディングはちょっと…だったり、デザインはできないけどコーディングだけなら！という方、もしくはどっちもバリバリできる！という方でも副業やフリーランスで稼ぐことができるかと思います。
どちらもまったくわからないという方はまずは触ってみてください。
どちらが向いている、どちらもやるという部分は、やってみないことにはわかりません。
プログラマーになるぞ！！と言っていても、向いてなかったわ・・・と諦める方も多く見かけるので自分が楽しいものを見つけるのは非常に重要です。
WEBデザイン（webデザイナー）で稼ぐ
1.デザインの基礎を学ぶ
基礎は理屈を知って手を動かして勉強していきましょう。
まずは、「ノンデザイナーズ・デザインブック」や「デザイン入門教室」の書籍がおすすめです。
デザインを学ぶのにオススメな本
・ノンデザイナーズ・デザインブック
英語のデザインが多いものの、デザインの原則書かれていたり、しっかりした非常に良書。
・なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉
図解もありわかりやすい名書。
・思わずクリックしたくなる バナーデザインのきほん
動画で学ぶ
近年では、動画で学べるコンテンツが増えています。
無料のYouTubeやUdemyでも学ぶことができます。
2.制作ツールの使い方を学ぶ
最近のweb制作の現場では、「adobe XD」、「Figma」がよく使用されています。
たまに「adobe Illustrator」でデザインを作っている方もいますが、正直やめてほしい…（サイズが曖昧な値になったり、webデザインをわかっていない人が多くコードを書くコーダーには嫌われがちです）
僕も個人で案件を受けるなら正直プラス料金か断りたいところ…です。
近年は、「Figma」で制作されている方が多い気がします。
これから知識０で始めるのであれば、とりあえずFigmaで良いように思います。
ちなみに僕もデザインする際は、「adobe XD」を使用します。
これはただ慣れているから。
コーディングの際は、正直Figmaのほうがコーディングしやすい気がします。
各デザインソフトは書籍も多く出ているほか、最近ではYouTubeで解説している動画も多くでています。
好きなもので勉強してみましょう。
ただ書籍の場合は、ソフトのアップデータがかなり早いため中古の本や昔に出版された本だと操作方法が違う場合があるのでご注意ください。
・初心者からちゃんとしたプロになる Adobe XD基礎入門
3.とにかく作る
自分で架空のサイトを考えて作ってみましょう。
どんなサイトが思いつかなければ、普段行っているパン屋さんや飲食店など行ったことあるお店で想像してみると考えやすいかもしれません。
ここで、デザインを作る時イメージに合うサイトを探し参考にしてみてください。
まるごとパクるというのはよくありませんが、真似することで新たな学びが多いです。
初めはうまくいかない場合は、まるごとパクっても問題ありません。（※ただパクったものをそのまま納品やインターネット上に公開する行為はやめましょう。）
自分の中での練習として取り組む分にはパクるのは問題ありません。
4.コーディングを学ぶ
webデザインがしたいのにコーディングを学ぶ必要があるのか？？
これはYES!
どんなものでも作れるようになるまで覚える必要がありません。
概念としてどうやって作られているのかを学んでいると、ただただデザインが作れる人から１つ抜けられます。
特に紙のデザインをやっている方がなにも知らずwebデザインをするとコーディングする側やwebデザイナーからみると「は…？」となるデザインが上がってきたりします（笑）
コーディングの知識を少し身につけることで、コーディングする人とのやり取りがスムーズになったり、webデザインでやってはいけないことが見えてきます。
僕が昔就職活動をしていたとき、制作会社さんから「コーディングができないとデザインさせません。」と言われたこともあります。
コーディングできないデザイナーさんももちろんいますが、一定のコーディングの知識は持っておくのが良いと僕は思っています。
5.webデザインのポートフォリオを作る（必須）
今まで学んだことを活かし、作品を作ります。
少なくとも3サイト以上のwebデザインを用意するとよいでしょう。
簡単な副業案件をすぐにでも取りたいという場合は、架空のバナーをいくつか作ってみるのが良いと思います。
金額は高くありませんが、バナーを作るという案件は多数存在するので、初めての案件獲得には比較的に簡単にとれるでしょう。
コーディングで稼ぐ
1.HTML、CSSを学ぶ
コーディングで副業、フリーランスをやっていくには、webサイトをデザイン通りに作れることが最低条件となります。
まずは、動きのないサイトでいいので、デザイン通りにサイトを作れるようになりましょう。
基礎を学ぶには、プロゲートやドットインストールがおすすめです。
はじめは基礎でやっていてもあまり面白くありませんが、全体の把握とこんな漢字のタグがあるんだなと思ってもらうぐらいで良いと思います。
書籍を多数出ているので、おすすめ書籍も下記、記事でまとめています。
基礎を学ぶ際は、どうやって作られているのかが重要で、１つ１つのタグを完全に覚える必要はありません。
よくプロゲートを◯周した！とか全部制覇したとかいっている方がいますが、同じことを何周してもそこだけ覚えても仕方ないです。
僕もはじめはドットインストールで学びましたが、やったのは１つの「webサイトを作ってみよう」みたいなのを一周しただけです。
あとはひたすら調べて、実装、調べて実装を繰り返していたらいつの間にかできるようになっていました。
スクールに行けばできるようになる。全部教えてもらえる。と考えるのはやめましょう。
この業種で求められるのは、「デザイン通り実装できるか」です。
デザインどおりに実装できることが大前提で、それプラスでアニメーションなどをつけてよりわかりやすくだったり、雰囲気を出します。
書籍やwebサービスで学ぶ方法以外にも動画で学ぶこともできます。
web制作について勉強できるオススメのYouTubeチャンネルを紹介しているので、是非参考にしてみてください。
2.JavaScriptを学ぶ
サイトに動きをつけれるようになりましょう。
近年HTMLとCSSだけで作られているサイトはありません。
スクロールするとふわっとコンテンツが出てきたり、ボタンを押すと表示されるなどアニメーション要素は必須になります。
CSSでアニメーションを作り、JavaScriptで実行することも多いです。
近年は3D表現も増えてきて、ヌルヌル動くサイトも増えています。
ただそこまでのものを作るには、かなりのスキルと経験が必要になります。
まずはそのへんのサイトでよくある動きやタブの切り替え、アコーディオンメニューなどよく使う機能だけ作れるようになることを目指しましょう。
まずは、JavaScriptはどんなものなのか学ぶため、プロゲートやドットインストールをおすすめします。
JavaScriptを学ぶとなると「jQuery」っていうのもあるよね？と思う方もいるかも知れません。
SNS等では、jQueryはオワコンと言われていますが、web制作ではまだまだjQueryが使われることも多いので、合わせて学習してみてください。
JavaScriptの基礎を抑えたら、GSAPなどのライブラリを試してみましょう。
GSAPは、アニメーションを作成できるライブラリで、うまく使えば複雑な動きも実装可能です。
スクロールに合わせたアニメーションの実装もできるので、Ap◯leのようなサイトのアニメーションを作ることもできます。
CSSで使用するアニメーションを多用するのでCSSである程度アニメーションを作れるようにしてから触ってみることをオススメします。
わからない部分はChatGPTを活用する
最近流行りのChatGPTですが、プログラミング関係でも十分に活用できます。
わからないコードは、コードをコピペすることで、何をしているコードなのか説明してくれます。
文章で何がしたいのか書くだけでプログラムを生成してくれるので、どうすればいいかわからないと言う場合にまずはChatGPTに聞いてみるのもありです。
これは、JavaScriptにとわず、HTMLやCSS、WordPressでも答えてくれます。
簡単なweb制作レベルであれば、無料版のChatGPTで十分に解決することができると思います。
3.WordPressを学ぶ
web制作ではWordPressが使用されていることが非常に多いです。
webサービスを作る場合には、使用されない場合が多いですがコーポレートサイトやLPの案件を取るにはもはや必須と言っても良いかもしれません。
ここでは０から自作のWordPressテーマを作れることを目標にします。
おすすめの書籍はこちら「WordPressオリジナルテーマ制作入門」。
オリジナルのWordPressテーマの作り方を学ぶことができます。
オリジナルテーマは既存のテーマがたくさんあり、画像やテキストを変えるだけでサイトを作っている人もいますが、激安案件ばかりなので正直やる必要はないかと思います。
既存テーマを使わずオリジナルテーマでクライアントの要望に答えられる機能も追加できればある程度高い金額の案件が獲得できます。
ただ「既存テーマを使わずオリジナルテーマで」と書きましたが、最近のWordPressでは「Gutenberg」など機能がどんどん増え、便利になった反面、完璧なオリジナルテーマを作る難易度が上がっています。
今後のweb制作の現場では、0からオリジナルテーマを作るのではなく、めんどくさい部分は既存の「Snow Monkey」などを使用し、カスタマイズするという流れになっていく気がします。
4.CSS設計を学ぶ
上記まででなんとかなりますが、ここからはプラス要素として補足しています。
「CSS設計」という言葉を知っていますか？
webサイトは作って終わりではありません。
作ってから運営して育てていく。作るのはスタート地点で、そこから日々更新やメンテナンスが行われます。
その際に、とりあえず見た目だけできてるサイトで中のコードはぐちゃぐちゃのサイトだと更新がしずらかったり、CSSを新たに書いても何故か反映されないという問題が起きてきます。
その破綻したCSSを作らないためにCSS設計の勉強が必要になります。
・Web制作者のためのCSS設計の教科書
CSSは書けるけど、CSS設計ってなんぞやって方は一回読んでほしい。
「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」を意識して書く必要があります。
いろいろな方法がありますが、まずはこちらを読んでみるのがおすすめです。
案件の中にも「BEMを理解している人」や「FLOCSSで書いてください」など、CSSの書き方を指定している案件をたまに見かけます。
5.Sassを学ぶ
最近生のCSSだけで書いてあるサイトをあまり見かけなくなりました。
最近はCSSの進化で、SassでできることがCSSでもできるようになってきていますが、まだまだSassを使用するケースが多いです。
制作会社で4年以上働いている中でもみんな使用しているのはSass。
いまのweb制作の現場ではもう必須と言っても良いかもしれません。
・Web制作者のためのSassの教科書
この本では、Sassとは何なのかどうやって使えば良いのか、詳しく説明されています。
生のCSSで書くよりもより便利にCSSを書けるので、ぜひ制作に取り入れてみてください。
6.ポートフォリオを作成する（必須）
WordPressでポートフォリオを作成します。
WordPressじゃなくてはダメということはないですが、
・上記で上げたオリジナルテーマを作ること
・今後自分がやった案件で公開していいものは、ポートフォリオの実績に加えやすいこと（管理が簡単）
・ブログ機能をつけて自分の学んだスキルなどを発信できる（発信するとSEOも学べたり、どんな事ができる人なのかわかってもらいやすい）
の３点がかなえられると思うからです。
このポートフォリオを作る際に、デザインを全くやったことがない人・やらないと決めている人はどうするかということですが、
・自分でポートドリオぐらいは挑戦してデザインしてみる
・ココナラなどデザインだけ制作を依頼する
とよいでしょう。
僕の場合、初めは自分でデザインして全部自分で実装しました。
（デザイン経験はなし）
web制作の案件を獲得する
ポートフォリオの充実化
自分が制作したウェブサイトやWebアプリケーションなどのポートフォリオを充実させましょう。
ポートフォリオは、自分のスキルや能力をアピールするための重要なツールです。
ポートフォリオには、自分が制作したwebサイトやWebアプリケーションのスクリーンショットや説明文、実装した機能や技術などを記載することが大切です。
公開されているものに関しては、URLを記載し見てもらえるようにしておくのがベストです。
SNSを活用する
SNSなどのプラットフォームを活用して、自分が制作したwebサイトやWebアプリケーションをアピールすることが重要です。
TwitterやFacebook、Instagramなどで自分の制作物を紹介し、フォロワーを増やすことで、潜在的な顧客にアプローチすることができます。
オンラインサイトやフリーランス向けプラットフォームの利用する
オンラインサイトやフリーランスプラットフォームに登録し、自分が制作したwebサイトやWebアプリケーションのポートフォリオを掲載しましょう。
このようなプラットフォームでは、仕事を探している企業や個人が検索することができるので、自分のスキルや能力をアピールし、案件を獲得することができます。
コミュニティ活動に参加する
Web制作に関するコミュニティ活動に参加し、自分のスキルや能力をアピールすることが大切です。
コミュニティ活動に参加することで、業界のトレンドや情報を知ることができ、さらにネットワークを広げることができます。
コミュニティ内で、お手伝いやデザインはできるけど、コーディングができないなど並んでいる方もいるので協力という形で案件を獲得することもできます。
