S-4.ポートフォリオ制作について

ポートフォリオを作成しよう!

ここまでみなさんには開発をしていただくにあたって、知識を身につけていただきました!
次はその知識を生かしていくために、ポートフォリオ制作をしていただきます!

なぜポートフォリオを作成するのか?

プログラミングを学ぶ目的のひとつに、「自分のスキルを形にする」という目標があります。その第一歩がポートフォリオの作成です。
ポートフォリオとは、自分で作ったWebアプリケーションやWebサイトをまとめた作品集のこと。
これは、企業やクライアントに自分の技術をアピールするための強力な武器になります。

ポートフォリオを作成するメリット

✅ 開発の流れを体験できる
企画 → 設計 → 実装 → テスト → 公開 という一連の流れを経験することで、実務に近いスキルが身につきます。

✅ 自分の技術レベルを客観的に把握できる
何が得意で何が苦手かが明確になり、次に学ぶべきことが見えてきます。

✅ SESアサインの際、強力なアピール材料になる
実績として提示できるため、未経験でもやる気と努力を示すことができ、面談や面接で有利に働きます。

何を作るか決めよう!

次にどんなテーマでポートフォリオを作成したら良いかを話していきます!

どんなことを意識するべきか?

ポートフォリオを作るときは、自分のやりたいことと見る人(企業や面接官)の視点の両方を意識しましょう!

  • 自分が作っていて楽しいと思えるもの
  • 現実に存在しそうなサービスをベースに考える
  • 「誰の」「どんな課題を」解決するのかを意識する
  • アピールしたい技術要素(LaravelでAPI連携したい・JSで動きのあるUIを作りたい 等)を意識する

テーマの具体例

自分なりの工夫や独自性を出すとよりOK!

テーマ内容アピールできる技術
タスク管理アプリToDo管理、進捗、優先度など認証・CRUD・ソート・バリデーション
書籍レビューサイト書籍を検索&レビュー投稿外部API連携・ユーザー管理・評価機能
日記アプリ日記を投稿・タグ管理ログイン・WYSIWYGエディタ・検索
料理レシピ投稿サイトレシピ投稿・検索・いいね画像アップロード・レコメンド機能
スケジュール共有アプリチームで予定を共有カレンダーUI・ユーザー紐付け・非公開設定
ポートフォリオ管理アプリ自分の成果物を登録&表示フロント演出・DB設計・SEO対策

 

特にアイデアがない場合は、以下のテーマからどれかを選んで作成してください。

作成物:①ゲーム紹介会員ページ

    ②店の予約管理システム

    ③書籍紹介サイト及び購入ページ

    ④古本売買マッチングサービス

開発の流れ

開発は、ただコーディングするだけではなく、計画・設計・開発・テスト・公開という工程を順に行っていきます。

また、開発手法にもいくつか種類があります。

開発手法の基本

ウォーターフォール開発(Waterfall Model)

■ 概要

ウォーターフォール開発は、「上から下へ水が流れるように」一つひとつの工程を順番に進めていく開発手法です。
要件定義 → 設計 → 実装 → テスト → リリースという流れで、前の工程が完了してから次の工程に進みます。

各工程は原則として一度完了してから次に進むため、開発の初期段階で仕様や要件をできる限り詳細に定めます。

この方法では、基本的にお客様が実際に動くシステムを見るのは開発の最終段階になることが多く、途中で仕様を変更するのは難しくなります。そのため、大規模なシステムや、要件が明確で変更の少ないプロジェクトに向いています。

■ 特徴

  • 計画重視:開発前にしっかりと設計・計画を立てる
  • 変更に弱い:途中で仕様変更があると全体に影響が出やすい
  • 進捗が分かりやすい:段階ごとに成果物があるため、管理がしやすい
  • 大規模・長期のプロジェクトに向いている

■ 向いているケース

  • 要件が明確で変更が少ない案件
  • 官公庁や受託開発など、文書ベースでの合意が必要な場合

 

アジャイル

■ 概要

アジャイル開発は、短い期間で繰り返し開発(イテレーション)を行いながら進める手法です。
要件や仕様を最初にすべて決めるのではなく、小さな単位(機能や画面など)ごとに計画・開発・テスト・レビューを繰り返しながら進めていきます。

お客様と相談しながら1つ1つの機能を確認・改善していくため、柔軟に仕様変更に対応でき、完成度を高めやすいのが特徴です。要件が変わりやすいプロジェクトや、ユーザーのフィードバックを活かしたい開発に向いています。

■ 特徴

  • 柔軟性が高い:仕様変更に強く、都度対応しやすい
  • 段階的に価値を提供:最初から完璧を目指すのではなく、徐々に完成度を高めていく
  • ユーザーとの対話が多い:頻繁な確認・フィードバックをもとに改善していく
  • 小規模・スピード感のある開発に向いている

