プログラミング学習をしていない生徒がprottを使ってプロトタイプを作成（令和元年版）

#目次
[１．課題について](#１課題について)
[２．アプリの特徴について](#２アプリの特徴について)
[３．ターゲット・ペルソナ](#３なぜprottにしたのか)
[４．制作行程について](#４課題制作についてグループごと掲載)
[５．感想](#５その他)

#１．課題について
就職・進学を控えた高校３年生の将来の課題をprottを使って作りました。
また、この生徒たちはプログラミングが出来ませんがアイデアは豊富にあります。
グループは２名１チームとして作成をしていきますが、prottのアプリは１人1つアカウントを付与している（全部で7チーム14アプリの作成）
授業は課題研究の時間で実施をし週３時間合計２１時間程度で考えている。
また、この授業は課題発見学習でもあり、答えはありませんが課題発見から解決までの過程にとても適した教材でした。

#２．アプリの特徴について
①アイデア
まず、卒業後の身近な問題を考えていくこととする。昨年度の卒業生のQiitaのページやprottのHPで紹介されている多摩美術大学のものを実施したものを例題に自分の周りや地域の課題についてまずはブレーンストーミングをして考えさせる。
※ブレーンストーミングをすることで課題の可視化をさせる。

|ブレーンストーミング|KJ法|
|---|---|
|![IMG_5738.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/a8701297-bf37-9412-2dfa-30c72586c3cc.jpeg)|![IMG_5741.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/bdf67f83-1542-38dd-bc26-caa6e08d0a3a.jpeg)


②実際にどんなアプリがいいのかを紙に書いてみる


|方眼用紙||
|---|---|
|![IMG_5781.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/79142f8c-deda-e3ac-2a41-751bc9bcc8fa.jpeg)|![IMG_5782.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/8fcc3630-7f29-01d0-1e5f-baad973e0d46.jpeg)



※書き方に関しては特に設定を持たせないこととした。

③jpegで写真に撮ってprottのサイトでアプリにする。

|パソコン||
|---|---|
|![IMG_5791.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/905d9234-a8c9-cf64-8b12-40dbd703515e.jpeg)|![IMG_5792.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/c755b7b8-c039-3337-145b-7d7653632964.jpeg)|
|![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/6d3036cf-a432-5e81-cf70-056324d03cef.jpeg)|![IMG_5790.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/f361558e-93b6-0aec-43e8-591f57ea52f3.jpeg)|

④　スマホで見るとこのようになる。

|スマートフォン||
|---|---|
|<img width="375" alt="IMG_6580.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/cea5a5ba-e983-7f14-85f7-a09b2bd41206.jpeg">|<img width="375" alt="IMG_6581.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252831/597f5cf6-4b8a-3d80-cab7-d7d62f61e933.jpeg">|

#３．なぜprottにしたのか？
今回この授業を受講している生徒はマルチメディアという授業の選択者である。１学期はAdobe Illustrator Photoshop を学習し主にレイヤーの使い方や配色についてのことなどを学習しA2判のオープンスクールや学校ポスター制作などをした。
これからプログラミング学習（ビジュアルプログラミング的な要素）が必要になってくると思われる。また、アプリについても今後様々なところで必要となったときに少しでも学習をして社会に出ていくべきであり学習ツールとしてprottを使うことになりました。導入としてはとても使いやすいツールでした。


#４．課題制作について（グループごと掲載）

|グループ|テーマ|作成者|作成者|
|---|---|---|---|
|１|一人暮らしの手続きをサポート|[ありんこ][link-3]|[そごー][link-4]|
|２|体調管理アプリ|[おゆや][link-5]|[ほーりー][link-6]|
|３|島田でホッと一息|[あいこっこ][link-7]|[イチロー][link-8]|
|４|簡単そうじ|[すーこ][link-9]|[きのみん][link-10]|
|５|自立サポート|[なご][link-11]|[もえひさ][link-12]|
|６|freedom|[炒飯][link-13]|[すぎもと][link-14]|
|||[こころ][link-15]|
[link-3]:https://qiita.com/arinkosenei0126/private/e64cf0d737658477bebd
[link-4]:https://qiita.com/sogousaku0102/private/f2a65d3d4aefcace67d7
[link-5]:https://qiita.com/yuyanayuanteng/private/09b3f45ce00d306af421
[link-6]:https://qiita.com/hooree/private/53ccef919b37ddeefabf
[link-7]:https://qiita.com/aaaiko/private/5f63484b69ebd7132030
[link-8]:https://qiita.com/6117maiaka/private/bc2bb1a7121a3d47133f
[link-9]:https://qiita.com/pineapple124fuko/private/d9b95b210b3c80f64f71
[link-10]:https://qiita.com/y_m_uoxou_ka07/private/4ee684775635ef6916f7
[link-11]:https://qiita.com/makinoharanonago/private/f8e82bdd432f690281bb
[link-12]:https://qiita.com/meghanmmmmmmm/private/f13242d41d628e65d1fd
[link-13]:https://qiita.com/harukanakao4/private/257baa80754c3cbb9a19
[link-14]:https://qiita.com/miri1112happy/private/9d75ebbd5129674b4312
[link-15]:https://qiita.com/kokorozengtian/private/e86714a6573c4fc518fc


※作成者をクリックしてください。詳細のページに飛びます。

昨年度の制作物は こちらを[クリック][link-17]
[link-17]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487


#５．その他
静岡県立島田商業高校　こちらを[クリック][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/