目次

１．課題について
２．アプリの特徴について
３．ターゲット・ペルソナ
４．制作行程について
５．感想

１．課題について

皆さんは様々な手続きで悩んだりした経験は無いでしょうか？
私たち高校生は、来年から社会人として一人暮らしを始めたりする人もいます。その中で様々な手続きがあると思います。
そんな手続きで困ったりしたときに手続きをサポートしてくれるアプリがあれば便利だなと思い、今回「一人暮らしの手続きをサポート」というアプリを作成しました。

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

①　市町村役場、年金事務所、税務署、家庭裁判所、その他の５つの届出先に分かれている。
②　一人暮らしだけでなく、婚姻届などをはじめとした様々な手続きが確認できる。
③　自分のよく使う手続きをお気に入りに登録できる。
④　検索機能がついているため、知りたい手続きがすぐ見つけられる。
⑤　My pageでやることリストや今月の予定などが管理できる。

３．ターゲット・ペルソナ

新卒の人や、一人暮らしを始める人、初めての手続きに困っている人などが対象です。
初めての手続きで困っている方、新婚さんや新しくお母さんになる方にも対応しています。
また、自己管理が苦手な方にも対応し、My pageで手続きの予定を管理することができます。

４．制作行程について

今回のアプリ作成にあたり「prott」というソフトを使用しました。
①紙に自分の作成したいアプリの画面を約１０枚ほど書いていきます。
②prottのアプリをケータイでダウンロードします。
③先ほど①で書いた紙をケータイで写真を撮り、prottで読み込みます。

実際にパソコンのprottにログインし、先ほどの下書きに沿って作成していきます。

このように写真が取り込まれ、この下書きに沿って作業していきます。

次に左枠にある図形やテキストなどから使いたいものをドラッグし、写真の上に持ってきます。そして編集したい範囲を選択します。

先程と同じ作業をしていきます。
右のパレットでは選択している部分を詳しく編集することができます。先程の四角は青色の設定でしたが、今回はオレンジにしています。また中の色だけでなく、外枠の色を編集することや、不透明度なども編集できます。この時点で透明度を100%にしてしまうと、下書きが見えなくなってしまうので最後に不透明度を編集しました。

次に文字を入れていきます。
これも左のパレットからテキストをドラッグし、写真の上に持っていきます。そして、入力していきます。枠の中をクリックしても文字を打ち込めますし、右のパレットの１番上でも打ち込むことができます。また、この作業では右パレっトで様々な編集ができます。サイズ・行間・種類・縦横揃え・太字・色などです。

今までの作業を繰り返し、不透明度を100%にして、このページは完成となります。
このように何枚かのページを作っていきます。

アイコンをいれていきます。
左パレットの１番上は３つに分かれており、１番右を選ぶと、よく使われているアイコンがたくさん一覧として出てきます。そこから使いたいものをドラッグします。マウスで大きさや位置などを調節していきます。

すべてのページが完成したら、リンク先を設定していきます。
編集画面に行く前にリンクしていきたい画面を選択し、マウスで範囲を選択していきます。
そして、そこからマウスを動かすだけでリンク先を選択できます。そのとき黒いパレットが出てきて、操作方法とページの動き方を設定できます。
これをすべてのページで行い完成です。

「prott」ではプレビュー機能があり、先程つなげたリンク先に正しくいけるかというのをスマホの画面上で確認することもできます。

実際のプレビューはこちらをクリック

５．感　想

授業の中でアプリ作成を行うと聞いたときは、プログラミングなどの知識もあまり無い私にできるのかと正直とても不安でした。ですが、今回のアプリ作成に使った「prott」は単純な作業が多いため、プログラミング初心者の私でも簡単に思い通りのアプリを作ることができました。ですので「prott」のことをもっと様々な人に知ってもらい、高校や大学などの学校を始め、企業などにも活用していただき暮らしにもっと便利で役立つアプリが増えていってほしいと思いました。
私のアプリは自分もまだ分かっていない手続きがたくさんある中で、それをまとめていく作業がありました。その作業にはとても苦労しましたが、情報を集めまとめて行くと知らなかったことがたくさん知ることができ、とても勉強になりました。
分からない人が手続きについて調べることで、どのように分からない人にも分かってもらえるかを考え、アプリを作成することができました。

今回授業を通じてアプリ作成ができとても良い経験になりました。
みなさんもぜひ「prott」を活用してみてください！！！

静岡県立島田商業高校　こちらクリック

prottサイト　こちらクリック