2019年11月28日SHAREツイートシェアはてブLINEPocket目次コーディング案件の全行程。納品前の最終チェック納品・サーバーアップコーディング案件の流れのまとめコーディング案件を受注した後、実際にどのように案件を進めていくべきなのか不安な方も多いはず。「スキルがないって思われそう」と考えてしまい、結局納期ギリギリになってから質問をしたせいで、かなりご迷惑をおかけしてしてしまいました。(幸い、今でもこの制作会社さんからとはお付き合いがあります。)そんな僕でも、今では複数の制作会社の方から、継続的に案件がいただけています。そこで、この記事では、初案件を受ける前に知っておきたかったコーディング案件の流れと、継続案件につなげるためのポイントを惜しみなく解説していきます。「なかなか継続案件に結びつかない」といった方の助けに少しでもなれば幸いです。それではまいります!コーディング案件の全行程。コーディング案件を受けたところから、納品するまでの全行程を確認してみましょう。大まかに、以下の7つのステップに分けられます。納品前の最終チェック納品・サーバーアップそれでは、上記の各フェーズごとに詳しく確認していきましょう!クラウドソーシング・制作会社から案件を獲得コーディング案件で副業をしようと思っても、仕事がなければ元も子もないですよね。クラウドソーシングを活用したり、制作会社の方にメール営業をしたりして、案件を受注しましょう。初案件を受けるのが不安な方は、案件で困った時に相談ができるメンター的な方を見つけておくといいです。僕も初めて案件を受ける際には、見積もりの出し方や、複雑なデザイン箇所の実装方法など、諸々相談に乗ってもらっていました。僕でよければ、簡単な相談に乗れるので、いつでもDMしてもらって大丈夫です。案件を受注できたら、先方に見積もりの提出を行います。単価が決まっているクラウドソーシングでは、ここは不要ですね。制作会社案件であれば、この時点で仮のデザインデータを渡されることが多いです。それをみながら、ざっくりと価格感をお伝えしましょう。自分の時給を1,500円として、かかる時間が8時間であれば、12,000円という計算になりますね。駆け出しの場合は相場を無視してでも、実績とスキルをつけていく必要があるので、相場より安めに考えましょう。詳しい見積もりの算出方法や、僕の見積もりはこちらで解説を行なっています。見積もりのOKが出たら、デザイン確定済みのデザインデータが送られてきます。この確定デザインを確認して、「見積もりに変更がないか」と「疑問点の洗い出し」をしておきましょう。疑問点の確認をするこの時点で、分からない点は必ず先方に確認しておきましょう。「あとで聞けばいいや」と放置をしていると後々の自分の首を絞めることにつながります。ここでいう疑問点とは、例えば同じボタンに見えるが、サイズが微妙に異なっており、これは意図したものなのかどうか。スマホメニューを展開したデータが無いが、どのように実装をするか。hover処理は透過(opacity)でいいのか。抜けている仕様があれば、同時に確認をしておくといいでしょう。(Sassの利用の有無やOGPタグ設定、対応ブラウザなど)ここであらかじめ質問をしておくことで、発注者する側に安心感を与えることができます。スケジュールを提出する疑問点が解消されて、実際にコーディングが行える体制になったら、必ず日毎のスケジュールを提出しましょう。僕の場合だと、簡単にこのような提出を行います。修正対応・サーバーアップ先方があなたに初めての案件を依頼する場合、「あなたが本当に仕事ができる人」なのか、「納期に間に合うのか」不安なはずです。そこで、上記のようにスケジュールを作ることで、発注者側の不安を先回りして解決してあげましょう。提出したスケジュールは必ず守ってください。継続的に案件を受けたいのであれば、発注者側と信頼関係を築くことが必要です。案件に慣れてきたら、どうすれば相手がもっと仕事をしやすくなるか考えるようにしていきましょう。コーディング作業スケジュールをお伝えしたら、実際にコーディング作業に入っていきましょう。コーディングに入ると、デザイン確認では出てこなかった疑問点が多数出てくると思います。ここでも、疑問点は早めに確認するようにしましょう。疑問点は随時、確認を取る(提案ができるとなお良し)初めのうちは、デザインデータ通りのコーディングでいっぱいいっぱいかもしれませんが、慣れてきたら不明点はこちらから提案してあげると更に印象が良くなります。2通りを用意して、どちらがいいか確認を取る。言って、デザインに関わる提案を多くしてしまうと、生意気なやつだと思われてしまう可能性もあるので、提案を行うのは不明な部分にとどめておくのが無難です。納品前の最終チェック「コーディングが終わった、さあ納品だ!』。納品前のチェックは入念に行う最低でも、以下の点は必ず確認しておく必要があります。・誤字脱字・変な言い回しがないか文章はデザインデータからコピペをしていると思いますが、デザインデータの文章に誤字脱字がある場合もあります。誤字脱字や、伝わりづらい文章がないかどうか確認しておきましょう。・footerのリンクはきちんと設定していたのに、記事内のリンク設定を忘れていた。なんてことがよくあります。リンク切れをチェックするツールを利用してみてもいいかもしれませんね。・余白・文字サイズ・line-height・カラーコードなど数値のミスがないか。数値を正確に測ってコーディングをしているとは思いますが、指定が抜けている箇所がないか確認してみましょう。最小幅の320pxになった際に、2行にまたがる見出しには注意。line-heightを指定していないと、めちゃくちゃ見辛いです。言っても一つ一つ数値チェックするのは手間がかかりますよね。そんな時に便利なのが、パーフェクトピクセルというツール。クロームの拡張機能として利用できるのですが、デザインデータのキャプチャとコーディングしたサイトを重ね合わせてくれるので、ずれている箇所が一目でわかるようになります。詳しい使い方については、こちらのはにわまんさんの記事で解説されています。PerfectPixelを使えばデザインカンプを完全再現したコーディングができる!・文法エラーが出ていないか。HTMLの文章構造的にエラーが出ていないか確認をしておきましょう。こちらでチェックが行えます。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ソフト」というサーバーに接続してくれる便利なソフトを利用します。有名どころだと、「FileZilla」や「FFFTP」、「Cyberduck」などですね。どれも簡単に利用することができるので、詳しい使い方については検索してみてください。説明してきましたが、ここまでがコーディング案件の一連の流れになります。ある程度のイメージはついたでしょうか。実際に案件を進める上で、分からないことがあればなんでもDMで聞いてください!僕が分かる範囲であれば、アドバイスさせていただきます!コーディング案件の流れのまとめ記事を執筆している僕も、ある程度経験を積むまでは、「マクドナルドのバイトの方が時給はいいのでは、、、」という状態でした。初めは皆さんそんなものです。案件をやってみて、「やっと慣れてきたな。」という段階で初めて、「単価のあげ方」や「コーディングのさらなる効率化」にも頭が回るようになってきます。初めのうちはきついかもしれませんが、くじけずに頑張っていきましょう。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。