0からのWebディレクション講座：システム開発編

1. ⽇ 本 デ ィ レ ク シ ョ ン 協 会 主 催
0からのWebディレクション講座
システム開発編

2. 講師紹介
柳⽥ 亜沙美（あさみん）
株式会社凛 代表取締役
エンジニア・Webディレクター
• 新卒OL時代にエクセルVBAとAccessに
出会い、⽣産管理・在庫管理システムを
構築。
• プログラマに転職。
• 2008年、株式会社凛を設⽴。
• ⼥性向けプログラミングスクール
「GeekGirlLabo」運営。
• 企業の新⼈社員研修が終わりました！

3. INDEX
13:00〜 第⼀部
1. 講義
14:15〜 第⼆部
1. ワークショップ
15:30〜 第三部
1. ワークショップ
16:30〜 発表
17:00〜 懇親会

4. 実例から学ぶ、
失敗しない開発プロ
ジェクト
先人の失敗から学ぼう！

5. 炎上
〜CASE1〜
事例1

6. そもそも無謀な
スケジュールと予算
原因1

7. 膨らむ要件と、
仕様変更。
原因2

8. 開発リーダーがプロ
ジェクトを見捨て、去
る。
結果

9. バッファ大事。
「断る力」大事。
学び1

10. 炎上
〜CASE2〜
事例2

11. 納期が迫っているの
に未着手
状況

12. 担当者が抱えていた
他の案件のスケ
ジュールが遅延した
原因1

13. スケジュールにバッ
ファがなかった
原因2

14. 弊社が全部引き継ぐ。
↓
無事、鎮火
解決方法

15. バッファ大事。
学び

16. 炎上
〜CASE3〜
事例3

17. 納期が5月末なのに5
月の中旬の時点で進
捗率10％
状況

18. 一次納品時に納品したプロ
グラムに不具合が大量にあ
り、その対応に開発者が追
われ、二次開発ができなく
なった
原因

19. 出動要請
解決方法？

20. テスト大事。
バッファ大事。
学び

21. サーバーダウン
〜アプリ〜
事例3

22. 状況
リリース初日、
サーバーがダウン

23. 想定を超えるダウン
ロード数
原因1

24. 複雑すぎるSQL
原因2

25. 負荷テストしてません
原因3

26. SQLの改善
回線やサーバー増強
解決方法

27. テスト大事。
サーバーはクラウド。
学び

28. 裁判
事例4

29. 準委任で手伝ってい
た会社から、支払い
が滞る。
経緯1

30. こちらから契約を解除
経緯2

31. いつまでも支払いが
ないので、訴訟を起こ
す
経緯3

32. 金払え。
こちらの主張

33. 債務不履行。
向こうの主張

34. 泥沼化。
経緯4

35. 請負契約か
準委任契約か
裁判の争点

36. 裁判所の判断

37. 完全勝訴

38. 契約書大事。
学び

39. ここまでのまとめ

40. バッファ大事。
進捗確認大事。
テスト大事。
契約書大事。
まとめ

41. 契約。

42. 契約の種類
42
業務請負
準委任
⼈材派遣

43. 業務請負
43
成果物を納品します。
瑕疵担保責任がある場合が多い

44. 準委任
44
成果物を納品しない
瑕疵担保責任もない
時間に対して対価が発⽣

45. 使い分け
45
• ウォーターフォール型新規開発
– 業務請負
• アジャイル型新規開発
– 準委任
• 運⽤保守
– 準委任

46. 責任範囲を明確にする
46
• 納品物は何か？
– 仕様書を含むのか？
– テスト仕様書を含むのか？
– どの程度のテストが必要なのか？
• 定例会議への参加はどの程度必要か？
• 本番へのデプロイは？
• 操作説明は？

47. バッファ。

48. バッファの取り⽅
48
この開発ってどれくらいでできそう？

49. バッファの取り⽅
49
この開発ってどれくらいでできそう？
1ヶ⽉くらいですね。

50. 「一ヶ月くらいですね」

51. ここで確認するべきこと
51
バッファは含まれているのか？
テストは含まれているのか？

52. 開発の進捗率
52
0
10
20
30
40
50
60
70
80
90
100
進捗率
進捗率

53. 0
10
20
30
40
50
60
70
80
90
100
進捗率
進捗率
なぜ？
53
だいたいこのあたり
から、微調整という
名の仕様追加・仕様
変更が発生し始める

54. 0
10
20
30
40
50
60
70
80
90
100
進捗率
進捗率
スケジュールは⼈によって違うので確認を！
54
ここまでのペースで
完成するスケジュール
だと、仕様変更が
あった時に炎上する

55. バッファってどれくらい？
55
⾒積・スケジュールは、
想定の1.5倍〜2倍くらいが
経験則。

