【個人開発】少ない工数で0からアプリのデザインをした話🚀

はじめに

はじめまして！UI/UXデザイナーの大山です😀
先日、嘘がつけない筋トレ共有アプリ『ジムトモ』をリリースしました🎉
今回は個人開発ならではの少ない工数でどうデザインを作成したのかを簡単なアプリの紹介を交えてお話しできたらなと思います！

ジムトモについて

ジムトモは週に何回ジムに通うかの目標を設定し、友達と進捗を共有するWebアプリです💪
特徴としてはLINE上で完結し、位置情報を元にジムにチェックインすることができます。
これにより記録に嘘がつけずサボれないようになっております！

デザインの過程・方針

本アプリは友人がサービスのコンセプトの考案と開発、自分がデザインを担当しました。
現職はデザインに工数をかけ、エンジニアが忠実に再現をする環境でした。
しかし今回は人数が2人で、友人がシード期スタートアップ出身です。
MVPの思考がかなり強くリリースに最低限必要だと思っている工数やクオリティが私とは全く異なっていました。
工数と期限を最小限にして開発するため「最低限の情報を整理し形にする」「どこに注力し何を切り捨てるか」という方針で現職との違いに悩みながらデザインを進めていきました。

1.コンセプト理解

まずデザインを進めるにあたって情報が不足していたため、友人にアイデアのヒアリングを行いコンセプトを理解し・情報を整理しました。

情報をまとめたnotion

2.ワイヤーフレーム作成

コンセプトからどういった機能・遷移が必要かは洗い出せたので、調査を元に簡易的なワイヤーフレームを作成しました。
調査は参考になりそうなフィットネス系のサービスを自分で調べてみたり、MobbinやUI PocketのUIデザインギャラリーサイトにて行いました。

ワイヤーフレーム

3.デザイン作成

本アプリはLINE上で完結できるので体験はなるべくLINEに合わせるようにしました！
本業ではデザインシステムやデザインコンセプトなどを用意し方針を決めてからデザインを作成していくのですが、少ない工数でこれらを用意してらから作成してくことは出来ません。
対応としてはMaterial 3 Design Kitをベースに作成し、コンポーネントをLINEに寄せたものに調整、必要なものは追加するという方針で進めました。

とはいえユーザーの体験として重要なオンボーディングの部分は友人と何度も擦り合わせを行い作成しました。

オンボーディング

4.ロゴ作成

コンセプトとサービス名からイメージできるキーワードと方向性を決定し、ラフ案を作成しました。その後にPhotoshopを使ってデザインを仕上げました。
1案目で友人ともに「これだ！」というものができ、作り直しがなく少ない工数で作成することができました。

ロゴ

5.クリエイティブ作成

LPやOGPなどのクリエイティブ系の制作物はpinterestやLP advanceを参考に苦労しながら作成しました（日頃からアウトプットを行わないとですね…）

OGP画像

6.リリース

リリースし友人や会社の同僚に使ってもらいました！
作ったサービスが実際に使われているのは良いものですね☺️

さいごに

最後までお読みいただきありがとうございます！
感想としては0から形にし、それを磨き上げていく過程は非常にワクワクし楽しかったです！現職の業務をしつつ開発していたので大変ではありましたがリリースした今は達成感があります！一区切りついた今、やって良かったなと思います😊
また普段の業務ではない部分を担当しデザイナーとして一回り成長できたかなと思います（笑）
この記事が少ない工数で0からデザインを作成する人の参考になればと思っています！

今後も記事を投稿していきますのでよろしくお願いします！それでは👋