公立はこだて未来大学 2020 年度 システム情報科学実習
グループ報告書
Future University Hakodate 2020 Systems Information Science PracticeGroup Report

プロジェクト名使ってもらって学ぶフィールド指向システムデザイン 2020

Project Name
Field Oriented System Design Learning by Users’ Feedback 2020

グループ名グループ CGroup NameGroup C
プロジェクト番号/Project No.

1

プロジェクトリーダ/Project Leader
Jigen Endo

遠藤侍玄

グループリーダ/Group Leader
鈴木快

Kai Suzuki

グループメンバ/Group Member
Kai Suzuki

鈴木快
遠藤侍玄

Jigen Endo

小澤海樹

Mitsuki Ozawa

松橋優花

Yuka Matsuhashi

藤澤萌乃香

Honoka Fujisawa

指導教員
伊藤恵

南部美砂子

奥野拓

原田泰

AdvisorKei Ito Misako Nambu Taku Okuno Yasushi Harada

提出日
2021 年 1 月 14 日

Date of Submission
January 14, 2021

概要
本プロジェクトは、フィールド調査をもとに問題を発見し、IT(Information Technology) を用いてユーザの仕事や生活をデザインすることを目的としている。また、本プロジェクトは、
スクラムと呼ばれるアジャイル開発手法の一種を用いる。それにより、高速で柔軟な開発を行ない、短期間で最大限に成果を出すことを目標としている。今年度はプロジェクトを高齢者支援のデザイン、地域交通のデザイン、地域情報のデザインの 3 グループに分け、各グループがそれぞれのフィールドで活動している。本報告書では地域情報のデザインについて報告を行なう。
本グループは、函館市の情報サービスをフィールドとし、函館市の地域活性化を目的として活動している。函館市の問題を IT を駆使して解決するシビックテックを行なう。まず初めに、函館市民の生活における問題点を知るために、函館市の公式サイトに寄せられた市民の声 [1]、函館市の環境に関する市民アンケート調査の結果 [2]、我々が私生活の中で感じた不満な点から問題点を洗い出した。その後、それらの問題点の解決に繋がる案を 4 つ考えた。解決案についての問題点やどのような点に重視して取り組むべきかを知るため、Code for Hakodate の中村氏にレビューをして頂いた。レビューで得られたことを踏まえて、「どれほど取り組みたいか」、「実現可能性」、「対象ユーザは誰か」、「アウトプットをどうするか」に焦点をあて、話し合いをした。その結果、現在ある函館観光画像ライブラリー [3] をより利用しやすくすることに決定した。
函館観光画像ライブラリーは、函館市の魅力的な写真を提供している Web サイトである。しかし、その写真の場所や情報を十分に得ることができない。そこで、本グループでは函館観
光画像ライブラリーに掲載されている写真に位置情報や説明文などの情報を追加してまとめる。ユーザは写真から函館に魅力を感じ、地図から位置情報を容易に得ることが出来ることで、ユーザの観光に関する情報収集が効率化され、函館を観光してみたいと思うユーザが増えることを想定し、函館の地域活性化を目的にしている。一年間の活動を通して、函館観光画像ライ
ブラリーに掲載されている写真に位置などの情報を追加してより使いやすい Web サービスを

Django、JavaScript、HTML、CSS を用いて開発した。
キーワード

フィールド調査, IT, スクラム, アジャイル開発, シビックテック（※文責: 鈴木快）-i-Abstract
The purpose of this project is to discover problems based on ﬁeld surveys and to design
the work and life of users using IT (Information Technology). In addition, this projectuses a type of agile development method called Scrum. By doing so, we aim to achieve
high-speed and ﬂexible development and maximize results in a short period of time.
This year, the project is divided into three groups: elderly support design, regionaltransportation design, and regional information design, and each group is working in adiﬀerent ﬁeld. This reports on the design of regional information.
This group focuses on the information service of Hakodate and is working to revitalize
the region of Hakodate. We will carry out Civic Tech to solve the problems of Hakodateusing IT. First, in order to know the problems of the lives of Hakodate citizens, We
investigated as a result of the citizens’ opinion box sent to the oﬃcial website of Hakodate
City, the citizen questionnaire survey on the environment of Hakodate City, and thedissatisfaction of our lives. After that, we thought four ideas that would lead to thesolution of the problems. We asked Mr.Nakamura of the Code for Hakodate, takea review about the problems in working on the solution and what points should beemphasized. We discussed which problem do we deal with based on the review. The
discussion focused on “our motivation”, “technological feasibility”, “target user”, and“output”. As a result, we decided to make the current Hakodate sightseeing photolibrary easier to use.
Hakodate sightseeing Photo library is a Web site that provides attractive photos of
Hakodate City. However, the location and information of the photo cannot be obtained
suﬃciently. Therefore, this group will add information such as location informationand explanations to the photos posted in the Hakodate sightseeing photo library. We
assume that users will be attracted to Hakodate from photographs, and that location
information can be easily obtained from maps, which will streamline the collectionof information on tourism by users and increase the number of users who want to visit
Hakodate. As a result, we aim to revitalize the region of Hakodate. Throughout a year’s
activities, we have developed an easier-to-use Web service with Django, JavaScript,
HTML, and CSS by adding information such as location to the photos posted in the
Hakodate sightseeing photo library.
KeywordField Work, IT, Scrum, Agile Development, Civic Tech（※文責: 鈴木快）- ii -

目次
第1章

背景と目的

1

1.1

地域情報のデザインの背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

シビックテックについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.3

地域情報デザインの目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

前期活動内容3

取り組むサービスを決定するまでの活動 . . . . . . . . . . . . . . . . . . . . . . .

3

2.1.1

取り組むべき問題の提案 . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.1.2

Code for Hakodate のレクチャー . . . . . . . . . . . . . . . . . . . . . .

3

2.1.3

グループ分け . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.1.4

ブレインストーミング . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.1.5

仮案まとめ作成. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

中間発表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.2.1

紹介文作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.2.2

中間発表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.2.3

中間発表についての評価と反省 . . . . . . . . . . . . . . . . . . . . . . .

8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

2.3.1

取り組むべき問題の決定 . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

2.3.2

サービス機能の検討 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

2.3.3

サービスのアウトプットの決定 . . . . . . . . . . . . . . . . . . . . . . .

12

第2章

2.1

2.2

2.3

第3章

3.1

3.2

中間発表後の活動

後期活動内容13

アジャイル開発について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.1.1

スクラムについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.1.2

プロダクトバックログについて . . . . . . . . . . . . . . . . . . . . . . .

13

3.1.3

デイリースクラムについて . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.1.4

スプリントについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

3.1.5

スプリントプランニングについて . . . . . . . . . . . . . . . . . . . . . .

15

3.1.6

スプリントバックログについて . . . . . . . . . . . . . . . . . . . . . . .

15

3.1.7

スプリントレビューについて . . . . . . . . . . . . . . . . . . . . . . . .

16

3.1.8

スプリントレトロスペクティブについて. . . . . . . . . . . . . . . . . .

16

スプリント 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

3.2.1

期間

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

3.2.2

スプリントプランニング . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

3.2.3

プロダクトバックログの作成 . . . . . . . . . . . . . . . . . . . . . . . .

18

3.2.4

開発のために必要な技術の洗い出し . . . . . . . . . . . . . . . . . . . . .

18

3.2.5

ユーザエクスペリエンス作成 . . . . . . . . . . . . . . . . . . . . . . . .

18

3.2.6

Git、GitHub の練習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19- iii -

3.3

3.4

3.5

3.6

3.2.7

Git のルール決め . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.2.8

コーディング規約の作成 . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

3.2.9

スプリントレビュー用資料の作成 . . . . . . . . . . . . . . . . . . . . . .

21

3.2.10 スプリントレビュー . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

3.2.11 スプリントレトロスペクティブ . . . . . . . . . . . . . . . . . . . . . . .

21

スプリント 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

3.3.1

期間

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

3.3.2

スプリントプランニング . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

3.3.3

開発のために必要な技術の導入 . . . . . . . . . . . . . . . . . . . . . . .

22

3.3.4

スクレイピング. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

3.3.5

地図表示・マーカー表示 . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

3.3.6

カテゴリー検索機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

3.3.7

写真などの情報をデータベースで管理 . . . . . . . . . . . . . . . . . . . .

26

3.3.8

スプリントレビュー . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

3.3.9

スプリントレトロスペクティブ . . . . . . . . . . . . . . . . . . . . . . .

26

3.3.10 プロダクトバックログの改定 . . . . . . . . . . . . . . . . . . . . . . . .

26

スプリント 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

3.4.1

期間

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

3.4.2

スプリントプランニング . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

3.4.3

場所の緯度・経度 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

3.4.4

カテゴリー検索. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

3.4.5

お気に入り機能、SNS シェア . . . . . . . . . . . . . . . . . . . . . . . .

29

3.4.6

スプリントレビュー用資料の訂正 . . . . . . . . . . . . . . . . . . . . . .

29

3.4.7

地図表示機能の作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

3.4.8

トップ画面、詳細画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

3.4.9

スプリントレビュー . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

3.4.10 スプリントレトロスペクティブ . . . . . . . . . . . . . . . . . . . . . . .

32

スプリント 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

3.5.1

期間

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

3.5.2

スプリントプランニング . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

3.5.3

アカデミックリンク資料作成 . . . . . . . . . . . . . . . . . . . . . . . .

33

3.5.4

位置情報の取得方法の変更 . . . . . . . . . . . . . . . . . . . . . . . . . .

34

3.5.5

お気に入り機能. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

3.5.6

お気に入り・ランキングページ作成 . . . . . . . . . . . . . . . . . . . . .

34

3.5.7

デザイン案の見直し・具体化 . . . . . . . . . . . . . . . . . . . . . . . .

34

3.5.8

スプリントレビュー用資料の訂正 . . . . . . . . . . . . . . . . . . . . . .

35

3.5.9

スプリントレビュー . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

3.5.10 スプリントレトロスペクティブ . . . . . . . . . . . . . . . . . . . . . . .

36

スプリント後 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

3.6.1

デザイン案の改定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

3.6.2

現在地の取得 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

3.6.3

画面遷移 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38- iv -

3.7

3.8

3.9

第4章

3.6.4

トップ画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

3.6.5

ランキング画面. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

3.6.6

スプリントレビュー用発表資料・デモの修正 . . . . . . . . . . . . . . . .

39

アカデミックリンク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

3.7.1

概要

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

3.7.2

発表準備 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

3.7.3

発表内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

3.7.4

フィードバックの内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

成果発表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

3.8.1

発表準備 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

3.8.2

成果発表についての評価と反省 . . . . . . . . . . . . . . . . . . . . . . .

42

北海道東北合同発表会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

3.9.1

43

評価と反省 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

開発中のサービス

44

4.1

概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

4.2

対象ユーザの想定. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

4.3

UI/UX の決定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

4.4

エレベーターピッチ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

4.5

開発済みの画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

47

4.6

開発済みの機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

48

4.6.1

地図から観光場所を探す機能 . . . . . . . . . . . . . . . . . . . . . . . .

48

4.6.2

ユーザの近くの観光場所を提案する機能. . . . . . . . . . . . . . . . . .

49

4.6.3

カテゴリー検索機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

4.6.4

お気に入り機能. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

4.6.5

ランキング機能. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

4.6.6

SNS シェア

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

4.6.7

特定の観光場所を地図上に表示する機能. . . . . . . . . . . . . . . . . .

52

4.6.8

特定の観光場所の近くにある観光場所を提案する機能 . . . . . . . . . . .

53

4.6.9

特定の観光場所と同じカテゴリーの観光場所を提案する機能 . . . . . . . .

54

使用した技術 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

4.7.1

Django . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

4.7.2

JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

56

4.7.3

その他 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

56

今後の展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

4.8.1

機能について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

4.8.2

提供する情報の収集について . . . . . . . . . . . . . . . . . . . . . . . .

57

4.8.3

函館市の特性を活かした開発 . . . . . . . . . . . . . . . . . . . . . . . .

58

4.7

4.8

第5章

知識・技術習得

59

5.1

フィールドワーク入門講座 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59

5.2

スクラム開発ワークショップ (一部抜粋). . . . . . . . . . . . . . . . . . . . . .

60

5.3

アジャイル勉強会. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

61

-v-

5.4

Git/GitHub 講習会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

61

5.5

プログラミング学習 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

62

学び

63

6.1

鈴木快 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

63

6.2

藤澤萌乃香 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

63

6.3

松橋優花 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

6.4

遠藤侍玄 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

65

6.5

小澤海樹 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

65

第7章

まとめ

67

第8章

今後の予定

68

第6章

8.1

プロジェクト学習課外発表会. . . . . . . . . . . . . . . . . . . . . . . . . . . .

68

8.2

ユーザーテストの実施 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

68

8.3

サービスの実施 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

68
69

参考文献
付録 A

中間発表のポスター

70

付録 B

アカデミックリンクのスライド

71

付録 C

成果発表のポスター75- vi -

Field Oriented System Design Learning by Users’ Feedback 2020

第 1 章 背景と目的
1.1

地域情報のデザインの背景

函館市民の生活における問題を知るために、函館市の公式サイトに寄せられた市民の声、函館市の環境に関する市民アンケート調査の結果から問題を抽出した。また、我々が私生活の中で感じた
不満な点から問題点を洗い出した。その結果、大きく分けて「子育て」、「若者」、「ゴミ」
、「娯楽」
、
「交通」、
「情報」の 6 つに関係する問題があった (図 1.1)。本来地域情報サービスは誰でも見やす
く、扱いやすく、わかりやすくあるべきである。しかし、函館市の市民情報サービスの現状として、函館市の公式サイト等から有益な情報が大量に発信されているが、「内容が分かりにくい」、「必要な情報が探せない」、「情報が埋もれていて目につかない」という意見があり、十分に活用できていないことが明らかになった。そこで、函館市が提供しているオープンデータを「有益だが使われていない情報」という観点で調査した。その結果、函館市の観光に関するオープンデータが市民や観光客にとってわかりにくく、扱いにくいことがわかった。
（※文責: 鈴木快）

図 1.1

1.2

函館市の問題点をまとめたホワイトボード

シビックテックについて

シビックテックとは、市民自身がテクノロジーを活用し、自分たちで行政サービスの問題や地域課題を解決しようという取り組みのことである [4]。近年はシビックテックを実践する団体が続々と全国に作られている。code for kanazawa では正しいゴミの捨て方に注目した「5374(ゴミナシ)」[5] や Code for Sapporo では新型コロナウイルス感染症対策サイト「JUST 道 IT」[6] などの活動をしている。函館市でも「ICT を中心とした函館をちょっとよくするきっかけづくり」をコンセプ
トに活動している、Code for Hakodate[7] という団体が存在する。

Group Report of 2020 SISP

-1-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020（※文責: 鈴木快）

1.3

地域情報デザインの目的

本グループでは、自治体が提供している情報を、IT を駆使して改善することによって、現在函館市の抱えている問題を解決する「シビックテック」を行なう。観光に関する情報収集を効率化させることによって、観光客が増加する。そして、函館市の財政が豊かになり、市民の生活の質を向上させることを目的としている。
（※文責: 鈴木快）Group Report of 2020 SISP

-2-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第 2 章 前期活動内容
2.1

取り組むサービスを決定するまでの活動

2.1.1

取り組むべき問題の提案

1.1 で調査した「子育て」、「若者」、「ゴミ」、「娯楽」、「交通」、「情報」の 6 つに関係する問題について、オンラインのホワイトボードサービスを利用し KJ 法で分析した (図 2.1)。さらに、それらの問題点に対する解決案をブレインストーミングを取り入れ話し合った。シビックテックについてより深く知るために Code for Hakodate の中村氏にオンラインでレクチャーしていただき、その後、分析した問題や解決案に対していただいた意見は 2.1.2 節で述べる。
（※文責: 遠藤侍玄）

