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

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

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

グループ名
石別グループGroup Name
Ishibetsu Group
プロジェクト番号/Project No.

02-A

プロジェクトリーダ/Project Leader
西谷歩1015061

Ayumi Nishiya

グループリーダ/Group Leader
葛西翔太

1014048

Shota Kasai

グループメンバ/Group Member
1015002

上杉明日香

1015061

西谷歩

Ayumi Nishiya

1015120

関根遼

Ryo Sekine

Asuka Uesugi

指導教員
伊藤恵

南部美砂子 奥野拓

AdvisorKei Ito Misako Nambu Taku Okuno

提出日2018 年 1 月 29 日

Date of Submission
January 29th, 2018

概要
本プロジェクトでは，3 つのグループに分かれてそれぞれのフィールドを調査し，そこから問題を見つけ，ICT(Information and Communication Technology) を活用して解決する．
それにより地域・社会に貢献することを目標として活動を行っている．開発にはアジャイル開発手法を用いる．素早くアプリケーションを開発し，それに対するレビューを受けて問題解決の質をより高いものにしていく．本グループは，北海道北斗市にある石別地区 (以降，石別と呼ぶ) をフィールドとした．石別とは北海道北斗市の三ツ石地区と当別地区の総称である．石別は現在人口減少が進んでいるという問題がある．これに対し，5 月上旬に石別でさまざまな取り組みを行っている住民の方と北斗市役所で石別を担当している方 (以下インフォーマント
と呼ぶ) にヒアリングを行った．ヒアリングのなかで，石別の方々は地域の活性化や定住人口の増加を目標に，手描きマップやサイクリング事業などのさまざまな観光事業を行っていると知った．そこで本グループは，石別の観光を活性化させることを目的とし，観光客に一部の観光地以外にも石別の景色などの，石別全体の魅力にも気づいてもらうことを目標として掲げた．

6 月上旬には，石別の魅力を調べることを目的としたフィールドワークを行った．その際，石別の魅力として，自然があふれる景色の良さなどがあげられた．その後，本グループは発見した石別の魅力に着目し，サービスのアイデア出しを行った．現在は石別の景色などの写真を使
い観光客を色々な場所へ誘導するアプリケーション開発を開発している．
キーワード

石別，アプリケーションの開発，人口減少，観光，地域活性化（※文責: 西谷歩）

-i-

Abstract
In this project, we investigate three fields to find some problems and solve these by using
ICT. We active with setting a goal of contributing to society. We use agile development
methods. We develop applications quickly and receive reviews to enhance quality ofproblem solution. We set Ishibetsu district in Hokuto city as our field. Ishibetsu includes Mitsuishi and Toubetsu. Ishibetsu has a problem of decreasing population. We
ask residents who does some eﬀort in Ishibetsu and person in charge of working in Hokuto
city hall for their opinion about population decreasing in early May. In this asking, we
got to know about variety of tourisms in Ishibitsu, including making hand-painted map,
bicycle rental business and more to activate the region and increase permanent population. Therefore, we set activating tourism in Ishibetsu as purpose, and set getting
tourist be aware of attracts like scenery thoughout Ishibitsu. We did fieldwork to investigate attraction of Ishibetsu in early June. At that time, we find beautiful sceneryof nature as attraction of Ishibetsu. After that, we put out ideas with focusing these
attractions. Now we are developing an application that induces tourists to many places
by using photographs of scenery in Ishibetsu.
Keyword
Ishibetsu, Application Development, Decreasing Population, Sightseeing,
Regional Activation（※文責: 西谷歩）

- ii -

目次
第1章

1.1

第2章

2.1

第3章

背景

1

背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.1.1

石別地区とは . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.1.2

石別の問題，現状 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

目標

3

目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.1.1

活動目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.1.2

開発目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

活動プロセス4

3.1

年間スケジュール

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

4

3.2

活動内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.1

ヒアリング . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.2.2

インフォーマントの関係性を明確化. . . . . . . . . . . . . . . . . . . . .

6

3.2.3

フィールドワーク . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2.4

先行事例の調査 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.2.5

アジャイルワークショップ . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.2.6

アイデア出し . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.2.7

プロトタイピング . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.2.8

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

8

3.2.9

第 1 開発 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

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

93.2.11 第 2 開発 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93.2.12 成果発表会 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93.2.13 石別地区創生会議への提案 . . . . . . . . . . . . . . . . . . . . . . . . . .

10開発に使用したツール

11

第4章

4.1

4.2

4.3

開発に使用したツールと言語. . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

4.1.1

Monaca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

4.1.2

Git/GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12設計に使用したツール . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.1

astah* professional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.2

Prott

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

12

4.2.3

Flinto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.2.4

Adobe Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

タスク管理ツール

4.3.1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13Trello . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13- iii -

Google スプレッドシート . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

グループ内コミュニケーションツール . . . . . . . . . . . . . . . . . . . . . . . .

14

4.4.1

Slack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

その他利用したツール . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

4.5.1

Google ドキュメント . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

4.5.2

Cloud LaTeX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

4.3.2
4.4
4.5

第5章

開発プロセス15

第 1 開発 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

5.1.1

到達目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

5.1.2

開発内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

5.1.3

成果物 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

第 2 開発 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

5.2.1

到達目標 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

5.2.2

開発内容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

5.2.3

成果物 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

類似サービスの事例調査 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

Phoston について

25

6.1

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

25

6.2

画面説明 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

6.2.1

ホーム画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

6.2.2

絞り込み画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

6.2.3

選択画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

6.2.4

マップ画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

6.2.5

詳細説明画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

5.1

5.2

5.3
第6章

第7章

7.1
第8章

評価

30

Phoston の評価 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

学び

31

8.1

共通認識にすることの困難さ. . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

8.2

先方との打ち合わせ不足 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

8.3

スケジュール . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31

8.4

聞き手を意識した発表資料の作成 . . . . . . . . . . . . . . . . . . . . . . . . . .

32

8.5

事前調査の必要性

32

第9章

今後の予定と展望

33

今後の予定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

9.1

9.2

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

9.1.1

アプリケーションの修正. . . . . . . . . . . . . . . . . . . . . . . . . . .

33

9.1.2

アプリリリースに向けての準備 . . . . . . . . . . . . . . . . . . . . . . . .

33

9.1.3

石別地区創生会議での発表 . . . . . . . . . . . . . . . . . . . . . . . . . .

33

9.1.4

秋葉原での課外発表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

アプリケーションの展望 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34- iv -

第 10 章 まとめ

10.1
付録 A

35

まとめ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

活用した講義

36

参考文献

37

-v-

Field Oriented System Design Learning by Users’ Feedback 2017

第 1 章 背景1.1

背景

本プロジェクトは地域の問題を ICT によって解決することを目的としている．そのなかで，本グループは石別地区というフィールドを対象に活動を行っている．
（※文責: 西谷歩）

1.1.1

石別地区とは

石別とは北海道北斗市の三ツ石地区と当別地区の総称である (図 1.1)．人口は 2017 年 7 月時点
で 998 人である [1]．トラピスト修道院は旅行情報サイトで「北斗市でおすすめの観光スポット

No.1」と紹介されている [2]．トラピスト修道院関係者にフィールドワークで聞き込みを行った際には，GW 期間中には 1 日あたり 1000 人を超える観光客が訪れていることがわかった．また，観光事業を盛り上げるための活動として手描きマップの作成やサイクリング事業，石別ホリデー
ウォーキング，並木道ライトアップなどさまざまな観光事業が行われている地域である [3]．

図 1.1 石別の周辺情報（※文責: 西谷歩）

1.1.2

石別の問題，現状

石別は 2005 年の時点で人口 1200 人を超えていた．しかし，2017 年 7 月には 998 人にまで減少したという現状がある [1]．これに伴い空き家は増加し，商店やイベントは減少してしまっている．
現在石別で行なわれている観光事業は石別地区創生会議が中心となり, 観光客を増やし，地域を活性化させることによって，定住人口を増加させることを目的としている．石別地区創生会議とは，石別地区の最大の課題である地区人口減少の問題の克服を目指し，地域力の維持および地域の活性化に向けて住民が無理なく合意できる実現性の高い地域主体の取り組みを検討し，市および関係主体との協働による計画的な地域づくりを推進することを目的とする会合である．1.1.1 で上げていGroup Report of 2017 SISP

