New Worker

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


#１．課題について

現代の社会人は敬語がうまく使えているのでしょうか。
私は、敬語が苦手です。
これから社会人になり、社会に出て行く上で、上手く簡単に敬語やビジネスマナーを身につけるにはどうしたらいいのか…そんな時にこのアプリの開発を考えました。
このアプリを使えば、社会で恥なんてかかせない！

#２．アプリの特徴について
①　単語、文を入れるだけで、敬語に変換してくれる。

②　新社会人に必要なビジネスマナーを教えてくれる。

③　新社会人に必要なニュースをいち早く教えてくれる。

④　ビジネスマナーだけでなく、テーブルマナーやメンタルヘルスについての記事を読むことができる。

⑤　必要な時に簡単に検索ができ、メモを残すことができる。手書きでメモをする必要がない。


#３．ターゲット・ペルソナ
主に、新卒の社会人をターゲットにし、その他にも、敬語を覚えたい学生や、ビジネスマナー、テーブルマナーを覚えたい人に使ってもらいたい。

#４．制作行程について
今回、このアプリを制作するにあたって、まず、プロトタイプを制作することにしました。

Good patch提供の「Prott」（プロット）というソフトを使用します。

「Prott」とはアプリを作るために必要なプログラミングのコードを書かずに、本物のようなアプリを手書きから再現できるツールソフトです。






では、その工程を今から紹介していきます。


まず、紙に自分の作りたいアプリの画面、ページを下書きし、それをパソコンに取り込みます。