図 2.1

2.1.2

問題点をグループ化したホワイトボード

Code for Hakodate のレクチャー

Code for Hakodate とは「ICT を中心とした函館をちょっとよくするきっかけづくり」をコンセプトに函館のさまざまな問題の解決に取り組む団体である。レクチャーでは中村氏からシビッ
クテックの実際の例や、Code for Hakodate の活動の紹介をしていただいた。Code for Hakodate
では「函館市のオープンデータ化の推進」や「解決策を欲している人と、既存のアプリ・サービス等のマッチング (Ha4go)」等の活動を行なっている。その後、本グループが考えていた 6 つの問題
点について「アウトプットの種類にこだわらない」、「内部的にはシステマチックに、受け手にはア
ナログ気味に伝える」等の意見をいただいた。
（※文責: 遠藤侍玄）Group Report of 2020 SISP

-3-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

2.1.3

グループ分けCode for Hakodate のレクチャーで得られた情報を基にどの問題の解決に取り組むかを少人数のグループに分かれ議論した。少人数のグループに分かれた理由は、オンラインの環境では 10 人
での話し合いよりも少人数のグループでの話し合いのほうが発言率が上がったからである。自分たちに身近でかつ解決したい問題を話し合った結果、「交通」と「情報」の二つの問題に取り組むことが決定した。地域の公共交通機関の利用体験を向上させることを目指すグループ (地域交通のデザイン) と地域の情報を函館外に伝えることで地域活性化を目指すグループ (地域情報のデザイン)に分かれた。
（※文責: 遠藤侍玄）

2.1.4

ブレインストーミング

函館市の「情報」についての問題を解決するサービスを考えるために再度函館市のオープンデー
タについて調査した。調査の結果、価値のある情報にたどり着くまでに手間がかかってしまうことがわかった。この問題を解決するための案についてブレインストーミングを行なった。ブレインス
トーミングの結果は 2.1.5 節で述べる。
（※文責: 遠藤侍玄）

2.1.5

仮案まとめ作成「市民のコミュニケーションから生まれる情報を活用する」、「函館市内で撮影した写真の情報を共有する」、「市の最新情報をカレンダーの形式で共有する」、「函館観光画像ライブラリーに載っている写真の情報をまとめて提供する」という 4 つの仮案があったが、1 つの案に絞ることができていなかった。そのため、それぞれの案の特徴をまとめた資料を作成し、説明できるようにした (図2.2)。サービスの対象や内容を明確化したことで、「市民のコミュニケーションから生まれる情報を活用する」と「函館市内で撮影した写真の情報を共有する」という案の問題点として「少人数のユーザまたは個人だけで完結しない」、「市の最新情報をカレンダーの形式で共有する」という案の問題点として「情報を更新する必要があるため運用が難しい」があった。また、「函館観光画像ライブラリーに載っている写真の情報をまとめて提供する」の課題として「掲載許可はどのように取るか」があった。
（※文責: 松橋優花）

Group Report of 2020 SISP

-4-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

Group Report of 2020 SISP

-5-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 2.2

2.2

中間発表

2.2.1

紹介文作成

仮案まとめ

本プロジェクト紹介動画のため本グループの紹介文を作成した。内容は以下の通りである。「地域情報のデザインでは、函館市民の生活をフィールドとしており、函館市の地域活性化を目的として活動しています。具体的には、市民が必要としている地域の情報を提供し、市民同士の情報の共有と活用を促すサービスを開発しようと考えています。これまでの活動では 2 つの方法でフィールドの調査をしてきました。1 つ目は新型コロナウイルスの影響で現場に行って調査することが難し

Group Report of 2020 SISP

-6-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
かったため、Code for Hakodate の方にオンラインで話を聞きました。Code for Hakodate は ITを駆使して市民向けの情報を改善することにより、市民生活を快適に、豊かにするシビックテック
に関する活動をしている団体です。シビックテックの活用事例や函館市の問題点、プロジェクトに向いている開発について教えていただきました。2 つ目は函館市ホームページの市民の声や、函館市が行なった環境に関する市民アンケート調査などから、市民が抱える問題点を調査していきました。それらの活動から地域に元気がない、市民に情報がいきわたっていない、市の娯楽が不足しているといったフィールドの問題を発見し、それらに対しての解決策とサービス案をいくつか考えました。それぞれの問題に対する解決としては、地域のイベント情報を受け取りやすく工夫して提供すること、市民同士での情報共有を促すこと、実は知られていない娯楽の情報を共有するといった3 つの案が出ています。今後の活動としては、考えた案からサービスの内容を決め、開発言語の学習を行ない、開発を進めて行きたいと思います。」（※文責: 松橋優花）

図 2.3

2.2.2

中間発表スライド

中間発表

中間発表は 7 月 17 日にオンラインで行なわれた。事前に作成した 10 分程度のプロジェクト紹
介動画とポスターを見てもらった後、各プロジェクトの Zoom のミーティングルームに参加してもGroup Report of 2020 SISP

-7-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
らい、質疑応答を行なった。ポスターの内容は付録 A に添付する。質疑応答は前半・後半それぞれを各 3 回に分けて行なった。仮案のまとめを作成していたため、比較的スムーズに質問に対する回答をすることができた。例として「ポスターとスライドの FW とフィールド調査に違いはあるか」という質問に対し、「フィールドワークは外部の人と実際にコンタクトを取るという意味、フィー
ルド調査はネットで検索も調査に入るという意味で使い分けています。
」という回答をした。また、「フィールドの「函館市民の生活」とは具体的にどういうことですか」という質問に対しては「地域情報のデザインでは函館市民が必要としている地域の情報を提供し、市民同士の情報の共有と活用を促し、市民の生活を快適にするということです。
」という回答をした。
（※文責: 松橋優花）

2.2.3

中間発表についての評価と反省発表評価フォーム (図 2.4) のデータ内容を集計した結果、学生 33 件、教員 6 件、全体で 39 件だった。本グループの中間発表の評価の平均は 10 点満点中約 7 点だった。評価フォームの項目としては、プロジェクトの内容を伝えるために効果的な発表が行なわれているか、プロジェクトの目標設定と計画は十分なものであるかという 2 つがあった。以下レビューの中でチーム内で気になったものを検討した。「目的が抽象的で具体的な実装がわからない」このレビューから案を 1 つに絞ったときに再度目的を決めなおす必要があると判明した。「自分たちの問題として課題を絞っていく道筋を示してほしい」このレビューからフィールドワークをできるだけ早く行ない、具体的なことに着手することが必要であると判明した。その他にも、具体的でないというレビューが多くあったため、担当教員や外部の方からの意見をいただきながら仮案を 1 つに決め、対象や解決策を詳細に決めていくための話し合いが必要であると判明した。
（※文責: 松橋優花）

Group Report of 2020 SISP

-8-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

Group Report of 2020 SISP

-9-Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 2.4

2.3

中間発表後の活動

2.3.1

取り組むべき問題の決定

発表評価フォーム

本グループが取り組む問題が函館市の情報を扱うシビックテックに深く関係したものであったた
め、Code for Hakodate の中村氏との二度目の話し合いの場で地域の情報に関する 4 つの仮案について提案した。4 つの仮案とは「市民のコミュニケーションから生まれる情報を活用する」、「函館市内で撮影した写真の情報を共有する」、「市の最新情報をカレンダーの形式で共有する」、「函館観光画像ライブラリーに載っている写真の情報をまとめて提供する」である。それぞれの仮説や目的、サービスの仮案に対して中村さんから「実現可能性を考えたほうが良い」「メンテナンスが少なく、満足するアウトプットにするべき」と意見をいただいた。どの仮案に取り組むか議論を行なう際に各メンバーの仮案のイメージを統一するためペーパープロトタイピングを作成した (図2.5)。ペーパープロトタイピングを参考に「どれほど取り組みたいか」、「実現可能性」「対象ユー
ザは誰か」、「アウトプットをどうするか」に焦点を当てグループ内で議論した。「市民のコミュニ
ケーションから生まれる情報を活用する」、「函館市内で撮影した写真の情報を共有する」、「市の最新情報をカレンダーの形式で共有する」の 3 つの仮案は、ユーザがいないと運営が難しく実現可能性が低いと判断した。その結果、函館観光画像ライブラリーに載っている写真の情報をまとめ、さらに位置情報を追加することでより利用しやすいサービスを提供することに決定した。
（※文責: 遠藤侍玄）Group Report of 2020 SISP

- 10 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 2.5

2.3.2

作成したペーパープロトタイピングの一例

サービス機能の検討

取り組むサービスの決定後、実装したい機能とそれぞれの機能についてのユーザーストーリーを作成した。想定したペルソナとコンセプトを基に書き出した機能についてプロダクトバックログを作成した (図 2.6)。さらに、サービスの提案時に、より短く伝わりやすくするためエレベーター
ピッチを作成した。エレベーターピッチの詳細内容は 4.4 節で述べる。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

- 11 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 2.6

2.3.3

プロダクトバックログ・ユーザーストーリー

サービスのアウトプットの決定

中村氏からいただいたレクチャーである「アウトプットをどうするか」について焦点を置き、話し合いを行なった。
「紙」、「Google カレンダーを用いる」、「システムを市に提供する」、「アプリ」、「Web サービス」といった意見があったが、観光客は観光する際にアプリを入れるよりもアプリをインストールしなくても使える Web サ−ビスで行きたい場所を調べることが多いであろうと考え、

Web サービスを作成することとした。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

- 12 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第 3 章 後期活動内容
3.1

アジャイル開発について

アジャイル開発とは、目的を達成し、成果を最大化するための開発手法である。特徴は大きく分
けて 3 つある。一つ目は、目的の達成のためにお互いに協力しあいながら進める。二つ目は、一度にまとめてではなく早い段階から動作する成果物を少しづつ作り、評価を繰り返す。三つ目は、フィードバックを継続的に受け、作成中の成果物や計画を調整することである [8]。
（※文責: 鈴木快）

3.1.1

スクラムについて

本プロジェクトは、スクラムという手法を用いて開発を行なった。スクラムとは、突然の機能内容の変更があっても柔軟に対応できるアジャイル開発の手法の一つであり、スプリントという一定の期間を繰り返して行なわれる。その期間内の工程は以下である。スプリントのはじめに、プロ
ダクトバックログで作成した機能について、優先順位が高いものから取り組むためにスプリント
プランニングを行なう。そこで作成されたスプリントバックログに従い、インクリメントを作成する。インクリメントとは、完成の定義を満たしており、リリースできる状態のプロダクトのことである。その後、作成されたインクリメントのスプリントレビューを行ない、スプリントレトロスペ
クティブで改善案をあげる [9]。
（※文責: 鈴木快）

3.1.2

プロダクトバックログについて

プロダクトバックログとは、開発する Web サービスの機能全体を把握するため、機能や技術的改善要素を優先順位をつけたものであり、今回のスクラムではスプレッドシートを用いて表形式で記述した。項目としては、機能名、内容、重要度、仕事量、ユーザストーリーに分けて記述した。
想定したペルソナとコンセプトを基に書き出した機能について実装する優先度を明確にするために、重要度を A、B、C の 3 段階に分けた。その後、各機能の実装に必要な作業時間の見積もりを行なうために最も短い機能の開発時間を 1 として、1,2,3,5,…,89 までのフィボナッチ数と?と∞を用いた。仕事量は分単位とし、その大きさについては話し合いで決め、オンラインツールである

miro を用いて行なった (図 3.1)。例として、トップ画面は優先度 A で開発時間は 3 と見積もった。
（※文責: 鈴木快）Group Report of 2020 SISP

- 13 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.1

3.1.3

プロダクトバックログ

デイリースクラムについて

デイリースクラムとは、スプリントバックログの残りの作業を確認し、このまま進めてスプリン
トゴールが達成できるのかどうかを毎日同じ時間、同じ場所に開発チームのメンバーが集まって検査することである。やったこと、やること、障害になることの 3 つの項目について報告する。本プ
ロジェクトでは、平日の 12 時 10 分から 13 時 10 分の間に Slack の各々のチャンネルを用いて報告を行なった（図 3.2）
。各々が挙げた問題点については、オンライン上で話し合いをして解決を目
指し、解決しなかった問題点は次回のデイリースクラムに持ち越し、優先して解決すべき問題点を明確にした。
（※文責: 鈴木快）Group Report of 2020 SISP

- 14 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.2

3.1.4

Slack 上での報告例

スプリントについて

スプリントとは、開発チームが一定量の作業を完了させる際の、短く区切られた期間を指す。本
プロジェクトでは、2 週間を 1 スプリントとして、9 月 10 日から 11 月 20 日までの期間に計 4 ス
プリントの活動を行なった。
（※文責: 鈴木快）

3.1.5

スプリントプランニングについてスプリントプランニングとは、優先度の高いプロダクトバックログアイテムをスプリント内で実現するために、やるべきことをタスクに分解し、そのタスクを見える化することである。その成果としてスプリントバックログを作成した。
（※文責: 遠藤侍玄）

3.1.6

スプリントバックログについてスプリントバックログとは、そのスプリントに実行することを選択した複数のプロダクトバック
ログアイテムとその実行計画のことである。プロダクトバックログを具体的な作業に分割し、スプリント期間中も自由に作業の追加や削除を行なうことができる。1 タスクは 1 日以内で終わるサイズとなっている。本グループでは、スプリントバックログを優先度、機能名、見積もり、細分化、タスク、完成の定義、終了の有無の項目でスプレットシートに記述した (図 3.3)。
（※文責: 遠藤侍玄）Group Report of 2020 SISP

- 15 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.3

3.1.7

スプリントバックログの項目

スプリントレビューについて

スプリントレビューとは、スプリントの最後にプロダクトオーナー主催でスプリントの成果をレビューする場のことである。最大の目的として、プロダクトに対するフィードバックを得ることがある。得たフィードバックをもとに必要に応じてプロダクトバックログの見直しを行なう。本
プロジェクトはオンラインでの発表の練習も兼ねて Zoom を用いたプレゼンテーション形式で行なった。
（※文責: 遠藤侍玄）

3.1.8

スプリントレトロスペクティブについて

スプリントレトロスペクティブとは、直近のスプリントでのプロダクトの開発に関わる活動において問題がなかったか、もっと成果を出すためにできることがないか検査を行ない、次回のスプリント以降のやるべきことを決めることである。本グループでは、KPTA を用いてスプレッドシー
トにまとめた。KPTA とは「Keep（続けること）」「Problem（問題点）」「Try（試したいこと）」「Action（行動）」の 4 つの視点を持つ振り返りフレームワークである。図 3.4 の例では、Keep（続けること）として「チーム全体の進捗情報を確認しながら進行できた」、Problem（問題点）として「要件定義が甘かったせいで出戻りが多く起きてしまった」、Try（試したいこと）として「行動を起こす前に本当に必要か調査」、Action（行動）として「チーム内で取り組む前に調査する時間をつくる」と記録し、活動方法の検査と改善案の検討を行なっている。
（※文責: 遠藤侍玄）Group Report of 2020 SISP

- 16 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.4

3.2

スプリント 1

3.2.1

期間

KPTA の実施例

スプリント 1 の期間は令和 2 年 9 月 30 日（水）より 10 月 9 日（金）である。
（※文責: 遠藤侍玄）

3.2.2