-1-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
たサイクリング事業はこの組織の活動の一端である．
（※文責: 西谷歩）

Group Report of 2017 SISP

-2-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 2 章 目標
2.1

目標

2.1.1

活動目標

本グループは観光事業を ICT を用いてサポートすることにより，石別の観光を活性化させることを目的とした．そして石別の豊かな自然や綺麗な景色を観光客に紹介することで，トラピスト修道院以外にもある石別の魅力に気づいてもらうことを活動目標にした．
（※文責: 西谷歩）

2.1.2

開発目標

石別を活性化するために行われている観光事業に着目し，石別の魅力をより多く観光客に紹介できるような観光アプリケーションを開発することを開発目標とした．そしてアプリケーションのコ
ンセプトを「石別の住民が作る，観光アプリケーション」と設定した．具体的に，トラピスト周辺の観光地以外の石別全体の魅力にも気づいてもらうため，石別の住民に提供していただいた穴場ス
ポットの情報を観光客に紹介するアプリケーションの開発を行った．
（※文責: 西谷歩）

Group Report of 2017 SISP

-3-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第3章
3.1

活動プロセス

年間スケジュール

本グループの年間スケジュールを以下に示す．

4月- プロジェクト発足- プロジェクトメンバー決定

5月- グループ分け決定- グループリーダー決定- 地域活性化の先行事例調査- フィールドワーク講座- ヒアリング- 石別地区創生会議

6月- 第 1 回月例レビュー会- フィールドワーク- サービス案出し- アジャイル開発ワークショップ- アイデアの可視化- 中間発表ポスター作成- 第 2 回月例レビュー会

7月- 中間成果発表会- 中間報告書作成- 中間報告書提出

8月- 夏期休暇

9月- プロジェクト後期活動の開始- アイデアを基にモックアップの作成

10 月- 第 1 開発 (アプリケーションの土台の作成)- アプリケーションのデザイン作成

11 月- 第 2 開発 (アプリケーションの UI 実装)- アカデミックリンク

12 月- 成果発表会に向けたポスター作成

Group Report of 2017 SISP

-4-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
- 発表ポスターレビュー会- 成果発表会

1月- 最終報告書の作成- 最終報告書の提出

2月- 石別地区創生会議で現状報告 (予定)（※文責: 西谷歩）

3.2

活動内容

3.2.1

ヒアリング

本グループは 5 月 17 日に，インフォーマント*1 に手描きマップを作成した経緯，石別の魅力やニーズを伺いに訪れた．このヒアリングにはグループメンバー 4 名が参加した．手描きマップ (図3.1) とは，デザインを仕事にされていた住民の方が，住民の公的な依頼を受けて手描きで作成した
石別の地図である．実際に住んでいて感じる石別の良さとして，自然が多く動物にも触れられる，
都会人がリラックスをしに訪れに来る，函館山の景色が生えるので鉄道撮影が人気といったものがあることを伺った．また，インフォーマントのアイデアとして，石別の観光資源にもなっている手描きマップを，スマートフォンやタブレット端末で表示できるようにする．さらに観光やイベントなどの情報を載せたり，外国人向けに多言語に対応してほしいということがわかった．しかし，そのことにこだわらず，柔軟な発想で取り組んでも構わないとも仰っていた．

図 3.1

手描きマップ（※文責: 関根遼）

*1 フィールド調査などで研究者にデータを提供する人．情報提供者．

Group Report of 2017 SISP

-5-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

3.2.2

インフォーマントの関係性を明確化

石別のアプリケーションを作ってほしいという要望を元にサービスを開発するにあたり，このプ
ロジェクトに関わっている人の関係性を確認し，グループ内で共有した．要望を聞いてサービスを提案し，意見をもらう対象を明確にすることが目的であった．確認前までは，インフォーマントの意見，要望を最優先してそれらを解決する案を提案し教員にレビューをもらいながら具体化し，インフォーマントおよび石別地区創生会議に許可をもらうことで開発に移ると考えていた．しかし教員に確認したところ，先行事例や石別で行われてる取り組みなどから石別に効果的なアイデアを考え，グループで決定する必要があるとわかった．
（※文責: 関根遼）

3.2.3

フィールドワーク6 月 3 日に，実際に作るもののエンドユーザーの視点で調査を行うため，観光客の立場として石別の魅力を調査しに訪れた (図 3.2)．参加者はプロジェクトメンバー 14 名，TA4 名，教員 4 名の計 22 名であった．現地への移動は実際の観光客の体験に近づけるために道南いさりび鉄道を用いた．到着後は，トラピスト修道院を訪れ，その後 3 つのグループに分かれて行動した．魅力として，自然があふれる景色，トラピストのアイスとクッキーの美味しさ，人混みがなくストレスフ
リーな環境などがあると感じた．また，空き家が点在していることもわかった．また，調査の結果
ゴールデンウィーク期間には 1 日に 1000 人を超える観光客がトラピスト修道院に来るということもわかった．これらの魅力は，観光客にアプローチした場合に，石別に愛着を持ってもらうのに十分だと感じた．約 2 時間グループ行動をとった後，昼食をとり，再び電車に乗って解散した．昼食
は「風の丘」というカフェに行った．「風の丘」は石別の小高い丘の上にある手作りログハウスカ
フェである．ログハウスや木工品造りを通じて自然と人の交流をしている．また，フィールドワー
ク後に同行したプロジェクトメンバーに対して石別の第一印象や感想を尋ねるアンケート調査を行った結果，肯定的な意見と否定的な意見が得られた．肯定的なものとして，緑が多く，自分の足で高い地形の場所までいくことができ気分が良かったという意見が上がった．否定的なものとしては，コンビニやバスがなく，不便であるという意見があった．

図 3.2 フィールドワーク（※文責: 関根遼）

Group Report of 2017 SISP

-6-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

3.2.4

先行事例の調査

観光事業活性化を目標に掲げるにあたって，地域活性化の取り組み，および観光支援の先行事例を調べた．IT で行われた事例として，イラストマップを用いることで観光情報を表示する「Stroly」[4]，SNS 映えする観光スポット検索に特化した「Snaplace」[5]，農家や漁家・古民家などのユニークかつ日本特有の宿泊施設を中心にマッチングする民泊予約サイト「とまりーな」[6]，
遊ぶうちに地形や市町村名など関する知識を覚えてしまうという学習性を利用し，ブランド力を上げることに成功したゲームアプリケーション「ぐんまのやぼう」[7] などを発見した．これらの事例を参考にすることで，手描きマップや，フィールドワークで発見した石別の良さである自然あふれる景色，空き家などを活用できると考えた．
（※文責: 関根遼）

3.2.5

アジャイルワークショップ

6 月 21 日に，プロジェクト活動の円滑化を目的に，アジャイル開発ワークショップに参加した．
ワークショップでは，アジャイル開発手法であるスクラムについて学んだ．参考になった点として，「スクラムはコミュニケーション重視の手法であり，実装する機能に優先順位をつけ開発をするので短期間で最大限の成果が得られる」，「進捗の報告を毎回のミーティングで行うので問題の検知が早く軌道修正も容易になる」などが挙げられる．少数のグループであり，短期間での開発およびフィードバックのサイクルが求められているこのプロジェクトにおいて，決定した計画を絶対のものとするウォーターフォール型開発よりも，アジャイル開発手法の方が効率的な開発を行うことができると判断し，アジャイル開発手法を取り入れることが決定した．
（※文責: 関根遼）

3.2.6

アイデア出し開発するサービス案を決定するにあたり，アイデア出しを行った．手法として，観光をセントラ
ルイメージとしたマインドマップの作成，KJ 法などを用いた．
検討をおこなったアイデアは以下である．

