02．はじめてスマホアプリを作ってみた（要件フェーズ）【 Android / Xamarin.Forms 】

記事の概要

こちらの一覧の２つ目、「要件フェーズ」の記事となります。

はじめてスマホアプリを作ってみた 記事一覧

1. 検討フェーズ（どんなアプリを作るか）
2. 要件フェーズ（どんな要件のアプリにするか）
3. 調査フェーズ（どんな技術を使うか）
4. 設計フェーズ（どうやって作るか）
5. 開発フェーズ（実際に作りはじめる）
6. 公開フェーズ（アプリを公開する）
7. 保守フェーズ（公開から現在まで）

こちらでインストールできます
※アンドロイド版のみです。iPhoneユーザの方すみません。

全７回に分割して書いていますが長いので、ダイジェストで読みたい方はこちらの記事をご覧ください。

はじめてのスマホアプリ開発 要件フェーズ

アプリの仕様を考え始める

前回では、「どんなアプリを作るか」を決めました。
では「どんな」をもう少し具体的にしてみようと思います。

この時点では、技術的に可能か否かはわからないことだらけです。
初心者がその辺を最初にさらおうとすると「良くないな」と予感がします。

まずは、実現できるかどうかは後から調べるとして、箇条書きで仕様を書き出してみることにしました。

紙とペン、メモアプリなんでもいいと思います。

私が最初にまとめたのはこんな感じです。

仕様一覧（最初のバージョン）

1. ページ構成
   • TOPページ
   • 睡眠時間エントリページ
   • 睡眠データ一覧
   • アプリについて
2. TOPページでできること
   • 選択リスト（直近7日間 or 30日間 or 1年間）
   • 選択リストで選択した期間の平均睡眠時間
3. エントリーページでできること
   • 記録対象日を選択する
   • 就寝・起床時間を選択する
   • 保存または削除する
4. 一覧ページでできること
   • 月単位で睡眠記録の一覧を表示する
   • 表示対象の月を選択する
   • 編集または削除したい睡眠記録を選択する
5. その他
   • 記録データはローカルDBに保存する
   • 多言語対応、まずは日本語と英語

見返してみると非常にざっくりしています。
このあと作業を進めていく過程で足りないことに気づいていきます。
その都度、補完していくので、まずは最低限を書いて、どんどん進んでいきます。

アプリの内容をもう一歩詰める【guiflow】

ざっと書き出してみたものの、レイアウト、デザイン、ボタン等の機能などはまだイメージできていません。
この箇条書きをもう一歩詰める良い方法は無いかと探して見つけたのがこちらです。
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った

テキスト入力だけで、画面構成、画面遷移を表現してくれます。

Windows版は、下記から「guiflow-win32.zip」をダウンロード、解凍し、フォルダ内の「guiflow.exe」を実行すれば使用できました。
hrokidaichi / guiflow - github

こちらを使って、どんな画面が必要か、画面には何があるか、ボタンを押すとどうなるかを書いていきます。
最初に「guiflow」に書いた内容はこんな感じです。

[MainPage]
+ 平均睡眠時間
+ 直近 n 日間を選ぶセレクタ
+ 記録を見る ボタン
+ 記録する ボタン
--
記録を見る ボタン
==> 一覧ページ
記録する ボタン
==> 記録ページ

[記録ページ]
+ 戻る ボタン
+ 記録対象の日付
+ 就寝時間
+ 起床時間
+ 削除 ボタン
+ キャンセル ボタン
+ 保存 ボタン
--
戻る ボタン
==> MainPage
保存・削除・キャンセル ボタン
==> MainPage

[一覧ページ]
+ 戻る ボタン
+ 記録する ボタン
+ 表示対象の年月を選ぶセレクタ
+ 睡眠記録の一覧
--
戻る ボタン
==> MainPage
睡眠記録の一覧
==> 記録ページ
記録する ボタン
==> 記録ページ

そうすると、このような遷移図が自動で出力されます。

便利なアプリはたくさんあります。
ただし、機能が多く、私のような性格の人間だと細かいところが気になってしまい、まだ試行錯誤をしている段階だとなかなか作業が捗りません。