スプリントプランニング「函館観光画像ライブラリーから画像を引用し表示させる」、「画像の詳細説明」、「カテゴリー検索」、「トップ画面」を今回のスプリントで実装するプロダクトバックログのアイテムとして選択した。その選択したアイテムを、実装するのに必要な作業に詳細化した。例として、「函館観光フォ
ト案内から画像を引用して表示させる」機能は「画像をスクレイピング」と「画像を表示」に細分化し、それぞれ完成の定義を「画像を収集して保存」と「見やすいサイズで正しく画像が表示されている」、見積もりを 10 と 60 とした。作成したスプリントバックログは以下である。
（※文責: 遠藤侍玄）Group Report of 2020 SISP

- 17 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.5

3.2.3

スプリント 1 のスプリントバックログ

プロダクトバックログの作成

プロダクトバックログ、ユーザストーリーを作成した。担当教員から「ユーザストーリーが開発者目線である」というご指摘をいただいたため、ユーザストーリーを開発者目線の内容からユーザ
目線の内容に変えた。例として、「ユーザは函館観光画像ライブラリ―の写真を閲覧できる」という内容から「ユーザーとして、函館観光フォト案内より見やすい写真一覧が欲しい。それはより簡単に行きたい場所を探したいからだ。
」に変更した。
（※文責: 遠藤侍玄）

3.2.4

開発のために必要な技術の洗い出し開発を進めていくにあたり、必要となると考えられる技術の洗い出しを行なった。洗い出しを行なった結果、スクレイピングを行なうために Python、Web サービスの作成のために HTML、CSS、JavaScript、サーバサイド言語として Django または PHP を扱う環境が必要と考えられたため、環境構築について調べ、各自準備を進めた。
（※文責: 遠藤侍玄）

3.2.5

ユーザエクスペリエンス作成

ユーザエクスペリエンスとは、ユーザが製品やサービスを通じて得る体験のことである。ユーザ視点での機能の優良さを考えるため、ユーザがその機能を利用することでできること及び体験をまGroup Report of 2020 SISP

- 18 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
とめ、ユーザエクスペリエンスとして作成した。作成したものを図 3.6 に示す。
（※文責: 遠藤侍玄）

図 3.6

3.2.6

ユーザーエクスペリエンス

Git、GitHub の練習

8 月 10 日にオンライン上で GitHub 講習が行なわれたが、メンバーに参加できなかった人がいたため、よく使用するブランチやマージなどの Git コマンドとその使い方についての確認を行なった。その後、実際にメンバー間で Git、GitHub を使用することで練習を行なった。
（※文責: 遠藤侍玄）

3.2.7

Git のルール決め

メンバー間での誤解が生じないようにするため、Git、GitHub を使用する際のルールを定めた。
コミットメッセージに関するルールは以下である。

• ﬁx：バグ修正• add：新規（ファイル）機能追加
Group Report of 2020 SISP

- 19 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
• update：機能修正（バグではない）• clean：整理（リファクタリング等）• disable：無効化（コメントアウト等）• remove：削除（ファイル）
フォーマットに関するルールは以下である。

• 1 行目：変更内容の要約（タイトル、概要）• 2 行目 ：空行• 3 行目以降：変更した理由（内容、詳細）例を以下に示す。

[ﬁx] 表記ルールに従って文言を修正する。
表記ルールでは「続きをよむ」は「続きを読む」になっていた。
（※文責: 遠藤侍玄）

3.2.8

コーディング規約の作成

お互いのコードの可読性を高めるため、チーム内で以下のコーディング規約を作成した。

• 他の人が理解し難いと予想される部分にはコメントを残し、コメントの末尾にはピリオドや句点はつけないこと• 可読性を担保するため 1 行に書く要素は 1 つに留めること• タグ、ID、クラス、色コードなどの記述には、全て小文字で行なうこと• プログラムによって問題が起こる場合があるので、末尾に空白を残さないこと• <!DOCTYPE html>の宣言を行なうこと• <p>タグの中に <h1>などのヘッダーを利用しないこと• クラスの記述市はタグのすぐ隣に記述すること• インラインスタイルやスタイリングタグを使用しないこと• 読みやすいようにセレクタ毎に行を変更すること• ルールとルールの間には 1 行スペースを入れること• セクションをコメントに記載すること• ID やクラス名は数字から始めず、英語を使用すること• ID やクラスに意味不明な名前や見た目を表す名前を付けないこと• JavaScript において、変数の宣言をする場合は、必ず var を宣言するようにすること• JavaScript において、変数の宣言をする場合は、必ず大文字とアンダースコア ( ) を用いて宣言すること• 必ず文末にはセミコロン (;) を使用すること（※文責: 遠藤侍玄）Group Report of 2020 SISP

- 20 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.2.9

スプリントレビュー用資料の作成

10 月 9 日に行なわれるスプリントレビューに向けて、他のグループメンバーが本グループのスプリント 1 での活動内容を理解しやすくするための資料をスライドで作成した。作成した資料の項目は、「サービスの目的」、「サービスの概要」、「プロダクトバックログ」、「ユーザストーリー」、「ユーザエクスペリエンス」という構成とした。
（※文責: 鈴木快）3.2.10スプリントレビュー

スプリント 1 のスプリントレビューは 10 月 9 日に各グループのリーダーとプロジェクトリー
ダーの 4 名で行なった。当初は開発の進捗状況をレビューし合う予定だったが、どのグループもス
プリントプランニング通りの開発ができず、開発予定のサービス概要の説明を行なった。レビュー
内容としては、「サービスの基となった函館観光画像ライブラリ―がどのようなものなのか分かりづらい」、「シビックテックとは何か説明がないと分からない」、「開発する Web サービスの強みがわからない」などの意見をいただいた。いただいた意見から、サービスの内容を知らない人にどのように説明すれば分かりやすく伝わるのか、シビックテックの説明を付け加えるなどの資料訂正、機能の見直しが必要であることが判明した。
（※文責: 鈴木快）3.2.11

スプリントレトロスペクティブ

グループメンバー間でスプリント 1 の活動の振り返りを行なった。良かった点としては、「対面での活動によって会話が増え、話し合いがスムーズに進んだこと」、「出来ることと出来ないことの判断ができるようになったこと」などが挙げられた。反省点としては、「機能についての確認が多かったこと」、「メンバー間で質問に対する反応が少ないこと」、「スクラム・アジャイルの理解が足りていないこと」などが挙げられた。以上の反省点から、「プロダクトバックログの内容をより詳しくすること」、「ユーザストーリーを見て機能についてまとめること」、「スクラムについての理解度を高めること」を、次回以降のスプリントで行なうこととした。
（※文責: 遠藤侍玄）

3.3

スプリント 2

3.3.1

期間

スプリント 2 の期間は令和 2 年 10 月 14 日（水）より 10 月 23 日（金）である。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 21 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.3.2

スプリントプランニング

スプリント 1 のスプリントレビューやスプリントレトロスペクティブなどで得られたフィード
バックを受けて、発表資料の修正、発表方法の見直しをする役割を一部のグループメンバに割り振
り、機能の見直しをグループメンバー全員で検討することとした。また、「画像の詳細説明」、「カテゴリー検索」、「写真の位置が地図上で閲覧できる機能」、「地域別検索」、「デモの準備」を今回のスプリントで実装するプロダクトバックログのアイテムとして選択した。その選択したアイテム
を、実装するために必要な作業に詳細化した。作成したスプリントバックログは以下である。
（※文責: 松橋優花）

図 3.7

3.3.3

スプリント 2 のスプリントバックログ

開発のために必要な技術の導入開発のために必要な技術である Python、Django、Leaﬂet(3.3.5 で後述) の導入を行なった。また、JavaScript、HTML、CSS を記述するためのテキストエディタ―として Visual Studio Codeの導入を行なった。また、当初 Web サービスの開発におけるサーバサイド言語として初期段階では PHP の利用を想定していた。しかし、Django での開発はアプリケーションどうしが疎結合であるため、機能を分離して作成することができる。今回の開発では、複数人がそれぞれの機能を独立して実装する予定であったため、PHP のフレームワークではなく Django を採用した。
（※文責: 小澤海樹）

Group Report of 2020 SISP

- 22 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.3.4

スクレイピング

今回の開発で用いる函館市の観光情報を収集するために、ウェブサイトから特定の情報を抜き出すスクレイピングという技術を Python を用いて、函館市が運営している「函館観光画像ライブラリー」に適用した。具体的に抽出した情報は、「写真」、「写真のタイトル」、「カテゴリー」、「説明文」である。実際に「函館観光画像ライブラリー」にて抽出したウェブサイト内の箇所としては、
図 3.8 の「選んだキーワード」、図 3.9 の観光場所の写真、写真のタイトル（図 3.9 では「ハリストス正教会-1」）、タイトルの下に記載されている観光場所に関するトピックや説明文の部分である。
そして「選んだキーワード」は写真の「カテゴリー」、観光場所に関する文章は「説明文」として扱った。
（※文責: 松橋優花）

図 3.8

Group Report of 2020 SISP

スクレイピングをした情報例 1- 23 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.9

3.3.5

スクレイピングをした情報例 2

地図表示・マーカー表示

GoogleMapAPI の利用を検討していたが、無償枠超過の可能性があり、どの程度のコストが必要になるか見通せないため、オープンデータである OpenStreetMap[10] と Web 地図のための

JavaScript ライブラリの Leaﬂet[11] を用いて地図及び地図上のマーカーの表示を行なった (図3.10)。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 24 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.103.3.6

地図表示・マーカー表示

カテゴリー検索機能

HTML、CSS を用いてチェックボックスを作成し、JavaScript コードをより容易に記述できるようにするために設計された JavaScript ライブラリである jQuery を用いてカテゴリーの絞り込
み検索を行なえるようにした (図 3.11)。詳細については 4.5.3 節で述べる。
（※文責: 松橋優花）

図 3.11

Group Report of 2020 SISP

カテゴリー検索機能- 25 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.3.7

写真などの情報をデータベースで管理

函館観光画像ライブラリーから写真と紐づけてタイトル、カテゴリー、説明文のスクレイピングを行ない、データベースで管理を行なった。データベースの管理は Django を用いた。
（※文責: 松橋優花）

3.3.8

スプリントレビュー

10 月 23 日にスプリントレビューが行なわれ、本プロジェクトの他グループ、TA、担当教員からレビューをいただいた。発表に関してのレビューとしては、「用語の統一ができていない」、「グループ外に伝わらない用語を使っている」、「資料共有したりして工夫したほうが伝わりやすい」、「シビックテックの説明ページを作るべきだ」という意見があった。いただいた意見から、使用する用語の統一、発表資料の修正、発表の仕方の見直しが必要であると判明した。また、開発する

Web サービスの機能に関してのレビューとして、「いいね機能や履歴機能のどこが便利に繋がるのかわからない」や「複雑な処理を必要としそうな機能が多くあげられているがプロジェクト終了までに実装できるのか」という意見があった。そのため、ユーザストーリーの見直しの必要性、実装する機能の縮小を視野に入れることとした。
（※文責: 松橋優花）

3.3.9

スプリントレトロスペクティブ

グループメンバー間でスプリント 2 の活動の振り返りを行なった。良かった点としては、「対面だけでなく Slack や Zoom での質問が増えたこと」、「空いてる時間を見つけて集まって開発を行なうことができたこと」などが挙げられた。反省点としては、「視覚的に分かりやすくしたはずのmiro の更新を怠っていたこと」、「スプリントプランニングでタスクが終了したかどうかの共有をしていなかったため他の作業の進捗状況がわからなかった」、「同じような場面で躓くことがあった
こと」、「どの言語で書くかの確認が取れていなかったこと」、「作業待ちが生じてしまったこと」、「スプリントプランニングが間に合わなかったこと」が挙げられた。反省点から、「各自の作業の進
捗を共有すること」、「各自でスプリントプランニングの更新をすること」、「有識者に確認をすること」、「事前にプロダクトバックログの細分化をすること」を次回以降行なうように話し合った。
（※文責: 遠藤侍玄）

3.3.10

プロダクトバックログの改定

スプリントレビューでの意見から実装する機能の縮小について話し合いを行なった。同一の機能を有するアイテムとして「カテゴリー検索機能」と「地域別検索機能」があったため、組み合わせて「カテゴリー検索機能」とした。また、各機能の必要性と実現性を検討した結果、以下の機能の実装を断念した。

•「戻る」利用時に検索結果が維持される機能
Group Report of 2020 SISP

- 26 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
• 表示履歴機能• フィルター検索機能• 行ってみたよ機能• コメント機能• 写真投稿機能• フリーワード検索機能• フリーワード検索履歴機能• 似た写真をまとめて閲覧できる機能（※文責: 松橋優花）

図 3.12

3.4

スプリント 3

3.4.1

期間

改定前のプロダクトバックログ

スプリント 3 の期間は令和 2 年 10 月 28 日（水）より 11 月 6 日（金）である。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

- 27 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.4.2

スプリントプランニング

スプリント 2 のスプリントレビューやスプリントレトロスペクティブなどのフィードバックを受けて、スプリントレビューで用いる発表資料の修正及び発表方法の見直し、ユーザストーリーの見直しをする役割を一部のグループメンバに割り振った。また、「画像の詳細説明」、「カテゴリー検索」、「写真の位置が地図上で閲覧できる機能」、「地図から写真を探すことができる機能」、「SNS
シェア機能」、「いいね機能」、「デモの準備」を今回のスプリントで実装するプロダクトバックロ
グのアイテムとして選択した。 前回のフィードバックを受けて、発表資料の修正、発表方法の見直し、ユーザストーリーの見直しをする役割を決めた。また、「画像の詳細説明」、「カテゴリー検索」、「写真の位置が地図上で閲覧できる機能」、「地図から写真を探すことができる機能」、「SNSシェア機能」、「いいね機能」、「デモの準備」をプロダクトバックログのアイテムから選択した。その選択したアイテムを、実装するために必要な作業に詳細化した。作成したスプリントバックログ
は以下である。
（※文責: 藤澤萌乃香）

図 3.13

3.4.3

スプリント 3 のスプリントバックログ

場所の緯度・経度

Django に標準で含まれている地理空間データ用のモジュールであり、使用することで地理情報システム の Web アプリケーションの作成が可能となる GeoDjango の環境構築を行なった。そして場所の緯度・緯度を求めるために必要となる Python のライブラリである Geocoder を導入した。写真の位置情報の取得には写真のタイトルを用いた。しかし、写真の観光場所とは異なる位置

Group Report of 2020 SISP

- 28 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020にマーカーが表示されてしまったため改善する必要があった。
（※文責: 藤澤萌乃香）

3.4.4

カテゴリー検索データベースの写真、写真のタイトルなどの情報をスクレイピングを行なった際に紐づけていた
カテゴリーを対応させて、スプリント 2 で行なったカテゴリー検索の機能に組み込んだ。検索した際に函館観光画像ライブラリーの画像や情報を表示できるようにした。
（※文責: 藤澤萌乃香）

3.4.5

お気に入り機能、SNS シェア

スプリントレビューを受け、メンバーから「いいねという言葉よりお気に入りという言葉の方が適切ではないか」という意見が挙がったため、「いいね機能」から「お気に入り機能」へ機能名を変更した。お気に入り登録のボタンを押した際の使用を想定し、HTML と CSS 及び JavaScript
ライブラリである jQuery を用いてアニメーションを作成した。また、HTML と CSS を用いてTwitter、LINE、Facebook へのシェアを行なえるようにした (図 3.14)。
（※文責: 藤澤萌乃香）

図 3.14

3.4.6

お気に入り機能、SNS シェア

スプリントレビュー用資料の訂正

11 月 6 日に行なわれるスプリントレビューに向けての資料を訂正した。以前のスプリントレ
ビューで得た修正点を基にシビックテックに関する説明を追加し、活動内容を初めて知る人でも用語や内容を理解できるよう意識した。発表にはスライドに加えて成果物のデモを用いた (図 3.15)。
（※文責: 鈴木快）Group Report of 2020 SISP