• 手描きマップのデジタル化• 石別の観光，イベント，定住のための情報を発信するウェブサイト
• ゲームを用いて観光行動を促すアプリケーション• 空き家を民泊やサテライトオフィスとして提供し，その利用を支援するサービス• 石別が行うサイクリング事業を支援し，利用者にはルート提案などを行うサービス• 観光客に写真映えのする場所を推奨するアプリケーション
本グループでは上記のアイディアの中で特に以下に挙げる 2 つのアイデアが石別の問題を解決する手段として有効であるとして検討を行った．1 つ目は「石別の観光，イベント，定住のための情報を配信するウェブサイト」．2 つ目は「観光客に写真映えする場所を推奨するアプリケーション」である．

Group Report of 2017 SISP

-7-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
1 つ目の「石別の観光，イベント，定住のための情報を配信するウェブサイト」はフィールド
ワークの際に直面した「石別の観光情報を検索してもヒットする件数が少ない」という問題の解決に有効であると判断した．このアイデアを考えた背景として石別に興味があっても情報が少ないと石別へ訪れにくいのではないかという懸念があった．そのため，情報が少ないのは大きな問題と捉えた．そこでウェブサイトを作成して観光情報をはじめとした石別の情報を増やすことによって石別への観光客，将来的には定住者を増やすことを目的とした．しかし，前提として石別について検索してもらう必要があること，情報が増えたからといって観光客が石別を訪れる動機には直結しないとい理由から，観光客を増加させるのは困難であり，本グループの目的を達成できないと判断した．

2 つ目の「観光客に写真映えする場所を推奨するアプリケーション」はほとんどの観光客がトラ
ピスト修道院しか訪れていない」という問題を解決するために有効であると判断した．本グループ
は石別を訪れた人を対象とした観光アプリケーションを検討した．トラピスト修道院に観光客が集中してしまうことで石別全体の魅力に気づいてもらえていないという問題を解決し，観光客が石別
全体に足を運ぶようになればこの石別の活性化という本グループの目的を達成できると考えた．また，観光客に石別全体の魅力に気づいてもらうための手段として, 写真, 写真映えという言葉に着目した．景色がいいという石別の魅力を活かして写真から行きたいところを直感的に探し, 簡単に
その場所まで行くことができるアプリケーションを開発することで, 石別の魅力を伝えられるのではないかと考えた．そして，本グループは観光客に写真映えのする場所を推奨するアプリケーションを開発することを決めた.
（※文責: 関根遼）

3.2.7

プロトタイピング

アイデアがある程度固まってきた段階で，本グループで実際に考えているアイデアの具体的なイ
メージをアプリケーションに近い形で教員や TA に見せられるように，プロトタイプを作成した．
画面のレイアウトやデザインは Adobe Illustrator[15] で作成し，プロトタイピングツール「Prott」[13] と「Flinto」[?] を用いて画面遷移をつけた．作成したプロトタイプを用いて画面設計について
教員と TA にプレゼンを行い，レビューをもらった．
（※文責: 関根遼）

3.2.8

中間発表会

7 月 14 日，公立はこだて未来大学で中間発表会が開催された．発表の対象は他のプロジェクトの学生や教員であった．発表には A1 サイズのポスターを作成し，iPad に石別で見ることのできる写真映えする景色の写真を映し，発表を行った．各グループが並行して 15 分間のポスターセッ
ションを行った．発表を聞きに来た方にはアンケートに答えていただいた．項目は，発表技術について，発表内容について，石別グループについての 3 点に対する評価を自由記述してもらうものであった．得られた評価を分析した結果，優先して検討するべきものとして，「既存のアプリとの違いが明確でない」「このアプリを利用してもらうトリガーがわからない」「石別ならではの魅力が欲し
いと思った」などが挙げられた．これらの評価を生かし，アプリケーションの機能を再検討した．

Group Report of 2017 SISP

-8-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017（※文責: 関根遼）

3.2.9

第 1 開発本グループは開発を 2 回に分けて開発を行った．第 1 開発ではまずアプリケーションに必要な機能となる機能や仕様について議論した．次に，設計として必要な機能を網羅するようにペー
パープロトタイプを作成し，それに伴いデータベースについて検討を行った．また，ペーパープ
ロトタイプの画面に配置する詳細情報，画面遷移を画面遷移図に起こした．それを元にデザイン
以外の主軸となる機能のみを実装した．それと並行して，第 2 開発ではユーザインタフェースをiOS と Android のデザインガイドラインを軸にしたものに変更するため，デザイン案を Adobe
Illustrator で作成した．第 1 開発終了後，教員と TA にできたものを見せ，レビューをいただいた．第 1 開発についての詳細は 5.1 節の第 1 開発に示している．
（※文責: 関根遼）

3.2.10

アカデミックリンク

11 月 11 日，函館市青年センターで HAKODATE アカデミックリンクが開催された．会場にいらっしゃった市民の方々や，審査員，他のブースで発表している方に向けて発表を行った．発表では，A1 サイズのポスターを作成し，開発したアプリケーションを PC に表示させデモを行った．
また，ポスターセッションの形式を採用し，見に来ていただいた方とインタラクティブにやり取りができるようにした．HAKODATE アカデミックリンクでは，論理性，想像力・発想，発表の工夫，熱意・努力，密着性の 5 つの観点で審査が行われるが，本グループは受賞には至らなかった．
（※文責: 関根遼）

3.2.11

第 2 開発第 2 開発ではまず第 1 開発で実装が終わらなかった機能，バグ修正が必要な箇所の洗い出しを行った．第 1 開発で実装が終わらなかった箇所は優先的に実装を行ない，その後にユーザインター
フェースのプロトタイプを元に機能の追加，見た目の変更，画面を切り替えた時のアニメーションなどの実装を行った．また，実装が困難な箇所は全員で意見を出し代替案を検討した．第 2 開発についての詳細は 5.2 節の第 2 開発に示している．
（※文責: 関根遼）

3.2.12

成果発表会

12 月 8 日，公立はこだて未来大学で最終成果発表会が開催された．発表の対象は中間発表会と同様，学生と教員である．発表には A1 のポスター 2 枚とディスプレイを用意し，ポスターとアプ
リケーションのデモを交えながら発表した．今回は，まず全体の概要を説明し，その後グループごとに発表を行った．本グループでは，説明とデモに 10 分と質疑応答に 5 分の計 15 分を 1 回の発表の流れに設定した．中間発表会と同様に，発表を聞きに来た方にはアンケートに答えていただいGroup Report of 2017 SISP

-9-Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017た．項目は，発表技術について，発表内容について，石別グループについての 3 点について自由記述をしてもらうものであった．評価の詳細は第 7 章に記述する．
（※文責: 関根遼）

3.2.13

石別地区創生会議への提案

本グループは 2 月上旬に石別地区創生会議にて現状報告をする予定であり，現在日程を調整中である．石別地区創生会議では，自分たちがどのようなアプリケーションを作ったのか，それをどう使用してほしいのか，運用する上でどのような点に注意するべきかなどを伝える．石別地区創生会
議でこのアプリケーションを運用したいかどうか，さらにアプリケーションへの要望を伺う予定である．
（※文責: 関根遼）

Group Report of 2017 SISP

- 10 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 4 章 開発に使用したツール
4.1

開発に使用したツールと言語

4.1.1

Monacaより多くの観光客に Phoston を利用してもらうことができるように，iOS と Android の両方のプラットフォームで使えるハイブリッドアプリケーションを開発することにした．そこで，開発プ
ラットフォームとして Monaca を使用することにした．Monaca は，iOS と Android でサポートされている「WebView」コンポーネント状で動作するコードを，HTML/CSS，JavaScript で記述することによって，ハイブリッドアプリケーションとしての機能を実現させる．端末に応じた環境や言語での開発をする必要がなく，１つのソースコードで動作するので，開発の時間的コストを削減することができる．また，Monaca はモバイルアプリケーションの制作に欠かせない，カメラやGPS，センサやを使うための API が用意されている PhoneGap ライブラリを利用することができる [10]．開発プラットフォームとして Monaca を選択した理由は，グループメンバーの中に経験者かがいたこと，iOS と Android の両方をネィティブアプリケーションで対応する場合よりも開発効率が良いことから，時間的な制約のなかで最大限の開発を行えると判断したからである．

