WEBエンジニアのがむしゃらワーカーしゅう丸(@shumarukiti)です！
この記事では、
という疑問にお答えします。
先日、こんな質問をいただきました。
と、上記のような質問が来ました。
確かにProgateで勉強して初案件を受注してもわからないことだらけですよね。
ちなみにこの記事を書いている僕はWEBエンジニア歴1年半ほどで、月に7桁前後稼いでいます。初案件はクラウドワークスでの3万円のWordPress制作でした。受注から納品まで終始戸惑ってばかりでした。
そういった背景の僕がコーディングで初案件を受注から納品までの流れについて解説します。プラスαで初心者が受注すべき案件内容についても語ります。
〜本記事の内容〜
- コーディング案件の難易度・単価・受注方法【初心者向けおすすめ案件】
- コーディング案件の受注から納品までの流れ【4ステップ】
目次
コーディング案件の難易度・単価・受注方法【初心者向けおすすめ案件】
初心者はそもそもどんなコーディング案件があるのかわからないですよね。
コーディング案件はざっくり下記の通り。
| 案件種別 | 難易度 | 単価 |
|---|---|---|
| LP制作 | 3/5段階 | 10,000〜50,000円 |
| 静的ページコーディング | 1/5段階 | 3,000〜10,000円 |
| WordPressサイト制作 | 4/5段階 | 30,000〜200,000円 |
| 運営・保守 | 2/5段階 | 5,000〜10,000円 |
ちなみに上記案件種別、単価は初心者が初案件の受注で良く使うお仕事マッチングサービスのクラウドワークスを元にしています。必ずしもこの単価ではありませんが、ざっくり参考にしてみてください。
初心者はLP制作のコーディングが無難
ProgateでHTML、CSS、jQuery、Javascriptあたりを勉強した人は、LP制作を受注すると良いですよ。
レベル感から見てもちょうど良いかなと。がっつり制作するのが不安だという方は、静的サイトのコーデイングか運営・保守の案件を取るのもありですよ。
またWordPress案件は単価が高いですが、Progateで勉強しただけのレベル感ですと納品までは難しいです。とりあえず慣れてからWordPress案件を受注すると良いですよ。
コーディング案件の受注から納品までの流れ【4ステップ】
案件受注から納品までの流れは下記の4ステップです。
ちなみにクラウドワークスでLP制作案件を受注したことを想定しています。
- 案件提案・受注
- 制作
- 納品
- 納品後の修正・保守
それぞれのステップで初心者が気をつけるべき注意点についても解説します。
ステップ1. 案件提案・受注
まずは案件を受注しなければ始まりません。初心者がコーディング案件を受注する際は、クラウドワークスを使うことが多いです。LP制作の案件なんかはゴロゴロ転がっているので、初心者が経験を積む場としては最適ですよ。
ちなみにプロフィールの設定が重要になってきまして、【クラウドワークス】月5万円分の案件を受注するプロフィールの書き方【裏技】で詳しく解説しています。
クラウドワークスでコーディング案件を受注する際の注意点は以下の通り。
- 納期
- デザインカンプの種類（psd、ai、XDなど）
- 修正事項があった場合の追加費用について
- 納品方法について
- 疑問点について
上記事項は必ず確認しておきましょう。
確認する意味としては、自分でも案件を受注できるかどうか判断するため。上記事項を確認して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を使っていて、デザインが綺麗で自動同期も出来るのでおすすめ😌
— しゅう丸@WEBエンジニア (@shumarukiti) December 12, 2018
上記は僕のツイートですがFTPツールは色々試してしっくりくるものを探せばOKです。FTPでアップする際は、クライアントにFTPの接続情報を聞いておきましょう。
ステップ4. 納品後の修正・保守
納品後にクライアントから修正をお願いされることがあります。
基本的にはデザインカンプからの差異などを指摘された場合はすぐに対応修正しましょう。
逆にコンテンツの追加や新規ページの制作をお願いされた場合は、追加費用について相談してから仕事を受けましょう。
コーディング案件は経験あるのみ
ここまでコーディング案件の受注から納品まで解説してきましたが、とりあえず仕事を受けてみるのが良いです。
トライアンドエラーを繰り返して成長していくので、失敗を気にしていると成長はできないですよ。
考えすぎて仕事を受けないと学べることも無いので。
具体的にもっと知りたい方は、3万円の案件を受注して納品するまでの実体験をまとめたnoteがあるので読んでみてください。
