ポートフォリオアプリ作成前にやった◯つのこと

この記事は デイトラプログラミングコース Advent Calendar 2025 の18日目の記事になります。

こんばんは！（執筆時間）
デイトラリスキリング転職コースにてWebアプリ開発コースを受講しているつばです！
初めてこのような投稿をするので最初に自己紹介をさせてもらおうかなと思います！
現在は溶接修理業にて働いて6年目になりますが、
「このままでいいのかな」「デスクワークがしたいな」と思いながら働いていました。

コロナ禍をきっかけにテレワークやリモートワークという働き方を知り、エンジニアとして働く友人の存在もあって、Web系の仕事に興味を持つようになりました。

YouTubeなどで調べていく中でWebデザイナーという職種を知り、そこからデイトラをきっかけに
アプリ開発に興味を持ち、今に至ります。

１. ポートフォリオの題材選定

最初に、ポートフォリオの題材選定から始めました。

「こんなアプリを作りたい」
「〇〇のアプリのこの部分、もっとこうだったらいいのに」

といったように、
まずは自分がやりたいこと・欲しいと思う機能を基準に
アイデアを出していきました。

※ 以下はその中で出てきたアイデアの一部です。

• 予約アイテム（商品）をまとめるカレンダー
• EFT（Escape from Tarkov）のタスク・ハイドアウト必需品を可視化するアプリ
• 使用デバイスまとめサイト

また、
「何をするためのアプリなのか」
「誰に向けたアプリなのか」

といった点も、アイデア出しと同時に考えていました。

あわせて、個人開発されている方のアプリや、Webアプリのポートフォリオ事例なども調べて、
他の人がどんな題材を選んでいるのかを参考にしていました。

2. 題材が決まった後

題材が決まれば、あとは簡単……
というわけにはいきませんでした。

次に、アプリの具体的な機能を
CRUDを意識しながら整理していきました。

主に以下の2つの観点で考えています。

• CRUD機能
• その他の追加機能

ユーザー関連

• C（Create）
  • アカウント作成
  • プロフィール作成
• R（Read）
  • プロフィール閲覧
  • 他ユーザーの閲覧
• U（Update）
  • アイコン / 自己紹介文 / SNSリンク / 公開設定の編集
• D（Delete）
  • アカウント削除
  • プロフィール項目の削除

デバイス記事関連

• C（Create）
  • 新規デバイス追加（カテゴリー、メーカー、画像、ECリンク）
• R（Read）
  • デバイス詳細閲覧
  • ランキング / カテゴリー一覧
• U（Update）
  • スペック、画像、リンクの更新
• D（Delete）
  • デバイスの削除

マイデバイス

• C（Create）
  • 自分のページにデバイスを追加
• R（Read）
  • 自分 / 第三者のマイデバイス一覧・詳細の閲覧
• U（Update）
  • メモ、使用頻度、並び順、公開 / 非公開の変更
• D（Delete）
  • マイデバイスから削除

その他の追加機能

• お気に入り / いいね機能（CRD）
• コメント機能（CRUD）
  • ※ ブログアプリとは違い、編集・削除もできる想定
• ランキング機能（RU）
• デバイス比較機能（CR?）
• 検索機能（R?）
• （メール通知）

このように、まずはやりたい機能を一通り洗い出しました。

ただ、このまま全てを作ろうとすると、確実に途中で詰まると感じたため、
次に「要件定義」として機能の優先順位付けを行いました。

3. 要件定義

題材が決まったあと、メンターの方から
「次は要件定義とデザインを進めていきましょう」
とアドバイスをもらいました。

その時は、
「ポートフォリオ制作はこういう順番で進めるものなんだ」
と認識していて、その流れに沿って要件定義を行うことにしました。

この章では、実際にNotionで行った要件定義と、その中で意識していたことについて書いていきます。

アプリの概要・目的

今回作成しているのは、
**使用しているデバイスを共有できるアプリ「@dEvicE」**です。

以前存在していた
ゲーマー向けデバイス共有サービスが終了してしまったこともあり、
「もっと気軽に、自分の使用デバイスを共有できる場所があればいいのに」
という思いから、この題材を選びました。

また、
自分自身が普段使っているデバイスをまとめておきたいという個人的な興味も大きな理由の一つです。

対象ユーザーと課題

対象ユーザーは以下を想定しています。

• ゲーマー
• ストリーマー
• プロゲーマー

現在は、
使用しているデバイスを共有しようとすると
X（旧Twitter）やYouTubeなどで個別に発信する必要があります。

そのため、
デバイス情報をまとめて、簡単に共有できる場所がない、という課題があると考えました。

機能の洗い出しと優先順位付け

機能については、実装優先度を P0 / P1 に分けて整理しました。

• P0：最低限、必ず実装したい機能
• P1：余裕があれば追加したい機能（後回し可）

まずは「P0だけでもアプリとして成立するか」を基準に考えています。

ユーザー関連（P0）