■ 向いているケース

  • 要件がまだ固まっていない、または変更が多いプロジェクト
  • スタートアップやWebサービスなどスピードを重視する現場

 

💡補足:ハイブリッド型開発

最近では、ウォーターフォールとアジャイルのいいとこ取りをした「ハイブリッド型」も増えています。
要件定義や基本設計まではウォーターフォール的に進めて、実装やテストはアジャイル的に対応することで、柔軟性と安定性の両立を図っています。

開発ドキュメントの役割と重要性について

仕様書」は、Webサービスやアプリを開発するうえで、開発者にとっての“設計図”のような役割を果たす資料です。
どこにどんな機能を持たせるのか、どこからどこへ遷移するのかなど、プロダクトの「あるべき姿」をまとめたもので、開発の要となる非常に重要な工程です。
企画者やディレクターを目指す方にとっては、ぜひとも身につけておきたい知識のひとつです。

一方、「設計書」は、仕様書に書かれた内容をもとに、どのように実現するかを具体的に明示した資料です。
設計書では、制作工程や実装方法を開発者の視点で整理していきます。

システム開発においては、開発前の準備段階でいくつかの設計・仕様ドキュメントを作成します。
これらの資料は、関係者全体で共通認識を持つために重要であり、品質の高いシステムを効率的に開発するための土台となります。

以下に、それぞれのドキュメントの概要・役割・記載内容について詳しく説明します。

🔸開発前のドキュメント

ドキュメント名内容・役割
要件定義書作る目的・ターゲット・必要な機能を洗い出す
機能仕様書実装する機能の詳細を記載(何をどうするか)

🔸 画面設計・UI関連

ドキュメント名内容・役割
画面仕様書画面構成・入力項目・画面遷移をまとめる
└ ワイヤーフレームレイアウトを簡易的に図示したもの
└ 画面遷移図画面同士の移動パターンを整理
詳細仕様書画面や機能の具体的な動作条件などを記載
画面詳細設計UIの状態遷移、API連携、バリデーションなど実装レベルまで落とし込む

🔸 システム設計

ドキュメント名内容・役割
基本設計書機能の概要・外部とのやり取り・UIの設計など
詳細設計書内部構造や処理ロジック、データフローの設計
データベース設計ER図、テーブル設計、リレーションなど

要件定義書

要件定義書は、開発における出発点となるドキュメントです。
主に「なぜこのシステムを作るのか」「ユーザーがどんな課題を抱えていて、何を求めているのか」といった、背景や目的、ユーザーのニーズを明確にします。
また、プロジェクトにおいて最低限必要な機能や条件を整理し、関係者の間で「ゴールはここです」という共通認識を作るために不可欠です。

記載内容としては以下のような項目が含まれます。

  • 非機能要件(セキュリティ、レスポンシブ対応、パフォーマンスなど)
  • 開発の背景と目的
  • 想定ユーザーや使用シーン
  • システムに求められる機能(例:ログイン、検索、帳票出力など)

※わからない用語は調べて確認しておきましょう!

機能仕様書

機能仕様書では、要件定義でまとめた「やりたいこと」を、どんな機能で、どう実現するかを整理します。
ここでは、機能ごとの処理内容や画面上の動作、入力条件、制限事項などを具体的に記載していきます。

この資料は、開発者やテスト担当者が「この機能はこう動く」と正確に理解するための基盤となるものであり、仕様の認識齟齬を防ぐためにも非常に重要です。

記載項目の例

  • エラー時の挙動や制限
  • 機能名称(例:顧客検索)
  • 処理概要
  • 入力・出力情報
  • ユーザーの操作に応じた挙動(ボタン押下時の処理など)

画面仕様書

画面仕様書では、各画面にどのような要素があり、それらがどう動くかを記述します。
特にフロントエンド開発やデザイン工程では、UI/UXを意識した情報設計が重要となるため、この資料の精度が全体の使いやすさを大きく左右します。

視覚的な理解を助けるために、ワイヤーフレーム(画面の構成図)や画面遷移図(どの画面からどこへ遷移するか)を合わせて作成するのが一般的です。

記載項目の例

  • ユーザーアクションに対する遷移先や挙動
  • 画面名称(例:ログイン画面、顧客登録画面)
  • 表示する項目(例:入力フォーム、ボタン、メッセージ)
  • 各部品のレイアウトや制御

ワイヤーフレーム(画面設計)とは?

ワイヤーフレームとは、画面のレイアウトや構成をざっくりと描いた設計図のことです。
ボタンや入力欄、メニューなどが「どこに」「どんな風に」配置されるかを視覚的に整理するために使います。

