日本ディレクション協会主催

0 からの Web ディレクション講座

システム開発編

講師紹介

柳田 亜沙美（あさみん）株式会社凛 代表取締役エンジニア・ Web ディレクター

• 新卒 OL 時代にエクセル VBA とAccess に出会い、生産管理・在庫管理システムを構築。

• プログラマに転職。

• 2008 年、株式会社凛を設立。

• 女性向けプログラミングスクール「 GeekGirlLabo 」運営。

• 来週から企業の新人社員研修開始！

INDEX13:00 〜 第一部　1. 講義2. ワークショップ3. 発表

15:30 〜 第二部　4. 講義5. ワークショップ6. 発表

17:00 〜 懇親会

よく聞かれること

4

ディレクターもプログラム書けたほうがいいですか？

よく聞かれること

5

ディレクターもプログラム書けたほうがいいですか？

必要ありません。

なぜプログラミングが出来るほうがいいのか？

6

無茶ぶりをしないから

具体的には？

7

• 仕様を確定してくれる• 仕様変更が少ない• 仕様変更であることを認識している• 仕様変更の対応に時間がかかることを

知っている

システムのつくりかた

（３）システムが動く

（２）エンジニアがコンピュータに伝える

（１）仕様をエンジニアに伝える

8

大事なのはここ！

ダメな例（１）

9

食べログみたいなやつ作ってよ！

任せたからよろしく！

丸投げかよ

ダメな例（２）

10

ん〜見てみないとわかんない

ここの仕様、 A と Bどっちがいいですか

結果。

11

ここ、こうなってないんだけど？

そんな仕様、知りません。

仕様変更するとどうなる？

12

1.スケジュールが遅れる

2.コストが発生する

3.バグが発生しやすくなる

丸投げ STOP ！

エンジニアは魔法使いではありません

丸投げはダメ。ゼッタイ。

13

システムのつくりかた

システムが動く

エンジニアがコンピュータに伝える

仕様をエンジニアに伝える

14

そのために仕様書をつくろう

よく使う仕様書

• 画面機能一覧

• 画面遷移図

• 画面仕様書

• データベース仕様書

15

画面機能一覧

画面や機能が一覧になっているもの

16

分類 機能 備考ユーザー画面 商品 一覧 　

詳細 　カート 　決済 　

見積 デザイン・レイアウト選択 　ロゴをアップロード 　

会員 会員登録 　会員情報編集 　

静的ページ トップページ 　特定商取引法 　プライバシーポリシー 　会社概要 　

画面遷移図画面遷移を図にしたもの

17

トップページ会員ログイン

ご注文履歴 会員情報編集

商品一覧商品詳細カートへ入れるご購入ページ

決済

画面仕様書（表示）• 各画面に表示する項目や、各項目に対する詳細な仕様を記

入する。• 一覧表示する場合は、以下を指定する。

1. 表示件数2. 並べ替え項目と昇順 /降順、3. 絞り込み条件等

18

▼出力定義 　 　

No 表示内容 取得条件 表示順⑩ 店舗一覧 削除 =0 の店舗を 10件 登録日時降順

画面仕様書（動作）• 各画面に表示する項目や、各項目に対する詳細な仕様を記

入する。• ボタンを押した時や、セレクトボックスを選択した時にど

んな動きをするのか、など。

19

▼動作定義 　 　

No 動作 遷移先 チェック⑦ 選択時に Ajax で⑧を更新 ー ー

⑨Ajaxで選択した条件で⑩を絞り込み、更新店舗が存在しない場合は「店舗が存在しません」と表示

ー 必須チェック

⑦ ⑧ ⑨

画面仕様書（入力）

入力チェックを定義する。エラーだった場合の表示メッセージも決めておく。

1. 必須チェック2. 桁数チェック3. 半角チェック4. 数値チェック5. 重複チェック

20

画面仕様書（例）

21

画面仕様書（例）ー Twitter の登録フォームー

