15
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

初めての家計簿

Last updated at Posted at 2018-11-05

#目次
1.課題について
2.アプリの特徴について
3.ターゲット・ペルソナ
4.制作行程について
5.感想

#1.課題について
私たちはこれから卒業し、就職する人、進学する人と別れます:sob:中には一人暮らしを始めるという友人も私の周りにはいます:scream:一人暮らしになったら何が大変なのか、何に困るのかがきになりインタビューしたところ、お金の使い方、お金の管理が大変だという回答をたくさんもらいました:purse:でも、私たち学生は今まで親のすねをかじって生きてきました(笑)そのためお金の管理といっても家計簿なんかつけられないし、面倒くさそうで、つけても3日坊主で終わりそう。。。ということで、簡単に見やすく家計簿がつけられるようなアプリが必要だと考えました:muscle_tone2:

#2.アプリの特徴について
①Prottを使用してアプリを開発しました
 プログラミングができない私たちでも、楽しくアプリ開発ができます

②簡単入力するだけで基本的な計算をしてくれます
 お金の計算が正確なもので、より簡単に家計簿ができるよう
 自動計算してくれます

③カラフルな色を使いました
 若い人たちも目で楽しめるようにカラフルにしてポップな雰囲気を出しました

④カレンダーで月ごと全体のお金の使い方が見れます
 1日ごとのお金の使い方の比較が一目でわかります

⑤1日ごと細かい購入したものを書き込める
 いつ、どこで、どんなものを買ったのか写真つきで乗せることができ
 思い出にもなります
 
⑦自動に入力されたものが月ごと集計されていきます
 自動で集計してくれるため自分で計算や書き込む手間が省けます

⑧今月の使えるお金や、前月繰越の金額、今の貯金残高を書き込めます
 書き込んだ今月使える金額から自動で買った金額を引いて集計してくれます

#3.ターゲット・ペルソナ

一人暮らしをはじめるお金を計画的に使えない人

#4.制作行程について

グループ テーマ 作成者 作成者
7 簡単に家計簿を作り無駄遣いしない まぁや あずー

webの欄からカレンダーのデータを、Nexus5の欄からホームボタンなどのデータを貼り付け、シェイブのTextを貼り付け文字を打ち込んでいきました。アイコンは使いたいものを検索するとき英語で検索を掛け絞り込むことができます。
image.png
image.png

グループ化を解除し縦に並べ替え貼り付けていきました。画像は+で追加しトリミングをするなど編集が可能です。編集したものを貼り付けていきます。
image.png
image.png
image.png
image.png

シェイブの線のデータを使いノートのようにマスを作りました。
image.png

左のシェイブから四角の形で背景の色をカラーコードで設定していきます。カラーを変えるだけでなく、透明度や線の幅も変えることができます。表示されている色だけでなく#でカラーコードを入力すればバリエーションが広がります。
image.png

アクティブを表示して右側からリンクエリアを指定し線を引くだけで繋がったところに飛ぶことができます。そして、タップの反応の仕方を長押しやダブルタップなど様々な方法に変えることができ、飛んだときの画面の切り替わり方も変えることができます。
image.png

このアプリを実際に動かすには こちら[クリック][link-6]
[link-6]:https://prottapp.com/p/06b24b
その他制作物 こちら[クリック][link-5]
[link-5]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487

#5.感 想
今回アプリを作成するのに当たり使用したこのProttは最初お絵かき感覚でできました:pencil2::notes:小さなお子さんがいる家庭でも子供と一緒に楽しく遊び感覚でアプリを作成できると思いました:family_wwgb:実際私も楽しく実践させていただきました:notes:貼り付けるだけで構成などが出来上がっていって、とても便利だと感じました:heart_eyes:
ですが、表示されている字が英語な部分があったり、検索を英語でしなければならなかったり、不便な点もありました:capital_abcd:いちいちリンクを設定するのではなく、Prottのようにつなげるだけでいいというのはとても楽だと感じました:heart_eyes:

静岡県立島田商業高校 こちら[クリック][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/

15
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?