教材の見本は動かせても、Web・アプリ開発職を目指すための制作物を白紙から決めようとすると止まってしまう。
ToDoアプリ、SNS、ECサイトなど候補だけが増え、どの機能まで入れれば完成なのか分からない。
派手さのない作品では意味がない気がする一方、大きく作ろうとすると終わりが見えません。
初めてポートフォリオ用の制作に取り組むなら、自分が状況を説明できる題材を選び、「誰が使うか」「何に困っているか」「何ができたら完成か」を決めます。
完成は、主要な操作が最初から最後まで1周するところまでとします。
ポートフォリオはすべての応募で必須とは限らず、この記事の完成ラインも特定企業の選考通過を保証する基準ではありません。
ただし、制作物を応募材料にするなら、採用担当者が「何のためのアプリか」「どの機能を自分で作ったか」「どの操作まで動作確認したか」を確認できる形にする必要があります。
この記事では、そのために最初に決めたい完成ラインを整理します。
初めて作るなら「自分が利用場面を説明でき、1つの作業を終えられるもの」にする
「何を作るか」を先に決めるのではなく、まず次の3点から考えます。
誰が使うか
最初は自分一人で構いません。利用者を一人にすると、必要な画面を絞れます。
何に困っているか
記録が散らばる、在庫数を忘れる、読んだ本を探せないなど、解決したい状況を具体的にします。
何ができたら完成か
学習内容を残して後から見返せる、在庫を登録して残数を確認できる、読みたい本を保存して探せる、のように、一つの作業が終わった状態を決めます。
たとえば「プログラミング学習中の自分が、今日学んだ内容を記録し、日付順に見返せるアプリ」と決めれば、最初に作る範囲を「学習内容を記録する」「日付順に見返す」の二つに絞れます。
私は転職時にポートフォリオと呼べるものを作らず、自作したのはVBAの電卓程度でした。
当時は環境構築や進め方で止まり、どこまで作れば完成なのかも整理できていませんでした。
この経験から、初めてポートフォリオ用の制作に取り組むときは、作り始める前に「何ができたら完成か」を決めておく方が進めやすいと考えます。
題材は3つの入口から決める
作りたいサービスが浮かばないときは、次の3つも参考にしてみてください。
日常の記録を一つにする
学習、読書、家計、運動など、自分がすでに行っている記録を題材にします。学習記録なら「登録して日付順に見返す」までに絞れます。
自分が日常的に使う内容なら、必要な操作を考えやすく、作った後も実際に使って不便な点を確認できます。
前職やアルバイトの不便を架空データで再現する
在庫、予定、問い合わせなど、以前の仕事で手間だった作業を一つ選びます。実在する顧客名、会社の資料、個人情報は使わず、項目とデータは架空にします。
たとえば「商品の入庫数と出庫数を登録し、残数を確認する」なら操作を具体化できます。
既存サービスの一機能だけを作る
SNS全体を再現するのではなく、お気に入りの保存と一覧、キーワード検索など一つの流れに絞ります。画面や文章を丸写しせず、自分で利用者、入力項目、終了状態を決め直します。
3案を同時に作る必要はありません。自分が利用場面と必要な入力項目を説明しやすい一つを選びます。
完成ラインは「1つの操作が最初から最後まで動く」
完成の条件を決めないまま「あると便利そうな機能」を足していくと、ログイン、通知、集計、見た目の調整まで作業が広がり、いつ完成なのか分からなくなります。
そこで、利用者が行う中心的な作業を一つ決め、その作業を最初から最後まで行えた時点を、ひとまず完成とします。
中心となる作業
利用者がこの制作物で行う一連の作業です。学習記録なら、「内容を入力する」「保存する」「日付順の一覧で見返す」までを一度行います。
最低限の確認
入力や条件を一つ変え、結果が想定どおり変わるかを確認する。内容を保存する作品なら、画面を開き直した後も保存内容を確認する。
後回しにするもの
中心となる作業に不要なログイン、通知、集計、細かな装飾は「次に作る機能」へ分ける。
ここで示した完成ラインは、すべての制作物に共通する必須条件ではありません。
応募先の仕事内容・必須条件を見て、制作物で示す必要があると明記された技術だけを追加候補にします。
歓迎条件にある技術や、制作物への反映が求められているか分からない技術は、中心となる作業が完成した後に検討します。
学習記録アプリなら、追加と一覧から始める
先ほどの「今日学んだ内容を記録し、日付順に見返すアプリ」なら、最初は次の2機能にします。
1. 追加
日付、学習した内容、短いメモを入力して保存する。
2. 一覧
保存した記録を新しい日付から表示する。
まず、異なる日付の記録を複数登録し、新しい日付から並ぶかを確認します。ここまで通れば、最初に決めた「記録して日付順に見返す」という作業は1周しています。
使ってみて、入力ミスを直したくなったら修正、不要な記録を消したくなったら削除、記録が増えて探しにくくなったら検索を追加します。
ログインは複数人の記録を分ける必要があるとき、グラフは日ごとの変化を比べたいときに検討します。
応募材料にする前に5点をそろえる
動くアプリだけを見せても、採用担当者には、どの機能をどのように確認すればよいか伝わりません。応募書類から制作物を開き、内容と確認方法が分かるように、次の5点をそろえておきます。
1. 応募先から見られる場所
まず応募先が指定する提出方法を確認します。動く画面のURLを求められたら公開URL、コードの提出を求められたらGitHubなどで共有します。両方を求められた場合は両方を用意します。
公開URLやGitHubなどの共有先は、自分がログインしていない状態でも開けるか確認します。
限定した相手だけにコードを共有する場合は、応募先が指定する方法に従います。この記事では、各サービスで公開・共有する操作手順までは扱いません。
2. 制作物の説明
GitHubなどでコードを共有する場合は、READMEと呼ばれる説明文に、誰の何を解決するか、主要機能、起動・確認手順、使用技術、自分で決めた点と今後の改善を書きます。
公開URLだけを渡す場合は、同じ内容を応募書類や別の説明ページから確認できるようにします。
3. デモデータ
個人情報や前職の実データを入れず、動作を確認できる架空の入力例を用意する。
4. 動作確認
READMEなどの説明文に書いた手順に沿って開き、中心となる作業を最初から最後まで一度行う。
5. 応募時の説明
応募書類や面接では、制作物の目的、自分で決めた点、確認した操作を短く説明できるようにする。詳しい使い方や使用技術は、READMEなどの説明文へ案内する。
コードを公開・共有する前に秘密情報を確認する
コードを公開・共有する前に、現在のファイルや変更履歴に、APIキー、トークン、パスワード、認証情報を含むことがある設定ファイル（.env）などが入っていないか確認します。
見つかった場合は、現在のファイルや公開対象から秘密情報を外します。安全な保管方法が分からない間は公開・共有しません。
一度保存した秘密情報は、現在のファイルから消しても変更履歴に残ることがあります。
誤って公開・共有した場合は公開・共有を止め、キーやトークンは無効化または再発行し、パスワードは変更します。
変更履歴にも残っている場合は、利用しているサービスの公式手順に従って履歴から削除します。方法が分からない間は公開・共有を再開せず、公式手順や学習先の講師へ確認します。
教材や生成AIを使った範囲を分けて説明する
教材、テンプレート、生成AIを使った箇所がある場合は、それ自体を隠すのではなく、どこからを自分で変更し、どこまで動作を確認したかを分けて書きます。
利用したものをすべて自作したようには見せません。
職務経歴書には制作物の目的と担当範囲を載せる
制作物を職務経歴書へ載せる段階では、作品名だけでなく、目的、担当した範囲、工夫、URLを短く整理します。
まとめ｜今日は題材1つと最初に作る機能を決める
題材は、日常、前職の不便、既存機能の一部から、自分が状況を説明できるものを一つ選びます。完成ラインは機能の多さではなく、利用者の主要な操作が最初から最後まで1周することです。
まず「誰が使うか」「何に困っているか」「何ができたら完成か」を決め、機能を「最初に作るもの」と「必要になってから追加するもの」に分けます。
学習記録なら、追加と一覧から始め、修正・削除・検索・ログイン・グラフは実際に必要になってから追加できます。