56. 進捗管理。

57. 納期1ヶ⽉前。
57
納期はまだ先だから、
まあ⼤丈夫でしょう。

58. 納期2週間前
58
そろそろできる頃かな？
全然出来てません。

59. ナンダッテー
59
( ﾟдﾟ)

60. どの程度やればいい？
60
外部なら1週間に1度定例
社内なら毎⽇定例
Gitのコミットログを⾒ておく

61. Gitを使おう
61

62. テスト。

63. 実際にあったこわい話
63
納品されたシステムに、
バグが100件以上あったんですよ！

64. プログラマー⽈く。
64
スケジュールに余裕がなかったので
テストしてません。

65. ディレクター⽈く。
65
え、テスト？なにそれ。

66. テストの⼿法
66
ブラックボックステスト
と
ホワイトボックステスト

67. 誰がやるの？
67
• ホワイトボックステスト
→実装した本⼈
• ブラックボックステスト
→実装した本⼈以外
↑必ずテスターが必要！！

68. テスト仕様書って何？
どのような確認を⾏い、どうなったらOKなのかを
決める。
※⾒積にはテスト仕様書の⼯数を含めることを忘れ
ずに！
例：この画⾯のテスト仕様書を作る場合
68

69. テスト仕様書はこうなりました。
69

70. テスト仕様書に必要な項⽬
70
• テスト実施内容
• ⼊⼒値
• 期待動作
• テスト結果
• 実施⽇
• 実施者

71. 実施内容・期待動作
71
コード 22 データ入力せず、登録ボタン押下 コードを入力してください。
23 4桁を入力し、登録ボタン押下 DBへ登録処理
24 6桁を入力し、登録ボタン押下 コードは5文字以内で入力してください。
25 全角を入力し、登録ボタン押下
コードは半角英数字記号（ハイフン、アンダースコ
ア）がご登録いただけます。
26 ハイフンを含む文字列を入力し、登録ボタン押下 DBへ登録処理
27
アンダーバーを含む文字列を入力し、登録ボタン
押下
DBへ登録処理
28 スペースを含む文字列を入力し、登録ボタン押下 コードに空白文字はご登録いただけません。
29 カンマを含む文字列を入力し、登録ボタン押下
コードは半角英数字記号（ハイフン、アンダースコ
ア）がご登録いただけます。
30
ダブルクォーテーションを含む文字列を入力し、
登録ボタン押下
コードは半角英数字記号（ハイフン、アンダースコ
ア）がご登録いただけます。

72. ⼊⼒値
72
No コード 名称 区分 管理コード 指定期間(FROM) 指定期間(TO)
21 09o04 テスト83 1 h040950 2015/04/14 2015/09/06
22 テスト21 1 h054931 2015/06/19 2015/10/24
23 43j1 テスト50 0 h049724 2015/05/12 2015/12/16
24 1e2248 テスト66 1 a058063 2015/03/16 2015/10/01
25 CBd１４ テスト32 0 a045771 2015/04/14 2015/08/10
26 12-34 テスト20 1 b035204 2015/06/02 2015/11/02
27 12_34 テスト46 0 g070754 2015/02/02 2015/12/01
28 12 34 テスト87 1 b066005 2015/02/20 2015/10/18
29 12,34 テスト76 1 o022265 2015/02/15 2015/12/19
30 12"34 テスト 2 g095382 2015/02/17 2015/10/07

73. テスト仕様書の作り⽅
73
テスト項⽬は正常系と異常系を⽤意する。
• 正常系テスト
– 正しい操作⽅法・⼊⼒値でテストを⾏う
• 異常系テスト
– 誤った操作⽅法・⼊⼒値でテストを⾏う
ユーザーは想定外の操作をするもの！
すべてのケースを洗い出そう！

74. 74
仕様書。

75. システムのつくりかた
（３）システムが動く
（２）エンジニアがコンピュータに伝える
（１）仕様をエンジニアに伝える
75
ディレクターが
やる必要がある

76. ディレクター⽈く。
76
え、仕様書？なにそれ。
いいかんじに作っちゃってよ。

77. 仕様書が必要な理由その１
77
クライアントと仕様をFIXする。

78. 仕様書が必要な理由その２
78
エンジニアに仕様を伝える。

79. 仕様書が必要な理由その3
79
引き継ぎ。

80. 仕様の決め⽅
80
UIを再優先にするのか
スケジュール・コストを
優先にするのか？

81. どこまで仕様を決めるのか？
81
動きの部分までしっかり
指⽰を出したほうが
⼿戻りが少ない。

82. ダメな例（１）
82
⾷べログみたいな
やつ作ってよ！
任せたからよろしく！

