【独学】Web制作で副業｜ココナラで初案件を獲得するまでの全工程

今回はこのようなお悩みをお持ちの方に向けて

HTML未経験だった僕が

独学でWeb制作の初案件を獲得するまでに取り組んだこと

をご紹介しつつ、具体的に取り組むべき学習・実践内容をご説明します。

未経験者も独学でWeb制作の副業は可能なのか？

そもそもとして、「Web制作を本当に副業に可能なのか」という疑問に感じている方もいらっしゃると思います。

その答えは、「可能」です。

独学の場合、スクールに通う場合と比較して時間はかかりますが、Web制作で副業するために必要なスキルを身に付けることは十分可能と断言できます。

ただし、大前提としてWeb制作を副業として成立させるためには、以下の条件を満たせる必要があります。

Web制作の作業にはどうしても時間を要します。

特に最初の内は、経験を積んでいる方に比べて作業時間が長引きやすくなります。

そのため、案件を獲得し、しっかりと納品まで完了するためにはある程度時間が確保できる必要があります。

また、Web制作ではデザインカンプ（デザインデータのこと）を見ながらコーディングする場合がほとんどです。

その際、パソコンの必要スペックが足りていないと、そもそもデザインデータを起動することすらままならないため、こちらも必須条件となります。

パソコンの必要スペックについては、ザックリ言うと
メモリ……8GB（できれば16GB以上）
CPU……インテル第6世代以降またはAMDの同等以上のプロセッサー
があれば、デザインソフトを起動することが可能です。

参考：https://www.adobe.com/jp/products/photoshop-elements/tech-specs.html

今回は、こちらを踏まえた上で

この２点についてご紹介していきます。

【全工程】Web制作で初案件を獲得～次の案件に繋げるために取り組んだこと

ただし、単価が比較的高いのはWordPress案件です。

冒頭でお伝えした「2カ月目に差し掛かる頃に10万円の案件」というのはこのWordPressコーディング案件（デザイン制作は無し）のことで、もし時間に対する単価を上げたいのであれば、いずれはWordPressの学習も必要になります。

本記事では、HTMLコーディング案件を獲得するという目標を想定した上で、その全工程をご紹介していきます。

WordPressも習得したいならWPHack講座がおすすめ

Web制作で初案件を獲得するまでに取り組んだこと

「Web制作で初案件を獲得するまでに取り組んだこと」の流れを改めてまとめると以下のようになります。

STEP1　HTML/CSS

Web制作で最も欠かせないのがこのHTML/CSSの学習です。

僕がHTML/CSSの学習の際に利用したサービス・取り組んだ学習内容は、具体的に以下のものです。

progateは、様々なプログラミング言語をスライド形式で実際に手を動かしながら学習することができるプログラミング学習サービスです。

僕は、こちらの有料プランを利用し、１ヶ月ほどかけて一通り基礎を学習しました。

具体的には

その後は、模写コーディングに適している模擬サイトを調べ、大体5ページほど模写コーディングに取り組みました。

最後はCodejumpで入門編・初級編・中級編の課題に各１～２枚ずつ、取り組みました。

このSTEP１の段階は、いわゆる基礎固めのフェーズです。

ここでいかにHTML/CSSの基礎を固められるかが重要になってきます。

しかし、実際に取り組むに当たってひとつ気を付けていただきたいのが

インプットのフェーズ＝progateの段階では、完璧に理解しようとしないこと

です。

これはこのあと登場するJavaScript/jQueryでも同じことが言えますが、インプットを完璧にする、つまり完璧に覚えることにはあまり意味がありません。

その理由は、不明点は調べれば分かるためです。

そして、不明点を調べ、実践で使用する中で初めて自分の中に吸収されていきます。

そのためprogateの段階ではあくまで６～７割程度の理解ができれば十分で、その後の

で、アウトプットに力を注ぐようにしましょう。

このアウトプット＝実践回数が、HTML/CSSコーディングスキルを高める重要な要素です。

逆に言うと、

調べても自走できないのであれば、もう少し学習時間を設けた方が良い

ということでもあります。

「調べれば実装できるかどうか」がひとつのボーダーとお考え下さい。

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

STEP１でHTML/CSSの基礎を充分に鍛えたら、続いてデザインカンプを元にコーディングする練習に取り組みました。

まずは、簡単で良いのでデザインカンプからHTML/CSSコーディングに必要な値を読み取る方法について調べてみましょう。

