【コーディング初心者向け】仕事の受注から納品までの流れを公開

コーディング初心者だけど仕事の受注から納品までの流れを知りたいな。どんな案件を受注すればいいんだろ？

この記事ではこのような疑問にお答えします。

先日、Twitterでこんな質問をいただきました。

という内容。

確かにProgateで勉強して初案件を受注してもわからないことだらけですよね。

そこで現在、WEBエンジニア歴1年半ほどで、月に7桁前後稼いでいる僕が詳しく解説します。ちなみに初案件はクラウドワークスでの3万円のWordPress制作でした。受注から納品まで終始戸惑ってばかりでした。

プラスαで初心者が受注すべき案件内容についても語ります。

〜おすすめプログラミングスクール3つ〜

〜本記事の内容〜

1. コーディング案件の難易度・単価・受注方法【初心者向けおすすめ案件】
2. コーディング案件の受注から納品までの流れ【4ステップ】

コーディング案件の難易度・単価・受注方法【初心者向けおすすめ案件】

初心者はそもそもどんなコーディング案件があるのかわからないですよね。

コーディング案件はざっくり下記の通り。

ちなみに案件種別と単価は初心者が初案件の受注で良く使うお仕事マッチングサービスのクラウドワークスを参考にしています。必ずしもこの単価ではありませんが、ざっくりとこんな感じです。

初心者はLP制作のコーディングが無難

ProgateでHTML、CSS、jQuery、Javascriptあたりを勉強した人は、LP制作を受注すると良いですよ。いわゆるキャンペーンサイトですね。

レベル感から見てもちょうど良いかなと。がっつり制作するのが不安だという方は、出来上がったサイトを修正したりする運営・保守の案件を取るのもありですよ。

またWEB制作で稼ぐならWordPress案件は単価が高くおすすめですが、Progateで勉強しただけのレベル感だと納品は正直難しいです。

そもそもプログラミングの基礎ができていない可能性あり

HTML、CSS、jQueryあたりを勉強してWEB制作はもう大丈夫かもと思っていても、仕事をこなせるレベル感ではなかったりします。かつての僕もそうでした。
コーディングの仕事ってHTML、CSS、jQueryとか以外にも周辺知識とかが必須なのですが、独学だと何がわからないかもわからなかったりするんですよね。

そんな時はプログラミングスキルをしっかり身に付けて、周辺スキルも学べるスクールでさくっと勉強するのがおすすめです。

〜おすすめプログラミングスクール3つ〜

プログラミングスクールは数多くありますが、WEB制作で必須スキルのWordPressコースがある完全オンラインのTechAcademyがおすすめです。1週間の無料体験授業があるので、受けてみるといいかと思います。

少し脱線しましたが、ここから受注から納品までの流れを解説していきます。

コーディング案件の受注から納品までの流れ【4ステップ】

案件受注から納品までの流れは下記の4ステップです。

ちなみにクラウドワークスでLP制作案件を受注したことを想定しています。

1. 案件提案・受注
2. 制作
3. 納品
4. 納品後の修正・保守

それぞれのステップで初心者が気をつけるべき注意点についても解説します。

ステップ1.　案件提案・受注

まずは案件を受注しなければ始まりません。初心者がコーディング案件を受注する際は、クラウドワークスを使うことが多いです。LP制作の案件なんかはゴロゴロ転がっているので、初心者が経験を積む場としては最適ですよ。

ちなみにプロフィールの設定が重要になってきまして、【クラウドワークス】月5万円分の案件を受注するプロフィールの書き方【裏技】で詳しく解説しています。

クラウドワークスでコーディング案件を受注する際の注意点は以下の通り。

1. 納期
2. デザインカンプの種類（psd、ai、XDなど）
3. 修正事項があった場合の追加費用について
4. 納品方法について
5. 疑問点について

上記事項は必ず確認しておきましょう。

確認する意味としては、自分でも案件を受注できるかどうか判断するため。上記事項を確認して8割ほど出来ると思ったなら受注すればOK。