22

▼入力定義 　 　No 入力内容 入力チェック エラーメッセージ① 名前 必須チェック 名前を入力してください。　 桁数チェック 名前は 15文字以内で入力してください。② メールアドレス 必須チェック メールアドレスを入力してください。　 　 重複チェック メールアドレスが既に登録されています。

　 　 メールアドレスチェック

メールアドレスは正しく入力してください

③ ユーザー名 必須チェック ユーザー名を入力してください。

　 桁数チェック ユーザー名は 8文字以内で入力してください。

　 重複チェック ユーザー名が既に登録されています。

　 半角英数チェック ユーザー名は半角英数字で入力してください

④ パスワード 必須チェック パスワードを入力してください。

　 　 桁数チェック パスワードは 5文字以上で入力してください。

⑤ チェックボックス ー 　

ワークショップ〜画面仕様書を作ってみよう〜お題その１：食べログレビュー投稿

23

ワークショップ〜画面仕様書を作ってみよう〜お題その２：楽天会員登録

24

ワークショップ〜画面仕様書を作ってみよう〜お題その 3：ネット予約画面

25

データベースって？

26

データベース

サーバー

ブラウザ

データを取り出しやすいように整理して入れておく場所です。DB と省略される事が多いです。エクセルファイルのようなものです。

データベースとテーブル

27

データベースの中には、複数の「テーブル」が格納されています。

Twitter データベース

ツイートテーブル ユーザーテーブル フォローテーブル

テーブル≒エクセルのシート

28

店舗名 都道府県 市区町村 番地 建物名等函館昭和店 北海道 函館市 　 昭和１－３１－１ノースフィールド１Ｆフレスポ帯広稲田店 北海道 帯広市 　 稲田町南９線西１１－１フィール旭川店 北海道 旭川市 　 １条通８－１０８オーロラタウン店 北海道 札幌市 中央区 大通西２丁目札幌パルコ店 北海道 札幌市 中央区 南１条西３－３札幌駅前通店 北海道 札幌市 中央区 北３条西３－１－４７麻生店 北海道 札幌市 北区 麻生町５－１－８新さっぽろｄｕｏ店 北海道 札幌市 厚別区 厚別中央２条５－６－３イオンモール札幌苗穂店 北海道 札幌市 東区 東苗穂二条３－１－１札幌元町店 北海道 札幌市 東区 北２７条東１５－１－２０イオンタウン平岡店 北海道 札幌市 清田区 平岡２条５－２－５０白石店 北海道 札幌市 白石区 南郷通り１丁目北２－３２イオンモール札幌発寒支店 北海道 札幌市 西区 発寒８条１２－１札幌発寒店 北海道 札幌市 西区 発寒７条１２－３－１７イオン江別店 北海道 江別市 　 幸町３５釧路昭和店 北海道 釧路市 　 昭和中央３－３－１

カラム（列）とレコード（行）

29

店舗名 都道府県 市区町村 番地 建物名等函館昭和店 北海道 函館市 　 昭和１－３１－１ノースフィールド１Ｆフレスポ帯広稲田店 北海道 帯広市 　 稲田町南９線西１１－１フィール旭川店 北海道 旭川市 　 １条通８－１０８オーロラタウン店 北海道 札幌市 中央区 大通西２丁目札幌パルコ店 北海道 札幌市 中央区 南１条西３－３札幌駅前通店 北海道 札幌市 中央区 北３条西３－１－４７麻生店 北海道 札幌市 北区 麻生町５－１－８新さっぽろｄｕｏ店 北海道 札幌市 厚別区 厚別中央２条５－６－３イオンモール札幌苗穂店 北海道 札幌市 東区 東苗穂二条３－１－１札幌元町店 北海道 札幌市 東区 北２７条東１５－１－２０イオンタウン平岡店 北海道 札幌市 清田区 平岡２条５－２－５０白石店 北海道 札幌市 白石区 南郷通り１丁目北２－３２イオンモール札幌発寒支店 北海道 札幌市 西区 発寒８条１２－１札幌発寒店 北海道 札幌市 西区 発寒７条１２－３－１７イオン江別店 北海道 江別市 　 幸町３５釧路昭和店 北海道 釧路市 　 昭和中央３－３－１

