memoir開発日記 ①

最近新しいアプリの開発を行っているので、それについて記事にしました。

開発中のアプリ

アプリ名: memoir

開発の動機

私の家庭では週1回振り返りの時間を設けていて、その時間では互いに今週あったことを会話で共有して議事録に残すのを習慣にしています。 今回のアプリでは、それらを補えるようなアプリの開発を行いたい。

開発コンセプト

基本はペペロミアと同じスタックで開発するが、今回は デザイナー: 1人、開発: 1人の2人チーム体制で開発していきます。 なので、記事もチーム開発の進め方などを紹介していければ良いかなと思います。

開発の進め方

どんな画面が必要かのアイディアを出す

まず、自分の方で手書きでラフを作成

↑のラフからある程度形にするためにFigmaを仮デザインで作成

それと、仮のデザインガイドラインを作成して、ここまでをデザイナーに共有しました。

正式なデザインに仕上げていく

上記のデザインを元にデザイナーの方で新たなデザインガイドラインを作成

配色の組み合わせは以下のサイトを使用して決めたみたいです。

colorsupplyyy.com

上記のデザインガイドラインを元に正式な画面をデザインを作成して貰いました。

メイン画面は以下みたいな感じになりました。

アイコンについてはデザイナーと相談してIcons8のもので統一することにしました。 （ライセンス的にはリンクを設置すればOKでした）

icons8.jp

Figmaにテキストとカラーを設定

上記を元にFigmaにテキストとカラーの設定を追加します。

Figmaのカラーとテキストは全て上記の設定から指定するようにすることで、デザインがガイドラインから外れないようにしています。

実際にコーディング

上記まで完了したら、いよいよコーディング開始です。

以下のGitHubリポジトリで管理してます。

github.com

現状は情報をモックで画面のみ作成中です。（ある程度進んだらbackend開発に取り掛かる予定）

まとめ

現状の開発報告は以上です。 当面は、こちらのアプリ開発に注力する予定なので チーム開発でのやり取りや、新規開発の進捗など記事にしていこうかなと思います。