そして、先ほども登場したCodejumpでAdobe XDのデザインカンプを元に、実際にコーディングを行います。

CodejumpではAdobe XDのデザインカンプが用意されている課題もあり、それを元に練習ができます。

実案件では、値の読み取りの他にも画像の書き出しを行う必要がありますが、それほど難しいものではないため、事前にやり方を調べてみて、あとはぶっつけ本番で行う形でも問題無いかと思います。

ご不安な場合には、実際にAdobeのプランに登録をして複数のデザインソフトを触ってみることをおすすめします。

デザインカンプからのコーディングについては、STEP１でのコーディング感覚とのギャップを埋める意味合いが強いため、何となくやり方が掴めるところまで行けば次のSTEP３に進んで大丈夫かと思います。

STEP3　JavaScript/jQuery

STEP３では具体的には以下の内容に取り組み、JavaScript/jQueryについて学習しました。

JavaScriptはWebサイトにアニメーションなどの動きを付けるために使用する言語のこと
jQueryはそのJavaScriptをより短いコードで記述できるようにしたライブラリです。

第一段階として、まずはSTEP１のHTML/CSSのときにも登場したprogateでJavaScript/jQueryの基礎を学習しました。

前述したように、あくまでも理解度６～７割ほどを目指すのがポイントです。

progateでなんとなくイメージが掴めたら、続いて書籍を用いてJavaScriptを学習し、理解度を深めました。

progateだけではなく、さらに書籍も使用した理由は

progateだけでは理解が不十分すぎると感じたため

です。

JavaScript/jQueryは、HTML/CSSと比較すると難易度が高くなります。

そのため、progateの内容を６～７割ほど理解したとしても、実際にそれで調べながらでもアニメーション実装できるようになったかと言うと、僕の場合はそうではなかったです。

そこで、以下の書籍を用いて追加学習し、理解度をより高める時間を設けました。

最後に、STEP１やSTEP２でコーディングしたサイトに、アニメーションを自作しました。

前述しましたが、学習段階で最も重要なのはアウトプット＝実践回数です。

学んだことを本当の意味で自分のものにするためには、そのスキルを実際に使用する以外に方法はありません。

自分でコーディングしたサイトに実際にアニメーションを追加していくことで、STEP３の総仕上げになります。

もしもどんなアニメーションを実装するか悩んだ場合には、以下のものがおすすめです。
これらは実案件でも頻出のアニメーションで、早い段階で実装してみるに越したことはないためです。

初めの内は上手くパーツ化できるように実装するのは難しいかもしれません。

しかし、これが形にできると、Web制作の副業においてもコーディング時間を短縮できるため、「そういう考え方がある」ということを知っておくだけでも、今後に生きてくるかと思います。

STEP4　サーバー/ドメイン

STEP４で学習したサーバー/ドメインは実案件を獲得する上で非常に重要なポイントです。

STEP１～STEP３は、あくまでも自分のパソコン上で完結する内容でした。

しかし、実案件では主に以下の納品パターンがあります。

この中で２と３についてはサーバーの知識が不可欠で、ここが抜けてしまうと受けられる案件の幅が激減します。（というより、実質案件をこなせない＝取れないとお考え下さい）

と感じられた方もいらっしゃるかもしれませんが、ご安心ください。

確かに深い知識、それこそサーバーのプロを目指すのであればとてつもない勉強量が必要になってしまいます。

しかし、Web制作の副業で求められる理解度はそれほど高くありません。

一度Codejumpのサーバー部分を読んでみて、その後は

実際にサーバーをレンタル　→　実際にサイトをアップロードしてみる

といったことを行なう中で、自然とサーバーがどのようなものなのかが理解できるかと思います。

また、ドメインについても同様で、こちらはレンタルサーバーを契約する際に少し調べてみて「こんなものなんだなあ」ぐらいの理解で十分です。

その後はエックスサーバーを実際に契約し、現在も継続して利用を続けています。

その際、「どのサーバーを契約するか」というところで多くの方が悩まれますが、契約してしまえばどこのサーバーも同じ、というのが僕の経験則です。

そのため、これからレンタルサーバーをご契約される方は、とりあえずエックスサーバーを選んでおけば間違いありません。

STEP5　ポートフォリオ制作

STEP４でサーバーの契約まで済ませたら、次は実案件の獲得に向けてポートフォリオ制作に取り組みました。

