ISARA

【iSara5期/Day 5】コーダーの受注から納品の流れ

2019年4月12日

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の（@HEBOCHANS）です。

Day 5-2コマ目は「コーダーの受注から納品の流れ」です。

担当講師：タカキさん

講義内容は基本、タカキさんの今は亡きブログ記事で構成されていました。

読んだ当時の自分のツイートにあるように、「コーダーの仕事の流れ」がまとまってる記事はそれまでありそうでなかったので大変ありがたかったのです。

それからタカキさんが特別な人になったのは言うまでもありません。笑

TOTO
TOTO
ミスの数は信用喪失の数。
GIGLIO
GIGLIO
名言キターーー！

Day 5講義内容

  • はにわまんのWordPress講座 「管理画面の拡張編」
  • コーダーの受注から納品の流れ

この記事はこんな人にオススメ

  • iSaraに興味がある。
  • 応募したけど落ちた…。次こそは！
  • コーダーの仕事の流れがすべて知りたい。

コーディング案件の納品方法

コーダーの仕事の流れ

  1. デザインカンプの受け取り
  2. 画像の書き出し & データの取得
  3. コーディング
  4. 各種検証
  5. 納品 (サーバーアップロード)

①デザインカンプの受け取り

まだまだXDよりPhotoShopやIllustratorで作成されたカンプの方が多いそうです。

無料のXDでもpsdファイルやaiファイルを開くことは可能ですが、ズレることがあるためコーダーはPhotoShopとIllustratorも使えるように（購入）しておきましょう。

FireworksやDreamweaver案件は大変そうにしているのを見てきたので、受けないそうです。

②画像の書き出し&データの取得

画像の書き出し方法に関しては「はにわさんの記事を読めばオッケー」だそうです。笑

3パターンすべて用意されています。さすが神！

Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode

WebコーダーはPhotoshopを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 この記事ではPhotoshopからコーディングする際に必要な値や画像を取得する方法を紹介しています。

Illustratorのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode

WebコーダーはIllustratorを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 （Illustrator自体は、わたしはほぼ使えません...＞＜） というのも、Webデザイナーさんが作成したデザインカンプを元にコーディングするのがコーダーのお仕事だからです。

Adobe XDのデザインカンプからコーディングに必要な画像や値を取得する方法 | HPcode

WebコーダーはAdobe XDを完全に扱える必要はありませんが、コーディングに必要な値やデータを取得できなければなりません。 この記事ではXDのデザインカンプからコーディングする際に必要な値や画像を取得する方法を紹介していきます。

③コーディング

  1. 共通のCSSを書き出す。
  2. HTMLを書く。
  3. CSSを書く。
  4. アニメーションをつける。

コーディングの大まかな流れは上記です。

ポイントは「①共通のCSSを書き出す」です。

とりあえず書き始めるのではなく、「h2見出し」や「ボタン」など最初にどれだけ共通部品を見つけ出せるかが効率化のカギです。

④-1 各種検証

コーディングより大事なのが「検証」です。

「ミスの数は信用喪失の数」

ちなみに事前学習の課題の提出先がまさにタカキ先生だったのですが、自分は完成したつもりで提出した課題に修正が10箇所あったことがあります。

信・用・皆・無！！！！

何を検証すれば良いか？についてはまたまた、はにわまんさんがまとめてくれています。

Webコーディング後にチェック（テスト）しておくべき20のチェックポイント！ | HPcode

Webコーディング後に行っておきたい、チェック項目をまとめました。 プログラマーとかなら必ずテスト指示書を作りテスト行いエビデンスを取得して、って流れが基本かと思いますが、コーダーってそういうのやっているのかと思いまして...。本来はコーダーもそういうのやるべきなのではないかと...。 プロとしてやるからには、品質の担保はめちゃくちゃ重要です。

