【アプリ開発4日目】結婚式準備アプリのホーム画面を作ってみた

くまくん

Todoリストの次は何を作るの？

mia

今回はアプリを開いたときに表示されるホーム画面を作ってみたよ！

この記事では、「結婚式準備アプリ」のホーム画面について紹介していきます。

コンセプト：今やるべきことがすぐにわかる

結婚式準備アプリのホーム画面を作る上で意識したことは

「アプリを開いた瞬間に、今やるべきことがすぐにわかる」です。

前回、Todoリストでタスクを一覧で管理できるようにしましが
一覧だと「今日まず何をやればいいか」が分かりにくいと感じました。

なので、アプリを開いたときにはまず、今日、今週、今月中にやるべきことが
見える化できていると準備に取り組みやすいと思ったので
「今やるべきことがすぐにわかる」ことを意識して内容や配置を考えました。

それぞれの項目について説明していきます。

右上の歯車からは結婚式の日程などが登録できるようにしました。

一番上には「結婚式まで◯◯日」を表示しました。

結婚式は、まだまだ先だと思っていても、実際に日数で表示されると
「意外と時間がない！」と感じられます。

残日数がわかると準備のモチベーション向上にもつながるかなと思い
この機能をホーム画面の一番上に配置しました。

次に表示しているのは期限が近いTodoです。

Todo一覧を開かなくても、「今はまず何をやるべきなのか」がすぐ分かるように表示しました。
項目は期限順に表示されるように工夫したので、項目の優先順位もここで確認ができます。

項目をクリックするとその項目の詳細にジャンプするようにしました。

画面のスクロール機能がまだ織り込みできていないので
↑ホーム画面全体のスクショでは見切れてしまっていますが
タスクの進捗を下記のように表示できるようにしました。

分母は登録したタスクの数で、決定済みにチェックをしたものが
完了済みとして計算されます。

下部タブにはホーム・Todo・スケジュール・予算の4つの項目を設定し
タップするとそれぞれの画面へ切り替えができます。

現状、実装できているのはホームとTodoのみですが
スケジュールや予算の項目も作っていって、結婚式準備に関することが
このアプリで完結できるようにしていきたいと思っています！

現在は「期限が近いTodo」を表示していますが

将来的には

・今日やること
・今週やること
・最近追加したTodo
・お気に入り画像

なども表示できたらいいなと考えています。

どんな項目をホーム画面に追加していくかは、実際に私がこのアプリを使って
準備を進めていきながら考えていきたいと思います！

3日目の宿題としては、Todoリストに追加した項目やその詳細・写真が
アプリを再起動すると消えてしまうという課題がありました。

そこで今回、入力した内容をアプリ終了後も保持できるように修正しました。

これにより、一度登録したTodoや写真を毎回入力し直す必要がなくなり
実際のアプリとして使いやすくなりました。

項目	内容
開発日	4日目
作業時間	約2時間
実装した機能	・ホーム画面の作成・結婚式情報の登録画面・結婚式までの日数をカウントダウン表示・期限が近いTodoリストの表示・タスクの進捗表示・下部タブの設定・3日目の宿題：データの保持
苦労したこと	ホーム画面で表示する項目の整理、配置
次回やること	・画面をスクロールして下の部分まで見切れることなく表示させる・スケジュール画面の作成