観光アプリ

#目次
[１．課題について](#1.課題について)
[２．アプリの特徴について](#2.アプリの特徴について)
[３．ターゲット・ペルソナ](#3.ターゲット・ペルソナ)
[４．制作行程について](#4.製作工程について)
[５．感想](#5感想)



#１．課題について

計画なんて立てれないよ…

ツアーじゃなくて自分の行きたいところがいい
だけど、計画を立てるのがめんどくさい！
日本ならまだしも海外はわからないよ

旅行会社がオススメや季節ごとの旅行プランを提示してくれていますが
一人旅や家族だけで旅行したいときに考えるのは大変


#２．アプリの特徴について

①日本だけでなく海外の計画も立ててくれる！

②１～８の内容を自由に選択し予算を入力すれば自分だけの計画を立てれる！

③写真つきで場所や交通手段、時間まで教えてくれる！

④各季節にあったイベントなどを世界・地域ごとに紹介してくれる!


#３．ターゲット・ペルソナ
頻繁に旅行する人はもちろん、はじめて国内や海外を旅行する人をターゲットにしているが
男性などで細かい計画を立てるのがめんどくさいという人
また、計画はせず行き当たりばったりで旅をしたいという人でも
有名な食べ物や観光スポット・どこに何があるか知りたいという人にも利用してほしい
#４．制作行程について
今回、このアプリを制作するにあたりまずはアプリの試作品であるプロトタイプを制作することにしました。

そのためにGoodpatch提供の「Prott」（プロット）というソフトを使用しました。

このProttはワイヤー・UIデザインのプロトタイピングツールソフトです。
最大の特徴は下記で紹介する「手書きから作る」です。手書きで作ったアプリの案を写真に撮りそのままプロトタイプとしてデザインを作ることができます！

その制作工程を今から紹介します

まずはソフトの登録をします。
写真を撮りスクリーンにする作業はわかりやすいと思うのでその他の作業を紹介していきます。

まずは「クリックした先のリンクの繋げ方」です。
左クリックを長押ししながら適当な四角を作ります。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/304737/6447bfe0-d96c-1c44-eb4a-2f0bfb22f2b0.png)

すべてのスクリーンがうつる画面に移動して作った四角についている「＋」のボタンを長押しし（①）つなげたいページ（②）のとことへもっていきます。
![１.png](https://qiita-image-store.s3.amazonaws.com/0/304737/845a5b3f-0b71-0628-15dd-aaf095aae7b1.png)
次は「写真の貼り付け方です」ワイヤーフレームの編集をクリックします。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/304737/84422da7-1e07-8cb1-2db4-8cab12f1a108.png)
〈画像〉を選択し、〈PCから画像を追加〉をクリックし
![4.png](https://qiita-image-store.s3.amazonaws.com/0/304737/898dbbd5-3992-88bf-2b03-3be1ad55a286.png)
自分が貼りたい写真を選択します。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/304737/6f3f2f95-c449-4cb1-5842-da9836c4db2f.png)
そしたら、画像が入ります。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/304737/9d3356ce-6640-3a22-9aa3-c6775eacffac.png)
左クリックを長押ししながらドロップします。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/304737/2fbfc1f6-3085-0974-2148-f08ef56db576.png)
何度か作業を繰り返したらすべての写真が貼り終わります。
![8.png](https://qiita-image-store.s3.amazonaws.com/0/304737/2b9d901b-3751-dcbc-6f25-e1b91ebe80c3.png)
次は「文字入れ」の作業です。
〈シェイプ〉の〈Text〉を左クリックの長押しで文字を挿入したいところにドロップします。
![9.png](https://qiita-image-store.s3.amazonaws.com/0/304737/03f854f9-5241-88d1-148e-cea4277537cf.png)
文字を打ち込みサイズやフォントを変更します。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/304737/3743ed48-12d4-535a-80ec-f7501287d473.png)
次は「背景の入れ方です」
背景の変え方がわからなかったため〈シェイプ〉の中にある〈四角形〉を画面のサイズにして背景にしました。
〈四角形〉を左クリックの長押しで（①）移動しドロップします（②）。
![11.png](https://qiita-image-store.s3.amazonaws.com/0/304737/9b01fb74-5155-049f-7cab-f03ce28ef8c0.png)
画面のサイズに引き伸ばします。
![12.png](https://qiita-image-store.s3.amazonaws.com/0/304737/5edca6f8-b7d2-0e17-643e-9ee1106b62f8.png)
背景の四角を右クリックし〈背景〉の〈最背面〉をクリックします。
![13.png](https://qiita-image-store.s3.amazonaws.com/0/304737/55820f66-ce1a-4a4a-f118-fc8d070e2a51.png)
そうすれば背景が完成します。
![14.png](https://qiita-image-store.s3.amazonaws.com/0/304737/3544045c-812e-092e-4965-6f556932e603.png)
次は「色の変更です」
各図形や文字の色の変更したいときは色図鑑を参考にし
![15.png](https://qiita-image-store.s3.amazonaws.com/0/304737/cd7ab143-370d-f007-4eb4-ebcb7cfe5d76.png)
♯以降をコピーし
![16.png](https://qiita-image-store.s3.amazonaws.com/0/304737/bf6205a8-79b6-78b7-3491-1765b4349f63.png)
ペーストします。
![20.png](https://qiita-image-store.s3.amazonaws.com/0/304737/527aadeb-3713-94c5-8495-6c612902a778.png)
その色を何度も使うようであれば〈＋〉ボタンを押し追加することができます。
![21.png](https://qiita-image-store.s3.amazonaws.com/0/304737/73973a45-32e0-6a0a-118f-805611120f96.png)
次に「アイコンの入れ方」です。
文字や写真だけでは物足りないときはアイコンを入れました。
検索欄で自分の挿入したいアイコンを検索し
![17.png](https://qiita-image-store.s3.amazonaws.com/0/304737/58066674-0743-31dd-ff14-484efc94b2c8.png)
色も自由に変更できます。
![18.png](https://qiita-image-store.s3.amazonaws.com/0/304737/0a2046a8-b994-1ba9-cd84-cde436c9a032.png)
PNGなどで保存し画像を取り込めば
![19.png](https://qiita-image-store.s3.amazonaws.com/0/304737/fa1fe747-238c-acca-6427-63f366e65aea.png)
ページがわかりやすくなります。
![22.png](https://qiita-image-store.s3.amazonaws.com/0/304737/61aa0e7b-d481-5e4b-fcd9-95e8374de331.png)


実際に作品を動かすには[こちら][link-5]

[link-5]:https://prottapp.com/p/babe31


#５．感　想

Goodpatch提供の「Prott」（プロット）というソフトを使用して
これほど簡単にアプリ製作が自分にもできるのだと驚きました。
今までプログラミングをしたことがなかったためコードなどは耳にしても一切わからず
最初にアプリを作ってもらうと言われたとき一から始まるのは無謀ではないかと思いましたが
写真を撮り基本操作だけで作れる「Prott」のおかげで自分が想像するアプリが完成したと思います。

将来仕事に就いたときどんな仕事を任せられるかわかりません。
そんな時のために高校生である今、Goodpatchさんに提供していただいた「Prott」で
少しでもアプリ製作ということに触れさせていただいて本当によかったと思いました。



|グループ|テーマ|作成者|
|---|---|---|---|
|4|観光アプリ|[しもむら][link-4]|

その他制作物はこちらを[クリック][link-6]

[link-6]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487


[link-4]:https://qiita.com/under-village/private/a21e16bceeb1d13a57a3


静岡県立島田商業高校　こちら[クリック][link-1]
[link-1]:http://www.edu.pref.shizuoka.jp/shimada-ch/home.nsf/IndexFormView?OpenView
prottサイト　こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/