検証ツールは下記が有名です。

  1. W3C HTML検証
  2. W3C CSS検証
  3. HTMLエラーチェッカー → Chrome拡張機能
  4. PerfectPixel → Chrome拡張機能

①②は、はにわまんさんの記事にもありますが、タカキさんはCSSの方はあまり使っていないそうです。

HTMLと違ってCSSは見た目が崩れているかどうかで判断できてしまうからです。

④PerfectPixelについて、カンプ指定の横幅に合わせてピクセルパーフェクトをコーダーは目指すわけですが、

タカキさんは「レスポンシブが当たり前の時代（ユーザーがカンプ指定の横幅で見る確率の方が低い）に果たして必要なのか？」という考えのようです。

どこまでピクセルパーフェクトを目指すかはデザイナーさん次第ですが、borderの太さやshadow、boxの大きさ等は1px単位で合わせるものです。

フロントエンドエンジニアにおすすめのChrome拡張機能15選！ | HPcode

コーダーとかWebデザイナーとかフロントエンドエンジニアとか言葉の定義は様々ですが、WordPressを扱ってサイト運営する人はフロントエンドエンジニアに属するだろうということで、フロントエンドエンジニアにおすすめなChrome拡張機能を片っ端から紹介していきます！ 他サイトに使う拡張機能 わたしが主に他サイトの情報を得るために使っている拡張機能です。

④-2 ブラウザチェック

5大ブラウザ

  1. Google Chrome
  2. FireFox
  3. Safari
  4. Microsoft Edge
  5. Internet Explorer

Chromeの「検証」やSafariの「開発」は信用してはダメ、実機がすべてだそうです。

たしかにあの検証は何だったんだ！ってくらい崩れますよね…。

タカキさんも、はにわまんさんもこういう仕事をしているからといって、検証用のデバイスは持っていないそうです。

Macしか持っていない場合はクライアントにWindowsでのチェックはできないことを最初に伝える（契約する）のがベターですが、

タカキさんはParallels Desktopを使っています。

Boot Campも有名ですが、いちいち再起動せずMac ↔ Windowsを切り替えられるのは便利です。

MacにWindows環境を！「Parallels Desktop」でEdgeもIEも動作確認できます | HPcode

わたしは主にWebコーダーとしてお仕事させてもらっているのですが、地味にストレスに感じていたのがブラウザごとの動作確認。 主要ブラウザとして以下の5つがあります。 Chrome Firefox Safari IE Edge この「5つの環境を1台のPCで確認したい！」ということで、Macに仮想Windows環境を構築できる「Parallels Desktop」を入れました。

コーダー必須アイテムのテキストエディタですが、iSaraではVSCode一択です。

WebコーダーがVSCodeで使いたいショートカットと設定、拡張機能 | HPcode

Webコーダーのわたしが普段利用しているVSCodeでの「設定」と「ショートカット」、「拡張機能」についてまとめました。 使ってないものがあれば積極的に取り入れていきましょう！

⑤納品（サーバーアップロード）

タカキさんの経験では納品はサーバーへのアップロードが1番多いそうです。次にZip形式。

FTPソフトなら下記がオススメです。

失敗談

最後に質問に答える形で失敗談を披露してくれました。

下記はタカキさんの体験だけでなく、iSara卒業生の失敗談も含みます。

iSaraの講義でもおそらく失敗談を延々と語る授業が最終週にあるはずです。笑

  • 普通に納期に間に合わない。
  • ハッキングされた。
  • 時給100円ベースになっちゃった。
  • 終わってみたらマイナス2万円だった。
  • 奴隷契約を結ばされた。

最初（特にクラウドソーシング）はだいたい失敗するそうです。

まとめ

タカキさんの授業はこの1コマだけです。

4期では自由参加の講義という形で行われたみたいですね。

案件がまだ、という方は本記事をしっかり読んで失敗してください！笑

人気記事【全46本】プログラミングスクール『ISARA』ブログまとめ

-ISARA