【シリーズ】新サービスリリースまでにやったことの記録 - [第5回] アプリケーションのUIに関して -

はじめに

先日は、第4回の記事を読んでいただきありがとうございました！
アプリケーションの配色に関してという話題だったのですが、いかがだったでしょうか？
色というのは、普段は何気なく見ている方も多いと思いますので、作る側の視点での話を珍しいと思って、楽しんでいただけた方がいらっしゃればよいのですが、、、

今回は、アプリケーションのUIに関して検討していたことを、書きたいと思います！
今回は具体的なテーマがあった方が分かりやすいと思いますので、サンプルとして「メモアプリを作成する」というテーマだったらという過程で、私がどんな感じで考えたのかをまとめていきます
一部以前までの回と内容が被る部分もありますが、ご容赦ください
よろしくお願いします！

やりたい事の選定

まずは、やりたい事を決めるというのが、何よりも優先だと思いますので、最初に行いました

具体的には、テーマ決めの後は、マインドマップというツールを用いて、アイデア出しをしながらChatGPTにもお手伝いをしてもらいながらという形となります

【流れ】
①テーマ決め、作りたいもの決め
※今回は、「メモアプリ作成」とします

②メモアプリ作成に関してのマインドマップ作成
■関連ワード例
・保存したいデータ（テキスト・画像・ボイス）
・共有機能（共有で利用できるアプリケーション（LINE、ツイッター など））
・クラウドを使ったデータの保存機能（クラウドの種類・保存するデータの種類 など）
・対応OS（モバイル・PCなど）
・マネタイズ
・実行環境（ブラウザ・アプリ）
・ターゲット など

③掘り下げたい関連ワードをChatGPTに質問してみる
■質問例
・メモアプリを作成したいのですが、どういった事を考えるべきでしょうか？ （意図：アイデアそのものに行き詰まり、マインドマップが作れないようであればこういった質問も良いと思います）
・音楽関連に特化したメモアプリを作りたいのですが、音楽のカテゴリはどういったものがありますか？（意図：カテゴリが整理できると、各カテゴリをそれぞれ調べてみることで、個別で必要な要素が見えたり、抽象的にとらえられる概念が整理できたりしますので、そういった整理のための質問例です）など

④いったん作業から離れる
②③で思い浮かばない場合は、一旦別の作業を挟んだり、類似のアプリを見たり、散歩をしたり ちょっと検討から離れる時間を作っても良い気がします（ありきたりですみません。）
④の後は、また②③に戻るという感じでした

以上

【補足】
全部考えきるというよりは、大枠方針を決めるぐらいのことでよい気がします
方針さえ決めて大体のやりたい事が決まると後続の検討をしている中で、新しいアイデアを思いついたりもしますので、悩みすぎにはご注意ください！！

※あくまで私の場合なので、もっと良い方法はあると思います※
※またここでマインドマップという記載をしておりますが、マインドマップには厳密なルールがあるようで、私の記載だとイメージマップというとらえ方の方がしっくりくる方がいるかもしれません。その辺りの言葉の使い方が気になる方がいらっしゃたら申し訳ございません。※

必要機能の検討

次に、やりたい事選定の中で作成したマインドマップを元にして、必要な機能の検討作業を行いました

マインドマップには、やりたい事や実現すべきものが書かれているはずなので、その中から今回のシステムに必要な機能の整理・検討を行うという流れになります

※人によっては、この作業の前にマインドマップの中身を整理する工程などを挟むような人もいると思いますので、その辺りは自分のやりやすい方式でよいと思います※

【流れ】
①必要機能の整理、取捨選択
■取捨選択例
・クラウド保存というアイデアがあり、取り入れたい場合：必要機能として、ピックアップ
・有料プランというアイデアがあるが、取り入れたくない場合：必要機能としてピックアップしない
※ただし、①の時点で不要としたアイデアも、今後アプリケーションを成長させていく際に実装した方が良いと思うアイデアは、将来的に実装するものとして残しておくようにしました

②①のピックアップの時点で、細かく掘り下げ出来ていない場合は、UI検討ができるレベルまで掘り下げていく
■掘り下げ方の例
・マネタイズで外部広告を掲載する機能を取り入れる→このアイデアのままだと具体的にどんな機能を備えるとそれが実現できるかわからないので、実現ができるかどうかの判断ができるレベルまで情報をかき集めて、具体的に想像ができるようにしていく など

以上

このようにして、実際にアプリケーションに取り入れたい機能を固めるというのがこの工程でやっていたことになります

【補足】
こういった検討をしていると、今後のシステムの成長戦略など色々と検討事項が見えてくるかもしれません
■例
・今後のソフトウェアのバージョンアップ戦略をどうすべきか
・初回リリースの機能、将来実装する機能の整理をするが、お客様にどのタイミングでどう見えるかしていくのか
・アプリケーションの認知度向上（マーケティング）をどうするか
・セキュリティをどう保証するか
・自身の会社を設立すべきか（toCのアプリケーションだと個人の方が作ったものより、○○株式会社の方が安心感があるか） など

UIの検討

ここまで出来てからUIの検討作業に着手となりますが、実際にやっていたこととしては以下のようになります

【流れ】
①必要機能から必要画面を検討する
■機能→画面の検討例
・メモする機能 → エディタ画面
・複数のメモの一覧機能 → メモ一覧画面

②画面に必要な機能を検討する
■メモ一覧画面の機能例
・検索で指定できる条件の検討（タイトル名、カテゴリ、メモの作成日 など）
・表示件数のカスタマイズ
・どのようにページ遷移をさせるのか
など

以上

画面のパーツ配置（ヘッダー・フッター・ボタン など）で悩むことがあると思いますが、私の場合は他の既存のサービスなどを拝見させて頂き、一般的にどこに何を配置すべきかなど参考にさせて頂きました

この流れを複数回繰り返して、自分が作りたいものを少しづつ具体的にしていきました

【補足】
UIの検討は様々なツールがあると思いますので、自分のあったものをご利用頂くとよいと思いますが、あまり細かくこだわってミリ単位で配置をしても作業時間が多くなるだけなので、ざっくりと作りこんでいけるものだとスピード向上が見込めるかもしれません！

おわりに

最後までお読み頂きありがとうございました！

今回は、前回に引き続き画面に関して検討したことをまとめてみました
長くなってしまってすみません。。。

色々と書きましたが、悩むことは無限にできると思いますので、ある程度のところで見切りをつけて、次工程を進めてみるなんてこともありだと思います！
次工程を進める中で、前日までは悩んでいた事が解決したなんて事は沢山ありましたので、良ければやってみてください！

また度々ChatGPT出てきますが、1人で悩んでいると解決しないことが隣の人に相談して解決したなんて経験をされた方もたくさんいらっしゃるかと思いますが、そういった相談相手になってもらっているという感じです。。。
冗談抜きで非常に助かってます。いつもありがとう。。。
話し相手になってくれて非常に助かりますので、同じ悩みを持つ方がいたらぜひ！

ではでは！