• アカウント作成、プロフィール作成
• プロフィール閲覧、他ユーザー閲覧
• アイコン・自己紹介文・SNSリンク・公開設定の編集
• アカウント削除、プロフィール項目の削除

デバイス記事関連（P0）

• 新規デバイスの追加
  （カテゴリー・メーカー・画像・ECリンク）
• デバイス詳細閲覧
• ランキング / カテゴリー一覧の表示
• スペックや画像、リンクの更新
• デバイスの削除

マイデバイス機能（P0）

• 自分のページにデバイスを追加
• 自分 / 第三者のマイデバイス一覧・詳細閲覧
• メモ、使用頻度、並び順、公開 / 非公開の変更
• マイデバイスからの削除

その他の機能

• お気に入り / いいね機能（P0）
• コメント機能（P0）
• ランキング機能（P1）
• デバイス比較機能（P1）
• 検索機能（P1）
• メール通知（P1）

このように、
まずはP0の機能だけで完成させることを前提にしています。

非機能要件について

細かい部分までは詰めすぎず、
最低限として以下を前提条件としました。

• HTTPS化（前提）

「最初から完璧を目指さない」
というのも、今回の要件定義で意識したポイントです。

要件定義をしてみて感じたこと

機能を書き出して整理してみて、改めて

• すべてを一度に作るのは現実的ではない
• 優先順位を決めることが大事

ということを実感しました。

要件定義を行ったことで、
「今やること」と「後回しにすること」がはっきりし、
このあと実装に進みやすくなったと感じています。

以下は、実際にNotionで整理していた要件定義の一部です。

※ 実際に作成していた要件定義（Notionの一部）

ポートフォリオ作成を進める中で、
「最初にここまで考えておくことが大事なんだ」
と気づかされる点が多く、ポートフォリオ作成を進める上で参考にしました。

• Webエンジニアへの道143日経過 - ポートフォリオアプリ作成開始
• 初めての個人開発 ①要件定義・設計編

4. 画面設計、ワイヤーフレーム

必要な機能や実装順が固まったため、次に画面設計に取り掛かりました。

ただ、いざ手を動かそうとすると
「どこから作り始めればいいのか」
「どこまで考えるべきなのか」
と迷ってしまい、この日は情報収集だけで終わってしまいました。

そのため、
この段階では作り込みすぎないことを意識し、画面遷移や全体の流れを把握するための
必要最低限の簡素な画面設計にとどめることにしました。

※ 実際に作成した画面遷移

画面全体の流れを整理したことで、次は各画面の中身を具体的に考える段階へ進みました。

ここから、ワイヤーフレームの作成に取り組んでいきます。

まずは、TOPページから作成を始めました。
Webアプリの顔とも言える、最初に表示されるページです。

最初に作成したワイヤーフレームをメンターさんに提出した際、
バナーを中央に配置し、広告を掲載できるような構成にしていました。

しかし、ここで
「このアプリは自身の成果物を見てもらうためのものなので、
広告を載せる必要はない」
とアドバイスをいただきました。

この指摘を受けて、TOPページに本当に必要な情報は何かを改めて考え直し、
不要な要素を削った結果、下記のようなページ構成に仕上げました。

ワイヤーフレームを作成してみて、
「なぜこの情報を配置したのか」を説明できるかが重要だと感じました。

5. DB設計、ER図作成

ワイヤーフレームを作成したことで、画面のイメージがある程度明確になったため、
次にDB設計へ進みました。

ただ、正直なところ
「DB設計って何から考えればいいんだろう？」
という状態からのスタートでした。

そのため、まずは自分の中でのDB設計の認識を整理し、
認識のズレがないかをメンターさんと一緒に確認しました。

その結果、「難しく考えすぎている」とアドバイスをいただき、
よりシンプルに考える方向へ軌道修正してもらいました。

このとき改めて、
専属メンターがついていることのありがたさ
を実感しました。

具体的な設計は、まずユーザー周りから着手しました。

「使用する人」がいて、その人が何かしらの操作を行う、という流れになるため、
最初にユーザーを軸として考えることにしました。

以下は、実際に作成したユーザー周りのテーブルになります。

上記のようにテーブル案を作成したあと、ER図を作成してテーブル同士の関連性を
視覚的に分かりやすく整理しました。

おわりに

今回、ポートフォリオを作成していく前に、

• 題材の選定
• 要件定義
• 画面設計・ワイヤーフレーム作成
• DB設計・ER図の作成

という流れで進めてきました。

このようなステップで進めていきましょうと専属メンターさんに教えていただき、
初めて「ポートフォリオ制作には進め方の順番がある」ということを知りました。

もし自分一人で進めていたら、
要件定義やDB設計まできちんと考えられていたかは正直怪しく、
この経験ができたことはとても大きかったと感じています。

現在もポートフォリオは開発途中ですが、完成したタイミングで、
ワイヤーフレームやDB設計も含めて、改めて全体を振り返ってまとめてみたいと思っています。

ここまでお読みいただき、ありがとうございました 🙇‍♂️🙇‍♂️