写真出典:Image credit: Norio.NAKAYAMA on Wunderstock (license)
目次
デザイン
私が受けたオンライン講義で強調されていたのは、
”実際にプログラムを書き始める前に、デザインとマネタイズについて決めておく事”
でした。
なので、まずはデザインを練る事にしました。
① 実際に存在しているアプリを参考に全体像のイメージを決める。
妻が使っている育児系アプリを見せてもらい、かわいいデザインのイメージをつかみました。
② 色を決める
colorhunt.co を参照しました。
こちらはデザイナーが組み合わせを考えた配色を無料で提供してくれています。
今回は愛情の赤と信頼の青も入った優しい感じの以下の組み合わせにしました。

因みにHexは上から以下の通りです。
F0E4D7
F5C0C0
FF7171
9FD8DF
③ ワイヤーフレームを描く
まずはどんなページがあって、どういうアクションがあるかという事を簡略的に書きました。
🔲がページで◇がアクションという風に書いていくそうです。
ユーザー登録をするようにするか迷いましたが、特に登録する必要性もなさそうですし、ログイン画面がない方が使いやすいと思うので止めました。
Appleも余計なユーザー登録やログイン画面を作らないように推奨しています。

インターネットで無料で落ちている、iPhoneのフレームを見つけ、印刷して鉛筆でユーザーインターフェースのイメージ図を作ります。
私が作ったものは以下の通りです。
一枚目はホームページ。小鳥が優しい言葉をかけてくれる予定です。
「いつも頑張っているね」
「木陰からいつも見てるよ」
「寒くなってきたから風邪ひかないでね」とか♪
2枚目はメインの計算の画面。目標量に対する不足量を自動で教えてくれます。
3枚目は食品の一覧。野菜の旬を教えてくれたり、自分で追加で食品を足すこともできます。
4枚目は赤ちゃんの情報を入れるページ。誕生日を入れることで、現在の月数を計算して、それに合った目標栄養量を使用できるようにします。
加えて、本日のごはんの写真や、体重、赤ちゃんへのメッセージを残せるようにします。
5枚目はツール画面。


④ POPというアプリを利用して、紙に書いたワイヤーフレームを写真でとって、プロトタイプを作る。
ボタンの押しやすさを含めてユーザーインターフェースの出来栄えをチェックします。
実際に妻に操作してもらいました!
実際のアプリを想像できわくわくしました。
マネタイズの方法を考える
マネタイズはアプリのデザインにもかなり影響するので最初に考えておく必要があるようです。
収入があるとモチベーションにつながりますし、子供の教育費に当てるためにもマネタイズにも挑戦する事にしました。
今回は、
①広告バー ②広告バーが消えて分量の計算の機能が強化される有料のプレミアムバージョン
③有料のアルバムと(あんまり難しくなければ。。)
を作る方針にしました。
まとめ
せっかく勉強したプログラムの知識を使うところまでなかなかたどり着けずにもどかしいですが、
大枠は結構できた気がします!
POPを使ってプロトタイプが出来た時は達成感がありましたし、家の骨格を作る作業のように、大事な作業をしたと思っています。
まだまだ続く。
フォローしてね♪
離乳食の分量を計算してくれるiOSアプリを、プログラミング素人が作るという挑戦中!
オンラインのプログラミングコースの受講を終え、2021年11月からいよいよ実際に制作に取り掛かりました!
つまずきながらも進んでいく経過を残していきたいと思います♪
11月前半の進捗をまとめます。