１のデザインの用意については、ご自身での用意が難しい場合はCodejumpの課題を引用される形で問題ありません。

Codejumpでは、課題でコーディングしたサイトをポートフォリオとして公開することを許可して下さっています。（とてもありがたいです）

Webデザイナーとして活動をするならご自身でデザイン制作から行い、デザイン力をアピールする必要があります。

しかし、今回の目的は

副業としてコーディング案件を獲得すること

です。

そのため、まずはコーディングスキルを証明できるポートフォリオを用意できればOKです。

ポートフォリオを制作する目的は「自分自身のスキルをクライアントへアピール・証明するため」です。
コーディング案件を獲得することが目的であれば、アピールするべきはデザイン力ではなくコーディングスキルということになります。

その際、ポイントが３つあります。

まず、

中途半端なポートフォリオは公開しない方が良い

というポイントですが、中途半端なスキルを提示してしまうと、逆に「このレベル感なのか…？」とクライアントに不安を抱かれてしまいます。

そのため、Codejumpの課題を公開するのであれば、少なくとも中級編以上の課題を選択するようにしましょう。

また、よりスキルをアピールする意味で、以下のようなアニメーションを取り入れておくことを推奨します。

このポートフォリオを最低３つほど制作したら、最後に本番環境（サーバー）へアップロードして公開すれば、ひとまずコーディングスキルを証明するための準備が整います。

ご参考までに、僕は中級編～上級編のレベルのデザインをいくつか自作し、最終的にCodestepの課題と合わせて４つのポートフォリオを用意しました。

ココナラでWeb制作の案件に応募

ココナラで案件に応募していきます、と言いつつ、実はその前にいくつか準備することがあります。

まず、プロフィール設定については、こちらは応募先のクライアントが「どんな人が応募してきたんだろう」とプロフィールを訪問して下さったときに備えるためのものです。

いわば「自動挨拶文」を用意するようなもので、ある意味マナーとも言える部分です。

プロフィール設定をする際は、他のWeb制作で活動されている方のプロフィール画面を覗きに行き、参考にしながら進めていくことをオススメします。

続いて「Web制作以外の簡単な案件をこなす」という点については、恐らく首を傾げた方も多いのではないかと思います。

実を言うと、このWeb制作以外の簡単な案件をこなすという部分が、Web制作の初案件を獲得する上でとても重要になってきます。

と思われたかもしれません。

それはおっしゃる通りで、受注案件の全体で見ると、「初案件」ではありません。あくまで、「Web制作にとっての初案件」という認識が正確です。

ただ、これはココナラのシステムを考えるとごく自然のことではあるのですが

案件を獲得しやすくするためには「実績数」がとても重要

です。

ここで、案件を獲得する上で大事なポイントを２つお伝えします。

つまり、これら２つの「信頼」は、副業としてWeb制作のお仕事を請け負っていくうえで欠かせない要素ということです。

スキルへの信頼は、ポートフォリオで準備できました。

では、後者の「責任を持って仕事を完遂してくれることへの信頼」はどうかと言うと、ここを満たすために必要なのが先ほどお伝えした実績数です。

ココナラに登録したばかりのときは、当たり前ですが実績数は「０」です。

つまり、この時点では、クライアントの

という不安な気持ちを解消できないということです。

もちろん、過去の経歴や提案文、ポートフォリオが非常に魅力的であれば可能性は十分あります。

ただ、この記事を読まれている方の多くは、実務やHTML自体が未経験なのではないかと思います。

そして、未経験だとどうしてもトントン拍子にことを運ぶのは難しいです。

そこでまずはWeb制作以外の簡単な案件をこなすことで実績数を増やし

「この人ならしっかり最後まで仕事をやり遂げてくれそう」

とクライアントに思っていただけるように準備を整えます。

誤解を恐れずに言うと、これらの案件はパソコンスキルをある程度お持ちの方であれば十分にこなすことが可能です。

そのことを、クライアントも理解されています。

そして、ここまでHTML/CSSを始めとしたWeb制作の学習をこなしてきた方であれば、これらのお仕事を引き受けたとしても問題なく納品まで完了できるはずです。

まずはこうしたお仕事をひとつずつこなし、着実に実績数を増やします。

そうしながら同時並行でWeb制作の案件にも応募していきます。

こうした段取りをきちんと踏むことが、Web制作の案件を獲得することに繋がっていきます。