「guiflow」は、テキストを記述する以外の機能がありません。
一方で、あーでもないこーでもないとやっている作業を、自動で図にしてくれます。
かなり気に入って使用させていただいています。

いろいろ書いている間に「戻るボタン」が必要なことや、ページやオブジェクトの名前を考え始めたりします。

あとから思いついたことは逐次、最初の仕様一覧に追加していきます。

こんな感じでまずは、大まかではありますが「どんなアプリを作るか」の大枠が決まりました。

次は、自分のモチベーションを上げるためにも、どんな見た目のものを作るかを考えてみました。
ビジュアルが決まれば、「よし、こいつを作るんだ」と気持ちも上がると思ったのです。

GUIをデザインしてみる【Adobe XD】

ツールを調べてよく出てくるのは「Figma」「Adobe XD」「Sketch」などでした。
わたしの場合は、個人的にAdobe製品を使っていたことが過去にあったので、「Adobe XD」でデザインを作ってみることにしました。

まずは、「使う色」を決めました。
「カラースキーム」で検索すると、便利なツールがいろいろ出てきます。
ちなみに、わたしが使用したモノは以下となります。

「Paletton」は、特定の色を探すのに使いました。
「Colors」は、色の組み合わせを考えるのに便利な機能が揃っています。

「使う色」を考えている段階で、アプリ名を決めました。
アプリ名は最初から考えようと思っていたのですが、なかなか思いつかなかったのですよね。

カラースキームツールをあれこれいじりながら「睡眠を表す色は何だろう？」「睡眠とは１日の約三分の一の時間を占める」などを連想していました。

そして、私なりの睡眠を表す色を決め、「一生の約三分の一を過ごす時間を良いものに」とコンセプトを決め、アプリ名を「OneThird」としました。
色は、ベースとなる睡眠を表す濃紺、同系で補助用に水色、強調用に黄色、文字などは白の４色です。

あとはフリーフォントを検索して使用するフォントも決めました。
ちなみに使用したフォントはこちらです。

和田研細丸ゴシック

わたしは正しいデザインの学習などはしていないので、手順が正しいかはわかりません。
ただ機能が多いツールを使用する場合、わたしの性格だと「選択肢の多さに振り回される」ことが分かっています。
そのため、方針を決めるというよりは、暴走しないように「選択肢を予め狭めておく」ことを心がけています。

個人的な指針として、

• 自由に思考したいときは、できるだけ機能の少ない道具を使う
• 複雑な道具を使うときは、やることをできるだけ絞り込んでおく

ようにしています。

実際にAdobe XDで作ったのはこんな感じです。

何をするかまだ決まっていないですが、設定ページを作っておくことを決めたりもしました。
また、睡眠の評価や簡単なメモを残せたらいいなと思いつきました。

この後も作業が進む過程でいろいろ追加、変更、削除したいことが出てきます。
そこで、試行錯誤は「guiflow」、デザインを考える際は「Adobe XD」をたびたび開くことになります。

わたしのような初心者が、最初から完成系を考えるのは難しいです。
この後、実際にコードを書くのはVisual Studioで行いますが、そこで画面遷移やデザインをゴチャゴチャ考えると、あらぬ不具合を生む可能性があります。

うまく伝わるかわかりませんが、やろうとしている作業と、それに使う道具を紐づけておくことが、わたしの場合は重要だったりするという話しです。

まとめ

駆け足ではありますが、「どんな要件のアプリにするか」をこんな具合に考えたよ、をまとめてみました。

ここで考えた要件を、設計に落とし込む前に、実際にスマホアプリを作るのに必要な技術がさっぱりわかっていません。
そこで、設計に着手する前に、「どんな技術を使うか」をいろいろと調べたので、その過程を次回まとめてみたいと思います。

これらの一連の過程で読んでいた本などの情報を下記記事にまとめています。

はじめてスマホアプリを作ってみた 記事一覧

1. 検討フェーズ（どんなアプリを作るか）
2. 要件フェーズ（どんな要件のアプリにするか）
3. 調査フェーズ（どんな技術を使うか）
4. 設計フェーズ（どうやって作るか）
5. 開発フェーズ（実際に作りはじめる）
6. 公開フェーズ（アプリを公開する）
7. 保守フェーズ（公開から現在まで）