未経験知識ゼロから副業でもWeb制作で案件獲得までの勉強法

こんにちは、現役フリーランスのくまたろうです。
今回は自身の経験を元に、知識ゼロからでもWeb制作でなるべく遠回りせずに1円でも稼げるようになるまでをご紹介しようと思います。

腐るほどロードマップがありますが、自分に合っているなと思うものを盲信して進みましょう。

そもそもWeb制作って何するの？

Web制作とは、ホームページを作る仕事です。

新規サイトからリニューアル、コンテンツの追加などを行います。

その中でも、「ディレクター」「デザイナー」「コーダー」「ライター」など様々な役職がありますが、代表的な3つについて簡単に説明します。

Webディレクター

Webサイトの企画や立案、制作、運用における責任者の立場です。

クライアントの要望を元にデザイナーやコーダーなどの作業者をまとめ、スケジュールや品質の管理をし、プロジェクトが円滑に進むように調整を行います。

しっかり管理しないと修正や追加要望が無限にくる可能性もあるので責任重大です。

Webデザイナー

その名の通り、Webサイトのデザインを行う人です。

XD、Figma、Photoshop、Illustratorなどを使用し、デザインカンプを作成します。

また、ディレクションからデザイン、コーディングまで行う人もWebデザイナー（クリエイター）という事もあります。

Webコーダー

デザイナーが作成したデザインカンプを元に実装する人です。

「フロントエンドエンジニア」「マークアップエンジニア」と呼ばれる場合もあります。

主に「HTML」「CSS」「JavaScript」という言語を使用して、サイトを構築します。

学習の心構え

すごく大切なので、学習をはじめるまえにいくつか押さえて起きたいポイントをご紹介します。

簡単ではない

すみません…。

ただ、中途半端な気持ちで挑戦して「オワコン」とか思ってほしくないのです…。

早い人は１ヶ月〜３ヶ月で成果が出る人もいるけど、かなりの努力と根性が必要です。

仕事をしながら学習して成果が出るのには、毎日3〜4時間学習しても大体の人は半年〜1年くらいは掛かるかなと思います。

完璧な理解を求めない

学習に終わりはありません。

僕も日々新しい知識を取り入れているし、どんどん新しい事が増えたり変更したり、Webの世界は目まぐるしく変化しています。

まずは稼げるようになることを目標に積み上げていきましょう。

家族やパートナーを大切に

「学習と関係ないじゃん？」と思うかもしれませんが、重要です。

近くにいてくれる人を大切にしないと、そもそも学習を継続できません。

また、学習することが目的となってしまい、本来の目的を見失うこともあります。

自分が何のためにスキルを身につけて何をしたいのか、目的と手段を明確にしてモチベーションを保ちましょう。

最低限必要なスキル

それでは、稼げるようになるまで具体的にどんなスキルが必要なのかを解説していきます。

ググり力

これはずっと必要で大切なスキルです。

具体的にはググる為の「語彙力」が要となります。

完璧な理解を求めない代わりに、欲しい情報にたどり着けるようにならないといけません。

カンニングがオッケーの世界なので、使ってみてからわかる事なんて当たり前。

わからない事があればググる癖をつけましょう。

HTML

HTML とは、「HyperText Markup Language」の略です。

コンテンツの構造を定義するマークアップ言語で、厳密には「プログラミング言語」ではありません。

段落や見出し、リスト、テーブルなど様々な要素があり、SEOにも影響すると言われています。

CSS

CSSとは、「Cascading Style Sheets」の略です。

HTMLなどで記述した文章などの見た目を表現する言語となります。

先述したHTMLとCSSが理解できれば、とりあえずWebサイトが作れます。

Sass（SCSS）

Sassとは「Syntactically Awesome StyleSheet」の略で、直訳すると「文法的に素晴らしいスタイルシート」です。

CSSを効率的に記述するための言語となっています。

すぐ必要にはなりませんが、実務では使う機会が多いのでCSSが理解出来たら覚えましょう。

JavaScript（jQuery）

JavaScript（JSと呼ぶ事もある。）は簡単に言うとサイトに動きを出すために必要となります。

例えばポップアップウィンドウやスライダー、ハンバーガーメニューなどの実装に使われています。

また、jQueryというライブラリを使用して少ない記述で実装することも出来ます。

とりあえずはJavaScriptをゴリゴリかけなくても、jQueryが使えれば困る場面はそんなにありません。