Monaca Cloud
クラウドサービス型の Monaca 開発環境．Web ブラウザでのみ開発が可能であり，ローカルに環境構築をする手間をかけずに開発に取りかかることができる．また，リモートでは Monaca

Debugger 上で実行することができるため，Monaca Cloud 上で開発を行っている際，リアルタイ
ムに Monaca Debugger で動作確認をすることができた．実機ビルドやそのための設定を行う際に使用した．

Monaca localKit
ローカルで Monaca アプリケーションを開発するための支援ツールである．エディターや

GitHub などのバージョン管理ツールなどと連携することができるため，各メンバーが好みのエ
ディターを選択して開発を行うことができる。また Monaca Cloud 同様リモートデバッグが可能である．

Monaca CLI
コマンドライン形式の Monaca 用ローカル開発環境である．Monaca Cloud と同等の機能を提供している．GitHub と Monaca Cloud 間でコード共有をする際に使用していた．

Monaca Debugger
Monaca のプロジェクトをスマートフォン，タブレット上でデバッグするためのアプリケーショ
ン．MonacaCloud や MonacaCLI からリモートでデバッグが可能である．シミュレータのように素早く実装した画面を確認できるため，テストの際はこのツールを使用した．Cordova プラグインの動作も確認が可能であり，ビルドに近しい環境で実行することができる．

Group Report of 2017 SISP

- 11 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017（※文責: 葛西翔太）

4.1.2

Git/GitHub

ソースコードのバージョン管理ツールとして，Git/GitHub を使用した．Git はソースコードの変更履歴を保存する分散型バージョン管理システムである．Git では各ユーザのワーキングディ
レクトリにローカルリポジトリと呼ばれる，ファイルやディレクトリの状態や変更履歴が保存されるデータベースを作成することで，必要に応じて過去の状態の閲覧や復元を行うことができる．

GitHub は Git のプロジェクトホスティングサービスの一つであり，リモートリポジトリを作成し，必要に応じて各メンバーのローカルリポジトリを保存，共有することで，共同作業を可能にする [11]．管理ツールとして選択した理由として，述べてきた利点に加え，TA に経験者が多く，アドバイスを受けやすい状況だったことが挙げられる．
（※文責: 葛西翔太）

4.2

設計に使用したツール

4.2.1

astah* professional

Phoston の画面遷移図の作成に astah* professional を用いた．理由として，グループメンバー
全員がソフトウェア設計論 II の講義を履修しており，astah* professional の使用経験があったからである．astah* professional は UML モデリングツールである．開発では，画面遷移図，シーケ
ンス図の作成に用いた [12]．
（※文責: 葛西翔太）

4.2.2

Prott

プロトタイプを作成するツールとして，Prott を用いた．プロトタイプは，機能やアイディアを形にすることで早期からフィードバックを得ることを目的として作成した．Prott は学習コストが低く，素早くプロトタイプを作ることができる．また，紙に描いたスケッチを実際に操作できるよ
うに実装するペーパープロトタイピングの機能もあり，専用の用紙にラフを描き，撮影して読み込
むだけで素早くプロトタイプが作成できるという利点があり，使用した [13]．
（※文責: 葛西翔太）

4.2.3

FlintoPhoston のプロトタイプを作成する際，Flinto というツールを使用した．Flinto はプロトタイ
ピングツールのひとつであり，画面遷移やアイコンなどのアニメーションを簡単に作ることができる [14]．画面遷移やアイコンなどのアニメーションなどをつけることで，作りたいアプリケーショ
ンにより近い形でデザイナーがエンジニアに共有できると考え Flinto を使用した．しかし，一つのプロトタイプを作成するために，使い方を習得する時間やアニメーションを作成する時間が想定していたよりも多くなってしまった．開発が遅れるリスクを回避するため，学習コストが低く素早Group Report of 2017 SISP

- 12 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
く簡単にプロトタイプをいくつも作れる Prott というプロトタイピングツールを作成することに決定した．
（※文責: 葛西翔太）

4.2.4

Adobe Illustrator

アプリケーションに使われるシステムアイコン，および第 2 開発用のユーザインタフェース設計
図の作成ツールとして Adobe Illustrator を用いた．Adobe Illustrator はアドビシステムズが販売するベクターイメージ編集ソフトである．ベクターイメージとは描画される点の座標とそれを結ぶ線などの数値データを基にして演算によって画像を再現する方式のことで，数学的な計算から算出された線とカーブから，ズームされるたびに描き直されるので，解像度を気にすることなく拡大縮小をすることができる．グループ内に使用した経験のあるメンバーがいたことや，ロゴ制作やポスター製作に最適であることなどを理由としてこのツールを使用した [15]．
（※文責: 西谷歩）

4.3

タスク管理ツール

4.3.1

Trelloグループのタスク管理に，Trello を利用した．Trello はタスクを 1 枚のカードとして作成し，進捗ごとに ToDo，Doing，Done などといったエリアにそのカードを張り替えるようにして管理していくツールである [16]．Trello の優れている点は，「ふせん」のような感覚で使える点である．また，Chrome での拡張機能が豊富であるため，使用した．しかし，作業ごとのタスク管理のために画面が切り替わり，全部のタスクを一目で見ることができない，メンバー同士のタスク量の差が一目でわからないという理由で改めてタスク管理ツールの再検討をした．ツールを調べていくなかでWBS という手法を発見した．大カテゴリ，中カテゴリ，小カテゴリにタスクを階層ごとに振り分けることができ，どの作業をどのくらいの期間で誰が担当するのか一目で見ることができるという利点を見つけたため，Google スプレッドシートに WBS を作成し，利用した．
（※文責: 西谷歩）

4.3.2

Google スプレッドシート

プロジェクトの作業工程や役割分担，進捗などを管理するためのツールとして Google スプレッ
ドシートを利用した．作業は WBS 手法を用いてタスクを細分化し，記述した．WBS はプロジェ
クトマネジメントで利用される計画手法の一種で，作業を細かい単位に分担し，階層構造などで管理する手法のことである．Google スプレッドシートはオンラインの共同作業が可能であり，リア
ルタイムで変更が保存されるため，プロジェクトでの利用に適しているため，使用した [17]．
（※文責: 西谷歩）

Group Report of 2017 SISP

- 13 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 20174.4

グループ内コミュニケーションツール

4.4.1

Slack

グループメンバーでのコミュニケーションツールとして Slack を用いた．Slack はビジネス用のチャットツールである．パソコン，スマートフォン，タブレットでの利用に対応しているためプ
ラットフォームを選ばない利用が可能であり，ファイルの共有，メッセージやファイルの検索も容易であるため，本グループでは議事録や一時的な URL などの共有は Slack で行うようにした．また，Google Drive や GitHub といった，プロジェクト学習で利用しているサービスとの連携が可能であり，作業を効率化することができた [18]．
（※文責: 西谷歩）

4.5

その他利用したツール

4.5.1

Google ドキュメント

議事録や活動メモといった文書を共有するために，Google ドキュメントを利用した．Google ド
キュメントはパソコン，スマートフォン，タブレットのどこからでも新しいドキュメントを作成して，他のユーザーと同時に編集できる．インターネットに接続していなくても作業を継続でき，

Word ファイルも編集できるため，使用した．[19]．
（※文責: 西谷歩）

4.5.2

Cloud LaTeX

グループ報告書を製作するにあたり，TeX を利用した．大学からの指定があったことや，卒業研
究でも使用することを考慮し，TeX を使用した．TeX はマークアップ言語で記述された文章構造
から組版を行うソフトウェアである．TeX の優れている点はテキストファイルで編集を行うため，後からフォントや節の番号を変更する作業が容易に行えるという点である．ただし TeX はコンパ
イル環境構築が必要となるため，その手間を省くために Cloud LaTeX を利用した [20]．
（※文責: 西谷歩）

Group Report of 2017 SISP