- 29 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.153.4.7

スプリントレビュー用資料 (一部抜粋)

地図表示機能の作成

スプリント 2 で行なった地図表示・マーカー表示の機能に加えて、マーカーにマウスオーバーす
るとデータベースから取得した観光場所の写真とそのタイトルがポップアップされるようにした(図 3.16)。
（※文責: 藤澤萌乃香）

図 3.16

Group Report of 2020 SISP

ポップアップされた写真- 30 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.4.8

トップ画面、詳細画面

完成予想図をもとに無料ホームページテンプレート.com[12] のフレームワークを用いて「トップ画面」、「詳細画面」を作成した (図 3.17、図 3.18)。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

図 3.17

トップ画面の一部

図 3.18

詳細画面の一部- 31 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.4.9

スプリントレビュー

11 月 6 日にスプリントレビューが行なわれ、本プロジェクトの他グループ、TA、担当教員からレビューをいただいた。発表に関してのレビューとしては、「資料が単調であり、どの部分が強調して伝えたい点かいまいち伝わりにくい」、「タイトルから動的に位置情報を取得したという部分
をうまく押せたら思わぬ良い評価に繋がるのではないか」、「ユーザテスト用だとシビックテックに関する説明がまだ分かりにくい」という意見があった。いただいた意見から、発表資料の修正、発表の方法の見直しが必要であると判明した。また、開発する Web サービスの機能に関してのレビューとして、「写真を撮影した時間や天候・季節も閲覧できると良いのではないか」、「文字検索はいらないのか」、「函館観光画像ライブラリーそれぞれの関連リンク先に掲載されている住所から
スクレイピングしてくれば正確になるのではないか」という意見があった。そのため、新たな機能の追加、住所取得方法の再検討を視野に入れることとした。さらに、デザインに関するレビューとして、「具体的なデザイン案がないためイメージしにくい」、「マップから探す画面にピンだけを置いておきマウスオーバーまたはタップでポップアップする形にするとよいのではないか」、「ボタン
名から何ができるのか想像しにくい」という意見があった。このことから、デザイン案の見直し・具体化が必要であると判明した。
（※文責: 藤澤萌乃香）

3.4.10スプリントレトロスペクティブ

グループメンバー間でスプリント 3 の活動の振り返りを行なった。良かった点としては、「作業の進捗報告が多く行なわれていたこと」が挙げられた。反省点としては、「メンバーとの機能の認識の差が多数あったこと」、「デイリースクラムではどこまで開発が進んでいるのかわからないこと」、「アジェンダを出すのが忘れたときがあったこと」、「GitHub を正しく使えていないこと」、「発表の準備がまだ浅いこと」が挙げられた。反省点から、「決まった内容をメモすることによって書き直しを減らすこと」、「デイリースクラムでもっと深い内容を書くこと」、「アジェンダを早めに出すこと」、「ダウンロードに頼らず、GItHub を用いてプルすること」、「発表の練習をもっとすること」を、次回以降行なうように話し合った。
（※文責: 藤澤萌乃香）

3.5

スプリント 43.5.1

期間

スプリント 4 の期間は令和 2 年 11 月 11 日（水）より 11 月 20 日（金）である。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

- 32 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.5.2

スプリントプランニング

スプリント 3 のスプリントレビューやスプリントレトロスペクティブなどから得られたフィードバックを受けて、発表資料の修正、発表方法の見直し、デザインの見直し・具体化をする役割を
一部のグループメンバに割り当てた。また、「写真の位置が地図上で閲覧できる機能」、「写真の詳
細説明を閲覧できる機能」、「お気に入り機能」、「ランキング表示」、「おすすめスポットの表示」、「SNS シェア機能」、「カテゴリー検索画面」を今回のスプリントで実装するプロダクトバックログのアイテムとして選択した。その選択したアイテムを実装するために、必要な作業に細分化した。
作成したスプリントバックログは以下である。
（※文責: 藤澤萌乃香）

図 3.193.5.3

スプリント 4 のスプリントバックログ

アカデミックリンク資料作成

11 月 28 日から 12 月 20 日にオンラインで行なわれるアカデミックリンクに向けて、目視のみで伝わるようなスライド資料の作成を開始した。資料の内容としては、本グループのテーマ、シビッ
クテックについての説明、実装した機能とユーザストーリーなどがある。完成したスライドは付録

B に添付する。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

- 33 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.5.4

位置情報の取得方法の変更

函館観光画像ライブラリーの詳細画面の関連リンク先に観光場所の住所が掲載されていたため、
位置情報の精度を上げるためにスクレイピングを行なった。スクレイピングを行なって得た住所を用いて Python のライブラリーを経由し、緯度・経度を取得した。取得できなかった場合は、従来と同じく写真のタイトルから位置情報を取得した。詳細については 4.6.3 節で述べる [13]。また、当初は Django に標準で含まれている地理空間データ用のモジュールである GeoDjango を利用して位置情報を取得する予定であった。しかし、GeoDjango の災害避難所やバス停留所データなど
は本サービスに必要なかったため利用しなかった。
（※文責: 藤澤萌乃香）

図 3.203.5.5

スクレイピングを行なった情報

お気に入り機能

非同期にサーバとの通信を実現する Ajax 通信を jQuery により実現し、データベースとの通信を非同期に行ない「お気に入り機能」を実装した。お気に入り登録をしたユーザの情報を保存するために、データベースに新たにモデルを作成した。機能の詳細については 4.5.4 節で述べる。
（※文責: 藤澤萌乃香）

3.5.6

お気に入り・ランキングページ作成

完成予想図をもとに、HTML、CSS を用いて「お気に入り画面」、「ランキング画面」を作成した。それぞれの画面には複数の機能が埋め込まれており、共通の機能としては、「お気に入り機能」
があり、表示される情報としては写真とそのタイトル、説明文がある。画面の詳細は 4.5.4 節,4.5.5
節で述べる。
（※文責: 藤澤萌乃香）

3.5.7

デザイン案の見直し・具体化

前回のスプリントレビューで「ボタン名から何ができるのか想像しにくい」という意見があったため、完成予想図で「サイトについて」から「サイトの概要」へ名前の変更を行なった。また、グループ内で話し合った際に「市が提供している写真にいいねをするのは違和感がある」、「機能を考えたときにいいねよりもお気に入りとしたほうが意味合いが近いと感じる」という意見があったた
め、「いいねボタン」から「お気に入りボタン」への名前の変更を行なった。さらに、完成のイメー
ジをより具体的なものとするため、実際の写真を挿入した。

Group Report of 2020 SISP

- 34 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020（※文責: 藤澤萌乃香）

3.5.8

スプリントレビュー用資料の訂正

11 月 20 日に行なわれるスプリントレビューに向けて資料の訂正をした。完成予想図を用いてサービスを利用する流れを説明し、ユーザの状況に応じたサービスの利用方法を説明した (図3.21)。その後に実際にデモをすることで、更にサービス利用の流れを掴みやすいように工夫した。
また、スライドに「今後の展望」を追加した。
（※文責: 鈴木快）図 3.21

3.5.9

スプリントレビュー用資料、資料の流れ

スプリントレビュー

11 月 20 日にスプリントレビューが行なわれ、本プロジェクトの他グループ、TA、担当教員からレビューをいただいた。発表に関してのレビューとしては、「発表用スライドの情報が多い」、「デモから今後の展望という流れのほうが実装内容が掴みやすい」、「旅行計画を立てると仮定して「函館」「観光」などで調べると「はこぶら」が出てくるがそれとの比較はしないのか」、「スライドがパッと見で理解が難しい」、「他の Web サービスと比較した上で自分たち独自の機能・価値を目立たせたらよいのではないか」という意見があった。いただいた意見から、発表資料の修正、発表の仕方の見直しが必要であると判明した。また、開発する Web サービスの機能に関してのレビューとして、「今後の展望で実装したい機能に優先度をつけた方が良い」、「どの段階でリリースするのかを検討した方が良い」という意見があった。そのため、優先度・リリースに関する検討をすることとした。さらに、デザインに関するレビューとして、「お気に入り登録の色を変更したほうが良Group Report of 2020 SISP

- 35 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
いのではないか」という意見があった。このことから、デザイン案の見直しが必要であると判明した。
（※文責: 藤澤萌乃香）

3.5.10スプリントレトロスペクティブ

グループメンバー間でスプリント 4 の活動の振り返りを行なった。良かった点としては、「実装したい機能が実装できたこと」、「作業の割り振りがうまく行なえたこと」が挙げられた。反省点としては、「開発に集中しすぎて周りが見えなくなったこと」、「作業の共有のし忘れがあったこと」、「レビューで発表方法での意見が多くみられたこと」が挙げられた。反省点から、「他のメンバーの進捗を確認し、周りにも気を配るようにすること」、「開発だけでなく、発表・質問の練習を行なう
時間を作ること」を話し合った。
（※文責: 藤澤萌乃香）

3.6

スプリント後スプリント内で開発が終わらなかったため、スプリント後も継続して機能の追加を行なった。また、成果発表に向けてそれに伴った発表資料・デモの修正を行なった。
（※文責: 藤澤萌乃香）

3.6.1

デザイン案の改定

担当教員からいただいたレビューをもとにメンバー間でデザインの再検討を行なった。地図機能を第一にアピールするために、トップ画面の下部に配置していた地図を上部に移動した。
（※文責: 藤澤萌乃香）

Group Report of 2020 SISP

- 36 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

Group Report of 2020 SISP

図 3.22

変更前のトップ画面

図 3.23

変更後のトップ画面- 37 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.6.2

現在地の取得ユーザの現在地を取得し地図上にマーカーで表示した。また、取得した現在地をもとに近くの観
光場所の提案を行なえるようにした (図 3.24)。
（※文責: 藤澤萌乃香）

図 3.243.6.3

現在地・近くの観光場所の提案

画面遷移

それぞれの画面からメニューバーの右端にあるボタンをクリックすることで、ボタンに対応した
他の画面に遷移することができる。遷移できる画面としては、「お気に入り画面」、「カテゴリー検索画面」、「ランキング画面」、「サイト概要」がある。また、それぞれの画面上部にある「はこだてinPhotomation」のタイトルをクリックするとトップ画面に遷移することができる。
（※文責: 藤澤萌乃香）

図 3.25

3.6.4

メニューバー

トップ画面

トップ画面にあるカテゴリー検索結果へのサジェストに、それぞれのカテゴリーに属している写真の件数を表示できるようにした (図 3.26)。また、カテゴリー検索結果へのサジェストは、初期段階ではいくつかのカテゴリーしか実装していなかったが、全てのカテゴリー検索結果へのサジェス

Group Report of 2020 SISP

- 38 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
トを追加した。
（※文責: 藤澤萌乃香）

図 3.263.6.5

トップ画面・カテゴリーに属している写真の件数表示

ランキング画面

検索画面からのみお気に入りを登録することができたが、ランキング画面からもお気に入りを登録できるように機能を追加した。ユーザはランキングを見て、他のユーザがどんな写真をお気に入り登録しているかを知り、ユーザ自身も行ってみたいと思った観光場所の写真をお気に入り登録し、後からその場所を詳細画面から確認できるようにした。
（※文責: 藤澤萌乃香）

3.6.6

スプリントレビュー用発表資料・デモの修正

デザイン案の改定や機能の追加に伴い、発表資料とデモの修正を行なった。口頭発表に用いる資料だったので、スライド 1 ページに文字の情報を詰め込みすぎないようにした。また、デモをその場で行なうのでなく予め録画することにより発表時での不具合が生じないようにした。
（※文責: 鈴木快）Group Report of 2020 SISP

- 39 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.7

アカデミックリンク

3.7.1

概要

11 月 28 日から 12 月 20 日に、函館市内にある大学・短大・高専や他地域の大学などが、Web 上
でポスター・スライド・動画を用いて、研究や取り組みを発表する場である「HAKODATE アカ
デミックリンク 2020」がオンラインで開催された [14]。
（※文責: 松橋優花）

3.7.2

発表準備

本グループは、アカデミックリンクに向けて発表に用いるスライドと発表詳細の文章をスプリン
ト 4 から準備した。発表用スライドは、中間発表で用いた内容をベースにアカデミックリンクまでの活動の流れを追加する形となった。担当教員と他のグループのメンバーから作成した発表に用いるスライドのレビューをいただいた。「Web サービスの明確な目的スライドを作成した方が良い」、「スライドの順番が説明をする上でわかりにくい」、「口頭発表をともなわないスライドは読めば分かるように文章で説明するべき」などの意見があった。いただいたレビューをもとに、目的スライドの追加、スライドの順序変更、説明の追加を行なった。また、Google フォームを用いて発表内
容に関するお問い合わせ受付フォームを作成した (図 3.27)。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 40 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 3.273.7.3

お問い合わせフォーム

発表内容

本グループでは、発表詳細の文章とスライドを用いて発表を行なった。発表詳細で「シビックテックと開発している Web サービスは写真からの視覚的情報で函館の魅力をアピールできること」、「地図からの検索や写真の位置情報、おすすめスポットを閲覧することができること」を説明した。スライドでは、背景を始めとして目的、機能、サービス比較、利用手順について紹介した。
作成したスライドは付録 B に添付する。
（※文責: 松橋優花）

3.7.4

フィードバックの内容

Google フォームにて発表内容についてのフィードバックをいただいた。フィードバックの内容
は、「背景に書かれていた、市民情報サービスでは有益な情報が埋もれてしまっていると書かれていたが、そこから観光客に関する情報発信が足りないという話に繋がらないのではないか」、「現状のサービスでは観光スポットに対する追加された情報が位置情報のみであるが、観光客は営業時間や費用なども気になるのではないか」、「ランキング機能は具体的に何のランキングか分からない」という意見があった。それをもとにグループで話し合いを行ない「営業時間や費用なども詳細画面に載せることを検討する」、「ランキング機能と背景について、より伝わるように説明を心がける」

Group Report of 2020 SISP

- 41 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020こととした。
（※文責: 鈴木快）

3.8

成果発表

3.8.1

発表準備

スライドはスプリントレビューの発表資料を訂正したものを用いた。構成は、「本グループにつ
いて」
、
「背景」
、
「既存のサービス」、「サービスの概要と目的」、「機能の詳細」、「今後の展望」とした。発表 1 週間前に担当教員から、「既存のサービス」の説明が不十分である、動画のナレーションに元気がないといった意見をいただいた。そのため、「既存のサービス」の説明を追加し、ナレーションを録り直した。発表資料に動画を用いてデモを披露した。内容は、画面遷移の様子、それぞれの画面（トップ画面、詳細画面、カテゴリ検索、ランキング画面）の様子とした。また、プロジェクトの概要や 3 つのグループの活動内容をまとめたポスターを作製した。ポスターの内容は付
録 C に添付する。
（※文責: 松橋優花）

3.8.2

成果発表についての評価と反省

評価回収フォームのデータ内容を集計した結果、本プロジェクトの成果発表の評価は 48 件あり、平均は 10 点満点中約 8 点だった。評価フォームの項目としては、発表技術、発表内容という 2 つがあった。いただいたレビューは以下である。

