iSara WEB制作

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

投稿日:2019年4月12日 更新日:

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

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

担当講師:タカキ(@kutarosan33)さん

講義内容は基本、以下のブログ記事と同じです。

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

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

読んだことない方はぜひ!これで初案件の不安も少しは減るはず。

TOTO
ミスの数は信用喪失の数

GIGLIO
名言キターーーー

Day 5講義内容

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

この記事は以下のような方にオススメです。

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

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

コーダーの仕事の流れ

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

1. デザインカンプの受け取り

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

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

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

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

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

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

3. コーディング

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

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

例えばh2見出しやボタンなど最初にどれだけ共通部分を見つけ出せるかが効率化のカギです。

4-1 各種検証

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

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

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

信・用・皆・無!!!!

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

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

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

①②は、はにわまんさんの記事にもありますがタカキさんはCSSの方はあまり使っていないそうです。HTMLと違ってCSSは見た目が崩れているかどうかで判断できてしまうからです。

④のPerfectPixelについて、カンプ指定の横幅に合わせてピクセルパーフェクトをコーダーは目指すわけですが、タカキさんは「レスポンシブが当たり前の時代(ユーザーがカンプ指定の横幅で見る確率の方が低い)に果たして必要なのか?という考えのようです。

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

4-2 ブラウザチェック

5大ブラウザは必ずチェック

  • Google Chrome
  • FireFox
  • Safari
  • Microsoft Edge
  • Internet Explorer

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

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

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

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

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

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

Parallels Desktopの導入と使い方に関するタカキさんの記事はコチラ

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

VSCodeってこんなに便利!

5. 納品 (サーバーアップロード)

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

FTPソフトなら以下

失敗談

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

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

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

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

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

まとめ

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

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

案件がまだ、という方はタカキさんのブログをしっかり読んで失敗してください!笑

5thメンバーリスト

講義にもありましたが、もしあなたがWEB制作やフリーランス・ノマドエンジニアを目指しているなら追いかけるべきは少し前を走っている人達です。そう、我々iSara5thメンバーですw!

というわけでTwitterのメンバーリスト(全21名)を作成しましたので、よかったらフォローお願いします。

そして #iSara5th のタグで追いかけてみてください。

リストはコチラ

5thメンバーブログ

僕以外にもブログで発信しているメンバーがいます。ぜひチェックしてみてください。

おわり

プロフィール

今後の発信予定

  • 毎日の現地講座
  • 現地アクティビティー
  • 事前学習期間まとめ
  • 聖地・iSaraハウス
  • ZZZ Hostel
  • 5thメンバー紹介
  • タイでの生活について

iSaraマニアの視点から発信を継続していきますので、遊びに来てください。

Live A Life You Will Remember!

資料請求はこちら

-iSara, WEB制作

執筆者:


comment

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

CAPTCHA


関連記事

【iSara5期/Day 15】フリーランス失敗談

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 15-2コマ目は「フリーランス失敗談」です。 これはiSaraからの歪んだ愛情だそうです。笑 担当 …

【コピペで実装】ポートフォリオサイトに使えるアニメーション15選

TOTO ポートフォリオサイトが完成したので、参考にしたサイトをまとめてみました! GIGLIO アニメーションだけじゃないけどな 【Day 128】 \ ポートフォリオサイト公開 / 何のアイデアも …

【iSara5期/Day 11】ノマドの生き方とビジネスマナー

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 11-1コマ目は「ノマドの生き方とビジネスマナー」です。 テーマはスキルを身に着け、ノマドとして自 …

【iSara5期】事前学習期間まとめ

ノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 iSara応募から合格、日本での約1ヶ月の事前学習期間を振り返ってみたいと思います。 TOTO 心はいつだってシンプル …

【iSara5期/Day 6】フリーランス営業術

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 6-2コマ目は「フリーランス営業術」です。 1コマ目はチームで行ったワークの発表でした。 こちらは …

プロフィール

HEBOCHANS

いつも犬と一緒にいるために
プログラミングを右手に、
ブログを左手に。

爆遅でも止まらない36歳ミニマリストが
フリーランスを目指す全記録。

TwitterのFollowボタン

Twitterのタイムライン