- 14 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 5 章 開発プロセス
5.1

第 1 開発

5.1.1

到達目標

必要となる機能と画面遷移を考え，必要な機能と仕様を満たしたプロトタイプの実装を到達目標とした．理由として早い段階で機能開発について取り組むことで UI などの詳細な部分の変更の際に対応が早くなると考えたからである．
（※文責: 上杉明日香）

5.1.2

開発内容

まずアプリケーションにどのような機能が必要かを洗い出し，その機能や仕様を満たしたアプリ
ケーションのレイアウトと画面遷移を考えた．そして画面ごとに必要な機能を網羅するようペー
パープロトタイプタイプを作成した．その際，データベースに格納するデータ型など，データベースについての検討を行った．また，ペーパープロトタイプの画面遷移，画面ごとの詳細設定をわか
りやすくまとめるために画面遷移図を作成した．この２つを元に主要機能の動作確認ができる程度のプロダクトを目指し, 機能の開発を行った．使ったツールとして, GitHub や Monaca などが挙げられる. また同時に，このアプリケーションをユーザが使いやすいようにするために，iOS とAndroid のデザインガイドラインや類似するアプリケーションを参考にしたユーザインタフェース
案をいくつか提案した．ユーザインタフェース案は Adobe Illustrator で作成し，Flinto や prottを利用して動くプロトタイプを作成した．グループ内で，作成したプロトタイプを用いてユーザイ
ンタフェースについて評価し合い，選ばれたユーザインタフェースを第 2 開発で実装した．
（※文責: 上杉明日香）

5.1.3

成果物

アプリケーションの機能及び仕様
このプロジェクトの目標である,

観光客に石別全体の魅力に気づいてもらうアプリケーションを作成するために以下のような機能及び仕様を考えた．

• 石別地区の住民からいただいた画像一覧を表示• 石別地区の住民からいただいた画像とスポットのコメント，位置情報を表示• 条件検索• 時間によって表示する画像を変更できる• 選択したスポットをつなぐルート表示

Group Report of 2017 SISP

- 15 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

画面遷移図
機能及び仕様を満たした画面で，データベースに格納するデータ型等をわかりやすくまとめるた
めの，画面遷移図 (図 5.1) を作成した．

図 5.1

画面遷移図

ホーム画面
石別地区の住民からいただいた石別の観光スポットになりうる景色の写真を一覧で見られる画面である (図 5.2)．第 1 開発で画像の絞り込み結果をホーム画面で見られる機能や詳細画面へ遷移できる仕様など，想定していた機能全ての機能を実装できた．第 1 開発終了時に画像の縦横比の歪みが iOS のデザインガイドラインに沿わないことや住民からいただいた画像を住民の意に沿わない形で表示にしてしまうことが問題となり，第 2 開発で改善することとなった．
詳細画面
ホーム画面に表示してある写真をタップすると遷移する画面である (図 5.3)．選択した写真の全体像，写真のタイトル，住民のコメント，(お店の写真であれば) 営業時間，その写真が撮られた場
所の位置にピンが立っているマップを表示することができるようにした．本来マップ表示だけではなく，ユーザーのいる場所を GPS で取得し，写真が撮られた場所までのルート案内をできる状態にするはずであった．しかし，思ったような実装ができず，予定していたより時間がかかってしまったために第 1 開発として設けていた期間に実装が間に合わなかった．そのため，第 1 開発では，必要な情報を載せるだけの実装となった．
絞り込み画面
ユーザーが「現在見られる景色」，「営業中のお店」，「坂道を通らない」といった条件で画像を絞り込むことのできる画面である (図 5.4)．石別の住民からいただいた時間のデータが画像一つ一つに入力されていて，そのデータを読み込むことで絞り込むことを可能にした．第 1 開発終了時点でGroup Report of 2017 SISP

- 16 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
機能の実装は全て完了した．

ルート作成画面
ユーザーが行きたいと思った写真を複数選択するための画面である (図 5.5)．選択した画像の位
置情報のデータをマップ画面でルートを作成するために使用する．第 1 開発終了時点ですでに実装が完了していた．画像を選択すると選択した画像の周りに緑色の枠ができるようになっており，選択した画像がある状態で画像の一番下までスクロールすることで出てくる決定ボタンを押すとマップ画面に遷移するようになっている．
マップ画面
ルート作成画面で複数選択した全ての画像の位置情報をピンとカルーセルで表示し，ユーザーのいる場所から最短距離のルートを表示する画面である (図 5.6)．第 1 開発では，ルート作成画面で選択した位置情報でルートを作成する方法や，カルーセル上の画像処理方法がわからず，試行錯誤を重ね実装をしたがうまくいかなかった．そのため，ルート表示機能とカルーセル表示を第 1 開発の期間内に実装をしきれなかった．打開策として，選択した位置情報をピンで表示するだけの機能を実装し，ルート表示機能とカルーセル実装を第 2 開発で行うことになった．
サーバーサイド
アプリケーションに使用されるスポットデータは，継続的な更新がされることを考慮し，アプリ外に保存しておき，逐次読み込む方法が妥当であると考えた．そこでスポットデータは外部データ
ベースサーバに保存することにした．アプリは起動時にサーバにデータを要求する．データベースには Xdomain から提供されているレンタルサーバーを使用している．DBMS として MySQL が使われている．他のサーバーサイドサービスの候補として NiftyCloud mBaaS が挙げられたが，

RDBMS に対応していない (Key-Value ストア形式) ため様々な情報の保存が必要なスポットデー
タの管理には向かないと判断した．サーバーの容量は 50MB である．現在 5.2MB を使用しており，このままデータが増えていくと容量が足りなくなる．そのため，写真ファイルのファイルサー
バー移行，無料プランから有料プランに移行しデータベースの容量の増設を検討する必要がある．

Group Report of 2017 SISP

- 17 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 5.2 ホーム画面

図 5.4

図 5.3

絞り込み画面Group Report of 2017 SISP

詳細画面

図 5.5 ルート作成画面- 18 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 5.6 マップ画面（※文責: 上杉明日香）

5.2

第 2 開発

5.2.1

到達目標

iOS，Android のデザインガイドラインにのっとったユーザインタフェースを実装したアプリ
ケーションの完成と第 1 開発で実装しきれなかった機能の実装，iOS と Android の実機でビルドを行い思い通りに動くことを目標にした．デザインガイドラインにのっとったユーザインタフェー
スにする理由は，ユーザーが迷うことなくアプリケーションを操作することができるようにするためや，石別の魅力である景色の良さに気づくことができるアプリケーションにするためである．
（※文責: 上杉明日香）

5.2.2

開発内容

第 1 開発で数種類作成していた iOS，Android のデザインガイドラインにのっとったユーザイン
タフェースのプロトタイプについて，Prott を用いて実際に触ってみて使いやすさをグループ内で検証した．そこでグループメンバーが使いやすいと感じたインタフェースを選び，教員と TA からのアドバイスをもらい，修正したインタフェースに基づいた画面の実装を Monaca を用いて行った．ここからの実装ではグループメンバー全員が GitHub を使用し，実装を行った．インタフェー
スの実装は画面ごとに実装担当を分け作業を行った．また，実装する上で想定していた画面切り替
えのアニメーションなど，Monaca での実装が難しかった問題についていくつか代替え案を出し全員で意見を交換した．また，第 1 開発で実装しきれなかった機能について，引き続き実装を行った．全ての画面が Monaca デバッガー上で実装でき始めた頃に，iOS と Android の実機でビルドGroup Report of 2017 SISP

- 19 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
し挙動の確認を行った．
（※文責: 上杉明日香）

5.2.3

成果物