【目的】
・画面の構成を関係者で共有する
・実装前にUIのイメージを固めておく

【ポイント】
・デザインより構成重視(色や装飾は省略することが多い)
・ペーパープロトタイプや手書きでもOK

サンプル

ツール例:「Figma」や「Adobe XD」、軽くなら「Excalidraw」「draw.io」など

画面遷移図とは?

画面遷移図は、どの画面からどの画面へ移動するのか(遷移するのか)を線でつないで示した図です。
アプリやWebサービスで、ユーザーがどのように操作してページを移動するかを可視化します。

【目的】
・ユーザーの操作フローを明確にする
・開発者やデザイナーが画面構成の全体像をつかむ

【ポイント】
・「ログイン画面 → ホーム画面 → 設定画面」といった流れを矢印で表す
・モーダルやポップアップの遷移も記載すると親切

ツール例:draw.io、Cacoo、Lucidchart など
図として見せたい場合は矢印付きのフローチャートで OK!

詳細仕様書

詳細仕様書は、機能仕様書をより細かく分解し、実装に必要な具体的な条件や処理内容を記載する資料です。
入力値の制約やエラーハンドリングの方法、外部サービスとの連携仕様など、開発者が迷わずに実装できるレベルの情報が求められます。
たとえば、「ボタンを押すと何が起きるか」「処理結果をどう返すか」といった機能ごとの仕様が明記されるため、プログラマーと設計者との認識のズレを防ぐ重要なドキュメントです。

システムのフロー参考図

画面詳細設計

画面詳細設計は、実際のUIを構成する各パーツの動きや制御条件を明確に定義する資料です。
画面仕様書(ワイヤーフレームや遷移図)では大まかな構成や動きを示しますが、画面詳細設計ではどの入力項目にどんなバリデーションをかけるのか、各ボタンの動作条件、表示/非表示の条件など、より細かい振る舞いを記載します。
実装の最終段階で必要になるケースが多く、特にフロントエンド開発やテスト設計において重要な役割を持っています。

基本設計書

基本設計書は、システム全体の構成や技術的な方針を決める設計書です。
使用する言語やフレームワーク、サーバ構成、外部システムとの連携方法など、技術面の「全体像」をここで定義します。

データベース構成についても、ER図(エンティティ・リレーション図)を用いて、テーブル間の関係やデータ構造を視覚的に示します。

主な記載内容

  • 権限・認証に関する設計方針
  • 使用技術やインフラ構成(例:AWS、Laravel、MySQL など)
  • システム構成図(フロント/バックエンド、外部API との接続など)
  • DB設計(ER図、テーブル定義)

参考例:基本設計書

参考例:ER図

詳細設計書

詳細設計書では、基本設計で決定したシステム構成をもとに、実際の処理フローやロジック、細かな挙動を定義していきます。
ここでは各機能の処理手順や分岐条件、使う関数・アルゴリズム、外部ライブラリなど、実装時に必要な情報を具体的に記載します。

この資料があることで、開発者が迷わずコーディングでき、またテストケースを作る際にも役立ちます。

記載内容の例

  • 処理フロー(フローチャートやシーケンス図)
  • 入力・出力パラメータの仕様
  • データの取得・更新の詳細な手順
  • 例外処理やエラー時の挙動
  • 使用するツール・ライブラリ

参考例:詳細設計書の内容

データベース設計

データベースにはテーブル定義を表現するシステムテーブルがあることが多く、SQLを抽出することで得ることが多いです。しかし、構築するシステムの要件・仕様を理解していなければ、そもそもデータベース上で用意するべきテーブルの種類やカラムを定義できないです。まずはどのような要件の、どのようなシステムを構築するのかをしっかりと理解し、そのうえで、要件定義書や外部設計書などをもとに情報を整理することが必要になります。

データベース定義書 例1 会員マスター
データベース定義書 例2 口座情報定義

テスト設計(参考)

テスト設計とは、システム開発のテスト工程で行うテストの目的や内容を決定することです。 テストの対象となるシステム・ソフトウェアに対して、テストをする機能や内容を明確に設計します。

テスト仕様 例

仕様書を書く注意点

1. 誰が読んでも理解できるように書く

  • 読む人はエンジニアだけとは限りません(ディレクター、デザイナー、クライアントなども見る可能性あり)。
  • 専門用語は必要に応じて補足をつける or わかりやすい表現に言い換える。

🔸NG例:「リクエストヘッダーにトークンを含めて…」
🔹OK例:「ログイン中のユーザー情報を確認するために、通信の際に“トークン”という鍵を送信します。」


