Webコーダーの仕事内容を一言で表現すると、
デザイナーが作成した「デザインカンプをHTMLやCSSで再現すること！」です。
これができれば仕事として成立します。
この記事では、フリーのWebコーダーであるわたしが行っている仕事内容や仕事の流れなどを紹介していきます。
これからWebコーダーを目指している方は自分ごととしてイメージしてみてください。そして自分に足りない部分を洗い出してもらえたらと思います。
はにわまんWebコーダのお仕事は、デザイナーさんが作ったデザインカンプをHTMLやCSSで再現することです。
Webコーダーの仕事はデザインカンプをHTMLとCSSで再現すること
タイトルとほぼ同じ見出しで恐縮ですが、Webコーダーの仕事は「Webコーダーの仕事はデザインカンプをHTMLやCSSで再現こと」これに尽きます。あと、JavaScriptで簡単な動きの再現もWebコーダーの仕事になりますね。
これが、Webコーダーとしての最低ラインになります。
デザインカンプってなに？
デザインカンプが分からない方もいるかもしれないので、少し説明します。
デザインカンプとは、Webデザイナーがクライアントに対して完成イメージを共有するため見せる見本図のようなものです。ここで完成後のWebデザインが確定するわけです。
なので、クライアントからすると、デザインカンプですり合わせた内容がそのままWebサイトとして完成するという認識でいます。Webコーダーは、Webデザイナーとクライアントとの間で確定したデザインカンプを、Webサイトとして再現するというお仕事になります。
デザインカンプは、Photoshop、Illustrator、XDで作成されることが多く、わたしたちWebコーダーは、それらのデザインを可能な限り再現してあげる必要があり、再現度の高さがコーダーとしての質の高さとも言えます。
Webコーダーの仕事をスキルとして大きく分けると2つだけです。
Photoshop、Illustrator、XDから必要な値や画像を取得できる
デザインカンプを再現するためには、各種値を把握できる必要があります。Webデザイナーではないので、Photoshopなどのツールを使いこなせる必要はありませんが、最低限の値を取得できるスキルはWebコーダーとして必要です。
? Photoshopからコーディング時の「フォント」の値を取得
? パネル： ウインドウ → 文字
?️ ツール：移動ツール（もしくは文字ツール）で選択1️⃣ font-family（とfont-weight）
2️⃣ font-sizeとline-height
※ 行間 = 行送り / 文字サイズで計算したりします
3️⃣ color pic.twitter.com/2oc6iAeCTn— はにわまん (@haniwa008) 2018年8月25日
上記のツイートでは他の値の取得方法も連投しているので、気になる方はツイートを開いて確認してみてください！（ツイート内の日付のリンクで開ける）
あとは、デザインカンプ内に埋め込まれている画像を取り出すこともコーダー側の役割と認識されています。デザインカンプから画像を取得する方法も知っておく必要があります。
HTML、CSS、JavaScriptで再現できる知識
デザインカンプから値や画像を取得できるだけではどうにもなりません。やはりWebコーダーのメインは、HTMLやCSS、JavaScriptでデザインをWebサイトとして再現できるスキルです。
正直な所、コーダーの基本的なスキルとしては、ガチで勉強すれば1ヶ月から半月ほどで身につくはずです。見方を変えれば、Webコーダーという職種は誰でもなれる仕事とも言えます。
なので、コーダーという職については向き不向きのレベルの話になるかと思います。めっちゃ苦痛に感じる人もいるので。わたしは楽しいので向いている方かもしれません。
Webデザインにはパターンがあります。そういうパターンを把握して、手を動かして書きまくれば仕事に必要なコーディングスキルは身についていくかと思います。
よくあるパターンについては下記の記事でまとめてますので、自分のスキルと照らし合わせてみてください。楽勝って思える人は仕事としても受けられるはずです。
https://haniwaman.com/lp-coding/
Webコーダーの仕事の流れ
Webコーダーの仕事の流れをザックリとまとめてみました。Web制作における末端ポジションになります。
（見積もりや請求書の部分はフリーランスのWebコーダーに限った話になるかと思います）
見積もり & スケジュール調整
Webディレクター、もしくはWebデザイナーから仕事の依頼が来ます。「こんな感じのデザインカンプで、全部で○ページです。レスポンシブ対応でお願いしたいのですが、見積りしもらえますでしょうか？」みたいな感じです。
カンプを見て、おおよそのボリュームや難しさを把握して、あとは自分の単価と照らし合わせて見積もり額を出します。ちなみにわたしだと、以下のよう感じをベースとしています。こういう価格表を作成しておくと見積もりがブレませんし返信も早くできます。
| コーディング（下層） | 7,000円～ |
|---|---|
| コーディング（トップ） | 14,000円～ |
| コーディング（LP） | 30,000円～ |
スケジュールについては、自分の作業スピードや他のタスクを考えて決めるといいと思います。自分で提示した納期に間に合わないとかはあり得ないので、急ぎでなければ、余裕をもったスケジュールを設定した方が無難です。
あとは、コーダーのポジション的に突発的に来ることも多かったりします笑
その場合はスケジュールうんぬんよりも、やれるかやれないかみたいな話になるかもしれません。
デザインデータの受け取り
案件がスタートすると、デザインカンプが渡されます。基本的にWebデザイナーから受け取るのはこれだけです。あとは、動きで表現したほしい部分の指示（テキストベースが多い）やコーディングルールなども、同時に受け取ったりします。
一通り受け取ったら、「じゃあ後はよろしく！」的な感じです。
コーディング
デザインカンプを受け取ったら、Webコーダーとしてのお仕事スタートです。デザインカンプのデータを元に、HTML、CSS、JavaScriptを駆使しながら、デザインをWebサイトとして再現していきます。
テスト
コーディングが終わったらテストしておきましょう。主なチェック項目としては、以下の記事でまとめているので、気になる方は開いてチェックしてみてください！
https://haniwaman.com/coding-test/
大枠の目的としては、デザインカンプの再現です。テストを行うことによって、ちゃんと再現できているかを確認することがでいます。テストを怠けると納品後の指摘がとんでもない量になります。依頼側からすると「こんなにチェックが大変で手戻りも多いならもうこの人はいいや…」となり継続した依頼に繋がりません。
コーダーとしての質を守るためにも、コーディング後のチェック（テスト）はしっかり行うべきだと思います。
納品
コーディングとテストが完了したら納品します。ただし、「納品して終わり」ということは滅多になくて、ほとんどの場合は修正依頼が来ます。
修正
事前の指示通りのコーディングを行い、かつデザインもちゃんと再現できているのであれば、微調整といった感じになるかと思います。この修正のやり取りを少なくするためにも、コーディングのベースの知識であったり、しっかりとテストしておくことは重要です。
基本的には、依頼側が納得するまで修正対応を行います。事前に言われていなかったり、言いがかり近い内容であれば、交渉すべきかもしれませんが。
請求書の作成
納品が終われば、請求書を作成して渡します。PDF形式で渡せばOKです。
振込み
そして、大事なのがちゃんと振り込まれるかという部分ですね。請求書を作成してから、1ヶ月ほどのタイムラグがあります。企業などであれば締め日とかもあったりして…。
日々の仕事に追われていると、どこが振り込まれていないか忘れがちなので、何かしらの方法で管理しておくといいかもしれません。
（そんなわたしは管理できていないので、振込みがなくても気づかない可能性が高いです…笑）
不安をなくすには実践あるのみ！
HTMLやCSSを勉強している人は多いように感じます。わたしもそうでしたが、勉強はしているものの、「どれくらいできれば仕事して大丈夫なのか？」は気になる部分だと思います。
この記事の中でずっとお伝えしているように「デザインカンプをHTMLやCSSで再現すること！」がWebコーダーの仕事です。なので自信を持つには、デザインカンプを再現するという経験を詰むことが一番早いのかと思います。
わたしはコーダーとしての経験を積みたかった時に以下のようなサービスを利用していいました！
※ サービス提供者の方がお亡くなりになられたので、現在はレビューを受けることはできません。
枠が少ないのにわたくし購入しちゃいました。みなさまスミマセン！
課題「デザイン通りに作る」｜タイ好きフリーランスのつぶやき @katayamada_Y｜note（ノート） https://t.co/M8HEiHdns9
— はにわまん (@haniwa008) 2018年5月1日
デザインカンプからコーディングできるサービス
自信のなさは経験のなさであることが多いです。不安は経験を重ねることで減っていきます（実体験）
仕事としてやっていけるか不安な方は、以下のサービスを活用してみてください。
XDからのコーディング
→ Progateのhtml、cssがおわった方へ｜ちづみ｜note
XD、Illustrator、Photoshopからのコーディング
実はわたしもデザインカンプからのコーディングに慣れる目的のサービスを出しています。難易度は低めなので、気軽にチャンレンジしてみてください！
→ Photoshop、Illustrator、XDからのコーディングに慣れよう！
それでも不安が消えない方は、自力で勉強よりはWeb制作会社に入って経験を積んでいくのもありかと思います。
おわり
Webコーダーの仕事内容、仕事の流れを紹介していきました。最後は、不安を解消する方法というちょっと脱線した感じがしますが笑
仕事内容としては「デザインカンプをHTMLやCSSで再現すること！」
最低限のスキルとしては、
- Photoshop、Illustrator、XDから必要な値や画像を取得できる
- デザインをHTML、CSS、JavaScriptで再現できる知識
です。
Webコーダーを目指している方は、仕事内容や流れを把握して今の自分の状況と比較して足りない部分を埋めていきましょう！