ホーム画面
第 1 開発では縦横比が本来の画像とは異なった正方形の写真を横３列に適当に配置したものであった．第 2 開発では，住民からいただいた写真は縦横比をそのままにし，写真の真ん中から正方形に写真を切り取るという形になった．また，第 1 開発終了時点ではルート作成画面を表示するために写真がなくなる一番下までスクロールしなくてはならなかった．第 2 開発では，写真を魅せる
ため，Instagram や Snaplace などに共通して見られる特徴である画像と画像の間の線を細くし，できるだけ画像を大きくするという工夫をしている．また，ルート作成画面に遷移するためのボタンは，常に画面右下に表示されるように変えた．
詳細画面
第 1 開発での写真の表示方法を改め，いただいた画像本来の縦横比で画面の横幅いっぱいに表
示するよう変更した (図 5.8)．理由は，ホーム画面で切り取られてしまった部分を表示させて，石別の景色をもっとよく堪能できるようにするためである．また，石別の住民からいただいたコメン
トを読みやすくするために，フォントサイズ，行送り，上下左右の余白を意識した．ホーム画面に戻るためのボタン表示は iOS と Android で別々にする予定であり，iOS では画面左上のナビゲー
ションバー上に配置，Android では表示せずに Android が持つ戻るボタンを利用できるようにした．ボタン表示の方法を OS ごとに変える理由は，iOS はナビゲーションバー上で，Android では
備え付けの戻るボタンを使用するなど，OS によって「戻る」と言う動作のために使用するボタンが違うからである．その他に，第 2 開発では，第 1 開発で実装仕切れていなかったユーザーの現在地からのルート表示機能を完成させた．
絞り込み画面
インタフェースの案として上がっていたものでは，ホーム画面上にボタンが出現し，押したボタンに対応してリアルタイムにホーム画面で表示されている写真が変更される様をユーザが見られるような画面の設計になっていた．しかし，グループメンバーが思った以上に CSS，JavaScript での実装が難航したため，代替案として第 1 開発時点の画面に検索結果の件数を加えて表示できる画面を採用した．また，第 1 開発時点では絞り込みするための文言が「営業時間外の店を非表示」となっていた．ボタンをオンにするとどうなるかや，オフにするとどうなるかがわかりにくかったため，第 2 開発では文言についても「営業時間外の店を表示」と変更し，改善した．
ルート作成画面
第 1 開発終了時点では，画像の周りを緑色にする仕様であったが，近年 SNS アプリケーション
等で使用されている，画像にチェックマークがつき，チェックマーク以外の部分をタップすると，詳細画面へ遷移するインタフェース案を採用した (図 5.10)．このインタフェース案を採用した理由は，ユーザーが画像の複数選択で一番慣れている操作方法で選択できると感じたからである．また，詳細画面同様，画像複数選択からホーム画面に「戻る」動作をする際に使用するキャンセルボ
タンを OS に依存させた形に適用させた．

Group Report of 2017 SISP

- 20 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

マップ画面
第 1 開発では，1 つのカルーセルが画面の横幅いっぱいに表示されているインタフェースであった．第 2 開発では，カルーセルが横にスライドできることがユーザーにわかるように，あえて前後のカルーセルが少しだけ見えるようなユーザーインタフェースを採用した (図 5.11)．また，第 1
開発では実装しきれなかったルートの表示とカルーセル上の画像の表示を第 2 開発では実装した．
実機ビルド
本グループではリリースをしてユーザーに使ってもらえることを想定しているため，実機ビルドを行った．実機ビルドは本来，第 1 開発から行うべき作業であったが，想定よりも時間と調査のコストがかかってしまったため第 2 開発から行った．iOS の実機ビルドは手順が多い上，Apple の Developper Account をはじめとして教員の承認が必要な場面が多々あった．結果として，Android，iOS の両方で実機ビルドをして動作確認を行うことで OS に依存したボタン表示の差異やバグを発見することができた．

図 5.7 ホーム画面

Group Report of 2017 SISP

図 5.8 詳細画面

- 21 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 5.9

絞り込み画面図 5.10 ルート作成画面

図 5.11 マップ画面（※文責: 上杉明日香）

5.3

類似サービスの事例調査

Phoston は，観光情報を観光客に対して発信していくための情報の拡散力，および魅力的な景色を共有するための写真が必要であることから，SNS 型のサービスが有効であると考え，SNS に関Group Report of 2017 SISP

- 22 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
わる事例を中心に調査した．参考にすることができると判断したサービス事例として，以下が挙げられた．

• Instagram
SNS の 1 つで，スマートフォンなどで撮影した写真をお洒落に加工して共有することができる (図 5.12)．綺麗な風景や美味しそうな食べ物など，写真撮影はポジティブな感情が生じた際に行われがちである．投稿された写真を通じ，友人など投稿者とつながりの深いユーザーが観光スポットについて知ることで，口コミ効果を期待できる [21]．

図 5.12 Instagram のスクリーンショット• Snaplace
SNS 映えする観光スポットを見つけるサイトである (図 5.13)．SNS 映えする写真を多く取り扱っており，写真をタップするとその場所の説明や位置情報がマップで表示される．市販の観光ガイドブックでは紹介されない，ニッチなスポットも簡単に探せる観光ガイドである[5]．

Group Report of 2017 SISP

- 23 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 5.13 Snaplace のスクリーンショット（※文責: 上杉明日香）

Group Report of 2017 SISP

- 24 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 6 章 Phoston について
6.1

概要

本プロジェクトで開発している HTML5 ハイブリッドアプリケーション「Phoston」は，石別の魅力をより多く観光客に紹介できるような観光アプリケーションを開発することを目標としている．この目標を掲げた背景として「ほとんどの観光客がトラピスト修道院しか訪れていないこと」，「石別の観光情報を検索してもヒットする件数が少ないこと」，「トラピスト修道院以外の観光情報の入手が困難であること」が挙げられる．そこで本グループは石別の自然の豊かさや綺麗な景色の場所を，石別の住民がアプリケーションを通じて観光客に紹介する「Phoston」を開発している．
「Phoston」は主にトラピスト修道院に来た観光客を対象に，他の観光スポットまで案内することを目的としている．石別の魅力的な写真を載せる事で観光意欲を引き出し，さまざまなスポットに行ってもらうことによってトラピスト修道院以外にもある石別の魅力に気づいてもらう事を想定している．アプリケーション内の写真や写真の説明などのデータは石別の事をよく知っている住民の方から提供していただいたものを学生がアプリケーションに反映させている．
（※文責: 上杉明日香）

6.2

画面説明

6.2.1

ホーム画面

ホーム画面 (図 6.1) では石別で見ることができる景色や食べ物の写真をランダムに表示している．ユーザーが気に入った写真をタップすると 6.2.5 節の詳細説明画面 (図 6.5) に遷移し，その場
所の詳細情報を見ることができる．写真は実際に石別の住民からいただいたものを使用し，住民がオススメしたいスポットを観光客に紹介している．また，アプリケーションを起動した時に季節や天気，時間帯の情報を取得し，その情報に類似する情報を持つ写真を表示する．これは右上の絞り込みをタップして 6.2.2 節の絞り込み画面 (図 6.2) に遷移し，絞り込みを行うことで表示する写真の量を調整することができる．右下にあるルート作成ボタンを押すと 6.2.4 節のマップ表示画面(図 6.4) に切り替えることができる．

Group Report of 2017 SISP

- 25 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 6.1

ホーム画面

（※文責: 上杉明日香）

6.2.2

絞り込み画面

絞り込み画面 (図 6.2) ではホーム画面で表示する写真を条件別に絞り込むことができる．絞り込
みで行える条件は以下のものである• 現在営業時間外の写真を非表示• 坂を登る場所を非表示• 季節，時間が異なる写真を非表示
アプリ起動時には全てがオフになっており，条件に関係なく全ての写真がホーム画面にランダムに表示されている．ホーム画面に表示される写真の量は絞り込み条件の下に表示された検索結果の件数で確認することができる．これは条件をオンオフして変更した際にリアルタイムに変化するため，正常に絞り込みが行われていることをユーザは認識することができる．

図 6.2 絞り込み画面

Group Report of 2017 SISP

- 26 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017（※文責: 上杉明日香）

6.2.3

選択画面