特に初心者にありがちなことですが、疑問点がある場合に質問しない人が多いです…理由としては疑問点を質問すると案件を受注できないと思っているから。

でも疑問点があるまま受注して案件を進めても後々トラブルになる可能性が高いので必ず確認しましょう。

下記の様な些細な質問でも大丈夫です。

• デザインを確認して画像使用OKな箇所の確認
• CSS設計について（Scss、Sassを使用するのかなど）

制作に関する疑問点がある場合は、制作に着手する前に必ず確認しておきましょう。まだ制作中に質問点が出てきた場合もすぐに確認しましょう。

ステップ2.　制作

コーディングの制作手順ですが以下の通り進めればOKです。

• デザインカンプ（psd、ai、XD)から画像書き出し
• HTMLで骨組みを作る
• CSSで整える
• 微調整

特に初心者が戸惑ってしまうのがデザインカンプからの画像の書き出しかと思います。基本的にデザインカンプはpsdデータが多数で、psdデータから画像の書き出しが出来ればそのほかのaiやXDからも同じ要領で画像の書き出しが可能です。

画像の書き出しの注意点としては、

• ロゴなど背景透過が必要な場所　→　png書き出し
• 通常の画像　→　jpg書き出し

といった感じでpng書き出しは重くなってしまうので、必要に応じてpng、jpgで書き出しましょう。

画像の書き出しは慣れていると良いのですが初心者には難しかったりすので、練習しておくと良いですよ。コーディング模写【実務が体験できるpsdデザインカンプからのコーディング】で練習しましょう。

また書き出した後に画像の軽量化を行うとより親切です。「JPEGmini」という有料のアプリがあるのですがかなり便利なので、興味のある方はググってください。

「HTMLで骨組み作る　→　CSSで整える　→　微調整」で注意すべき点は1点です。

MAMPなどの仮想サーバー上で制作するということ。理由は単純でローカルで制作しているとサーバーにアップした際に挙動がおかしくなったりする場合があるので。

ちなみにクラウドワークスで受注した案件はデザインカンプ通り制作するのが当たり前なので、定規ツールなど使ってデザインカンプからずれが無い様に制作しましょう。

ステップ3.　納品

納品は、

• サーバー納品
• ファイル納品

上記の２点があるかと思います。

ファイル納品は文字通りファイルで納品する方法でして、HTML、CSS、画像ファイルが入ったファイルを丸ごと納品します。納品する際の注意点として圧縮して納品するくらいかと。ちなみにMacからだとファイル名が文字化けしたりするので注意が必要です。

サーバー納品はクライアント指定のサーバーにファイルをアップロードします。

アップロードする際はFTPというツールを使うのですが、無料で使えるものならCyberduck、有料ならTransmitがおすすめです。

初心者向けおすすめFTPアプリ💡

有料なら
✅Transmit

無料なら
✅Cyberduck

✅FileZilla

制作会社でFileZillaを使わされてましたがしっくりこなかったです。理由は忘れました。正直何を使ってもいいですが、僕は有料版のTransmitを使っていて、デザインが綺麗で自動同期も出来るのでおすすめ😌

— シュウ@東京 (@shumarukiti) December 12, 2018

上記は僕のツイートですがFTPツールは色々試してしっくりくるものを探せばOKです。FTPでアップする際は、クライアントにFTPの接続情報を聞いておきましょう。

ステップ4.　納品後の修正・保守

納品後にクライアントから修正をお願いされることがあります。

基本的にはデザインカンプからの差異などを指摘された場合はすぐに対応修正しましょう。

逆にコンテンツの追加や新規ページの制作をお願いされた場合は、追加費用について相談してから仕事を受けましょう。

コーディング案件は経験あるのみ

ここまでコーディング案件の受注から納品まで解説してきましたが、とりあえず仕事を受けてみるのが良いです。

トライアンドエラーを繰り返して成長していくので、失敗を気にしていると成長はできないですよ。

考えすぎて仕事を受けないと学べることも無いので。

具体的にもっと知りたい方は、3万円の案件を受注して納品するまでの実体験をまとめたnoteがあるので読んでみてください。