【副業】コーディング案件の流れと継続依頼につなげるための4ポイント

コーディング案件を受注した後、実際にどのように案件を進めていくべきなのか不安な方も多いはず。

僕の初めての案件は、制作会社の方からの案件だったのですが、疑問点があっても、

「これを聞いたら失礼かな…」
「スキルがないって思われそう」

と考えてしまい、結局納期ギリギリになってから質問をしたせいで、かなりご迷惑をおかけしてしてしまいました。(幸い、今でもこの制作会社さんからとはお付き合いがあります。)

そんな僕でも、今では複数の制作会社の方から、継続的に案件がいただけています。

そこで、この記事では、初案件を受ける前に知っておきたかったコーディング案件の流れと、継続案件につなげるためのポイントを惜しみなく解説していきます。

「これから初案件を受注する」
「なかなか継続案件に結びつかない」

といった方の助けに少しでもなれば幸いです。

それではまいります!

コーディング案件の全行程。流れをわかりやすく解説

早速ですが、まずコーディング案件を受けたところから、納品するまでの全行程を確認してみましょう。

大まかに、以下の7つのステップに分けられます。

  1. クラウドソーシング・制作会社から案件を獲得
  2. 見積もりの提出
  3. デザインデータの確認・疑問点の解消
  4. スケジュールを立てて提出する
  5. コーディング作業
  6. 納品前の最終チェック
  7. 納品・サーバーアップ

それでは、上記の各フェーズごとに詳しく確認していきましょう!

クラウドソーシング・制作会社から案件を獲得

コーディング案件で副業をしようと思っても、仕事がなければ元も子もないですよね。

まずは、クラウドソーシングを活用したり、制作会社の方にメール営業をしたりして、案件を受注しましょう。

初案件を受けるのが不安な方は、案件で困った時に相談ができるメンター的な方を見つけておくといいです。

僕も初めて案件を受ける際には、見積もりの出し方や、複雑なデザイン箇所の実装方法など、諸々相談に乗ってもらっていました。