選択画面 (図 6.3) は気になるスポットを複数選択する画面である．6.2.1 節のホーム画面 (図 6.1)の写真を選択状態にしたものであり，写真の右上に表示されているチェックボックスをタップする
ことでスポットを選択することができる．ここで選択したスポットは右下にある矢印で表した確定ボタンを押して 6.2.4 のマップ表示画面 (図 6.4) に遷移すると，一つのマップ上で表示されるようになっている．また，スポットを選択した状態であっても写真をタップすると 6.2.2 節の絞り込み
画面 (図 6.2) に遷移し，選択状態を保持したまま写真の詳細情報を見ることができる．選択画面は左上にあるキャンセルを押すことで選択状態が解除され，ホーム画面に戻る．この複数選択の機能
により，ユーザーが行ってみたい場所が複数箇所ある場合，1 日に回るコースなどをユーザーの好みで作成することができる．

図 6.3

選択画面

（※文責: 上杉明日香）

6.2.4

マップ画面

マップ表示画面 (図 6.4) では 6.2.3 節の選択画面 (図 6.3) で選択されたスポットを一つのマップ
上にピンを立てて表示する．画面の下部には選択されたスポットをカルーセルで表示している．カルーセルを左右にスライドすることで正面に表示されるスポットを変更することができ，他に選択したスポットを確認できる．マップには現在地からカルーセルの正面に表示されているスポットまでのルートを表示している．マップ画面は左上の Back をタップすることで 6.2.1 節のホーム画面(図 6.1) に戻る．

Group Report of 2017 SISP

- 27 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 6.4

マップ画面

（※文責: 上杉明日香）

6.2.5

詳細説明画面

詳細説明画面 (図 6.5) ではスポットの詳細情報を表示する．ここで表示する情報は以下のもので
ある．

• 写真
• タイトル• 紹介文• 営業時間• 位置情報
営業時間はスポットの写真がお店の建物，食べ物，お土産のような営業時間のある施設に依存する情報だった場合，その施設の営業時間を表示する．それ以外の営業時間に依存しない景色のような写真の場合には表示しないように設定している．位置情報はマップ上にスポットのピンを立てて現在地からのルートを表示している．詳細説明画面は 6.2.1 節のホーム画面 (図 6.1)，6.2.3 節の選択
画面 (図 6.3) から遷移することができる．

Group Report of 2017 SISP

- 28 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

図 6.5

詳細説明画面

（※文責: 上杉明日香）

Group Report of 2017 SISP

- 29 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第7章
7.1

評価

Phoston の評価

成果発表会で発表を聞きに来た方に「Phoston を使って観光したいと思いますか？ その理由をご記入ください」という内容のアンケートに答えてもらった．Phoston の評価として，「思う．現地の人しか知らないようなところに行くことができるから」，「思う．観光ガイドにはない，地元の人のみぞ知るという場所に行ってみたいと思う」など，地元の人しか知らないような場所に行けるという点が良いという回答が多く見られた．これは Phoston のコンセプトである「石別の住民が作る，観光アプリケーション」が石別全体の魅力に気づいてもらうという目標を達成するために有効な手段であると考えられる．しかしその反面，データを投稿する石別の住民の方のメリットを明確にする必要があるという課題が見つかった．また，Phoston をよりユーザーにとって使いやすい
アプリにするための，具体的なアドバイスや要望ももらった．参考になった提案として，「店の情報にリンクしてほしい」，「写真データをカテゴライズしたら良い」などが挙げられる．観光客により精度の高い情報を提供できるようにするために，これらの機能の実装を今後検討したい．
（※文責: 葛西翔太）

Group Report of 2017 SISP

- 30 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 8 章 学び8.1

共通認識にすることの困難さ

グループメンバーでの情報共有に関して，グループメンバー全員の共通認識にならないという問
題が多々発生した．例えば，メンバーに割り当てた仕事の範囲が曖昧だったことにより，自分たちで設定した期限直前になっても達成されていない作業の発生，活動の目的や到達目標がメンバーの間で差が生まれるという状況が発生した．本グループは，共通認識のすれ違いは必ず起こり得るものだと考え，定期的に共通認識のすれ違いを解消することで対応した．行った工夫として，話し合った内容を包括的にメモなどの記録媒体に残した．これは議事録とは別途で作成した．さらにプロジェクトの終了時刻の直前に，それらの記録を用いて決定事項の確認，詳細化されていない決定事項の詳細化，曖昧な表現を含む事項の確認をする時間を設けた．これにより，発表用ポスターや報告書の作成で活動の目的や到達目標を書く際に，メンバー内の修正回数が削減された．この経験から，共通認識のすれ違いは起こり得るものだと考え，グループ内でコミュニケーションをとる際に曖昧な表現や，グループメンバーの一部のみが理解できる共通言語の使用を控えること，定期的な共通認識のすれ違いを確認することが欠かせないと学んだ．
（※文責: 葛西翔太）

8.2

先方との打ち合わせ不足

プロジェクトを進行するうえで，先方に対し本グループの活動や制作物についての情報共有，および意見のヒアリングとその反映を怠ってしまった．そのため先方の意見が反映されていない成果物になってしまった．原因として，以下の 2 つが挙げられると考える．1 つ目は学生主体のアイデアで進行する側面が大きかったため，グループメンバーが情報共有より活動の進捗に意識を向けてしまったことであると考えられる．2 つ目は制作物を先方にプレゼンする機会を確保できなかったことであると考えられる．原因として，10 月ごろに活動方針が定まり，時間不足からグループメ
ンバーが成果物を完成させることに集中してしまったことが挙げられる．これらの反省から，定期的に先方と連絡を取るルールを設けることが，フィールドの意見を取り入れるために必要だったと学んだ．今後の予定として，石別地区創生会議へ，現状と今後の引き継ぎなどに関する報告をする
機会を設けた．詳しい日程は現在調整中である．
（※文責: 葛西翔太）

8.3

スケジュールプロジェクト活動を進める上で，事前に立てたスケジュール通りに開発が進まなかったり，報告書や発表用ポスターの作成を行えないという問題が発生した．そのため当初予定していた達成するべき作業が期限間近に急いで進められたり，達成されない状況が発生した．考えられる原因として以下の 2 つが挙げられた．1 つ目はグループメンバーにスケジュール通りに作業を達成させるといGroup Report of 2017 SISP

- 31 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017
う意識が足りていなかったことが挙げられる．これによって後になって何度もスケジュールの修正を繰り返すという問題も発生した．これはプロジェクト活動の最初の時間に各メンバーの作業進捗を確認することで，各メンバーの作業にメンバー全員が注意を向けるようにすることで軽減した．
また遅れが発生する可能性があると判断された場合，その都度作業の負担を他メンバーに割り振ることで軽減するなどの対応も行った．2 つ目は作業の進捗を遅らせる可能性のあるリスクを考慮したスケジュールを立てることができなかったことが挙げられる．プロジェクトとは関わりのない各
グループメンバーの都合や開発におけるバグの発見と修正などによる進捗の遅延を考慮せずにスケジュールを立てていた．これは予備の時間を考慮しスケジュールを立てるようにすることで対応した．この対策により作業がスケジュール通りに終わらず，スケジュールを改めて作成するといったことを削減させることができた．これらから柔軟な対応ができるスケジュールを立てることが大切だと学んだ．
（※文責: 関根遼）

8.4

聞き手を意識した発表資料の作成

中間，最終発表やアカデミックリンクなどの発表の場で使用するポスターなどの資料を作成する
際に，聞き手にとって理解しにくい資料を作成してしまうという問題が発生した．資料に対するレ
ビューに多かった意見として，文字が多く読むのが疲れる，定義されていない用語が多く読んでいて混乱する，図やパラグラフの配置が雑で読む流れがわからないなどが挙げられた．これらのレビューを元に，図での説明を増やしたり，チームでの共通言語となっているワードを極力減らす工夫をおこなた．その結果，最終発表のレビューでは図が見やすく内容が入ってきやすいと言ったレビューが見て取れた．発表の資料は聞き手の認知的な負荷の軽減を意識するように制作することが重要だと学んだ．
（※文責: 葛西翔太）

8.5

事前調査の必要性