• 成果物の背景や目的、機能などがはっきりとわかった• 内部構造が、理由と共に説明されており参考になった• 使ってみたくなるようなアプリの機能の説明で好印象だった• 過程説明から成果物までのつながりが見えてとてもわかりやすかった• あまり驚きや発見は感じられなかった• 対抗アプリとの違いなどがうまく伝わると良いなと思った• この手のアプリは、機能面もそうだが、利便性と見た目が強く求められるため、色々なレイアウトの事例を見ながら、ブラッシングをすると良い• 函館観光画像ライブラリーの市の担当者と情報システム課のオープンデータ担当の方、ハコ
レコやシンプルウェイの担当の方を呼んで、リアクションを貰うことを勧める
中間発表では、目的が抽象的で具体的な実装がわからないという意見をいただいた。最終成果発表
では、目的や機能を具体的に考え実装したため、同様な意見は少なく、好印象なレビューをいただ
くことができた。これらのレビューから、「他のアプリとの差別化を図るため、新たな驚きや発見ができるような機能を考えていくこと」、「ユーザが使いやすくなるように UI の改良を続けていくこと」、「函館観光画像ライブラリーの担当の方から意見をいただくこと」が必要であると判明した。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 42 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

3.9

北海道東北合同発表会

2020 年度 enPiT BizSysD 北海道東北合同発表会は 12 月 12 日にオンラインで行なわれた。本
グループは使ってもらって学ぶフィールド指向システムデザイン 2020 のグループとして発表会に臨んだ。13 時から開会の挨拶が行なわれ、その後全 14 チームがそれぞれ 1 分間のライトニン
グトークが行なわれた。発表は 2 グループに分かれて各 1 時間で Zoom のブレイクアウトルーム
で行なわれた。事前に作成した 15 分程度のプロジェクト紹介動画とポスターを見てもらった後、miro を用いて質疑応答を行なった。2 グループの発表が終わった後に miro を用いて創造性、先進性、実現性の 3 つの観点で投票を行なった。
（※文責: 遠藤侍玄）

3.9.1

評価と反省

本グループは実現性が 3 票、先進性が 2 票、創造性が 1 票という結果になった。一番票の入った
実現性は提案全体の実施しやすさの観点で、実際にプロジェクトの活動を通して開発段階まで入っていたため、一番票を獲得したと考える。二番目に票の多かった先進性では成果物の技術的、手法
的な新しさの観点で、プロジェクトがスクラムで開発を進めていることなどで票を獲得したと考える。創造性は発想の独自性、革新性の度合いの観点で、どのグループのサービスも既存のサービスとの比較を明確に示した資料ではなかったため、票が少なくなってしまったと考える。
（※文責: 遠藤侍玄）Group Report of 2020 SISP

- 43 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第4章
4.1

開発中のサービス

概要

本グループでは、函館市の Photo(写真) とその観光場所に関する詳細な説明や位置などのInformation(情報) をまとめて Web サービスとして提供し、写真や地図から函館市内で観光したい場所を効率的に探すことができることにより、函館市の「観光客の増加」と「地域活性化」に繋げることを目的として活動している。主な機能としては、「地図上で写真を探すことができる機
能」、「写真の位置が地図上で確認できる機能」、「カテゴリー検索機能」、「現在地から近い写真を提示してくれる機能」、「ランキング機能」などがある。
（※文責: 鈴木快）

4.2

対象ユーザの想定

本サービスの対象ユーザは、函館観光を計画している人と、函館で実際に観光をしている人である。サービス対象の想定ユーザが抱える課題やニーズを鮮明にイメージできるよう、ペルソナを設定した。ペルソナとは実際にその人物が実在しているかのように、年齢、性別、職業や休日の過ごし方などリアリティのある詳細な情報を設定していくことにより、Web サービスを利用するサービス対象の想定をすることができる。氏名は函館未来で 21 歳の女性大学生である。都内在住で趣味は友人との旅行で写真好きである。最近「函館に行ってみたい」と興味を持っている。旅行の計
画・提案をよくする。日々のアルバイトで稼いだお金は主に趣味の旅行に使う。スマホとパソコンを持っていて、写真投稿の SNS や動画サイトをよく見る。以上のペルソナを基にユーザ目線でものごとを考え、新たな発想を得られるようにした。
（※文責: 鈴木快）Group Report of 2020 SISP

- 44 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.3

UI/UX の決定

UI/UX デザインを決定するために、ペーパープロトタイピングを行なうことによって完成予想図を作成した。ペーパープロトタイピングとは各機能が備わった画面の完成予想図を視覚化することで、開発前に必要な機能の検証や、議論を容易に進めることが可能になる。各メンバーがペー
パープロトタイプを作成し、それらの中で最もシンプルかつ操作方法が直観的な案に決定した。その後、作成された完成予想図の内容をより深くするために、本サービスを利用する上でユーザが使いやすいデザインとは何かを検討した。画面遷移を分かりやすくすることにより、ユーザの負荷にならないようなデザインにすることを決定した。例として、カテゴリー検索画面と検索結果画面を画面遷移なしで実装したことにより、表示することで画面遷移を減らした。検討したデザインを基に、完成予想図に修正を加えていった (図 4.1)。
（※文責: 鈴木快）

図 4.1

4.4

完成予想図

エレベーターピッチ

サービスを簡単にかつ明瞭に説明するために、エレベーターピッチを作成した (図 4.2)。これは、以下の 7 つの項目を明確にして決めるものである。

Group Report of 2020 SISP

- 45 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
1. 潜在的なニーズを満たしたり、解決したい課題
2. 対象顧客は誰か
3. プロダクト名は何か
4. プロダクトのカテゴリーは何か
5. プロダクトが持つ重要な利点、最大の長所は何か
6. 代替手段、競合相手との違いは何か
7. 差別化の決定的な特徴は何か
本グループでは、以下のように決定した。

1. 観光客を増やし、函館の地域活性化を目指す
2. 函館に興味がある観光客
3. はこだて inPhotomation
4. シビックテック
5. 写真や地図から函館市の観光場所を効率的に探すことができる
6. 函館観光画像ライブラリー
7. 地図や位置情報などの詳細情報が備わっている（※文責: 鈴木快）図 4.2

Group Report of 2020 SISP

エレベーターピッチ- 46 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.5

開発済みの画面

開発済みの各画面とそれに付随する機能は以下である。

• トップ画面には、「地図から観光場所を探す機能」、「ユーザの近くの観光場所を提案する機能」がある。また、「ランキング機能」や「カテゴリー検索機能」の情報を簡潔にまとめて表示しており、具体的には「ランキング機能」で順位付けした観光場所の写真のランキング上位 3 つをユーザに提案する。ユーザはその写真をクリックするとその写真の詳細画面に移動することができる。加えて「カテゴリー検索機能」の各カテゴリーのサムネイルを作成し、サムネイルをクリックすることでそのカテゴリーの検索結果を表示したカテゴリー検索画面に移動することができる。

• カテゴリー検索画面には、「カテゴリー検索機能」、「お気に入り機能」がある。
• ランキング画面には、「ランキング機能」、「お気に入り機能」がある。
• お気に入り画面では、お気に入り登録した観光場所の写真とそのタイトル及び説明文の一覧を表示する。お気に入り登録した写真の中で特定の写真についての詳細を知りたい場合、クリックすることで詳細画面に移動し、さらに観光場所の情報を得ることができる。

• 詳細画面には、「特定の観光場所を地図上に表示する機能」、「特定の観光場所の近くにある観光場所を提案する機能」、「特定の観光場所と同じカテゴリーの観光場所を提案する機能」、「お気に入り機能」がある。また、ユーザが選択した観光場所の写真とそのタイトル、詳細
文、住所が表示される。
各機能の詳細については 4.6 節で述べる。
（※文責: 小澤海樹）

Group Report of 2020 SISP

- 47 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.6

開発済みの機能

4.6.1

地図から観光場所を探す機能

地図上にユーザの位置を示すマーカーを表示し、加えて観光場所の位置にマーカーを表示する。
観光場所のマーカーはマウスオーバーすることで、マーカーの上に観光場所の写真が表示され、さらにマーカーをクリックすることでその観光場所の詳細画面に移動することができる。また、同一の位置（緯度・経度）に複数のマーカーが表示される可能性がある場合は、ユーザの見やすさを考慮しその位置に表示されるマーカーからランダムに一つを選択して、その観光場所のマーカーとして表示している。
函館市内にいるユーザは、地図上に表示されているユーザ自身の位置情報のマーカーと観光場所のマーカーに埋め込まれている写真を見て観光場所を探すことができる。また、函館市の緯度と経度を函館市外に所在があるユーザであっても、ユーザの位置情報は仮に函館駅に補正され、市内の観光場所としてどんなものがあるか、地図上から探すことができる。その実装のために、ユーザの所在が函館市内外のどちらにあるかを判定した。具体的には函館市の東西の最端になる二つの経度と南北の最端になる二つの緯度を用いて函館市内という領域を設定し、ユーザ自身の緯度・経度がこの領域の内にあるか外にあるかで判定を行なっている。
（※文責: 小澤海樹）

図 4.3

Group Report of 2020 SISP

地図から観光場所を探す機能- 48 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.6.2

ユーザの近くの観光場所を提案する機能

ユーザの現在地に近い複数箇所の観光場所の写真とそのタイトル・住所を提案する機能である。
ユーザは近くにある複数の観光場所の写真を見ることができ、気になる写真や行ってみたい場所が見つかれば、クリックすることでその場所の詳細画面に移動し、さらに情報を得ることができる。
この機能は観光場所の実際の緯度と経度およびユーザの位置情報からユーザに近い観光場所を提案するため、「地図から探す機能」では分かりづらい、実際にはどの観光場所がユーザの近くにあるかという情報を補っている。また、近くにある特定の観光場所を提案するサムネイルとしての画像に候補が複数ある場合は、ユーザに提案される写真が偏らないようにするため、候補の中からランダムに選択される。
（※文責: 小澤海樹）

図 4.4

Group Report of 2020 SISP

ユーザの近くの観光場所を提案する機能- 49 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.6.3

カテゴリー検索機能

カテゴリー検索機能は写真のカテゴリーに対応したチェックボックスを選択することで、そのカテゴリーに該当する観光場所の写真と説明文をすべて表示することができる。このカテゴリー検索
機能はユーザビリティを考え、チェックボックスを選択するだけでリダイレクトなしに検索結果が表示される。また、複数のカテゴリーを指定することも可能で、その場合は観光場所の写真に割り当てられているカテゴリーに、選択したカテゴリーが一つでも当てはまれば検索結果に表示される。ユーザは、興味のあるカテゴリーを選択し、検索結果に表示された観光場所の写真を見て、興味のある写真や説明文があれば写真もしくは「詳細」というリンクをクリックして詳細画面に移動し、さらに観光場所の情報を得ることができる。検索結果には写真とその説明文だけではなく、「SNS シェア機能」を備えた「LINE」、「Twitter」、「Facebook」のアイコンと「お気に入り機能」を備えたお気に入りボタンが一緒に表示される。お気に入りボタンの隣の数字は、今までにその写真をお気に入り登録したユーザの数を表している。カテゴリーを何も選択していない状態ではすべての観光場所の写真と説明文の一覧が検索結果に表示され、ユーザはこの状態でも観光場所を探すことができる。また、何もカテゴリー選択していない状態での写真の一覧表示は、画面を読み込むたびに写真の一覧はランダムにソートされ、ユーザに観光場所の提案が偏ってされないようになっている。途中でカテゴリー選択をすべて外した場合、そして逆にカテゴリーを全て選択した場合は同様にして、写真の一覧はランダムにソートされずに最後に画面を読み込んだ順で一覧表示される。
（※文責: 小澤海樹）

図 4.5

Group Report of 2020 SISP

カテゴリー検索機能- 50 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.6.4

お気に入り機能

お気に入り機能は、カテゴリー検索画面や詳細画面で気になる写真や行ってみたい場所の写真を見つけたら、後から見れるようお気に入りとして写真を登録できる。お気に入りボタンをクリック
するとボタンの色が変わり、ユーザ自身がその写真をお気に入り登録しているか確認できる。登録した写真とそのタイトル及び説明文の一覧は、お気に入り画面から確認でき、お気に入り登録した写真の中で特定の写真についての詳細を知りたい場合、クリックすることで詳細画面に移動し、さらに観光場所の情報を得ることができる。
（※文責: 小澤海樹）

図 4.6

Group Report of 2020 SISP

お気に入り機能- 51 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.6.5

ランキング機能ランキング機能は、特定の写真をお気に入り登録しているユーザの数で観光場所の写真を順位付
けし、ランキング画面ではランキング順に写真とそのタイトル及び説明文が一覧として表示される。加えて、「お気に入り機能」を備えたお気に入りボタンとその観光場所の写真をお気に入り登録したユーザの数も表示される。ユーザは他のユーザがどんな写真に興味を持っているのか知ることができる。また、ランキングとして一覧表示された写真の中に興味のあるものがあれば、クリッ
クすることで詳細画面に移動し、さらに観光場所の情報を得ることができる。
（※文責: 小澤海樹）

図 4.7

4.6.6

ランキング機能SNS シェア

ユーザは、観光場所の写真のタイトル、説明文、詳細画面の URL のセットを一つずつ「Twitter」、「LINE」、「Facebook」等の SNS で共有することができ、ユーザが旅行の計画を立てる際に知人への函館市内の観光場所を提案しやすくする。
（※文責: 藤澤萌乃香）

4.6.7

特定の観光場所を地図上に表示する機能

特定の観光場所を地図上に表示する機能は、詳細画面における機能の一つで、カテゴリー検索画
面やランキング画面で特定の観光場所の写真を選択したとき、移動先の詳細画面において、観光場
所の写真、そのタイトルおよび説明文と共に地図上に選択した観光場所の位置に、クリックすると写真がポップアップされるマーカーを表示する。ユーザは観光場所の写真の所在がどこにあるか、Group Report of 2020 SISP

- 52 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
地図を見ることで知ることができる。また、特定の写真がどこにあるかわかりやすくするため、「地
図から観光場所を探す機能」のように複数の観光場所のマーカーは表示されず、選択した観光場所のマーカーしか表示されない。
（※文責: 小澤海樹）

図 4.8

4.6.8

特定の観光場所を地図上に表示する機能

特定の観光場所の近くにある観光場所を提案する機能

特定の観光場所の近くにある観光場所を提案する機能は、カテゴリー検索画面やランキング画面
で特定の観光場所の写真を選択したとき、移動先の詳細画面において、観光場所の写真、そのタイ
トルおよび説明文と共に選択した観光場所の近くにある複数分の観光場所を提案する。ユーザは、選択した観光場所の近くにある観光場所の写真を見て、もし興味を持ったり行ってみたいと思えば、クリックすることでその写真の詳細画面に移動し、さらに観光場所の情報を得ることができる。
（※文責: 小澤海樹）

図 4.9

特定の観光場所の近くにある観光場所を提案する機能

Group Report of 2020 SISP

- 53 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.6.9

特定の観光場所と同じカテゴリーの観光場所を提案する機能

特定の観光場所と同じカテゴリーの観光場所を提案する機能は、カテゴリー検索画面やランキン
グ画面で特定の観光場所の写真を選択したとき、移動先の詳細画面において、観光場所の写真、そのタイトルおよび説明文と共に選択した観光場所に割り当てられたカテゴリーと同じカテゴリーである他の観光場所を複数提案する機能である。ユーザは、選択した観光場所と同じカテゴリーの観
光場所の写真を見て、もし興味を持ったり行ってみたいと思えば、クリックすることでその写真の詳細画面に移動し、さらに観光場所の情報を得ることができる。また、この機能は選択した観光場
所と同じカテゴリーの観光場所の写真を複数提案するため、特定のカテゴリーに興味を持つユーザ
は、毎回カテゴリー検索画面に移動する必要なく、観光場所を写真から探すことができる。
（※文責: 小澤海樹）

図 4.10

特定の観光場所と同じカテゴリーの観光場所を提案する機能

4.7

使用した技術4.7.1