データベース仕様書＜サンプル＞

30

テーブル名称 店舗　TABLE名称 shop

　 　 　 　№ カラム名 項目 キー 初期値 備考1id 店舗 ID ○ 自動生成2shopname 店舗名 　3pref 都道府県 　4city 市区町村 　5town 番地 　6building 建物名等 　7deleted 削除 0 削除=18create_date 登録日

自動入力　

9modified_date 更新日 自動入力

テーブル名称 店舗　TABLE名称 shop

　 　 　 　№ カラム名 項目 キー 初期値 備考1id 店舗 ID ○ 自動生成2shopname 店舗名 　3pref 都道府県 　4city 市区町村 　5town 番地 　6building 建物名等 　7deleted 削除 0 削除=18create_date 登録日

自動入力　

9modified_date更新日 自動入力

データベース仕様書≒エクセルの項目

31

テーブル名称 店舗　TABLE名称 shop

　 　 　 　№ カラム名 項目 キー 初期値 備考1id 店舗 ID ○ 自動生成2shopname 店舗名 　3pref 都道府県 　4city 市区町村 　5town 番地 　6building 建物名等 　7deleted 削除 0 削除=18create_date 登録日

自動入力　

9modified_date更新日 自動入力

フォームから入力した値以外の項目

32

データベース仕様書（例）ー Twitter のユーザーテーブル

33

テーブル名称 ユーザー　 　TABLE名称 user

　 　 　 　 　 　№ カラム名 項目 キー 初期値 備考

1id ユーザー ID ○ 自動生成 　2username ユーザー名 　 　 　3name 名前 　 　 　4email メールアドレス 　○ 　 　5password パスワード 　 　 　6profile プロフィール 　 　 　7deleted 削除 　 0 削除 =18create_date 登録日 　

自動入力　

　

9modified_date 更新日 　 自動入力　

10last_access 最終アクセス日時 　 ログイン時に更新

データベース仕様書（例）ー Twitter のユーザーテーブル

34

テーブル名称 ユーザー　 　TABLE名称 user

　 　 　 　 　 　№ カラム名 項目 キー 初期値 備考

1id ユーザー ID ○ 自動生成 　2username ユーザー名 　 　 　3name 名前 　 　 　4email メールアドレス 　 　 　5password パスワード 　 　 　6profile プロフィール 　 　 　7deleted 削除 　 0 削除 =18create_date 登録日 　

自動入力　

　

9modified_date 更新日 　 自動入力　

10last_access 最終アクセス日時 　 自動入力ログイン時に更新

データベース設計をしてみよう

入力したデータを登録するデータベースの設計をしてみよう！

＜手順＞1. 入力項目を縦に並べてみよう2. 入力した値以外の項目（ ID 、登録日時、更

新日時、削除など）に必要なものを考えてみよう

3. 初期値を考えてみよう

35

今日のまとめ

1.エンジニアにきちんと仕様を伝えることがプロジェクト成功の鍵！

2.将来的に追加したい機能のこともエンジニアに伝えておこう！

3.データベースはエクセルのシートだと思おう！

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

質疑応答

なんでも OK です。時間の許す限りお答えいたします。

時間なくなった場合はミートアップの時聞いてください。語ります。

日本ディレクション協会コミュニティメンバーボードのご案内

ディレ協の運営メンバーや、歴代＆人気講師含む

全国 1,000名以上のディレクターと繋がる国内最大のディレクターコミュニティ

利用特典

• いち早くイベント情報を得られる

• 講演の資料をチェックできる

• 全国のディレクターに色々聴ける

• イベントやリリース告知に使える

ディレ協