Web制作の案件を獲得できたら――

僕が初めてWeb制作の案件を獲得するまでにかかった準備期間は累計で１年を超えます。

恐らく、未経験者でいちからHTML/CSSを学び始める方も、似たような時間を費やしてようやくWeb制作案件の獲得に至るのではないかと思います。

それだけの努力を積み重ねて案件を獲得したからこそ、次の案件へしっかり繋げるためにも、心掛けるべきことがあります。

これらは副業だけではなくフリーランスとして活動される方にも通ずるものです。

特に

この２つは、人柄の評価にも繋がります。

クライアントも同じ人間なので、依頼する上で人柄を気にしている方も多く見られます。

この点を大切にすることで、

同じクライアントから継続案件をご依頼いただける可能性が高まります。

内容自体はWordPress案件でしたが、対応範囲が今回の目標であるコーディングのみであったとしても、とにかく迅速なレスポンスと丁寧な対応を心掛けることで、その先のお仕事に繋げられる可能性はグッと高まります。

（いま現在もありがたいことに、このクライアントからは継続的にご依頼いただいています）

また、３つ目のピクセルパーフェクトについてですが、こちらは成果物の品質に関わる点になります。

ピクセルパーフェクトになっているかの確認には、具体的にはGoogle chormeの拡張機能PerfectPixcelを使用します。

PerfectPixcelを使用すると、HTMLコーディングしたサイト上に、デザインカンプから出力した画像データを半透明上に重ねて表示することが可能となり、その表示上で、「各要素のサイズや余白などが完璧に重なるようにCSSを調整」します。

言ってしまえば、HTMLコーディングで完璧ななぞり書きをするイメージです。

コーディング経験が浅い時期から1px単位での調整が要求されるピクセルパーフェクトを目指すことは正直かなり大変です。

しかし、ここを最初の内からクリアできていると

２つ目、３つ目の案件に繋がりやすく、より安定した副業ができるようになります。

１点補足をすると、クライアント側は「ピクセルパーフェクトまでは求めていない」という場合も意外に多いです。

そのような場合は、そもそもとしてデザインカンプの要素間寸法が均一でないことがほとんどです。（例えば、同じリスト内の要素なのに、行によって上下の余白があからさまに異なる、など）

初めての案件を獲得しても、そこはゴールではなく、あくまで本当の意味でのスタートラインに立ったという状態です。

大切なのは、初めてのWeb制作案件で、クライアントから信頼していただけるだけの成果物を納品できるどうかです。

Web制作の初案件を獲得したら以下の３点をとにかく大切にしましょう。

未経験者も独学でWeb制作を副業にできる

ここまでお付き合いくださり本当にありがとうございます。

冒頭でもお伝えしたように、未経験者でもWeb制作を副業にすることは可能です。

最後に、この記事を振り返ってみましょう。

できるだけ短期間でWeb制作を副業にしたいならスクールも検討しよう

未経験者がWeb制作の案件を受注できるようになるまでの道のりは非常に長く、僕は累計１年以上もの期間を費やしました。

その間、正直ひとりではモチベーションを保つことも難しく、途中でいったん勉強をやめてしまった時期もあります。

もしも途中で勉強をやめてしまう時期が無ければ、もっと短い期間でWeb制作案件の獲得まで到達していたかもしれません。

僕と同じように長い期間をかけたくないのであれば、Web制作の学習部分については、独学ではなくプログラミングスクールを利用するというのもひとつの選択肢です。

ただ、プログラミングスクールは平均相場が30～50万円と非常に高く、誰もが簡単に利用できるものではありません。

そこで、できるだけ安価にWeb制作を学びたいという方に向けて

10万円以下でWeb制作の基礎を学ぶことができるスクールの記事を２つご紹介させていただきます。

どちらもWeb制作の基礎を学べるプログラミングスクールで、簡単に以下のようなカリキュラムとなっています。

忍者CODEはWordPressまで学習できる分、10万円ほどと費用がWithCodeよりもかかりますが、WordPress案件はコーディングだけの案件と比較して単価が高いため、最終的なコスト回収は忍者CODEの方が早いです。

WithCodeはとりあえずコーディングだけを学べれば良いという方に向いているスクールで、５万円以下のコースでも、初心者の方がもっともハードルを感じているであろう本番環境への公開まで学ぶことが可能です。

最後までお付き合いいただきありがとうございました。

この記事が参考になったなら何よりです。