DjangoDjango は、サーバサイド言語である Python で実装された Web アプリケーションフレームワー
クであり、その特徴はデータベース言語を直接記述しなくとも、Python の書式でデータベースを管理できること、そして MTV パターンにある。MTV とは Model(モデル)、Template(テンプレート)、View(ビュー) の略称で、MTV パターンはモデルとしてデータベースの定義を記述、テンプレートでユーザの画面に表示する情報の基礎を記述、ビューではデータベースから取得したテンプレートに渡すデータやリクエスト情報などを処理する。今回の開発では基本的にこの方式で開発を行ない、モデル・ビューは Python、テンプレートは HTML で実装している。今回の開発ではモデルとして Image モデルを作成し、画像の識別子に IntegerField を利用して自然数をそれぞれに割り当て img id（主キー）とし、観光場所の画像データと写真としてのタイトル、位置情報、

Group Report of 2020 SISP

- 54 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
カテゴリーなどを紐づけてデータベースを定義した。Image モデルだけではなく、「お気に入り機能」を実装するためにユーザの情報と Image モデルを子（外部キー）に持つ Favo モデルを定義した。また、加えて Django の機能である URL ディスパッチャを利用し、URL に応じてどのページを表示するか処理している。今回の開発では、観光場所の写真についての詳細画面を 100 以上生成するため、URL ディスパッチャとビューでの処理を利用して詳細画面を動的に実装した。具体的には、画像の識別子として付けた img id を URL に渡して、選択した画像の img id に対応したページを詳細画面として表示されるように処理している。詳細画面では、URL から img id を取得して、img id に対応した画像、写真としてのタイトル、説明文、住所を動的に表示する。また、

Django には admin サイトという作成したモデルを管理者がブラウザから編集できる機能があり、今回の開発でもそれを用いた。admin サイトにおいて、Image モデルと Favo モデルそれぞれが思い通りに定義できているか、挿入されるデータに欠損はないか、などデータベースに変更を加えるごとに確認をしながら作業し、データベースに関する重大なエラーが起きないように心がけた。また、Favo モデルは Image モデルを子に持つため、Image モデルの変更が Favo モデルに反映されているか、Favo モデルを経由して取得した Image モデルのデータに不備はないか、などの確認も逐次行ないながら作業することで複雑なモデルも効率よく作成できた (図 4.11)。

Django にはさまざまなライブラリがあるが、今回の開発で利用したものの一つに、JsonResponse
ライブラリがある。基本的に Django は、HTTP リクエストを受け取り、HTTP レスポンスとしてデータの送信や処理を行なうが、今回は JsonResponse ライブラリを用いて JavaScript が受け取ることのできる Json ファイルでデータを送信し、HTTP リクエストがなくとも非同期に通信が行なえるようにデータを準備した。今回は、JavaScript 側に特定の写真をお気に入り登録しているユーザの数と閲覧しているユーザ自身がその写真をお気に入り登録しているか否かというデータを渡している。また、お気に入りボタンをクリックした際には特定の写真をお気に入り登録しているユーザの数や自身がその写真をお気に入り登録しているかの表示はリダイレクトなしにされるが、Json ファイルの受け渡しでは HTTP リクエストを必要としないため、画面を読み込んだ際にはそのデータが表示されない。そのため、Django の Count ライブラリを利用し、特定の写真をお気に入り登録したユーザの数をカウントし、HTTP レスポンスとして渡して解決している [15]。
（※文責: 小澤海樹）

Group Report of 2020 SISP

- 55 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

図 4.11

4.7.2

Django の admin サイト

JavaScript

今回の開発では、JavaScript のオープンソースライブラリである Leaﬂet を利用して地図に関する機能を実装した。また、「カテゴリー検索機能」については、同じく JavaScript のライブラリである jQuery を利用して実装した。「お気に入り機能」に関しては、写真をお気に入り登録した
ユーザの情報などをデータベースに保存し、お気に入り登録のボタンの表示を変えるためにリダ
イレクトなしの非同期通信を行なえる Ajax 通信を jQuery を利用して実装した。「地図から探す機能」においては、ユーザの現在地を表示するための API として Geolocation API を利用した。

Geolocation API では GPS に対応している端末、Geolocation API に対応しているブラウザを使用している場合に GPS を利用してユーザの位置情報を緯度と経度で取得する。また、GPS に対応
していない端末でアクセスした場合や GPS を利用した位置情報の取得に失敗した場合は、IP アド
レスを利用して位置情報を取得する。
（※文責: 小澤海樹）

4.7.3

その他

今回の開発で用いた観光場所の写真やそのタイトル、カテゴリーなどの情報は、Web サイト内の特定のデータを抜き取るスクレイピングを、函館市の観光画像を提供している「函館観光画像ライブラリー」に適用し取得した。また、写真の位置情報は「函館観光画像ライブラリー」には記載されていないため、写真の詳細ページにて写真の詳細について説明している Web サイト、函館市

Group Report of 2020 SISP

- 56 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
公式観光情報「はこぶら」へのリンクをたどり、再びその Web サイトに対してスクレイピングを適用することで位置情報として写真の観光場所の住所を取得した。加えて、取得した観光場所の住所を、地図上にマーカーを表示するための情報として緯度と経度に変換する必要がある。その変換については Python において Geocoding.jp の API を利用して行なった。また、「はこぶら」のス
クレイピングに失敗もしくは位置情報が記載されていなかった場合、Python のライブラリである

Geocoder を利用し、緯度と経度を写真のタイトルから動的に取得した。
（※文責: 遠藤侍玄）

4.8

今後の展望

4.8.1

機能について今回の開発で、実装にまでは至らなかった機能として「ユーザが撮った写真をユーザ自身がアップロードできる機能」がある。ユーザが提供するデータには「函館観光画像ライブラリー」などのオープンデータにはない無差別的な要素が含まれる。本サービスのユーザにオープンデータにはな
い、様々な観光場所を写真で提案できることは、サービスが与える UX の向上を望むことができる。しかし、ユーザが提供する情報の無差別性をどこまで許容するかという点で問題になった。観
光に関係のない写真や観光には関係あるが函館では撮られていない写真など、情報の精度や妥当性に散らばりができ、それを補完する方法を今回は確立できなかった。初期の解決案として、提供された写真や位置情報の正確性・妥当性を開発元である我々が判断してから情報を他のユーザの見れる状態で提供するというものがあったが、それでは開発側のメンテナンスが逐次必要であり、情報の正確性・妥当性の判断自体が難しいこともあって機能の実装には至らなかった。よって今後の展望の一つとして、開発側の負担の軽減と情報の正確性・妥当性を向上させる方法を確立させたうえでの「ユーザが撮った写真をユーザ自身がアップロードできる機能」の実装がある。
（※文責: 小澤海樹）

4.8.2

提供する情報の収集について

今回の開発で利用したデータは「函館観光画像ライブラリー」で提供されているものである。観
光情報をオープンデータとして提供しているウェブサイトは他にもあり、「函館観光画像ライブラリー」の情報提供元でもある「はこぶら」もその一つで、観光情報を提供している。今後の展望として、信頼のおけるウェブサイトから観光情報をさらに収集、「函館観光画像ライブラリー」のデータに位置情報を付加したように他のウェブサイトから集めたデータにも同じことを施し、複数のウェブサイトに散らばっているオープンデータを本サービスで一つにまとめ、提供することがあげられる。
（※文責: 小澤海樹）

Group Report of 2020 SISP

- 57 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

4.8.3

函館市の特性を活かした開発

函館市の特性として、その水産資源を含めた自然の豊かさと歴史的な背景および建造物により観光産業に優れているという点がある。今回の開発では、その特性を活かすために「函館観光画像ライブラリー」で提供されている観光場所の情報をまとめ、ユーザに提供して観光を支援することを目指した。しかし、本サービスでユーザが得られる主な体験は、「函館市内の行ってみたい観光場所を見つける」というものである。今後の展望として、ユーザの函館市観光をより円滑に支援するた
めには、ユーザの観光の形を把握し、デザインするための開発が必要であると考える。函館市の優れた水産資源によって食に興味を持つ観光客、函館市の豊かな自然によってスキーやカヌーなどのレジャーを求める観光客、函館市の歴史的な建造物や夜景を写真に収めたい観光客など、ユーザの観光の形は様々であり、それらを支援するためにその観光の形に合わせた情報の提供の方法を確立しなければならない。例えば、ユーザの趣味・嗜好に合わせてサービスの形を変えるために、サー
ビス利用開始時にユーザに簡単なアンケートへの回答を行なってもらうなどの方法が考えられる。
（※文責: 小澤海樹）

Group Report of 2020 SISP

- 58 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第 5 章 知識・技術習得
5.1

フィールドワーク入門講座

フィールドワークとはどんな活動なのかを知るために、6 月 5 日にオンラインで行なわれた南部先生によるフィールドワーク入門講座をプロジェクトメンバー全員で受講した。講座では、フィールドワークとは何か、現場で何に注目するか、調査をする上での注意事項等を学んだ。フィールド
ワークはただ現場に行って活動するのではなく、情報を得て、整理し、その情報をどのように扱い、行動するかが大事だと分かった。資料の一部を図 5.1 に示す。
（※文責: 小澤海樹）

図 5.1

Group Report of 2020 SISP

フィールドワーク入門講座資料 (一部抜粋)- 59 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

5.2

スクラム開発ワークショップ (一部抜粋)

アジャイル及びスクラム開発についての知識を深めるために、6 月 17 日に産業技術大学院大学

enPiT 特任教授である永瀬氏を講師に迎え、オンラインで行なわれたスクラム開発ワークショッ
プにプロジェクトメンバー全員で参加した。ワークショップではまず、ソフトウェア開発へのプロ
ジェクトマネジメントの適用について現在の劇的な速度で変化するビジネス状況を踏まえて説明していただき、アジャイル開発が開発における構造ではなく開発する人に注目すること、チームで持続可能な開発を目指すことなどアジャイルの概要について学んだ。その後、スクラムの仕組みについて学び、スクラムが反復的かつ漸進的な開発であり、プロダクトオーナーやスクラムマスターの役割などが分かった。資料の一部を図 5.2 に示す。
（※文責: 小澤海樹）

図 5.2

Group Report of 2020 SISP

スクラム開発ワークショップ資料 (一部抜粋)- 60 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

5.3

アジャイル勉強会

アジャイル開発についての知識と理解を得るために、6 月 19 日に TA である未来大学学部 4 年
立花氏にワークショップを含んだアジャイル勉強会をオンラインで開いていただいた。勉強会では
ウォーターフォール型の開発とアジャイル開発を比較しながらそれぞれの特徴を学び、短期間で最大限の成果を出したいプロジェクトにアジャイル開発は向いていることを学んだ。また、ワーク
ショップでは実装したい機能を想定し、それらの優先度と開発の時間軸で実装したい機能を整理し、フィボナッチ指数を用いてそれぞれの機能の作業コストを見積もり、プロダクトバックログの作成方法を学んだ。例としてオンラインショッピングのプロダクトバックログを作成し、優先度 Aのカート機能は開発時間を 5 と見積もった。資料の一部を図 5.3 に示す。
（※文責: 小澤海樹）

図 5.3

5.4

作成したプロダクトバックログ

Git/GitHub 講習会

Git/GitHub についての知識と理解を得るために、8 月 10 日に未来大学学部 4 年白幡氏による
Git/GitHub 講習会をオンラインにて受講した。講習会ではまず、Git/GitHub ではどのようにバージョン管理を行なっていくかを学び、実際に操作するコマンドについても学んだ。次に、実際のバージョンの管理を想定し、簡単なテキストファイルを用いて GitHub を利用しながらリポジト
リやコマンド操作についての理解を深めた。また、実際にコンフリクトを発生させ、コンフリクトの解消のためにリポジトリの構成を把握し、どのファイルを修正すればよいのかなどバージョン管Group Report of 2020 SISP

- 61 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
理で問題が発生した場合の対処についても学んだ。資料の一部を図 5.4 に示す。
（※文責: 小澤海樹）

図 5.4

5.5

Git/GitHub 講習会資料 (一部抜粋)

プログラミング学習

Web サービスの開発経験がないメンバーだったため、夏季休暇期間に Web サービスの開発についての知識と理解を得るために、プログラミング学習の支援サービスの Progate にて HTML、CSS、JavaScript を学習した [16]。Progate ではスライド形式で学習し、その後に実際にプログラミングを打ち込み Web サービスを完成に近づけていく学習方法であった。実際にどのような画面、機能を目指すのかが示されているため、学習が容易であった。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 62 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第 6 章 学び
6.1

鈴木快

1 年間のプロジェクト学習を通して、様々なことを学ぶことができたが大きく分けて三つのことが学ぶことができた。一つ目はチームリーダーとしてのマネジメントである。リーダーになった当
初は、リーダーとしての立ち振る舞いが分からず、メンバーに曖昧な指示を出すことが多かった。
また、分からないままで作業を進めることが多く、その結果プロダクトバックログやユーザース
トーリーでの作業の出戻りが多くなってしまった。それらの経験から、今本当に必要な作業であるのかをしっかりと調べ、考えた上で指示を出し作業することの大切さを知った。また、前期ではタスクの分配が上手くいかず、作業待ちが発生してしまうことがあった。後期では、毎回の作業開始
時にタスクの分配を行なうことによって全員が責任を持って活動を行なえたと感じる。二つ目はチーム開発の難しさである。メンバー全員開発経験がなく、どのようにして開発を進めればよいか
分からないことが多かった。また、メンバー間での進捗状況の報告があまり行なわれなかったた
め、他のメンバーが現在何をしているのかが分からない状況が多かった。しかし後期では、Slackやデイリースクラムを上手く活用することによってメンバー間での交流が徐々に増え、円滑に開発を進めることができたと感じられた。メンバー間での開発に関するモチベーションや技術の差が感じられる時もあったが、メンバー各自で自分ができることを見つけて率先して行なうことができた。三つ目はオンラインでの活動の難しさである。今年は新型コロナウイルスの影響で活動のほとんどをオンラインで行なわれた。オンラインでの話し合いでは、グループで 1 つの場所を用いて話し合いが行なわれるため、同時に 2 つの作業に関する話し合いができないことや、どこで悩んでいるかが他のメンバーの表情から得ることができず、対面と比べて進捗の状況を知ることが容易でなかった。また、特定の人しか発言しないことが多々あった。そこで、定期的にメンバーに質問を振り、進捗状況を確認することによってチームメンバー全員とのコミュニケーションを取ることに意識した。また、二週間に一度のグループ全員が大学に集まって対面で作業できる日にはオンラインでもできることをしないことによって、作業が円滑に進めるようにした。今後も様々な活動がオンライン下で行なわれると思うので、プロジェクト学習を通して得た経験を今後にも活かしていきたい。
（※文責: 鈴木快）

6.2

藤澤萌乃香

プロジェクト学習を通して、多くのことを学ぶことができた。特に大きく 3 つのことがある。1
つ目は、報告・連絡・相談が肝要であることだ。前期の活動で、連絡や報告を怠ったために作業の進行を遅らせてしまったことがあった。メンバーに多大なる迷惑をかけてしまい、深く反省した。
また、周りの技量に追いつけずに迷惑をかけてしまったことも多くあった。そこから、わからない
ところはメンバーに聞き、こまめに連絡するように心がけたが、後期の活動でも至らないところがあったため、今後も意識して行動していきたい。2 つ目は、コミュニケーションをとることの大切さである。話し合う場において、意見をスムーズに出し合うためには話しやすい環境が欠かせないGroup Report of 2020 SISP