83. ダメな例（２）
83
ん〜⾒てみないと
わかんない
ここの仕様、AとB
どっちがいいですか

84. 結果。
84
ここ、こうなって
ないんだけど？
そんな仕様、
知りません。

85. 仕様変更するとどうなる？
85
1. スケジュールが遅れる
2. コストが発⽣する
3. バグが発⽣しやすくなる

86. 丸投げSTOP！
エンジニアは
魔法使いではありません
丸投げはダメ。ゼッタイ。
86

87. システムのつくりかた
システムが動く
エンジニアがコンピュータに伝える
仕様をエンジニアに伝える
87
そのために仕様書
をつくろう

88. よく使う仕様書
• 画⾯機能⼀覧
• 画⾯遷移図
• 画⾯仕様書
• データベース仕様書
88

89. 画⾯機能⼀覧
画⾯や機能が⼀覧になっているもの
89
分類 機能 備考
ユーザー画⾯ 商品
⼀覧
詳細
カート
決済
⾒積
デザイン・レイアウト選択
ロゴをアップロード
会員
会員登録
会員情報編集
静的ページ
トップページ
特定商取引法
プライバシーポリシー
会社概要

90. 画⾯遷移図
画⾯遷移を図にしたもの
90
トップ
ページ
会員ログ
イン
ご注文履
歴
会員情報
編集
商品一覧
商品詳細
カートへ
入れる
ご購入
ページ
決済

91. 画⾯仕様書（表⽰）
• 各画⾯に表⽰する項⽬や、各項⽬に対する詳細な仕様を記
⼊する。
• ⼀覧表⽰する場合は、以下を指定する。
1. 表⽰件数
2. 並べ替え項⽬と昇順/降順、
3. 絞り込み条件等
91
▼出⼒定義
No 表⽰内容 取得条件 表⽰順
⑩ 店舗⼀覧 削除=0の店舗を10件 登録⽇時降順

92. 画⾯仕様書（動作）
• 各画⾯に表⽰する項⽬や、各項⽬に対する詳細な仕様を記
⼊する。
• ボタンを押した時や、セレクトボックスを選択した時にど
んな動きをするのか、など。
92
▼動作定義
No 動作 遷移先 チェック
⑦ 選択時にAjaxで⑧を更新 ー ー
⑨
Ajaxで選択した条件で⑩を絞り込み、更新
店舗が存在しない場合は「店舗が存在しませ
ん」と表⽰
ー 必須チェック
⑦ ⑧ ⑨

93. 画⾯仕様書（⼊⼒）
⼊⼒チェックを定義する。エラーだった場合の表⽰
メッセージも決めておく。
1. 必須チェック
2. 桁数チェック
3. 半⾓チェック
4. 数値チェック
5. 重複チェック
93

94. 画⾯仕様書（例）
94

95. 画⾯仕様書（例）
ーTwitterの登録フォームー
95
▼⼊⼒定義
No ⼊⼒内容 ⼊⼒チェック エラーメッセージ
① 名前 必須チェック 名前を⼊⼒してください。
桁数チェック 名前は15⽂字以内で⼊⼒してください。
② メールアドレス 必須チェック メールアドレスを⼊⼒してください。
重複チェック メールアドレスが既に登録されています。
メールアドレス
チェック
メールアドレスは正しく⼊⼒してくださ
い
③ ユーザー名 必須チェック ユーザー名を⼊⼒してください。
桁数チェック
ユーザー名は8⽂字以内で⼊⼒してくだ
さい。
重複チェック ユーザー名が既に登録されています。
半⾓英数チェック
ユーザー名は半⾓英数字で⼊⼒してくだ
さい
④ パスワード 必須チェック パスワードを⼊⼒してください。
桁数チェック
パスワードは5⽂字以上で⼊⼒してくだ
さい。
⑤ チェックボックス ー

96. ワークショップ（１）
〜画⾯仕様書を作ってみよう〜
96

97. ワークショップ（2）
〜テスト仕様書を作ってみよう〜
97

98. 契約書大事。
バッファ大事。
進捗確認大事。
テスト大事。
仕様書大事。
炎上しないためには

99. 以上
ご清聴ありがとうございました。

100. 質疑応答
なんでもOKです。時間の許す限りお答えいたします。
時間なくなった場合はミートアップの時聞いてください。語ります。

101. 日本ディレクション協会
コミュニティメンバーボードのご案内
ディレ協の運営メンバーや、歴代＆人気講師含む
全国1,000名以上のディレクターと繋がる
国内最大のディレクターコミュニティ
利⽤特典
• いち早くイベント情報を得られる
• 講演の資料をチェックできる
• 全国のディレクターに⾊々聴ける
• イベントやリリース告知に使える
ディレ協