デザインとコーディング、分業時の注意点

社内で外注に発注するのはいいけど、尻拭い的な作業ばかり増えて納得いかないことが多いので、自分なりに注意点をまとめてみました。

————————————
外注：デザイン
内部：実装
————————————
・仕様書
　企画・デザインの過程で決まったこと、実装・運用で想定していることなど細部まで仕様書に落とし込んでいるか
　フォントのサイズ・種類、色指定、幅・高さなどの指定、可変部、固定部、ライン幅、など元画像から読み取る必要がないように。
　共通パーツと独自パーツの分類。できるだけ共通化すし、どのパーツが使い回せるか明確にする

・デザインのチェック
　更新・運用を考慮したデザインになっているか。
　画像加工のスキル、HTMLのし知識がなくても更新可能か。
　簡潔な作業で更新できるか
　可変幅の箇所はどう処理されるか

・作業範囲を明示
　＜画像＞
　画像の切り出しなど、実装側が画像を加工しないで済む状態にする
　※部品単位で画像を切り出してくれれば、スプライトも対応しやすい
　　逆にPSDデータからひとつひとつ分解していくのは手間がかかる
　　コーディングに合わせて調整が必要になるがゼロから切り出すより全然マシ。
　デザインの元PSDデータまで納品されるか（こちらで修正変更可能か）

　＜テキスト＞
　プレーンなテキストデータで納品されるか
　デザインしたPSDデータから抽出などという面倒な手間は省く
　（例：デザイン案の時点でテキスト修正などかかり、PSDでしか修正部が反映されていないなど）
　※構成案はHTMLで作成してもらうと、後行程の作業がラク。
　　またリンク、可変部など、動的な部分も判りやすい

・作業時間の見積もり
　デザインさえ出来れば、（紙、印刷のイメージで）あとはすぐに完成すると思われることがある。
　ページごとに再度テキストの流し込み、マークアップ、スタイルシート、動的表現の実装、など

————————————
外注：コーディング
内部：デザイン
————————————
・構成案をHTMLで作成
　テキスト入力、リンク設定などの工数が省ける
　動的な箇所もイメージしやすい

・コーディングを想定した形で画像素材を納品

・コーディングのレベルチェック
　テーブルレイアウトなど古い手法ではないか
　画像はCSSスプライトされているか
　角丸などの処理の条件（CSS3で可とするか）
　※事前に要件として出す

・運用、更新のしやすさ
　コメントタグなど更新の際に判りやすくなっているか

・動的な箇所はいろいろ試してみる
　バグ探しくらいのつもりで

★できるだけこちらの要望を明確に伝える
　「無理だろう」「こちらでやろう」と思わず全部やってもらうつもりで。

本来ならWEBの知識があるディレクターが事前事後にチェックしてくれればいいのだが、外注するという場合は知識のない担当者が発注し、そのまま進んでしまうことが多い。