- 63 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020と感じたことが理由の一つだ。前期は全てオンラインでの活動となり、実際に顔を合わせる機会がなかったため、壁があるように感じ、メンバーとうまくコミュニケーションが取れなかった。しかし、後期は対面での作業があり、実際に顔を合わせて話し合いができたため前期よりスムーズに作業を進めることができた。3 つ目は、客観視することの重要さである。ユーザ目線で客観的にサービスを検討しなければ、それが有用であるのか判断に乏しいからだ。サービスを考える段階で、自分たちが作るものとして難しくないかを最重要視してしまった。サービスを考える上でユーザ目線
で考えることが重要であると、担当教員から指導していただいたため、客観的にサービスやその機能について考え案を出し合うことができた。また、スライドの資料やサービスの視覚的なデザインをする際に、どういった配色、アイコンやブロックの形、配置が最適なのかを考えることに苦労した。人に伝わるデザインにするにはどうしたら良いのか、調べ、客観的に考えたが、まだ伝わりにくいところがあると感じたため、このプロジェクト学習だけにとどまらず勉強することが必要である。今回学んだことを活かして、卒業研究や就職活動など、この先の様々な場面へ繋げていきたいと考えている。
（※文責: 藤澤萌乃香）

6.3

松橋優花

1 年間のプロジェクト学習を通して、多くのことを学ぶことができた。学ぶことができたと感じたことは大きく分けて三つある。まず一つ目は、計画を立てることの重要さである。開発を進めていく上で役割分担を行なったが、自分に割り当てられた作業が期間内に終わらないことがあり、チームに迷惑をかけてしまうことがあった。どの作業をいつまでに終わらせなければならないのか、他のメンバーの進捗はどうなっているのかを把握できていなかったのが原因である。このことから、スケジュールをしっかりと把握し、自分の能力にあった計画を立てることの重要さを学んだ。
二つ目はコミュニケーションをとることの大切さである。前期の活動のほとんどがオンラインで行
なわれていたため、話しにくいと感じることが多く、自分が思ったことを発言することが少なかった。そのことで、話し合いが思うように進まなかったリ、チームメンバーとの認識の違いが生じてしまうことがあった。しかし、後期の活動では、実際に顔を合わせて活動することがあったため、話し合いや情報の共有をスムーズに行なうことができた。このことから、コミュニケーションをとることの大切さを学んだ。また、話し合いやすい環境作りが欠かせないと感じた。三つ目は、チームで一つのことに取り組む楽しさである。配属された当初は、自分がやりたいと思っていることと他のメンバーがやりたいと思っていることの方向性が異なり、一つの目標に向かって今後活動していくことができるのか不安に感じることが多かった。しかし、活動を進めていく中で、チームメン
バーから新たな気づきを得ること、刺激を受けることができた。その結果、お互いに高めあうことができたように感じる。今回学んだことは、4 年次の卒業研究や就職活動など様々な場面で生かすことができると考えている。経験したこと、学んだことをもとに様々なことに挑戦していきたい。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 64 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

6.4

遠藤侍玄

私はプロジェクト学習の一年間を通して役割がいくつもあったので、学ぶことがとても多かった。大きく分けて 4 つの役割で学んだことがあった。一つ目はプロジェクトのリーダーとしてだ。
面識のない 15 人のメンバーの中でコロナの影響で集まることのできない状態で務めたリーダーはとても貴重な経験だった。オンラインであるが故に話し合いがスムーズにいかない点がいくつも見えた。オンライン会議では一人が話しているところにミュートを解除して別の人が話し始めるのは難しいように思えたので質問などは個人を指名する形にした。手を挙げる機能等は話が理解しているかの確認にとても重要に感じた。それぞれのグループが別のブレイクアウトルームで話しているので、それぞれの活動をすべて把握することが難しく感じた。プロジェクトのリーダーにはコミュ
ニケーション能力がとても重要であることが分かった。二つ目はシビックテックグループのリー
ダーとしてだ。グループが地域情報のデザイングループに別れる前に 10 人のシビックテックグ
ループができた。その際に一時的なグループのリーダーを決める時間を省略するために務めた。シ
ビックテックのグループでそれぞれの調査してきた内容についての意見等について話し合いを行なう際に 3 人、3 人、4 人のグループに分けることで少人数で意見を出しやすいように工夫した。そうすることで全体の場では聞きにくい疑問をグループ内で解消することができていた。三つ目はス
クラムマスターとしてだ。オンラインでの発表会が多いと考えたため、スプリントレビューを発表形式にし、他のグループからの質疑応答の時間を設けることで発表練習を兼ねるように工夫した。
リモートでのデイリースクラムはただの報告になってしまわないように何か問題はないかを考えるように促すように工夫も行なった。四つ目は地域情報のデザイングループの一員としてだ。チーム
開発の一員としてはあまり活躍できなかったと考える。機能に関する案を出したり、詰まっている問題に対してのアドバイスなどは積極的に行なえたものの、実際に自分で開発した部分はあまり多くなく指示待ちになってしまったように感じた。リーダーとチーム開発の一員の両立はとても難し
く、もう少し地域情報のデザイングループの一員として活動を積極的に行ないたいと思った。これらの経験はとても貴重なものだったのでこれから先の活動でしっかりと活かしていきたい。
（※文責: 遠藤侍玄）

6.5

小澤海樹

今回のプロジェクト学習は、普段の講義では得られない経験や知識が得られ、とても価値のある活動であったと感じる。その理由の一つとして、自身の初めてのグループ開発であったという点が挙げられる。今までの講義やその他活動で得た知識と経験を存分に活用して開発にあたったが、ス
プリント期間中にはそれだけでは解決できない問題に幾度となく直面した。開発に必要な技術の洗い出し、環境構築、実際の開発など、どれをとっても問題なしに進んだことはないように思える。
しかし、プロダクトオーナーや他のメンバーと、開発で上手くいかない問題点を共有し、解決策や対策法を考え、少しずつ改善を目指しより良い成果を得るための手法を考案していった中で得た経験は、個人の開発などでは得難い価値のあるものであったと思う。また、開発での技術的な役割としては、主にサーバサイドの開発を担ったが、それまでに有していたデータベースやプログラミン
グの知識を活かして今回の成果物に組み込むことができた。加えて、それまでの技術力では実装できなかったであろう機能を、書籍やインターネットで得た知識を汎用し実装できたことは、自身のGroup Report of 2020 SISP

- 65 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020
技術的なレベルアップと自信につながったと感じる。
（※文責: 小澤海樹）

Group Report of 2020 SISP

- 66 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第 7 章 まとめ函館市に関する問題を調査した結果、市民情報サービスの現状として、有益な情報が十分に活用できていないことが明らかになった。実際に、函館市の魅力的な写真を提供しているが、その写真の場所などの詳しい情報を十分に得ることができない Web サイトである函館観光画像ライブラリーがあった。そこで、本グループでは函館観光画像ライブラリーに掲載されている写真に位置などの情報を追加してより使いやすい Web サービスを Django、JavaScript、HTML、CSS を用いて開発した。これにより、観光に関する情報収集が効率化され、観光客が増えることで函館の地域活性化を目指した。一年間の活動を通して函館観光画像ライブラリーにまとめられた写真に地図を用いて位置情報やお気に入り機能、ランキング機能、カテゴリー検索機能を付け足し、観光客にとってより利用しやすい Web サービスを開発することができた。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 67 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

第8章
8.1

今後の予定

プロジェクト学習課外発表会

本グループは、2021 年 2 月 15 日に秋葉原で開催されるプロジェクト学習課外発表会に参加する予定である。例年は秋葉原会場に行き、ポスターセッション形式で発表していたが、今年は Zoomを用いたオンラインでの実施が決定した。各プロジェクトから代表者 3 名のみ参加できるため、本プロジェクトでは各グループのリーダーが参加して発表を行なう。オンラインでの発表会となるた
め、今までの発表会で得た発表技術やレビューを基に、資料作成や発表方法を工夫する必要があると考えている。
（※文責: 松橋優花）

8.2

ユーザーテストの実施

本サービスは函館観光に関する情報をまとめた Web サービスになっているので、対象を函館外に住んでいる人としたユーザーテストを実施する予定である。ユーザーテストでは初めて利用した
人でも使いやすいデザインになっているか、実装されている機能の改善点はあるか、より良いサー
ビスにするためにどのような機能を追加して欲しいかなどを調査したいと考えている。ユーザーテストで得たレビューを反映させ、サービスを改善していく。
（※文責: 松橋優花）

8.3

サービスの実施

本グループでは、2 月までに Web サービスのリリースを目標として継続して開発を行なっていく予定である。
（※文責: 松橋優花）

Group Report of 2020 SISP

- 68 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

参考文献
[1] 函館市公式サイト - 市民の声回答一覧
https://www.city.hakodate.hokkaido.jp/citizensvoice/ (2020.9.21 閲覧)[2] 函館市の環境に関する市民アンケート調査
https://www.city.hakodate.hokkaido.jp/docs/2014021300252/files/
05H30siminjiyu.pdf (2020.9.21 閲覧)[3] 函館市観光情報はこぶら - 函館観光画像ライブラリー
https://www.hakobura.jp/photo_library/category.php (2020.9.21 閲覧)[4] Code for Hakodate - シビックテックとは
https://codeforhakodate.org/about/ (2020.9.21 閲覧)[5] 5374 Oﬃcial Website
http://5374.jp/ (2020.12.23 閲覧)[6] 道内の最新感染動向｜北海道新型コロナウイルスまとめサイト
https://stopcovid19.hokkaido.dev/ (2020.12.23 閲覧)[7] Code for Hakodate - IT ×市民×まちづくりhttps://codeforhakodate.org/ (2020.9.21 閲覧)[8] 西村 直人・永瀬 美穂・吉羽 龍太郎 (2020). SCRUM BOOT CAMP THE BOOK【増補改訂版】 スクラムチームではじめるアジャイル開発 翔泳社[9] スクラムガイド
https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.
pdf (2020.12.19 閲覧)[10] OpenStreetMap Japan
https://openstreetmap.jp/#zoom=5&lat=38.06539&lon=139.04297&layers=0BFF(2020.12.18 閲覧)[11] Leaﬂet - a JavaScript library for interactive maps
https://leafletjs.com/ (2020.12.18 閲覧)[12] 無料ホームページテンプレート.com
https://f-tpl.com/ (2020.12.18 閲覧)[13] 函館市観光情報はこぶらhttps://www.hakobura.jp/spot_search.html (2020.12.18 閲覧)[14] HAKODATE アカデミックリンク
https://www.cc-hakodate.jp/academiclink (2020.12.18 閲覧)[15] Django:The Web framework for perfectionists with deadlines
https://www.djangoproject.com/ (2020.12.18 閲覧)[16] Progate プログラミングの入門なら基礎から学べる Progate[プロゲート]
https://prog-8.com/ (2020.12.19 閲覧)

Group Report of 2020 SISP

- 69 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

付録 A

中間発表のポスター【2020 / システム情報科学実習 中間発表】

No. 1 使ってもらって学ぶフィールド指向システムデザイン 2020
Field Oriented System Design Learning by Usersʼ Feedback 2020 (Swift 2020)（すうぃふと 2020）
グループリーダー

グループリーダー

メンバー 鈴木友翔
Members

東海林航

Wataru Tokairin

Yuto Suzuki

Taiki Saito

神崎匠吾

坂井勇太朗

Shogo Kanzaki

Yutaro Sakai

伊藤恵

担当教員

Kei ItoInstructors

宮岡萌映

齊藤大樹

田中陽都

Moe Miyaoka

Haruto Tanaka

吉兼刃矢

荒戸大輝

Jinya Yoshikane

Daiki Arato

南部美砂子

奥野拓

原田泰

Misako Nambu

Taku Okuno

Yasushi Harada

山本紋豊

プロジェクトリーダー

グループリーダー

遠藤侍玄

鈴木快

Jigen Endo

Akito Yamamoto

Kai Suzuki

小澤海樹
Mitsuki Ozawa

松橋優花

藤澤萌乃香

Yuka Matsuhashi

Honoka Fujisawa

す う ぃ ふ と 2 0 2 0 About this project
本プロジェクトは、フィールドを調査し、IT を用いてユーザの仕事や生活をデザインすることを目的として活動しています。また、フィールドの要望に応じて柔軟な開発を行うために、スクラム手法を取り入れます。今年度は 15 名のプロジェクトメンバーを３グループに分けました。
「高齢者支援のデザイン」は、高齢者が安心して暮せるように、高齢者やその周囲の人々を支援します。
「地域交通のデザイン」は、函館市の公共交通機関のユーザ体験を向上させます。
「地域情報のデザイン」は、有益だが埋もれている地域の情報を分かりやすくデザインして提供します。
The purpose of this project is to research the ﬁeld and design the work and life of users by using IT. It also incorporates Scrum techniques for
ﬂexible development in response to ﬁeld demands. This year, 15 project members were divided into 3 groups. "Elderly support design" supports
elderly people and those around them so that they can live in peace. "Local transportation design" enhances the user experience of public
transportation in Hakodate. "Regional information design" designs useful but buried information in a clear format.

活 動 内 容 Activity
高 齢 者 支 援 の デ ザ イ ン Elderly support design

地 域 交 通 の デ ザ イ ン Local transportation design

地 域 情 報 の デ ザ イ ン Regional information design

目 的 Purpose

目 的 Purpose

目的 Purpose

高齢者やその周囲の人々を支援できるサービスの開発をする

函館市の公共交通機関の利用体験を向上させる

Development of services that can support the elderly andthe people around them

Improving the experience of using public transportation in

Design informative but buried information in aneasy-to-understand format

Hakodate Cityフ ィ ール ド Field

フ ィ ー ル ド Field

未定

函館バス

Undecided

Hakodate Buses

前期の活動

有益だが埋もれている地域の情報を分かりやすくデザインする

フィールド Field
函館市民の生活
Hakodate citizen's life

前 期 の 活 動 Activity details

Activity details

・函館市の高齢者に関する活動の調査・取り組む案の絞り込み
・FW に向けた質問決め

前期の活動 Activity details
・テーマ決め・函館市の問題の調査
・函館市の問題の解決案出し・テーマ決め・函館市の交通に関する問題の調査
・函館バスについて調査
・FW・Elderly person support activity survey in Hakodate City・Narrow down plans to work on

・Theme decision
・Investigation of problems in Hakodate City・Find solutions to problems in Hakodate City

・Theme decision
・Research traﬃc problems in Hakodate City・Decide what questions to ask in ﬁeldwork

・Survey on Hakodate Buses
・Fieldwork

後 期 の 活 動 予 定 Activity schedule

後期の活動予定 Activity schedule

後 期 の 活動予定 Activity schedule

FW を行い、FW から得られたことをもとにサービスの内容を決め、開発言語の学習を行い、開発を進める。

FW で得られた情報をもとに、具体的なサービス内容を決定し、開発言語の学習を行い、開発を進める。

Perform ﬁeldwork, determine the content of the service
based on what was obtained from the ﬁeldwork, learn thedevelopment language, and proceed with development.

Based on the information obtained from FW, we will decide thespeciﬁc service content, learn the language for development,
and proceed with development.

フィールド調査を通じて前期に作った仮の案から開発サービスを詳細に決定し、開発のための言語学習を行い、開発に着手し、実装を目指す。
Based on the survey, we will decide the development service
in detail from the tentative plan of the previous term, learn
the development language and start development.

ス ケ ジ ュ ー ル Schedule
5月
May

調査・企画

LectureAugust

July

June

勉強会

8月

7月

6月

技術習得

Survey・Plan

グループ決定中間発表

Intermediate presentation

Grouping

9月

September

11 月

November

開発

Technical learningFW

スクラム開始

Fieldwork

scrum start

FW

12 月

1月

DecemberJanuary

Development

成果発表

Results presentation

