CHAPTER 08 6 / 14
コーディングの進め方
デザインを動くサイトにするコーディング工程を、ディレクターが見守るには。進み具合の見える化と、責めない声のかけ方の基本を紹介します。会話と具体例つきで、やさしく読めます。
約5分で読めます
ひなた
ケンジ 
段取り教室の目次（章と記事の一覧）
1. プロジェクト管理ってなに？
2. 課題管理入門
4. ガントチャート入門
5. 見積もりとスケジュール
6. 進捗管理と報告
7. チームのコミュニケーション
8. Web制作の現場で
この記事でわかること
- コーディングを見える化する方法がわかる
- 「できた」と「確認済み」の違いがわかる
- 責めない声のかけ方がわかる
「順調です」と言われたのに、いざ見せてもらうと全然できていなかった。コーディングは、そんなすれ違いが起きやすい工程です。
コーディングは「見えにくい」工程
デザインは画像で見えますが、コーディングは、進んでいるのか、止まっているのか、外から見えません。「順調です」と言われても、判断できないことがあります。
ディレクターの仕事は、細かく管理することではなく、進み具合が見える状態を作ることです。
進み具合は「ページ単位」で見る
「全体の 7 割」ではなく、「10 ページ中 7 ページが完了」という数え方のほうが、事実が伝わります。
この図は、10 ページの内訳を棒で比べたものです。「完了」と「確認待ち」が分かれているのが、ポイントです。
| 状態 | 意味 |
|---|---|
| 未着手 | まだ手をつけていない |
| 作業中 | 作っている |
| 確認待ち | できた。デザイナーや自分の目で見てほしい |
| 完了 | 確認も終わった |
「できた」と「確認も終わった」を分けるのが大切です。「できた」のあとに、デザインどおりかを確認する工程があります。
たとえば、こんな画面です。完了の数と、ステータス別の内訳を、1 枚で見られます。
- 左上の円と「完了 3 / 19 件」で、全体の進み具合がわかります。
- 「ステータス別」のドーナツで、未対応・処理中・確認待ち・完了の数を見比べられます。
声のかけ方
エンジニアに聞くときは、責めている言い方にならないようにします。
- 「いつ終わりますか？」より「いま気になっていることは、ありますか？」
- 「ほぼって、何割ですか？」より「残りは、どのページと、どの作業ですか？」
- 詰まっていそうなら「手伝えることはありますか？」
質問を待つより、障害になりそうなことを聞き出すほうが、ディレクターの仕事になります。
途中で見せられるものを作る
最後に一気に確認するより、途中の段階で、確認用のページを見せてもらうと、ずれを早く見つけられます。
- トップページができた時点で、一度見る
- 型（テンプレート）ができた時点で、下層ページの見え方を確認する
- 表示するブラウザと機器（スマホ、タブレット）を、早めに確認する
この図は、コーディングの期間に、確認のタイミングをいくつか置いた例です。
- トップページができる
一度見せてもらう
- 型（テンプレート）ができる
下層ページの見え方を確認
- ブラウザと機器を確認
スマホ、タブレットも
仕様のあいまいさは、早めに拾う
コーディング中に出る質問の多くは、「この場合、どう動くのか」という、デザインに書かれていない部分です。たとえば「入力が空のとき」「画像が長すぎるとき」などです。ディレクターが早めに拾ってお客さんに確認すると、エンジニアの手が止まりません。
まとめ
- コーディングは見えにくい。ページ単位で数えて、見える化する。
- 「できた」と「確認も終わった」を分ける。
- 責めずに、詰まりを聞き出す。
- 途中で見せてもらい、ずれを早く見つける。
akamine でやるなら
ページごとに課題をつくり、カンバンで「未対応、処理中、確認待ち、完了」の列に動かすと、進み具合がひと目でわかります。カンバン の記事で、操作をていねいに説明しています。
