iOSアプリ開発体験記(2) - iOSアプリ設計の３段階
前回記事「快適な一人暮らしに忍び寄るたった一つの恐怖」の動機により、スマートフォン向けアプリを開発する運びとなりました。
自分の使用端末であるiPhone用のアプリから手を付けることにしました。
とはいえ、アプリ開発どころかXcodeすら触ったことなかったので、何から手を付けてよいのやらという感じでした。
そこで、WEBシステムの開発過程をそのまま踏襲することにしました。
というわけで、コーディングの前準備として、STEP１〜STEP３に取り組みました。
【STEP1】ほしいサービスの概略を決める
まず、「やりたいこと」から「どんなサービスがほしいか？」を導き出します。
やりたいことは以下の通り。
「アラーム止めたら生存通知を送信する」
で、それを踏まえたSTEP1の回答は以下の通り。
「アラーム停止時に見守り主へ生存通知を送信する目覚ましアプリ」
これが決まれば、必要な機能が決まりますので、STEP２へ進みます。
【STEP2】必要な機能をリストアップする
STEP１のサービスを実現するために必要な機能をリストアップします。
とはいえ、機能は開発過程でも色々出てきますので、ここでは主要機能だけで十分です。
「これがないと無意味！」と思う機能を列挙していきましょう。
ただし、ユーザーの操作を思い浮かべながら、なるべく具体的に書きましょう。
本アプリについては以下の通り。
- ユーザーがアラームを鳴らしたい時刻を設定できる
- ユーザーが指定した時刻にアラームが鳴る
- ユーザーがアラームを停止したら、見守り主に通知メールを送信する
以上が「これがないと無意味！」な機能です。
で、その中に出たキーワード「見守り主」について、登録や情報管理する機能が必要になります。
ただし、これらはすでにWEBサービスがありますので、アプリ側からWEBサービスを利用できればOKです。
そこで、以下の機能が追加されます。
- ユーザーはアプリからikitellサービスのアカウントを登録・管理できる
- ユーザーはアプリから見守り主（見守ってほしい相手）を登録・管理できる
つまり、これら５つの機能を実装できれば、当初の要件を満たすことができます。
ここまでできたら、今度はこれらの機能をUIに落とし込んでいきます。
【STEP３】UIの簡易設計をしてみる
必要な機能の洗い出しが終わったところで、次はその機能を実装するために必要なUI、つまり、「その機能をユーザーにどう使わせるか？」という問いに対する答えを、UIという形に具現化するものです。
といっても、イラレなどを使ってゴリゴリのデザインをする必要はなく、手書きのワイヤーフレームで部品を並べたり、アプリ全体のイメージカラーを決めたりする程度でOKです。
もし時間的に余裕があれば、「Figma」の各種テンプレートを使用して、動きもつけたデザインをすることも可能です。
ただし、なにぶん初めてのアプリ開発なので、以下の２点に留意する必要があります。
留意点① - 既存アプリの研究
実際にSwiftUIでどんなUIが実装できるかわからないので、すでにリリースされているアプリの中から、自分が作りたいものと似ている機能のものを片っ端からダウンロードして（もちろん無料版でOK）、可能な限り触ってみてください。
そうすることで、どんなUIが作れるかをある程度把握することができます。
留意点② - デザインにあまりこだわらない
これは私の経験ですが、この時点であまりデザインにこだわると、後のスケジュールがその分遅れてしまいますし、実際にコーディングが始まると、更にデザインが気に入らなくなり、気にいるまでに徹底的にいじり倒してしまうことになるので、この段階では必要最低限のUIでかまいません。
また、留意点①に関係することですが、試してみたアプリで「このUI使いたい！」というのが出てくると思いますが、これもあまりこだわらないほうがよいです。その実装のために沼化してしまう恐れがあるので。
下の画像はfigmaを使ったデザイン案ですが、STEP３の段階でここまで作っても、実際にリリースしたアプリは全くの別物になってしまいました（^^;）
さて、ここまでできたらいよいよ開発作業に入ります。
といっても、この段階でもSwiftUIやXcodeは未体験ですが、ここは効率重視ということで、コーディングと学習を並行して行います！（これはもう私の性格ですね、めんどくさがりなので、、、）
次回記事「iOSアプリ開発の心得(3) - コーディングの前準備」
Discussion