FW

Fieldwork

Group Report of 2020 SISP

10 月

October

Fieldwork- 70 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

付録 B

アカデミックリンクのスライド䛿䛣䛰䛶㼕㼚㻼㼔㼛㼠㼛㼙㼍㼠㼕㼛㼚䈊䛩䛖䛓䜅䛸㻞㻜㻞㻜ᆅᇦ᝟ሗ䛾䝕䝄䜲䞁䈊㕥ᮌ㻌ᛌ㻌㻌㐲⸨㻌ౝ⋞㻌㻌䈊ᑠ⃝㻌ᾏᶞ㻌㻌ᯇᶫ㻌ඃⰼ㻌㻌⸨⃝㻌ⴌ஀㤶䈊˭䛩䛖䛓䜅䛸㻞㻜㻞㻜ᆅᇦ᝟ሗ䛾䝕䝄䜲䞁䛸䛿䠛䈊䛩䛖䛓䜅䛸㻌㻞㻜㻞㻜䈊䛩䛖䜅ᑐ㇟䛸䛩䜛䝣䜱䞊䝹䝗䜢ㄪᰝ䛧䚸䛭䛾⌧ሙ䛾ᢪ䛘䜛ၥ㢟䜢䝅䝇䝔䝮㛤Ⓨ䛻䜘䛳䛶ゎỴ䛩䜛䛣䛸䜢┠ⓗ䛻άື䛧䛶䛔䜛䝥䝻䝆䜵䜽䝖㻌 䈊㻳㼞㼛㼡㼜㻝㻌ᆅᇦ᝟ሗ䛾䝕䝄䜲䞁䈊㻳㼞㼛㼡㼜㻞㻌㧗㱋⪅ᨭ᥼䛾䝕䝄䜲䞁䈊㻳㼞㼛㼡㼜㻟㻌ᆅᇦ஺㏻䛾䝕䝄䜲䞁䈊ภ㤋ᕷ䛻㛵䛩䜛᝟ሗ䜢㻵㼀䜢㥑౑䛧䛶ゎỴ䛩䜛䝅䝡䝑䜽䝔䝑䜽䜢⾜䛔䚸ภ㤋ᕷ䛾ᆅᇦάᛶ໬䜢┠ⓗ䛸䛧䛶άື䛧䛶䛔䜛䈊䈊䝅䝡䝑䜽䝔䝑䜽䛸䛿䠛䈊䊻ᕷẸ⮬㌟䛜䝔䜽䝜䝻䝆䞊䜢ά⏝䛧䚸⮬ศ䛯䛱䛷⾜ᨻ䝃䞊䝡䝇䛾ၥ㢟䜔ᆅᇦㄢ㢟䜢ゎỴ䛧䜘䛖䛸䛔䛖ྲྀ䜚⤌䜏䈊ˮGroup Report of 2020 SISP

- 71 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020⫼ᬒ䈊㼃㼑㼎㻌ㄪᰝ䈊䈊䞉ᕷẸ䛾ኌ㻌㼇㻝㼉 䈊䞉ภ㤋ᕷ䛾⎔ቃ䛻㛵䛩䜛ᕷẸ䜰䞁䜿䞊䝖ㄪᰝ䛾⤖ᯝ㻌㼇㻞㼉 䈊ภ㤋ᕷ䛾ᕷẸ᝟ሗ䝃䞊䝡䝇䛿᭷┈䛺᝟ሗ䛜኱㔞䛻Ⓨಙ䛥䜜䛶䛔䜛䛜䚸 䈊䞉䛂ෆᐜ䛜ศ䛛䜚䛻䛟䛔䛃 䈊䞉䛂ᚲせ䛺᝟ሗ䛜᥈䛫䛺䛔䛃 䈊䞉䛂᝟ሗ䛜ᇙ䜒䜜䛶䛔䛶┠䛻䛴䛛䛺䛔䛃 䈊˯䛿䛣䛰䛶㼕㼚㻼㼔㼛㼠㼛㼙㼍㼠㼕㼛㼚䛸䛿䠛䈊ภ㤋ᕷ䛾㻼㼔㼛㼠㼛㻔෗┿㻕䛸䛭䛾ほගሙᡤ䛻㛵䛩䜛ヲ⣽䛺ㄝ᫂䜔఩⨨䛺䛹䛾㻵㼚㼒㼛㼞㼙㼍㼠㼕㼛㼚㻔᝟ሗ㻕䜢ᥦ౪䛩䜛㼃㼑㼎䝃䞊䝡䝇䈊ᶵ⬟䈊䛿䛣䛰䛶㼕㼚㻼㼔㼛㼠㼛㼙㼍㼠㼕㼛㼚䛷䛿 䈊ภ㤋ᕷ䛜ᥦ౪䛧䛶䛔䜛ภ㤋ほග⏬ീ䝷䜲䝤䝷䝸䞊䛷䛿䈊
䞉෗┿䈊
䈊
䞉ㄝ᫂ᩥ䈊
䈊
䞉㛵㐃䝸䞁䜽 䈊䜢㜀ぴ䛩䜛䛣䛸䛜䛷䛝䜛䈊ภ㤋ほග⏬ീ䝷䜲䝤䝷䝸䞊䛾෗┿䛾䝍䜲䝖䝹䛛䜙఩⨨᝟ሗ䜢ືⓗ䛻ྲྀᚓ䛧䚸䛭䜜䜙䛾᝟ሗ䜢ᆅᅗ䛻⾲♧䈊ภ㤋ᕷබᘧほග᝟ሗ䛿䛣䜆䜙 ภ㤋ほග⏬ീ䝷䜲䝤䝷䝸䞊 ஬⛸㒌බᅬ˰┠ⓗ䈊ほගᐈ䛻䛸䛳䛶䚸䜘䜚ලయⓗ䛺᝟ሗᥦ౪䜢䛧䚸䈊ほග䛻㛵䛩䜛᝟ሗ཰㞟䛾ຠ⋡໬䜢┠ⓗ䛸䛩䜛䈊ほගほගᐈ䛜ቑຍ䛧䚸ᆅᇦάᛶ໬䛻⧅䛜䜛䈊

˱Group Report of 2020 SISP

- 72 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020䝃䞊䝡䝇ẚ㍑䈊ภ㤋ほග⏬ീ䝷䜲䝤䝷䝸䞊䛿䛣䛰䛶LQ3KRWRPDWLRQ㧗ゎീᗘ䛾෗┿䜢㜀ぴ䛷䛝䜛䚽䚽䜹䝔䝂䝸䞊᳨⣴䛜䛷䛝䜛䚽䚽෗┿䛾ヲ⣽᝟ሗ䛜ᚓ䜙䜜䜛䕧䠄ヲ⣽ᩥ䛾䜏䠅

ᆅᅗ⾲♧䛜䛷䛝䜛

䚽䠄ఫᡤ䚸ᆅᅗ䠅䚽䛚Ẽ䛻ධ䜚Ⓩ㘓䛜䛷䛝䜛䚽䝷䞁䜻䞁䜾䜢㜀ぴ䛷䛝䜛

䚽
˲

฼⏝ᡭ㡰䈊
ࠥ㻌䜹䝔䝂䝸䞊᳨⣴㻌ࠥ 䈊䜹䝔䝂䝸䞊᳨⣴䠄」ᩘ㑅ᢥྍ䠅ኪᬒぢ䛶䜏䛯䛔䛺䛑䈈䈊䜹䝔䝂䝸䞊᳨⣴䜢฼⏝䛩䜛䛣䛸䛷 䈊᳨⣴⤖ᯝẼ䛻䛺䜛䜹䝔䝂䝸䞊䛻⤠䛳䛶⯆࿡䛾䛒䜛෗┿䛛䜙䛭䛾ሙᡤ䛴䛔䛶▱䜛䛣䛸䛜䛷䛝䜛䈊䜽䝸䝑䜽䛩䜛䛸«䚷䛣䛾෗┿Ẽ䛻䛺䜛䟿䈊

˳

฼⏝ᡭ㡰䈊

ᆅᅗ䛛䜙෗┿䜢᥈䛫䜛ࠥ㻌ᆅᅗ䛛䜙᥈䛩㻌ࠥᆅ 䛛䜙᥈䛩 䈊䜽䝸䝑䜽䛩䜛䛸«䛣䛾㎶䜚䛻ほගሙᡤ䛒䜛䛛䛺 䈊ᆅᅗୖ䛾෗┿䜢ぢ䜛䛣䛸䛷 䈊⮬ศ䛾఩⨨᝟ሗ䛛䜙࿘ᅖ䛾ほගሙᡤ䜢⡆༢䛻▱䜛䛣䛸䛜䛷䛝䜛䈊䈊

Group Report of 2020 SISP˴

- 73 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020฼⏝ᡭ㡰䈊ࠥ㻌ヲ⣽⏬㠃㻌ࠥヲ⣽⏬㠃 䈊
616䛻䝅䜵䜰
䛧䚸ィ⏬䜢ඹ᭷
䛷䛝䜛䛣䜣䛺䛻䜒᝟ሗ䛜䟿 䈊෗┿䛾఩⨨䛜
ᆅᅗୖ䛷䜟䛛䜛ヲ⣽⏬㠃䜢㛤䛟䛣䛸䛷 䈊Ẽ䛻䛻䛺䜛ほගሙᡤ䛾ヲ⣽ㄝ᫂䛻ຍ䛘䛶䚸ᆅᅗ䛷఩⨨䜢☜ㄆ䛩䜛䛣䛸䛜䛷䛝䜛䈊
䈊ඵᖭᆏ䜒ィ⏬䛻㏣ຍ䟿 䈊ヲ⣽ㄝ᫂㏆䛟䛾఩⨨䛻䛒䜛ู䛾ほගᆅ䛾෗┿ྠ䛨䜹䝔䝂䝸䞊䛾ู䛾ほගᆅ䛾෗┿˵௒ᚋ䛾ᒎᮃ䈊
䞉௚䛾䝃䜲䝖䛾෗┿䜒㏣ຍ䛩䜛䈊䈊䞉䝴䞊䝄䞊䛜෗┿䜢ᢞ✏䛷䛝䜛䜘䛖䛻䛩䜛䈊䈊䞉⮬ศ䛾఩⨨䛛䜙᭱䜒㏆䛔෗┿䜢ᥦ♧䛧䛶䛟䜜䜛䈊˭ˬ

Group Report of 2020 SISP

- 74 -

Group Number 1-C

Field Oriented System Design Learning by Users’ Feedback 2020

付録 C

成果発表のポスター【2020 / システム情報科学実習 成果発表】No.1 使ってもらって学ぶフィールド指向システムデザイン 2020

使ってもらって学ぶフィールド指向システムデザイン 2020
Field Oriented System Design Learning by Usersʼ Feedback 2020

グループリーダー

グループリーダー

Members

プロジェクトリーダー

Group leader

Group leader

メンバー

鈴木友翔

東海林航

神崎匠吾

坂井勇太朗

Yuto Suzuki

齊藤大樹

吉兼刃矢

荒戸大輝

担当教員

伊藤恵

南部美砂子

奥野拓

原田泰

Instructors

Kei ItoMisako Nambu

Taku Okuno

Yasushi Harada

すうぃ ふ と 2 0 2 0

Haruto Tanaka

山本紋豊

グループリーダー

Project leader

Group leader

遠藤侍玄

鈴木快

松橋優花

藤澤萌乃香

Yuka Matsuhashi

Honoka Fujisawa

Jigen Endo

Akito Yamamoto

Daiki Arato

Jinya Yoshikane

Yutaro Sakai

Shogo Kanzaki

田中陽都

Moe Miyaoka

Taiki Saito

Wataru Tokairin

宮岡萌映

小澤海樹

Kai Suzuki

Mitsuki Ozawa

About This Project

本プロジェクトは、フィールドを調査し、IT を用いてユーザの仕事や生活をデザインすることを目的として活動しています。また、フィールドの要望に応じて柔軟な開発を行うために、
スクラム手法を取り入れます。今年度は 15 名のプロジェクトメンバーを３グループに分けました。
「高齢者支援のデザイン」グループはコロナ禍で難しくなった高齢者のコミュニケーションを支援するビデオ通話アプリ、「地域交通のデザイン」
グループは函館のバス利用者がバス停で感じる不安を解消するアプリ、「地域情報のデザイン」グループは函館市の観光情報の入手を容易にすることで観光客を支援する Web サービスの開発を行いました。
This project aims to research the ﬁeld and design the work and life of the user using IT. In addition, we will adopt the Scrum method for ﬂexible
development according to the demands of the ﬁeld. This year, 15 project members were divided into 3 groups. The "Design for elderly support" group isa video call app that supports communication for elderly people who have become diﬃcult with Covid-19 pandemic, and the "Design for local
transportation" group is an app that eliminates the anxiety that Hakodate bus users feel at the bus stop. , The "Regional Information Design" group has
developed a web service that supports tourists by making it easier to obtain tourist information on Hakodate City.

活動内 容

Activity Content

5月

6月

May

7月

June

8月

July

調査・企画

グループ決定LectureGrouping

September

言語学習

Survey・Plan

勉強会

9月

August中間発表
Intermediate presentation

10 月

11 月

OctoberNovember

開発

Language Learning

フィールドワーク

スクラム開始

Fieldwork

Scrum starts

12 月

December

1月

January

Development

成果発表
Results presentation

フィールドワーク
Fieldwork

勉強会

Lecture- アジャイルワークショップ
Agile workshop- GitHub 講習
GitHub workshop- Code for Hakodate によるレクチャー
Lecture by Code for Hakodate

サービ ス 概 要

調査

課題発見

Survey- フィールドワーク

Fieldwork

・実際にバスに乗って観察

Actually get on the bus and investigate- Web 調査

Web survey

・函館市の福祉事業について

Problem Discovery- コロナ禍で高齢者の見守りが困難

Covid-19 pandemic makes it diﬃcult to watch over the elderly- バス利用者が抱える乗車前の不安
Anxiety before the bus user gets on- 函館市の情報をより伝わりやすく

言語学習

開発

Language Learning

Development- スクラム導入- Progate を用いた学習

Scrum starts

Learning with Progate- コーディング

- 開発言語 Swift の学習

CodingLearning development language

Facilitate the transmission of citizen information services- スプリントレビュー

About welfare business in Hakodate

Sprint review

・函館市が抱える問題

サービス考案

Problems in Hakodate City

Service decision

Service Overview

高 齢 者 支 援 の デ ザ イ ン Elderly Support Design

地域交通の デ ザ イ ン Local Transportation Design

地域情報のデザイン

Regional Information Design

ハコバス

はこだて inPhotomation

ビデオ通話とお絵かきが一体となった

函館のバス利用者がバス停で感じる不安を函館市の Photo ( 写真 ) と、その観光場所に

高齢者向けコミュニケーション支援アプリ

解消するアプリ関する詳細な説明や位置などの Information

Communication support app for the elderly that integrates video callingand drawing

An app that eliminates the anxiety that Hakodate bus users feel at thebus stop( 情報 ) を提供する Web サービス

コロナ禍でも、高齢者が家族や親しい友人と系統番号から検索し、バス停で欲しい情報

より楽しくコミュニケーションをとることがを素早く知ることができる

写真や地図から函館市内で観光したい場所

できる

You can search by system number and quickly ﬁnd the information you
want at the bus stop.

を効率的に探すことができる

らくらくイラストーク

Covid-19 pandemic, older people can have more fun communicating withfamily and close friends.

Group Report of 2020 SISP

A web service that provides information such as photos of Hakodate Cityand detailed explanations and locations of its tourist spots

You can eﬃciently ﬁnd places to visit in Hakodate from photos and maps

- 75 -

Group Number 1-C