僕でよければ、簡単な相談に乗れるので、いつでもDMしてもらって大丈夫です。
(Twitter: クメ@コーダー

見積もりの提出

案件を受注できたら、先方に見積もりの提出を行います。

あらかじめ単価が決まっているクラウドソーシングでは、ここは不要ですね。

制作会社案件であれば、この時点で仮のデザインデータを渡されることが多いです。

それをみながら、ざっくりと価格感をお伝えしましょう。

見積もりの算出方法は、自分の時給 × 総作業時間。
自分の時給を1,500円として、かかる時間が8時間であれば、12,000円という計算になりますね。

ただし、駆け出しの場合は相場を無視してでも、実績とスキルをつけていく必要があるので、相場より安めに考えましょう。

詳しい見積もりの算出方法や、僕の見積もりはこちらで解説を行なっています。

【保存版】コーディング案件の見積もりの出し方!格安受注は避けよう

デザインデータの確認・疑問点の解消

見積もりのOKが出たら、デザイン確定済みのデザインデータが送られてきます。

この確定デザインを確認して、「見積もりに変更がないか」「疑問点の洗い出し」をしておきましょう。

大切なポイント1 必ず疑問点の確認をする

この時点で、分からない点は必ず先方に確認しておきましょう。
「あとで聞けばいいや」と放置をしていると後々の自分の首を絞めることにつながります。

ここでいう疑問点とは、例えば

  • 同じボタンに見えるが、サイズが微妙に異なっており、これは意図したものなのかどうか。
  • スマホメニューを展開したデータが無いが、どのように実装をするか。
  • hover処理は透過(opacity)でいいのか。

などですね。

また、抜けている仕様があれば、同時に確認をしておくといいでしょう。
(Sassの利用の有無やOGPタグ設定、対応ブラウザなど)

ここであらかじめ質問をしておくことで、発注者する側に安心感を与えることができます。

スケジュールを立てて提出する

大切なポイント2 必ずスケジュールを提出する

疑問点が解消されて、実際にコーディングが行える体制になったら、必ず日毎のスケジュールを提出しましょう。

僕の場合だと、簡単にこのような提出を行います。

【スケジュール例】

 

19日 Topページコーディング

20日 Topページ修正・Aboutページコーディング

21日 Contactページコーディング

22~23日 修正対応・サーバーアップ

先方があなたに初めての案件を依頼する場合、「あなたが本当に仕事ができる人」なのか、「納期に間に合うのか」不安なはずです。

そこで、上記のようにスケジュールを作ることで、発注者側の不安を先回りして解決してあげましょう。

もちろん、提出したスケジュールは必ず守ってください。

継続的に案件を受けたいのであれば、発注者側と信頼関係を築くことが必要です。

案件に慣れてきたら、どうすれば相手がもっと仕事をしやすくなるか考えるようにしていきましょう。

コーディング作業

スケジュールをお伝えしたら、実際にコーディング作業に入っていきましょう。

コーディングに入ると、デザイン確認では出てこなかった疑問点が多数出てくると思います。

ここでも、疑問点は早めに確認するようにしましょう。

よくある疑問点としては、

  • ページ内リンクの飛び先
  • 中央寄せなのか、ずらしているのか判別しづらい
  • SP版のレイアウト構成(SP版デザインが支給されていない場合) などなど。

大切なポイント3 疑問点は随時、確認を取る(提案ができるとなお良し)

初めのうちは、デザインデータ通りのコーディングでいっぱいいっぱいかもしれませんが、慣れてきたら不明点はこちらから提案してあげると更に印象が良くなります。

簡単な例で言えば、ボタンのhover処理が支給されていなかった場合、

透過処理と、背景色・文字色変更の2通りを用意して、どちらがいいか確認を取る。と行った具合ですね。

かと言って、デザインに関わる提案を多くしてしまうと、生意気なやつだと思われてしまう可能性もあるので、提案を行うのは不明な部分にとどめておくのが無難です。

納品前の最終チェック

「コーディングが終わった、さあ納品だ!』

。。。

となる前に、必ず納品前チェックをはさみましょう!

大切なポイント4 納品前のチェックは入念に行う

最低でも、以下の点は必ず確認しておく必要があります。

・誤字脱字・変な言い回しがないか

文章はデザインデータからコピペをしていると思いますが、デザインデータの文章に誤字脱字がある場合もあります。

誤字脱字や、伝わりづらい文章がないかどうか確認しておきましょう。

・リンク切れがないか

header ・footerのリンクはきちんと設定していたのに、記事内のリンク設定を忘れていた。なんてことがよくあります。

リンク切れをチェックするツールを利用してみてもいいかもしれませんね。

・余白・文字サイズ・line-height・カラーコードなど数値のミスがないか。

あらかじめ数値を正確に測ってコーディングをしているとは思いますが、指定が抜けている箇所がないか確認してみましょう。

特に、最小幅の320pxになった際に、2行にまたがる見出しには注意。

きちんとline-heightを指定していないと、めちゃくちゃ見辛いです。

ただ、そうは言っても一つ一つ数値チェックするのは手間がかかりますよね。

そんな時に便利なのが、パーフェクトピクセルというツール。

クロームの拡張機能として利用できるのですが、デザインデータのキャプチャとコーディングしたサイトを重ね合わせてくれるので、ずれている箇所が一目でわかるようになります。

詳しい使い方については、こちらのはにわまんさんの記事で解説されています。

PerfectPixelを使えばデザインカンプを完全再現したコーディングができる!

・文法エラーが出ていないか。

HTMLの文章構造的にエラーが出ていないか確認をしておきましょう。

こちらでチェックが行えます。

W3C HTMLバリデーションチェック

W3Cというのは、Webに関する技術を標準化する機関のこと。

つまり、これでエラーが出なければ正しいHTMLの書き方をしているということですね。

・title・descrption・ogpは適切に設定されているか。

title、descriptionなどのmetaタグも適切に設定されているか確認しましょう。

また、ogpとはSNS上でそのページがシェアされた場合、設定されたタイトルやディスクリプション、画像をSNS側に伝えるタグのこと。

例を挙げると、twitterで記事をシェアした時、このように表示されていますよね。

これは、ogpタグがtwitterに対して、記事に設定されたタイトル、ディスクリプション、画像を伝えているからなんです。

ogpの設定に関しては、こちらの記事がわかりやすいかと思います。

OGPを設定しよう!SNSでシェアされやすい設定方法とは?

・ブラウザ対応ができているか。

クロームでうまく表示されていても、他のブラウザでは崩れてしまっていたなんてことも。。。

ブラウザ確認は必ず行なってください。

特に気をつけるべきは、IE(インターネットエクスプローラー)ですね。

macユーザーで、実機でIEの確認ができない場合は、先方にあらかじめ伝えておきましょう。

僕の場合は、事前に伝えているので、IEの確認は先方で行ってくれることになっています。

また、フォーム部分についても注意が必要です。

フォームに利用するパーツは、各ブラウザごとにデザインが異なっているため、適用されているデザインを全てリセットする必要があります。

こちらも、はにわまんさんの記事がとても参考になります。

フォームのCSSを初期化してオリジナルなデザインを再現しよう!

納品・サーバーアップ

さて、ここまできたらようやく納品です。

納品方法は、「サーバーアップ」「zipファイルでデータ送信」がほとんど。

僕のクライアント先では、サーバーアップした後に、zipでまとめてデータをお送りしています。

サーバーアップの際には、「FTPソフト」というサーバーに接続してくれる便利なソフトを利用します。

有名どころだと、FileZillaFFFTPCyberduckなどですね。

どれも簡単に利用することができるので、詳しい使い方については検索してみてください。

長々と説明してきましたが、ここまでがコーディング案件の一連の流れになります。

ある程度のイメージはついたでしょうか。実際に案件を進める上で、分からないことがあればなんでもDMで聞いてください!

僕が分かる範囲であれば、アドバイスさせていただきます!

コーディング案件の流れのまとめ

記事を執筆している僕も、ある程度経験を積むまでは、「マクドナルドのバイトの方が時給はいいのでは、、、」という状態でした。

ただ、初めは皆さんそんなものです。

とにかく案件をやってみて、「やっと慣れてきたな。。。」という段階で初めて、「単価のあげ方」「コーディングのさらなる効率化」にも頭が回るようになってきます。

初めのうちはきついかもしれませんが、くじけずに頑張っていきましょう。

初学者の方には、できる限りサポートもさせていただければと思っているので、気軽にDMしてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です