グループ全体でプロジェクトとはどのように進めていくべきか，どういった工程や作業があるのかなどの事前調査が足りず，アイデア出しで前期の時間潰してしまうといことがあった．また，GitHub や WBS などの使い方を詳しく事前調査しなかったために後の作業で思ったように使えずに行き詰まってしまったり，誤った使い方をしていたために作業が後戻りしてしまうことが多くあった．一方 Monaca や Prott などについてグループ内に事前調査をしていて，使い方をわかっているメンバーがいたことで，Monaca については作業の後戻りなく使うことができていた．このことから，グループメンバーが持っている知識の他に，プロジェクト内で仕様するツールで誰も経験したことがない知識の範囲についてはグループメンバー全員で事前に調査をしておくことが必要であったことがわかった．この経験を生かし，次に行う卒業研究において必要な知識や技術について事前に深い調査をするようにしたいと考える．
（※文責: 葛西翔太）

Group Report of 2017 SISP

- 32 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 9 章 今後の予定と展望
9.1

今後の予定

9.1.1

アプリケーションの修正

現在周知されている Phoston のバグ修正，および細かな UI の変更を予定している．修正する点は以下である．

• ホーム画面のスポット写真の縦横比修正• スポット絞り込み時の検索結果の表示色の変更• スポット詳細画面に開店時間および閉店時間を表示させる• 初回起動時にスポットデータ読み込みを判断できるようなモーダルを表示させる• Apple のアプリデザインガイドラインを踏まえた UI の修正（※文責: 葛西翔太）

9.1.2

アプリリリースに向けての準備

一般に公開するために，App Store および Google Play Store への申請に向けた準備を予定している．必要な作業として，プライバシーポリシーの作成がある．Phoston で一般向けに提供される
スポットデータは石別の住民によって提供されたデータであるため，利用についての規範を定めア
プリケーション内に利用規約として明示する必要がある．また申請に際し，アプリケーションアイ
コンやスプラッシュ画面の設定，ストア内での説明文の検討なども必要である．
（※文責: 葛西翔太）

9.1.3

石別地区創生会議での発表

2 月上旬に石別地区創生会議で本グループが作成した Phoston について発表し，住民の方や北斗市市役所員の方からの意見を聞く機会を設ける予定である．石別地区創生会議とは，石別地区の最大の課題である地区人口減少の問題の克服を目指し，地域力の維持および地域の活性化に向けて住民が無理なく合意できる実現性の高い地域主体の取り組みを検討し，市および関係主体との協働による計画的な地域づくりを推進することを目的とする会合である．この発表で得られたフィード
バックを元に，アプリケーションを改善していく予定である．
（※文責: 葛西翔太）

9.1.4

秋葉原での課外発表

本グループは 2018 年 2 月 16 日に秋葉原で行われる課外発表会に参加する．本グループが 1 年
間プロジェクト学習で行ってきた活動についてポスターセッション形式で発表を行う．この発表会

Group Report of 2017 SISP

- 33 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017には東京周辺にある多くの企業の方が来場するため，アカデミックリンクとは異なった，事業者視点でのコメントを多くいただくことができると考えている．
（※文責: 関根遼）

9.2

アプリケーションの展望

石別グループの今後の展望として投稿機能の実装が挙げられる．「Phoston」は現在住民の方に提供していただいた情報を，グループメンバーがデータベースに直接データを入れることでアプ
リケーションに反映させている．この現行システムでは，住民がデータを提供してからアプリケー
ションに反映させるまでに時間を要してしまうため，投稿機能を実装することで，アプリケーショ
ンにリアルタイムで反映させることを検討している．それに伴い投稿の編集，削除をする管理者が必要となるため，管理者を石別側に要請することを想定している．
（※文責: 関根遼）

Group Report of 2017 SISP

- 34 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

第 10 章
10.1

まとめ

まとめ

本プロジェクトは，フィールドに適したシステムを作ることが目的としている．本グループでは
北海道北斗市にある石別地区をフィールドとした．トラピスト修道院を中心とした観光地以外にもある石別全体の魅力にも気づいてもらうことを目的としている．そのため，石別の住民に提供していただいた穴場スポットの情報を観光客に紹介するアプリケーション「Phoston」の開発を行った．
ユーザに直感的に行きたい場所を選んでもらうため，写真をベースにしたアプリケーションにした．活動を進めていく上で，特に先方とのコミュニケーションやニーズの把握の難しさについて学ぶことができた．また，システム開発をする上で要件定義や開発も経験することができ，プロジェ
クト学習という実践の場でしか経験できないようなことを学ぶことができた．本プロジェクトでの学びを今後の活動に活かしていきたい．
（※文責: 西谷歩）

Group Report of 2017 SISP

- 35 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

付録 A

活用した講義• 科学技術リテラシ• 認知心理学演習• 情報マネジメント論
報告書の参考文献を記述するために，科学技術リテラシで学んだ参考文献の記述方法を用いた．
図や表を使用する際には，認知心理学演習で学んだ記述方法を用いた．図は下に，表は上に説明文を記述すること，見やすいように図や表を配置することを意識した．また，情報マネジメント論で学んだ WBS を，プロジェクトを進める際のタスク管理に用いた．プロジェクトの進み具合が当初の予定より遅れてしまったことから，WBS を作成し，開発の進捗状況を把握することの重要性を学んだ．
（※文責: 葛西翔太）

Group Report of 2017 SISP

- 36 -

Group Number 02-A

Field Oriented System Design Learning by Users’ Feedback 2017

参考文献
[1] 北斗市の統計 [人口及び世帯数-国税調査結果-]
https://www.city.hokuto.hokkaido.jp/docs/1113.html (2017/07/18 アクセス)[2] 北斗市の観光スポットランキング TOP10 -じゃらん.net
http://www.jalan.net/kankou/cit 012360000/ (2017/07/15 アクセス)[3] 石別地区創生会議 http://ishibetu.wixsite.com/souseikaigi (2017/07/23 アクセス)[4] 京 都 発 ，イ ラ ス ト マ ッ プ や 古 地 図 と 現 在 地 が 連 動 す る「stroly」で 街 歩 き が 変 わ る
http://jp.techcrunch.com/2017/02/24/stroly-map-platform/ (2017/07/23 アクセス)[5] Snaplace ス ナ ッ プ レ イ ス SNS 映 え す る 観 光 ス ポ ッ ト を 探 そ う

https://snaplace.jp/(2017/07/23 アクセス)[6] とまりーな 日本最大級の民泊情報サイト
http://min-paku.biz/list/tomarina (2017/07/23 アクセス)[7] ぐんまのやぼう http://ruckygames.com/gunmaapps/index.html (2017/07/23 アクセス)[8] Prott https://prottapp.com/ja/ (2018/01/17 アクセス)[9] Adobe Illustrator http://www.adobe.com/jp/products/illustrator.html (2018/01/17 アクセス)[10] Monaca https://ja.monaca.io/ (2018/01/17 アクセス)[11] GitHub https://github.com/ (2018/01/17 アクセス)[12] astah* professional http://astah.change-vision.com/ja/product/astah-professional.html(2018/01/17 アクセス)[13] Prott https://prottapp.com/ja/ (2018/01/17 アクセス)[14] Flinto https://www.flinto.com/[15] Adobe Illustrator http://www.adobe.com/jp/products/illustrator.html (2018/01/17 アクセス)[16] Trello https://trello.com/ (2018/01/19 アクセス)[17] Google

ス プ レ ッ ド シ ー ト

https://gsuite.google.com/intl/ja/products/sheets/(2018/01/17 アクセス)[18] Slack https://slack.com/intl/ja-jp (2018/01/17 アクセス)[19] Google ドキュメント https://www.google.com/intl/ja jp/docs/about/ (2018/01/19 アクセス)[20] Cloud LaTeX https://cloudlatex.io/ja (2018/01/19 アクセス)[21] インスタグラム活用，地域の魅力，世界で共有． 謝谷楓．旬刊旅行新聞． 2017．
http://www.ryoko-net.co.jp/?p=16785 (2017/07/20 アクセス)

Group Report of 2017 SISP

- 37 -

Group Number 02-A