はじめに

前回の記事では、オリジナルアプリの題材を「配当金管理アプリ」に決めるまでの流れを書きました。

今回はその続きとして、課題3のサイトマップ、課題4のデザイン作成、課題5のDB設計について振り返りたいと思います。

正直、このあたりから一気に難しくなりました。
※ここまでで2週間ちょっとかかっています。

題材を考えていた時は、まだ「こんなアプリが作れたらいいな」というふんわりしたイメージでした。
でも今回は、それを実際に“作るための形”にしていく作業です。

頭の中ではそれっぽく考えていたつもりでも、いざ整理しようとすると全然まとまらない。

「これも必要ちゃうか」
「いや、これは今はいらんかも」

と迷いながら、少しずつ進めていきました。

でも、その過程があったからこそ、前よりも少しだけ「自分が何を作りたいのか」が見えてきた気がしています。

課題3：サイトマップ作成

まずはアプリ全体のページ構成を整理しました。

必要そうなページを書き出していくと、

ホーム
ログイン / 新規登録 / パスワード再設定
ダッシュボード
保有銘柄一覧
個別保有銘柄の登録・編集
銘柄別保有一覧
家族メンバー一覧・登録・編集
過去実績一覧・登録・編集
問い合わせ
利用規約 / プライバシーポリシー

など、程よい数になりました。

「これもあった方がええかも」と、あれもこれも入れたくなるのですが、盛り込みすぎると自分も作るのが大変になるし、使う側も分かりにくくなるのかなと思いました。

特に今回は妻も使う想定があるので、最初はできるだけシンプルな構成にしたいと思いました。

課題4：デザイン作成

次はデザイン作成です。

今回は、オフ会の時にたむさんに教えていただいたGoogleのAIデザインツール
「Stitch（スティッチ）」 を使って、まず自分の頭の中にある画面イメージを形にしてもらいました。

そのあと、Figmaで自分なりに整えていく流れで進めました。

このやり方のおかげで、デザイン素人の自分でも理想に近づけている感覚がありました。

一方で、Figmaの使い方にはかなり苦戦しました。

どこを触ればいいのか。
どうやって余白や配置を整えるのか。

最初はかなり手が止まりました。

でも、実際に触ってみたことで、見た目だけでなく、実装時の組み立て方もイメージしやすくなったのが大きな収穫でした。

たとえばレイヤー構造を見ながら、

「ここは display: flex を使う感じかな」
「このまとまりごとに div で囲めそうやな」

と、HTMLやCSSの構成まで以前より想像しやすくなりました。

また、画面を作ってみることで、今回のアプリで一番大事にしたいのは
配当金情報の見やすさ
だと改めて感じました。

見た目を整えること以上に、
何を一番見せたいかを決めることが大事
だと学びました。

あと、前の職場ではExcelで画面設計をしていたのですが、Figmaの方が圧倒的に操作しやすく、画面のイメージもしやすいことが分かりました。

まだFigmaの操作で十分に使いこなせていない部分もあるので、これからどんどん触って慣れていきたいと思いました。

課題5：DB設計

一番苦戦したのがDB設計でした。

そもそも、どういう順番で進めればいいのかが分からなかったので、いきなりER図を描くのではなく、まずChatGPTにER図作成の進め方を出してもらい、そのステップに沿って進めました。

流れとしては、

まず管理したいものを洗い出す
それぞれが持つ属性を考える
エンティティ同士のリレーションを整理する
最後にER図として図に落とし込む

という形です。

その中で、まずは「このアプリで管理したいもの」を洗い出し、

Users
Profile
Members
Stocks
HoldingStocks
DividendInfo
PastPerformance

などの候補を整理しました。

さらに、それぞれの属性やリレーションも考え、
Members と Stocks の多対多の関係を、HoldingStocks を挟むことで整理する形
にしたのは、自分の中でも理解が深まったポイントでした。

※ただ、まだ自分の言葉でしっかり説明できるレベルではないので、今後はそこも説明できるようになりたいと思いました。

一方で、DB設計をしていると、

「過去の株式保有状況や配当金情報も履歴として残した方がいいんやろうな」

など、考え始めると本当にキリがなくて、
「どないしよう…」
となることも多かったです。

悩みながらもステップごとに整理していったことで、最初はぼんやりしていたER図も少しずつ形にしていくことができました。

DB設計のレビューを通して感じたこと

設計に悩む私に対して、講師のあかねさんから

設計悩みますよね。違和感があったらその時に考え直してみるでいいと思うので、どんどん進めていきましょう

と言っていただきました。

この言葉で、かなり気持ちが軽くなりました。

自分はどうしても、進む前にできるだけ正しい形にしておきたくなるタイプです。
少し完璧主義なところがあるんやと思います。

でも、実際に作ってみないと見えてこないこともあるのかなと感じました。

だからこそ、最初から完璧な設計を目指すより、
まずは最小限で作って、必要なら後から見直す。
この考え方が、今の自分にはすごく大事なんだと感じました。

予定よりだいぶ時間をオーバーしてしまったのですが、丁寧にレビューいただいて本当に感謝しています。ありがとうございます！

終わりに

課題3のサイトマップ、課題4のデザイン作成、課題5のDB設計を通して、頭の中にあった「こんなアプリが作れたらいいな」が少しずつ形になってきました。

特に今回は、Stitchでイメージを作ってもらい、それをFigmaで自分なりに整えることで、デザイン素人の自分でも理想に近づける感覚を持てたのが大きかったです。

また、Figmaを触ることで見た目だけでなく、実装時のHTMLやCSSの組み立てまで少しイメージしやすくなりました。

DB設計では、ChatGPTに進め方を出してもらいながら、一つずつ整理していくことで、少しずつ前に進めることができました。

次はいよいよ実装フェーズです。

不安はありますが、ここまで考えてきたことを一つずつ形にしていきたいと思います。

３月は今日も含めてあと３週間…間に合うか分からないですが、３月完成を目標に頑張ります🔥

おまけ

今回作成したサイトマップ、Figma、ER図のリンクを置いておきます。

今12章を進めている方とかの、何かしらの参考になれば嬉しいです！

課題３：サイトマップ
課題４：Figma
課題５：ER図