![訂正.png](https://qiita-image-store.s3.amazonaws.com/0/304741/00546170-593e-7eb7-b31e-229e02bd25df.png)

このページは、お気に入り記事を閲覧できるページになります。

![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/e8b483e1-1418-5850-8598-21e86876201b.jpeg)



下書きの絵を覚えておきながら、全体を白で塗りつぶします。
この時に、縦と横のサイズが元の画像のサイズと同じになるよう、角を合わせながら、調整します。

![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/2b6c7bfe-01ad-c44e-3d05-1d5dc59d5ec9.jpeg)

次に、アプリの上部にある、メニューバーを作ります。
今回は、あらかじめメニューバーを先に作っておいた為、それをコピーし、先ほどのページに貼り付けます。

![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/feb25f68-6dcf-3161-eda7-4a32681a26d5.jpeg)

貼り付けるとこのようになります。
この時にも、下書き画像のサイズより大きくならないように気をつけます。
メニューバーはアプリの中でもタップをする頻度が多い部分です。自分が使いやすいようにシンプルに作ることをオススメします。

![6.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/17d8c370-b66d-a71e-e23e-11f0f8d03ad9.jpeg)

次に、下のメモ、お気に入り、マイページのボタン、スクリーンショットのボタンを作ります。
これもあらかじめ、作っておいた為、他のページからコピーし、貼り付けます。
それぞれのボタンを文字ではなく、アイコンにしたことによって、パッと見たときにわかりやすくしました。




![10.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/d451ce62-5d4d-e549-7a3b-501bfee89ad6.jpeg)

次に、線ツールで線を均等に引いていき、枠を作ります。
記事と記事を分ける部分です。
この時も、下書きの画像サイズからはみ出さないように気をつけることと、
![無題①.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/dc2a5ee6-9124-e8ba-6dd0-449feec21389.jpeg)
マウスの右クリックから整列を選択し、左右中央揃えや上下に整列など、できる限り均等に枠を作ることが重要です。

![11.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/4ceb91f2-16db-9cc4-8992-f0d07152c46b.jpeg)
均等に枠を作っていくとこんな感じになります。

![12.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/d16a5a2f-a939-bbce-234a-20c1017bbb5b.jpeg)
次にお気に入りページとしてわかりやすいように、お気に入りの記事一つ一つに星のマークを貼っていきます。
星のマークは、左のシェイプ欄から、ドラッグし、好きなところに貼り付けることができます。

![13.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/81ffb446-edef-72d1-6d6f-6b3571d35c3f.jpeg)
お気に入りの記事がどんな記事だったかわかるよう、画像欄の枠も一つ一つ作っていきます。

![14.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/a00a3722-b5d9-0b4c-f76d-026042db20bb.jpeg)

すべて、星と画像欄の枠を作るとこんな感じになります。

![15.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/6eb4b4ea-bcb7-0cc1-3f9c-9d8fc187fbd1.jpeg)

次にどんな記事をお気に入りにしたのか、見出しの部分を文字として入れていきます。
お気に入り欄を見たときに、どんな記事か思い出せるように工夫するのがポイントです。

![16正.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/dacde273-5158-8a9c-a722-678c89ec47d9.jpeg)
画像欄には、記事に関連する写真を入れておくとわかりやすくなります。

![⑯.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/3677ac0d-3658-1cc4-a701-566c6e25da7a.jpeg)


画像の読み込み方は、画像欄の、雲のマークから読み込むことができます。
雲のマークをクリックし、ファイルから読み込みたい画像を選びます。
そうすれば、画像欄に写真が取り込まれます。



![18.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/fdd9a28b-b6cb-b266-c133-1e3ebec3f436.jpeg)

画像をすべて読み込み、添付するとこのようになります。


![19.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/3507caae-ca4b-dd3e-d9b7-b4c3e4b6b743.jpeg)
次にこのページがお気に入り欄のページとわかるように、上部に「FAVORITE」という文字を入れます。



![20.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/ab70817d-1e8d-ff88-d95b-0e7990200c61.jpeg)

文字の入れ方は、左のシェイプ欄からTextをドラッグしながら、文字の置きたい部分に配置します。

![21.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/1e7eb158-e3dd-a8dc-2c56-79f73963c73a.jpeg)
配置するとこのようになり、右側にテキストのメニュー欄が出ます。
メニュー欄の、「Input here」と書いている部分に文字を打ち込み、フォントやサイズ、行間などを設定することができます。


![22.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/3df4a4f9-6c27-54f5-b8a4-06bb6bed885e.jpeg)

微調整を行いながら、完成したお気に入りページがこちらです。
説明では、上部が青色のメニューバーでしたが、茶色のメニューバーにし老若男女誰でも使えるような見た目にしました。


![67.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/20b2d36f-9bb7-46b1-f8d7-d9fb67bd88a2.jpeg)


実際に、トップメニューの真ん中のお気に入りボタンをタップして飛んでみると

![68.jpg](https://qiita-image-store.s3.amazonaws.com/0/304741/14d3b267-3792-fcc8-c08d-00dc4cecb4b6.jpeg)


このような画面になります。


これで、お気に入りページを作ることができました！




[link-3]:https://qiita.com/KyoTatsu/private/813d397c429cfdf3d9ae



#５．感　想

「prott」でアプリのプロトタイプを試作して

学校生活や、日常生活を送っている中で、「こんなアプリがあったらいいな」「こんなアプリを作りたいな」と思っても、プログラミングがわからない私たちのような高校生にはなかなか簡単にアプリを開発することはできません。
私は、この「prott」について授業の先生から詳しく教えてもらいました。
絵に描いた下書きから、まるで本物のようなアプリを製作できるこのソフトはプログラミングがわからない私たち高校生にとって、とても手軽に、簡単に作ることができます。
実際に今回ひとつのアプリ試作しましたが、他にも様々なアプリをこの「prott」使って試作してみたいなと思いました。

また、「prott」はプログラミングを使わない分、たくさんのアイディアや創造力が生まれ、それを簡単に実現することができます。


プログラミングがわからない高校生でも簡単にアプリを作ることができるこの「prott」をたくさんの人に私はおすすめしたいです。





今回作った作品はこちらを[クリック][link-5]
[link-5]:https://prottapp.com/p/f9b9ae


その他制作物はこちらを[クリック][link-4]
[link-4]: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/

|グループ|テーマ|作成者|
|---|---|---|---|
|１|新社会人|[いけたつ][link-3]|