JavaScriptで出来る事には他にも非同期通信など様々な事がありますがここでは触れません。

PHP（WordPress）

PHPとは、動的にWebページを生成することができるサーバーサイドの言語です。

PHPを全て理解する必要はありません。

WordPressはPHPで作られていますが、独自のコードがあるのでそれらを使う事によって構築できます。

WordPressを扱えると仕事の幅が広がるので、HTML、CSS、jQueryを覚えたら是非覚えましょう。

学習の手順

ぶっちゃけると「最短距離で稼げるスキル」を身につけたい方はスクールに通うのが一番です！！

だらだら続けるよりもモチベーションを維持し易いし、効率的に学べます。

自分に投資してさっさとリターンしましょう。

個人的には僕もお世話になった、圧倒的コスパのオンラインスクール「デイトラ」一択かなと思います。

そんな方は続きをご覧ください。

絶対に必要なもの

想像がついているかもしれませんが、「パソコン」です。

逆にそれだけでいいです。

ノートでもデスクトップでも、WindowsでもMacでも構わないし、動画編集のようにハイスペックなものは必要ありません。

本格的に実務をやるなら各デバイスの表示確認が必須なので、WindowsもMacも両方あるのがベターですが後々で大丈夫です。

余談ですが、作業するスペースが大きいと作業効率が上がるので、余裕があれば大きいモニターや複数のモニターを使うのがオススメです。
小さくても有るのと無いのでは世界変わります。

筆者は当初13インチのMacbookに、13インチのモニターを繋げて学習してました。（まともな机も無かったし辛かった…。）

【7/27までの特典】【最新Ver2】モバイルモニター 高画質フルHD 15.6インチ【3年保証 即日出荷 送料無料】WT-156H2-BS モバイルディスプレイ ゲーミングモニター ノングレア 液晶 IPSパネル タイプC USB-C HDMI テレワーク モニター ビジネス スマートフォン 5523 価格：18,800円（税込、送料無料) (2023/7/26時点) 楽天で購入

HTMLとCSSの基礎を学ぶ

まずはHTMLとCSSの基礎を身につけましょう。

Progateやドットインストールで基礎を学ぶ人が多いけど、個人的にはサイトを作るイメージが湧かなくてつまらなかったのでオススメはしません…。（否定もしませんが。）

「とりあえずコードを書いてサイト作ってみたい！」って方にオススメしたいのが「写経」です。

なんかお経覚えるみたいですが、参考書を見ながら書いてある通りにコードを書く作業です。

大体一冊終わると1サイト完成するので、はじめてやると「なんかよくわかんないけどできた！」って感じでちょっと達成感があります。

圧倒的に人気の書籍ですがイチオシはコレ↓↓

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格：2,486円（税込、送料無料) (2023/7/26時点) 楽天で購入

丁寧でとてもわかりやすいし、1冊終わるとオシャレなサイトが完成します。

少し慣れたらコチラもオススメです。

実務で応用できる考え方も学習できるのでやって損はありません。

教科書では教えてくれないHTML&CSS [ 狩野祐東 ] 価格：2,992円（税込、送料無料) (2023/7/26時点) 楽天で購入

僕は書籍派でしたが、ネットでも探せばnoteなどで教材を出している人がいるので、チェックするのもアリです。

ここで注意しなきゃいけないのが、「いつまでも写経ばかりやらないこと」です。

自信がつくまでやろうと思ったらいつまでも終わりません。

6〜7割理解したら次のステップへ。←このメンタルが大事。

jQueryの基礎を学ぶ

jQueryはひとまず「ハンバーガーメニュー」「アコーディオン」「スライダー」が出来れば大体大丈夫です。

それだけ？って思うかもしれないですが最低限これらを押さえておけば通用します。

ググったらいろんな人のやり方がわかるのでまずはググってみましょう。

スライダーに関してはSwiperというJavaScriptライブラリを使っておけばオッケー。

なんとなく使えてるくらいになれば、あとは本とかでしっかり学び応用が効くようにする。

jQuery最高の教科書 [ シフトブレイン ] 価格：2,838円（税込、送料無料) (2023/7/26時点) 楽天で購入

これ一冊やれば歯がゆいところに手が届いて「なるほどなー」ってなると思います。

あとコチラもオススメ。

