コーディング製作のワークフロー
はじめに
WebDesigning2013年4月号読んで、それのコーディングルールを基にコーディング製作のワークフロー作成した。
ワークフローについて書くのは2回目かな？またしばらくたったら違う順序や新しい項目、削る項目が出てくると思うけどとりあえず今はこれで。
タイトルナンバーがおかしいけど..あれして下さい。
製作全体のフロー
- 仕様と要件の確認
- データ（デザイン、サイトマップ）の確認
- 工数計算、スケジューリング
- コーディング準備（脳内コーディング）
- 工数計算、スケジューリング
- 画像スライス
- サイトの大枠、パーツテンプレート（モジュール）コーディング
- 下層ページコーディング
- フォームの実装
- ブラウザチェックと修正
- Review
- JavaScript, CMS, PHP 等の実装
- 残下層ページコーディング
- 最終チェック
- 納品、サイト公開
仕様と要件の確認
頂いたインセプションデッキ、仕様書などを確認し、企画全体を把握する。自分で理解しきれない用語や文章の意味は企画者や担当者に聴き、仕様を理解しきれずに進めることをしてはいけない。
納期日の確認を行う。
データの確認
- 1ファイルあたりの容量
- IMGファイルの形式
- IMGファイルの劣化の許容範囲
- 最低ページ表示速度
- ディレクトリ構造
- 納品形態（分割、一括）
- ファイル（HTML・PHP）拡張子
- 文字コード
- 改行コード
- パス（ルートパス、ドキュメントパス、絶対パス）の指定方法
- DOCTYPEの形式
- XML宣言の有無
- CMSの利用
- ソースインデント（Tab、半角スペース、ネスト、インデントなし）
- 受け取るデザインファイル
- ターゲットブラウザ
コーディング準備
HTMLの構造を脳内で想像しながらデザインデータを確認する。
工数計算、スケジューリング
工数を計算してSpreadSheetに記載する。工数は人日で0.5刻みとする。下記リストの「コンテンツ」以下は「少項目」内で設定。
- 大項目（基本設計、フロント、管理画面など）
- 中項目（グローバルナビ、マイページなどのナビゲーションの最上位）
- 少項目（ナビゲーションの下層ページ）
- コンテンツ（少項目毎のコンテンツ）
- 機能（検索やソート、バリデーション、メッセージ受送信やCSVダウンロードなど）
- フェーズ（取り掛かり優先度）
- ステータス
- 担当
- 作業工数（UI設計、UX設計、デザイン作成、フロントサイド実装、サーバーサイド実装、テスト、ドキュメント作成）
- 工数合計
スケジュールは別プロジェクト、タスクとの兼ね合いを見てBacklogに登録していく。
プロジェクト全体のスケジュールはガントチャートで確認する。
画像のスライス
無駄な余白を含まず、画像幅のみをスライスする。
単一の物体のみをスライスする。アイコンとイラスト・写真のセットなどでスライスを行わない。
テキスト箇所はCSSで不可能な装飾を除き、すべてHTMLで表示する。
ボックスやテキストについているシャドウは可能であればCSSで表示する。
サイトの大枠、パーツテンプレート
サイトの大枠のレイアウトとなる箇所を作成する。
ex) ヘッダー、フッター、サイドメニュー
複数のページで共通していて、モジュール化できそうなパーツを作成する。
ex) タブ、HeadingSet、写真フレーム、ボタン
強弱フォントスタイル、リンクフォントスタイルなどの共通箇所を作成する。
ex) 強調、リンク、リンクhover・active、注意書き
下層ページコーディング
少項目内のコンテンツを確認し、静的ページ2枚を作成する。
フォームの実装
入力画面の作成を行う。バリデーション実装を含める。 フォームステップの実装や、ナビゲーションを排除するのであれば、レイアウトから取り除いた実装も行う。
ブラウザチェックと修正
ターゲットブラウザ、各バージョンでここまでに作ったもののチェックを行う。
Review
レビュー規約は別途参照。（まだ作ってない）
JavaScript, CMS, PHP 等の実装
JavaScriptを使った動的箇所の実装や、CMSの導入、PHPでtplファイルなどを作成して大枠テンプレートを管理する。
残下層ページコーディング
残りの下層ページを作成していく。レビューを挟む頻度はレビュー時間が1時間で済むと思う範囲で入れる。
最終チェック
ターゲットブラウザ、各バージョンで最終チェックを行う。
表示確認だけでなく、フォームバリデーションやJavaScript等の動的箇所のチェックも合わせて行う。
ファイル形式やページ表示スピードチェックも行う。
納品、サイト公開
納品、もしくはサイト公開まで行う。
