ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

memoir開発日記 ①

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

開発中のアプリ

アプリ名: memoir

f:id:wheatandcat:20210223214445p:plain:w150 f:id:wheatandcat:20210223214458p:plain:w150 f:id:wheatandcat:20210228005756p:plain:w150 f:id:wheatandcat:20210228005814p:plain:w150

開発の動機

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

開発コンセプト

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

開発の進め方

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

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

f:id:wheatandcat:20210228002325p:plain

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

f:id:wheatandcat:20210228004708p:plain

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

f:id:wheatandcat:20210228004755p:plain

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

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

f:id:wheatandcat:20210228005049p:plain

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

colorsupplyyy.com

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

f:id:wheatandcat:20210228005643p:plain

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

f:id:wheatandcat:20210228010335p:plain:w150 f:id:wheatandcat:20210228010402p:plain:w150 f:id:wheatandcat:20210228010424p:plain:w150 f:id:wheatandcat:20210228010433p:plain:w150 f:id:wheatandcat:20210228010450p:plain:w150 f:id:wheatandcat:20210228010508p:plain:w150

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

icons8.jp

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

f:id:wheatandcat:20210228011117p:plain

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

f:id:wheatandcat:20210228011220p:plain

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

実際にコーディング

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

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

github.com

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

f:id:wheatandcat:20210228012006g:plain

まとめ

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