動くWebデザインアイディア帳 jQuery、CSSアニメーションの初心者でもコピペで動く! 「実装したい基本の動き」をこの1冊が丸ごとカバー 価格：3,080円（税込、送料別) (2023/7/26時点) 楽天で購入

これで大体いけます。

というか「動くWebデザインアイディア帳」のサイトで充分かもしれません。

もう少しJavaScriptを学びたいって方はこの本。

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ] 価格：2,728円（税込、送料無料) (2023/7/26時点) 楽天で購入

サクサク話を進めていますが、大事なのは「自分で調べて解決する力」です。

エンジニアの世界では調べて試す前に質問は基本的にNGです。

話を戻しますが、ここまでくれば「なんかよくわかんねー…。」から脱出できていると思います。

さて、大切なのでもう一度言いますが6〜7割理解したら次のステップへ。

やってたらいつのまにか身についてるので、とにかく進みましょう。

デザインカンプからのコーディング

おそらくほとんどの人が発狂することになります…。

ですが、ここで自分で調べて解決する力を更に磨いていきましょう。

デザインカンプからのコーディングは実務とほぼ同じです。

そして、制作したものをポートフォリオとすれば、後々営業する際の資料となります。

ここではしょーごさんのレビューが受けられる実践形式のコーディング課題をオススメします。

HTML、CSS、JSを使用して静的サイトを構築できるようになれば、月収5万円は可能です。

ピクセルパーフェクト

コーダーとして大切にしないといけないのは、デザインへのリスペクトです。

制作したものが「なんか違う…。」とならないように余白やフォントなど入念にチェックしていきましょう。

PerfectPixelを使用して元々のデザインと制作したものを重ね、微調整していきます。

そこまで求められない場合や、デザインによってはどうしても揃わない時もありますが、品質を担保するための大切な工程です。

PerfectPixelなどのChorome拡張機能についてこちらの記事をご覧ください。

WordPressテーマ制作

はい。また大きな壁にぶち当たります…。

前述したように、WordPressではPHPで作られているので、新たな言語に挑戦しなくてはいけません。

最初は本当に意味がわからないけど、手を動かして使っていく内にイメージが湧いてくるので諦めずに頑張りましょう。

筆者も調べながら制作する事がほとんどなので、とにかく実践あるのみです。

「確かこれ使えばいけたなー。」くらいに理解していれば案件はこなせます。

ちなみに、先ほど紹介したしょーごさんの課題の上級がWordPressの課題となってます。

アキユキさんのYouTube、たにぐちまことさんのYouTubeやUdemy「ちゃんと学ぶ、WordPressテーマ開発講座」がとてもわかり易いのでオススメです。

ここまで出来るようになると10万超えが見えてくるし、WordPressの案件は多いです。

営業活動

スキルがある程度身についてきたら、今度は営業活動です。

ここの挫折ポイントです…。

「未経験から独学でフリーランスとかなめんじゃねぇ。」という考え方も一定数いるし、実際に適当な仕事をしたり、逃げ出す駆け出しフリーランスも一定数いるので、相手にされない場合がたくさんあります。

そのために、しっかりとポートフォリオを作り自分のスキル感をアピール出来る材料を増やしていきましょう。

WordPressテーマ化したある程度ページ数のある実務でよく使うJavaScript（jQuery）の実装があるコーポレートサイトがいいかなと思います。

営業の手段は様々なのですが、クラウドソーシングや知人、制作会社へメール営業など、色々試して自分が合っているものを選択しましょう。

また、掲載できる実績が増える事で、より質の高いポートフォリオサイトとなります。

筆者は制作会社へメール営業を中心に活動しましたが、返信率が5〜10％、実際に仕事に繋がったのは1〜2％です。

本当に心が折れそうになりますが、そこはマインドブロックをぶっ壊す事と、相手の立場になって考えた営業をしていきましょう。

営業支援型のコミュニティに参加するのもアリだと思います。

まとめ

ここでは、Web制作で稼ぐまでの一例をご紹介しました。

たくさんつまづく事があると思いますが、夜悩んでいたことが次の朝一瞬で解決することがよくあります。

脳が疲れると思考能力が低下するので、何かに挑戦するなら朝活がオススメです。

ちなみに、筆者は朝6時に出勤しなきゃいけなかったので、4時半起きの生活をしていました…。

SNSなどを見ていると、成果を出す人を目にして劣等感を抱くことがあるかもしれませんが、大切なのは諦めず継続することです。