2. あいまいな表現を避ける

  • 「だいたい」「場合によって」「基本的には」などの曖昧表現はトラブルの元。
  • 具体的な条件・数値・フローを明記する。

🔸NG:「エラーが起きた場合は適宜対応する」
🔹OK:「エラーが起きた場合は、ステータスコード500を返し、エラーメッセージを画面上に表示する」


3. 矛盾や抜け漏れがないかチェックする

  • フロー図や画面遷移図と内容が一致しているか。
  • 登場する機能や項目が、どこかで「突然出てきてないか」確認する。

4. 最新状態に保つ(アップデートを忘れずに)

  • 実装中や仕様変更が入ったとき、古いまま放置すると混乱の原因に。
  • 更新日を明記する or バージョン管理するのがおすすめ。

5. 図や表を活用する

  • テキストだけでは伝わりにくい仕様(画面遷移、条件分岐など)は図や表で見える化。
  • ワイヤーフレームやフローチャートなども有効!

6. 「なぜこの仕様にしたのか」の背景も書くとGood

  • 特にレビューや実装の際、開発者や他メンバーが判断に迷ったときに助けになります。

課題① テーマを決めて、要件定義書を作成しよう!

上記のサンプルをテーマを決めて、要件定義書を作成して提出してください!
※余裕があれば機能仕様書も作成してみましょう!

提出方法はDiscordへファイルを添付する形で問題ございません。
雛形を使用しても、個人で用意してもOKです!

参考URL:要件定義書の書き方

課題② 画面・設計ドキュメントをまとめて作成しよう!

要件をもとに、仕様・設計を整理して開発準備を整えよう!
作成したら提出してください!

※完璧な仕様書を目指す必要はありません。
画面イメージ、機能のロジックや動きなどが整理されていればOKです!

仕様書・設計書のフォーマットは自由ですが、誰が見てもロジックが理解できるよう、わかりやすく伝えることを意識してください。

作成のヒント

✏️ 作成のヒント

  1. 画面仕様書を作成しよう
     → どんな画面が必要か?ざっくりレイアウトやUIのイメージを書いてみよう。
  2. 必要な情報を洗い出そう
     → 画面に表示する内容や、ユーザーが入力する情報など、出すもの・使うものを整理しよう。
  3. 画面の遷移図を描こう
     → ユーザーがどの画面からどの画面へ移動するのか、フローを図で示すとわかりやすい。
  4. 機能・ロジックを整理しよう
     → ボタンを押すと何が起きる?条件分岐は?必要な処理を具体的に書き出そう。
  5. 必要なデータベース設計をしよう
     → ユーザー情報やデータを管理する必要があるなら、テーブル設計も行ってみよう(例:カラム名・型・制約など)。

課題③ ポートフォリオを完成させよう!

完成したポートフォリオをGitHubにpushして、提出してください。
※途中でレビューが必要なときや“こういう機能にしたいけどどうしたらいいかわからない”などありましたら、遠慮なく質問してください!

■ポートフォリオ作成時に重要なポイント
  1. 作品のクオリティ・システム・デザインは可能な限り高めてください。
     ・見た目の美しさや使いやすさはもちろん、機能面も重視します。
  2. バグなく動作し、セキュリティ面にも配慮された作品にしてください。
     ・フォームバリデーションやSQLインジェクション対策など、基本的な対策をお願いします。
  3. コーディング規約を守り、可読性・保守性の高いコードを心がけてください。
     ・適切なコメントの記載や、フォルダ・ファイル構成も含めて、他人が読んでも分かりやすいようにしてください。
  4. 他者に見せる/公開することを前提として完成させてください。
     ・実際に企業の選考などに提出できるクオリティを目指します。
  5. 見た目だけのLP(ランディングページ)ではなく、動きのあるWebアプリを作成してください。
     ・API連携、セッション管理、自動処理、ログイン認証などを含んだ構成としてください。
  6. 作品に応じて、以下のような構成が求められる場合があります。
     ・管理画面の作成
     ・API連携によるクライアントアプリの開発(スマホアプリ等)

 ※おすすめのテーマ例:
  - 会員サイト
  - 検索サイト
  - EC(販売)サイト
  - 予約管理サイト など

■補足事項
  • 開発を始める前に、Laravel一式をGitHubにアップしてください。
     → 作業差分の確認・レビューのために必要です。
  • 進捗ごとにGitHubへこまめにプッシュしてください。
     → 完成したページ単位でレビューを行います。

課題・復習用検索キーワード

検索例
🔍promiアイミツ 基本設計書
🔍金融 設計書 テンプレ システム開発
🔍システム開発 要件定義 テンプレート
🔍システム開発 詳細設計書 テンプレート
🔍ウォーターフォール開発とアジャイル開発