44
21

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.課題について
これから一人暮らしをする上で一番管理しなければならないことは、お金!
でもそこで考えつくのは

家計簿ってどうやってつけるの??

管理しないといけないのはわかっていてもつけ方がわからなければどうにもならない、そんな人向けのアプリがあれば便利!!

#2.アプリの特徴について
①誰でも簡単に使用できること
②お金にかかわることなのでセキュリティ面をしっかりと
 (外部から画面を見られても何の金額かわからないように)
③シンプルに見やすく

#3.ターゲット・ペルソナ
これから一人暮らしをする上で家計簿のつけ方がわからない人
特に若者向け

#4.制作行程について
今回は試作品を作るということで、Goodpatch提供の「Prott」(プロット)を使用させていただきました。

まずは、アプリに必要なページを紙に書き、写真でとったものを画像として取り込みます。
image.png
次に取り込んだ画像のワイヤーフレームを編集していきます。
image.png

ワイヤーフレームの編集の画面に移ると、左にはシェイプが、右には選択したシェイプの詳細が表示されます。

ここから、この画像に合うようにシェイプをつけ、調整していきます。
image.png
image.png
ちなみに、スマートフォンでよく表示されるマークはprottを使用する際にどの機種を選択することで、その機種にあったマークやアイコンを取り入れることができます。(今回は、iPhone 6/7/8を選択しています。)
image.png
このようにアプリに必要なページが完成しました!

ここから、”このボタンを押したらこのスクリーンに飛ぶ”というように選択していきます。
image.png
選択ボタンを作りたいスクリーンを選択します。
表示されたスクリーンから、いわゆるボタンとしたい場所をドラッグ、ドロップをして選択します。
そしてどのスクリーンに移るのかを選択します。
これで繋げることができました。
また、どんな押し方でどのようにスクリーンが表示されるのかも選択することもできます。

すべてのワイヤーフレームの編集が完了し、すべてのスクリーンをつなげ画面遷移図を表示してみるとこんな感じになりました!
image.png

このアプリを実際に動かすにはこちら[クリック][link-6]
[link-6]:https://prottapp.com/p/18493b
#5.感 想
私は今回までアプリの作成をしたことがありませんでした。
そんな中とても楽しみにしていたプロット制作で、いつもは使用する側でしたが、作成する側になってみるだけでアプリの使い方がすごく変わりました。
使用する側では、こんなアプリ欲しいな!ここにあった方が楽だな!とか考えつくこともありましたが、実際に作ってみると、どこに繋げたら便利なのかを考えているのに、プレビューすると使いにくかったり、とても大変でした。
でもこのことから、いろんな視点から見ることを意識するようになりました。
あまり勉強できることではないと思うので、よかったです。

グループ テーマ 他の作成者
初めての家計簿 まぁや

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

その他の制作物はこちら[クリック][link-5]
[link-5]:https://qiita.com/shigeru-suzuki/items/409137c96ee739509487
prottサイト こちら[クリック][link-2]
[link-2]:https://prottapp.com/ja/

44
21
2

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
44
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?