「エンジニアになりたいけど、ポートフォリオってどうやって作るの?」
未経験からエンジニア転職を目指すあなたにとって、ポートフォリオ作成は最初の大きな壁かもしれません。しかし、安心してください。この記事では、完全未経験者でも理解できるように、ポートフォリオの作り方を実例付きで徹底解説します。
実際に未経験からエンジニア転職を成功させた筆者の経験をもとに、採用担当者に評価されるポートフォリオの作り方、具体的な手順、そして陥りがちな失敗例まで、すべてお伝えします。
ポートフォリオとは?なぜ未経験者に必要なのか
ポートフォリオの定義
ポートフォリオ(Portfolio)とは、もともとイタリア語で「書類入れ」を意味する言葉です。エンジニア業界では、自分のスキルや実績を証明するための作品集のことを指します。
具体的には以下のようなものが含まれます。
- 自作のWebアプリケーション
- GitHubに公開したソースコード
- 技術ブログ記事
- プロフィールや経歴
- 使用技術スタックの説明
未経験者こそポートフォリオが必要な理由
企業が最も気にするのは「本当に技術力があるのか?」という点です。
職務経歴書だけでは、実務未経験者の技術力を判断することは非常に困難です。そこでポートフォリオが重要な役割を果たします。
1. 技術力の可視化
言葉だけでは伝わりにくいプログラミングスキルを、実際に動くアプリケーションで証明できます。「Reactができます」と言うより、「Reactで作ったこのアプリを見てください」と言える方が圧倒的に説得力があります。
2. 学習意欲の証明
ポートフォリオの存在自体が、「自主的に学習し、実際に手を動かして制作物を作り上げた」という強力なアピールになります。多くの応募者が履歴書と職務経歴書だけを提出する中、しっかりとしたポートフォリオを持っている人は確実に目立ちます。
3. 面接のきっかけ作り
優れたポートフォリオがあれば、書類選考の通過率が大幅に向上します。実際、ポートフォリオを提出した未経験者の書類選考通過率は、提出しない人の約2.5〜3倍というデータもあります。
4. ミスマッチの防止
自分のスキルレベルを正確に伝えることで、入社後に「求められる業務がこなせない」という事態を防げます。企業側も採用者のレベルを事前に把握できるため、双方にとってメリットがあります。
ポートフォリオがないとどうなるか
未経験者がポートフォリオなしで転職活動をすると、以下のような問題が発生します。
- 書類選考で落とされる確率が激増:実務経験がない上にポートフォリオもないと、判断材料がほぼゼロになります
- 面接すら受けられない:企業によっては、ポートフォリオの提出が応募の必須条件になっているケースもあります
- 待遇が低くなる:仮に採用されても、スキルを証明できないため、給与などの条件が厳しくなる可能性が高まります
ポートフォリオに含めるべき必須項目
良いポートフォリオには、以下の6つの要素が必要です。
1. プロフィール・自己紹介
含めるべき情報:
- 名前(本名またはハンドルネーム)
- 職歴の概要
- エンジニアを目指したきっかけ
- 今後のキャリアビジョン
- 連絡先(メールアドレス、GitHubリンク、X/Twitter等)
ポイント: 長すぎる自己紹介は逆効果です。採用担当者は多忙なので、簡潔に要点をまとめましょう。目安は300〜500文字程度です。
良い例:
都内在住のWebエンジニア志望です。前職では営業職として5年間勤務していましたが、
業務効率化のためにExcelマクロを独学で習得したことをきっかけに、
プログラミングの面白さに目覚めました。
現在はReact/Node.jsを中心に学習しており、個人開発でWebアプリケーションを
複数作成しています。ユーザー視点を大切にしながら、実用的なサービスを
作ることを心がけています。
営業で培ったコミュニケーション能力を活かしながら、
チーム開発に貢献できるエンジニアを目指しています。
2. 技術スタック(スキルセット)
記載すべき内容:
- プログラミング言語(JavaScript、Python、Rubyなど)
- フレームワーク・ライブラリ(React、Vue.js、Railsなど)
- データベース(MySQL、PostgreSQL、MongoDBなど)
- インフラ・その他ツール(AWS、Docker、Gitなど)
レベルの明記方法: 単に「できます」と書くだけでなく、習熟度を明記すると親切です。
■ 言語
- JavaScript(実務レベル:個人開発で1年使用)
- Python(基礎レベル:学習中)
■ フロントエンド
- React.js(実務レベル:3つのアプリを開発)
- HTML/CSS(実務レベル:レスポンシブデザイン実装可能)
■ バックエンド
- Node.js/Express(実務レベル:REST API実装経験あり)
- Firebase(基礎レベル:認証機能の実装経験あり)
■ その他
- Git/GitHub(実務レベル:日常的に使用)
- Figma(基礎レベル:簡単なデザイン制作可能)
注意点: 触っただけのツールを「できます」と書くのは避けましょう。実際にプロジェクトで使用した経験があるものだけを記載するのが誠実です。
3. 制作物(プロジェクト)
これがポートフォリオの最も重要な部分です。
最低限必要な制作物の数:
- 3〜5個程度が理想
- 1つの完成度の高い作品があれば、2〜3個でもOK
各プロジェクトに含めるべき情報:
a) プロジェクト名とキャッチコピー
- 簡潔で分かりやすい名前
- 一言で何をするアプリか説明
例: 「TaskFlow – シンプルで使いやすいタスク管理アプリ」 「RecipeHub – レシピ共有SNS」
b) スクリーンショット・デモ動画
- 実際の画面を2〜4枚掲載
- 可能であればGIFアニメーションやデモ動画も
- レスポンシブ対応の場合は、PC/スマホ両方の画面を掲載
c) 機能説明
主要機能を箇条書きで簡潔に説明します。
例:
【主な機能】
✓ ユーザー登録・ログイン機能(Firebase Authentication)
✓ タスクのCRUD操作(作成・読込・更新・削除)
✓ カテゴリー別フィルタリング
✓ 期限通知機能
✓ レスポンシブデザイン対応
d) 使用技術
どの技術を使ったか明記します。
例:
【使用技術】
- フロントエンド: React.js, TypeScript, Tailwind CSS
- バックエンド: Node.js, Express
- データベース: PostgreSQL
- インフラ: Vercel
- その他: GitHub Actions(CI/CD)
e) 開発期間・人数
個人開発か、チーム開発かを明記します。
例: 「開発期間:2ヶ月(2024年1月〜2月) / 個人開発」
f) 工夫した点・アピールポイント
**これが最も重要です。**単に動くものを作っただけでなく、どんな工夫をしたのかを具体的に説明しましょう。
良い例:
【工夫した点】
1. パフォーマンス最適化
- React.memoを使用したコンポーネントの再レンダリング抑制
- 画像の遅延読み込みで初期表示を30%高速化
2. ユーザビリティ
- ドラッグ&ドロップでタスクの並び替えを実装
- スマホでも使いやすいようにボタンサイズを調整
3. セキュリティ
- XSS対策としてユーザー入力のサニタイズを実施
- JWT認証でセキュアなAPI通信を実現
悪い例: 「頑張って作りました」「デザインに気を使いました」←具体性がない
g) 苦労した点と解決方法
問題解決能力をアピールできる絶好のチャンスです。
例:
【苦労した点】
データベース設計で、タスクとカテゴリーの関連付けに悩みました。
当初は1対1の関係で設計していましたが、1つのタスクに複数の
カテゴリーを紐付けたいというニーズが出てきました。
【解決方法】
中間テーブルを作成し、多対多の関係を実装しました。
SQLのJOIN文を学習し直し、効率的なクエリを書けるように
なったことで、パフォーマンスも改善できました。
h) 今後の改善予定
「この作品はまだ終わっていない、さらに良くしていく」という姿勢を見せることで、成長意欲をアピールできます。
例:
【今後の予定】
- PWA対応でオフラインでも使えるように
- AIによるタスク優先度の自動提案機能
- チーム機能の追加(複数人でタスク管理)
i) リンク
- デモサイト(必須):実際に動いているアプリのURL
- GitHubリポジトリ(必須):ソースコードを公開
- 設計書等(あれば):ER図、画面遷移図など
重要: デモサイトは必ず動く状態にしておきましょう。「現在メンテナンス中」などは絶対にNGです。
4. GitHubアカウント
GitHubは現代のエンジニアにとって必須のツールです。ポートフォリオに必ずGitHubアカウントのリンクを掲載しましょう。
GitHubで評価されるポイント:
- コミット頻度(定期的に開発しているか)
- コードの品質(読みやすく保守性の高いコードを書いているか)
- README.mdの充実度(プロジェクトの説明が丁寧か)
- コミットメッセージの質(適切な粒度で変更内容を記録しているか)
GitHubプロフィールを充実させる方法:
- プロフィール画像を設定(アイコンでもOK)
- Bio(自己紹介)を記載
- Pinned repositories(ピン留め)で代表作を固定表示
- README.mdをプロフィールページに表示(ユーザー名と同じ名前のリポジトリを作成)
プロフィールREADME.mdの例:
## Hi there! 👋 I'm [Your Name]
未経験からWebエンジニアを目指して学習中です。
### 🔭 現在取り組んでいること
- React/TypeScriptを使ったSPA開発
- AWSを使ったインフラ構築の学習
### 🌱 学習中の技術
- Next.js
- Docker
### 📫 連絡先
- Email: your.email@example.com
- Twitter: @your_handle
### 📊 GitHub Stats
5. 技術ブログ・Qiita記事(推奨)
必須ではありませんが、技術ブログを書いている人は評価が高まります。
ブログで書くべき内容:
- 学習したことのまとめ
- エラーの解決方法
- 技術選定の理由
- ハマったポイントと解決策
メリット:
- アウトプット能力の証明
- 学んだ内容の定着
- 検索エンジン経由で採用担当者の目に留まる可能性
おすすめプラットフォーム:
- Qiita(日本のエンジニアコミュニティ)
- Zenn(マークダウンで書きやすい)
- note(非エンジニアにも読まれやすい)
- 個人ブログ(独自性を出せる)
6. 資格・学習履歴
記載すべき資格:
- 基本情報技術者
- 応用情報技術者
- AWS認定資格
- Oracle認定Javaプログラマ
- その他、関連する資格
学習プラットフォームの修了証:
- Udemy修了証
- Progateの学習記録
- ドットインストールの進捗
- LeetCodeのランク
注意点: 資格だけでは実務能力の証明にはなりません。あくまで制作物が最重要です。
ポートフォリオサイトの作り方【5ステップ】
それでは、実際にポートフォリオを作成する手順を見ていきましょう。
ステップ1:制作物を作る(最重要)
ポートフォリオサイトを作る前に、まず掲載する制作物を作りましょう。
よくある失敗: 「とりあえずポートフォリオサイトを作ってから、制作物を追加しよう」と考える人が多いですが、これは逆です。先に制作物を作らないと、使用技術やスキルが正確に記載できません。
初心者におすすめのプロジェクトアイデア
難易度:低
- ToDoリスト
- CRUD操作の基本を学べる
- LocalStorageでデータ永続化
- 所要時間:1週間
- 簡単な計算機アプリ
- ロジックの実装練習
- UIデザインの基礎
- 所要時間:3〜5日
- 天気予報アプリ
- API連携の練習
- 非同期処理の理解
- 所要時間:1週間
難易度:中
- ブログアプリ
- 記事のCRUD
- ユーザー認証
- マークダウンエディタ
- 所要時間:2〜3週間
- レシピ共有SNS
- 画像アップロード
- コメント機能
- いいね機能
- 所要時間:3〜4週間
- 家計簿アプリ
- データの可視化(グラフ)
- カテゴリー別集計
- CSV出力機能
- 所要時間:2〜3週間
難易度:高
- リアルタイムチャットアプリ
- WebSocket通信
- 複数ユーザー対応
- 既読管理
- 所要時間:4〜6週間
- ECサイト
- 商品管理
- カート機能
- 決済システム連携
- 所要時間:1〜2ヶ月
- マッチングサービス
- アルゴリズムの実装
- 通知機能
- メッセージング
- 所要時間:2〜3ヶ月
プロジェクト選びのポイント:
- 実用性があるものを選ぶ 「作って終わり」ではなく、実際に使えるものを作りましょう。自分が使いたいと思うものなら、モチベーションも維持しやすいです。
- 技術の幅を意識する 1つのプロジェクトで複数の技術を使う経験を積みましょう。フロントエンド、バックエンド、データベース、インフラなど。
- 独自性を出す チュートリアルの丸コピーはNGです。必ず何か独自の機能を追加しましょう。
例:ToDoリストに独自性を出す方法
- 音声入力でタスク追加
- AIによる優先度提案
- ポモドーロタイマー統合
- タスク達成時のアニメーション
- Slack/Discord連携
ステップ2:GitHubにコードを公開する
制作物ができたら、必ずGitHubに公開しましょう。
GitHubリポジトリの作成手順
- GitHubアカウント作成(無料)
- https://github.com にアクセス
- メールアドレスで登録
- 新規リポジトリ作成
- 画面右上の「+」→「New repository」
- Repository name: プロジェクト名(例:todo-app)
- Public を選択(必ず公開設定に)
- 「Add a README file」にチェック
- ローカルとリモートを接続
# プロジェクトフォルダで実行
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main
良いREADME.mdの書き方
README.mdは、あなたのプロジェクトの「顔」です。ここが充実していると、印象が大きく変わります。
必須項目:
# プロジェクト名
## 概要
このアプリについて1〜2文で説明
## デモ
[デモサイトURL](https://your-app.com)
## 機能一覧
- 機能1
- 機能2
- 機能3
## 使用技術
- フロントエンド: React.js 18.2.0
- バックエンド: Node.js 18.0.0
- データベース: PostgreSQL 14
- インフラ: Vercel
## セットアップ方法
\```bash
# リポジトリのクローン
git clone https://github.com/username/repo.git
# 依存関係のインストール
npm install
# 開発サーバーの起動
npm run dev
\```
## 環境変数の設定
\```
DATABASE_URL=your_database_url
API_KEY=your_api_key
\```
## 工夫した点
- パフォーマンス最適化について
- UX改善について
## 今後の予定
- 実装予定の機能1
- 実装予定の機能2
## ライセンス
MIT License
ポイント:
- 画像を使って視覚的に
- セットアップ方法を詳しく(他の人が動かせる)
- バッジを使ってかっこよく(オプション)
バッジの例:
ステップ3:制作物をデプロイする
作ったアプリは、必ずインターネット上で動く状態にしましょう。
おすすめのデプロイサービス
1. Vercel(最もおすすめ)
- 無料プランが充実
- Next.js、Reactに最適
- GitHubと連携で自動デプロイ
- 使い方:GitHubリポジトリを連携するだけ
手順:
- https://vercel.com にアクセス
- GitHubアカウントでサインアップ
- 「Import Project」→GitHubリポジトリを選択
- 「Deploy」ボタンをクリック
- 数分で公開完了!
2. Netlify
- Vercel同様、簡単デプロイ
- 静的サイトに最適
- フォーム機能などが無料で使える
3. Render
- バックエンドのデプロイに最適
- PostgreSQL、Redisも使える
- 無料プランあり
4. Firebase Hosting
- Googleのサービス
- 認証、データベースも一緒に使える
- PWA対応が簡単
5. GitHub Pages
- GitHubが提供する無料ホスティング
- 静的サイトのみ
- 独自ドメインも設定可能
GitHub Pagesの使い方:
- リポジトリの「Settings」→「Pages」
- Source で「main branch」を選択
- 「Save」をクリック
https://ユーザー名.github.io/リポジトリ名/で公開
注意点:
- デプロイ後、必ず動作確認を
- エラーが出ていないかチェック
- モバイルでも確認
ステップ4:ポートフォリオサイトを作成する
制作物の準備ができたら、いよいよポートフォリオサイトを作ります。
作成方法の選択肢
選択肢1:自作する(おすすめ度:★★★★★)
メリット:
- 自分のコーディング力を直接アピールできる
- 完全にカスタマイズ可能
- 技術力の証明になる
デメリット:
- 時間がかかる
- デザインセンスが必要
使用技術の例:
パターンA:シンプル
- HTML/CSS/JavaScript のみ
- Bootstrap や Tailwind CSS でデザイン
パターンB:モダン
- React.js + TypeScript
- Next.js(SEO対策も)
- styled-components
パターンC:バックエンドも
- React + Node.js
- お問い合わせフォームの実装
- 管理画面からの更新機能
自作する場合のポイント:
- レスポンシブデザイン必須
- 表示速度を意識(画像の最適化など)
- SEO対策(title、meta descriptionなど)
- アクセシビリティ(a11y)にも配慮
選択肢2:ノーコードツールを使う(おすすめ度:★★★☆☆)
使えるツール:
- Notion:最も簡単、テンプレートも豊富
- Wix:ドラッグ&ドロップで作成
- WordPress:ブログも兼ねられる
- STUDIO:日本製、デザイン性高い
- Webflow:デザイナー向け
メリット:
- 短時間で作れる
- デザインテンプレートが豊富
- 技術的なハードルが低い
デメリット:
- エンジニアとしてのスキルアピールにならない
- カスタマイズ性が低い
- 他の人と被りやすい
こんな人におすすめ:
- フロントエンドが苦手なバックエンド志望者
- とにかく早く転職活動を始めたい人
- デザインに自信がない人
選択肢3:テンプレートをカスタマイズ(おすすめ度:★★★★☆)
GitHubにある無料テンプレートをベースに、自分流にカスタマイズする方法です。
おすすめテンプレート:
- gatsby-starter-portfolio:Gatsby製、ブログ機能付き
- developer-portfolio:React製、シンプルで使いやすい
- portfolio-template:HTML/CSS/JS、軽量
使い方:
- テンプレートのリポジトリをfork
- 内容を自分のものに書き換え
- 色やフォントをカスタマイズ
- 機能を追加
メリット:
- ゼロから作るより早い
- プロのデザインがベース
- カスタマイズ力をアピールできる
注意点:
- 必ず大幅にカスタマイズすること
- テンプレートそのままはNG
ポートフォリオサイトの構成例
基本的なページ構成:
1. トップページ(Home)
- 簡単な自己紹介
- キャッチコピー
- 主要な制作物3つ
- CTAボタン(GitHubへのリンクなど)
2. プロフィール(About)
- 詳しい経歴
- エンジニアを目指した理由
- 強み・弱み
- 趣味・興味
3. スキル(Skills)
- 技術スタック一覧
- 習熟度の可視化(バーグラフなど)
- 学習中の技術
4. 制作物(Works / Projects)
- 各プロジェクトの詳細
- 画像・動画
- 使用技術
- 工夫した点
5. ブログ(Blog)※任意
- 技術記事
- 学習記録
- 外部ブログへのリンク
6. お問い合わせ(Contact)
- メールアドレス
- SNSリンク
- お問い合わせフォーム(任意)
シンプル版の構成(1ページ完結):
- ヘッダー(ナビゲーション)
- ヒーローセクション(キャッチコピー + 自己紹介)
- スキルセクション
- 制作物セクション(3〜5個)
- お問い合わせセクション
- フッター
デザインのポイント
1. 清潔感を最優先に
- 白を基調としたシンプルなデザイン
- 余白を十分に取る
- フォントは読みやすいものを(游ゴシック、Noto Sans JPなど)
2. 情報の優先順位を明確に
- 一番見せたいもの(制作物)を大きく
- 重要な情報は上部に配置
- スクロール量は最小限に
3. 統一感を持たせる
- カラースキームは3色まで
- ボタンのデザインを統一
- 余白の取り方を一定に
4. 過度な装飾は避ける
- アニメーションは控えめに
- 派手なエフェクトは不要
- 読みやすさ > かっこよさ
避けるべきデザイン:
- ❌ 背景が暗すぎる(文字が読みにくい)
- ❌ フォントが小さすぎる
- ❌ 色が多すぎる(5色以上)
- ❌ アニメーションが多すぎる
- ❌ 情報が詰め込まれすぎている
ステップ5:継続的に更新する
ポートフォリオは「作って終わり」ではありません。定期的な更新が重要です。
更新すべきタイミング:
- 新しい制作物ができたとき
- 新しい技術を習得したとき
- 既存の制作物に機能を追加したとき
- 転職活動の進捗に応じて
- 少なくとも月に1回は見直す
更新の具体例:
- 制作物の追加・削除
- スキルレベルの更新
- ブログ記事の追加
- デザインの改善
- パフォーマンスの最適化
GitHub の草(コントリビューション)を意識: 定期的にコミットすることで、GitHubのプロフィールに緑の草が生えます。これが継続的に学習している証拠になります。
実例:合格レベルのポートフォリオ構成
ここでは、実際に未経験から転職成功した人のポートフォリオを参考に、具体的な構成例を紹介します。
事例1:フロントエンドエンジニア志望のAさん
プロフィール:
- 前職:営業職(5年)
- 学習期間:8ヶ月
- 転職成功:自社開発企業
制作物:
1. タスク管理アプリ「TaskMaster」
【概要】
チーム向けのタスク管理アプリ。プロジェクト別にタスクを管理し、
進捗を可視化できる。
【主な機能】
- ユーザー認証(JWT)
- タスクのCRUD操作
- ドラッグ&ドロップでステータス変更
- プロジェクト別のカンバンボード
- 進捗レポート(グラフ表示)
- リアルタイム通知
【使用技術】
- Frontend: React, TypeScript, Tailwind CSS, Zustand
- Backend: Node.js, Express, PostgreSQL
- Infrastructure: Vercel(Frontend), Render(Backend)
- その他: JWT, Socket.io
【開発期間】2ヶ月(個人開発)
【工夫した点】
1. React.memoとuseMemoを活用し、再レンダリングを最小化
→ 大量のタスク表示でもスムーズな動作を実現
2. Zustandで軽量な状態管理を実現
→ Reduxより学習コストが低く、コード量も削減
3. Socket.ioでリアルタイム更新機能を実装
→ チームメンバーの変更が即座に反映される
【苦労した点】
WebSocketの接続管理に苦労しました。ページ遷移時の
再接続処理や、エラーハンドリングを適切に実装するのに
時間がかかりましたが、公式ドキュメントとStack Overflowを
参考に解決できました。
【リンク】
デモ: https://taskmaster-demo.vercel.app
GitHub: https://github.com/username/taskmaster
2. レシピ共有SNS「CookHub」
【概要】
料理好きが集まるレシピ共有プラットフォーム。
レシピの投稿、検索、お気に入り機能を実装。
【主な機能】
- レシピ投稿(画像アップロード対応)
- タグ・カテゴリー別検索
- いいね・コメント機能
- マイページ(投稿一覧、お気に入り一覧)
- レスポンシブデザイン
【使用技術】
- Frontend: Next.js 14, TypeScript, CSS Modules
- Backend: Supabase(BaaS)
- Storage: Cloudinary(画像管理)
- Infrastructure: Vercel
【開発期間】3週間(個人開発)
【工夫した点】
1. Next.jsのApp Routerを採用し、最新の開発手法を学習
2. Cloudinaryの変換機能で画像を自動最適化
→ 読み込み速度が40%向上
3. Supabaseの Row Level Security で安全なデータアクセス
【今後の予定】
- AI による材料からのレシピ提案機能
- 栄養計算機能
- レシピの印刷用PDFエクスポート
3. ポートフォリオサイト(自作)
【概要】
このポートフォリオサイト自体も制作物としてアピール。
【使用技術】
- React, TypeScript, Framer Motion(アニメーション)
- Vite(ビルドツール)
- Vercel
【工夫した点】
- Intersection Observer APIでスクロールアニメーション
- Lighthouse スコア 95点以上を達成
- ダークモード対応
技術ブログ:
- Qiitaで10記事投稿
- 「React初心者が躓いたuseEffectの落とし穴」が300いいね獲得
結果: 書類選考通過率:約60%(10社応募中6社通過) 最終的に第一志望の自社開発企業から内定
事例2:バックエンドエンジニア志望のBさん
プロフィール:
- 前職:経理職(3年)
- 学習期間:6ヶ月
- 転職成功:受託開発企業
制作物:
1. RESTful API「ShopAPI」
【概要】
ECサイト用のバックエンドAPI。商品管理、注文処理、
ユーザー認証などの機能を実装。
【主な機能】
- ユーザー認証・認可(JWT)
- 商品のCRUD操作
- 注文処理フロー
- 在庫管理
- 管理者権限機能
- API ドキュメント自動生成(Swagger)
【使用技術】
- Language: Python 3.11
- Framework: FastAPI
- Database: PostgreSQL, Redis(キャッシュ)
- ORM: SQLAlchemy
- Testing: pytest(カバレッジ85%)
- Infrastructure: Docker, AWS ECS
【開発期間】2ヶ月(個人開発)
【工夫した点】
1. Redisキャッシュで商品一覧のレスポンスを10倍高速化
2. SQLAlchemyで効率的なクエリを実装(N+1問題を回避)
3. pytestで包括的なテストコードを記述(カバレッジ85%)
4. Dockerで環境構築を簡略化
5. CI/CDパイプラインを構築(GitHub Actions)
【パフォーマンス】
- 商品一覧取得: 50ms以下
- 同時接続数: 1000リクエスト/秒に対応
【リンク】
API ドキュメント: https://shopapi-docs.com
GitHub: https://github.com/username/shop-api
2. 在庫管理システム「StockManager」
【概要】
中小企業向けの在庫管理システム。Webインターフェース付き。
【主な機能】
- 商品の入出庫管理
- 発注点管理(自動アラート)
- CSV一括登録・エクスポート
- ダッシュボード(在庫状況の可視化)
- バーコードスキャン対応
【使用技術】
- Backend: Ruby on Rails 7
- Frontend: Hotwire(Turbo, Stimulus)
- Database: PostgreSQL
- Infrastructure: Heroku
【開発期間】1.5ヶ月(個人開発)
【工夫した点】
Railsの規約に従った綺麗なコード設計を意識。
Serviceオブジェクトパターンで肥大化を防止。
3. 技術検証プロジェクト集
GitHubに小さな検証プロジェクトを複数公開:
- GraphQL API実装サンプル
- gRPC通信のサンプル
- マイクロサービスアーキテクチャの検証
- 各種デザインパターンの実装例
技術ブログ:
- Zennで15記事投稿
- 「FastAPIで作るスケーラブルなAPI設計」が人気
結果: 書類選考通過率:約50%(8社応募中4社通過) 受託開発企業でバックエンドエンジニアとして採用
事例3:インフラエンジニア志望のCさん
プロフィール:
- 前職:サーバー保守(2年、未経験歓迎の職場)
- 学習期間:10ヶ月
- 転職成功:SIer企業
制作物:
1. AWS構成図付きインフラ環境
【概要】
Webアプリケーションを想定したAWSインフラ環境を構築。
Terraformでコード化。
【構成】
- VPC設計(パブリック/プライベートサブネット)
- EC2(Web/Appサーバー)
- RDS(Multi-AZ構成)
- ALB(ロードバランサー)
- Auto Scaling
- CloudFront(CDN)
- S3(静的ファイル配信)
- Route53(DNS)
- CloudWatch(監視)
【使用技術】
- IaC: Terraform
- CI/CD: GitHub Actions
- Monitoring: CloudWatch, Grafana
- Container: Docker, ECS
【工夫した点】
1. Terraformでインフラをコード化
→ 環境の再現性を担保
2. Multi-AZ構成で可用性を確保
3. Auto Scalingで負荷に応じた自動スケール
4. CloudWatchアラームで異常を検知
【コスト最適化】
無料枠を活用し、月額5ドル以下で運用
【リンク】
構成図: https://github.com/username/aws-infrastructure/docs
GitHub: https://github.com/username/aws-infrastructure
2. 監視ダッシュボード構築
【概要】
Prometheus + Grafana でサーバー監視環境を構築
【機能】
- CPU/メモリ使用率の可視化
- ディスク容量監視
- アラート通知(Slack連携)
【使用技術】
- Prometheus, Grafana
- Docker Compose
- Node Exporter
【リンク】
デモダッシュボード: https://grafana-demo.com
3. 自動化スクリプト集
【概要】
業務でよく使う作業を自動化するシェルスクリプト集
【内容】
- バックアップ自動化スクリプト
- ログローテーション
- サーバーヘルスチェック
- 定期レポート生成
【使用技術】
- Bash, Python
- Cron
資格:
- AWS Certified Solutions Architect – Associate
- LinuC Level 1
結果: インフラ寄りのSIer企業から内定
よくある失敗例と改善策
未経験者がやりがちな失敗例を知っておくことで、同じ失敗を避けられます。
失敗例1:チュートリアルそのままの制作物
ダメな例: 「Progateの最終課題をそのまま掲載」 「Udemyのチュートリアルそのままを作品として提示」
なぜダメか: 採用担当者は多くのポートフォリオを見ています。チュートリアル通りの作品は一目で分かります。「自分で考えて作る力がない」と判断されます。
改善策: チュートリアルで学んだ技術を使って、オリジナルの機能を追加しましょう。
例:ToDoアプリの場合
- チュートリアル:基本的なCRUD機能のみ
- オリジナル追加機能:
- ドラッグ&ドロップで並び替え
- カレンダービュー
- リマインダー通知
- タグ機能
- ダークモード
失敗例2:動かない・未完成のプロジェクトを掲載
ダメな例: 「デモサイトにアクセスするとエラーが出る」 「README には『開発中』と書いてある」 「機能の半分が実装されていない」
なぜダメか: 完成度の低い作品は、むしろマイナス評価になります。「最後までやり遂げる力がない」と判断されます。
改善策:
- 動く状態の作品だけを掲載する
- 未完成なら「今後の予定」として正直に書く
- 小さくても完成した作品の方が評価される
失敗例3:見た目が悪い・UI/UXが考えられていない
ダメな例: 「デザインが1990年代のホームページみたい」 「ボタンが小さくてスマホで押せない」 「色のコントラストが低くて文字が読めない」
なぜダメか: エンジニアも最低限のデザインセンスが求められます。特に自社開発企業では、ユーザー視点で考える力が重視されます。
改善策:
- CSSフレームワークを使う(Tailwind CSS, Bootstrap)
- 既存のサービスのUIを参考にする
- デザインツール(Figma)で先に設計する
- レスポンシブデザインは必須
デザインの参考サイト:
- Pinterest(デザイン検索)
- Dribbble(プロのデザイン)
- Awwwards(優れたWebデザイン)
失敗例4:GitHubが放置されている
ダメな例: 「最後のコミットが半年前」 「草がまったく生えていない」 「コミットメッセージが『update』だけ」
なぜダメか: GitHubの活動状況は、学習の継続性を示す重要な指標です。放置されていると「もう勉強していない」と思われます。
改善策:
- 毎日コミットする習慣をつける(小さな変更でもOK)
- コミットメッセージは具体的に書く
- ❌ 「update」
- ✅ 「Add: ユーザー認証機能を追加」
- プロフィールREADMEを充実させる
失敗例5:説明が不十分・専門用語だらけ
ダメな例: 「SSR/SSGでISRも実装しました」(説明なし) 「アーキテクチャはMVVMです」(図がない)
なぜダメか: 採用担当者は必ずしも技術に詳しくありません。HR担当者が最初にチェックすることも多いです。専門用語だらけだと理解してもらえません。
改善策:
- 専門用語には簡単な説明を添える
- 図解を使って視覚的に説明
- 「なぜその技術を選んだのか」を説明
良い例:
【技術選定の理由】
Next.jsを採用した理由:
- SSR(サーバーサイドレンダリング)により、SEO対策とパフォーマンス向上を実現
- ファイルベースルーティングで開発効率UP
- Vercelとの相性が良く、デプロイが簡単
失敗例6:情報が古い・更新されていない
ダメな例: 「使用技術:React 16(現在は18が最新)」 「最終更新:2022年」
なぜダメか: IT業界は技術の進化が早いです。情報が古いと「最新技術をキャッチアップしていない」と思われます。
改善策:
- 定期的に情報を更新(最低でも3ヶ月に1回)
- 最新バージョンにアップデート
- 新しく学んだ技術を追加
失敗例7:量だけ多くて質が低い
ダメな例: 「制作物が10個もあるが、どれも簡単な課題レベル」 「同じようなアプリばかり」
なぜダメか: 量より質です。簡単な作品を10個並べるより、完成度の高い作品が3個ある方が評価されます。
改善策:
- 1〜2個の大きなプロジェクトに集中する
- 小さなプロジェクトは「その他の作品」としてまとめる
- 各作品で異なる技術を使う
ポートフォリオ作成のタイムライン
現実的なスケジュール例を紹介します。
パターンA:じっくり型(3ヶ月)
【1ヶ月目】制作物1つ目
Week 1-2: 要件定義、設計、技術選定
Week 3-4: 開発・デバッグ
【2ヶ月目】制作物2つ目 + ポートフォリオサイト着手
Week 1-2: 制作物2の開発
Week 3: ポートフォリオサイトの設計
Week 4: ポートフォリオサイトの実装開始
【3ヶ月目】制作物3つ目 + 全体の完成
Week 1-2: 制作物3の開発
Week 3: ポートフォリオサイト完成
Week 4: 全体の見直し・改善
このパターンが向いている人:
- 今すぐ転職する必要がない
- 完成度にこだわりたい
- 余裕を持って準備したい
パターンB:スピード型(1ヶ月)
【Week 1】制作物1(簡単なもの)
【Week 2】制作物2(メインプロジェクト)
【Week 3】ポートフォリオサイト作成
【Week 4】全体の仕上げ
このパターンが向いている人:
- すぐに転職活動を始めたい
- ある程度の技術力がある
- 時間的制約がある
注意点: 質が下がる可能性があるので、最低限の完成度は確保しましょう。
パターンC:段階的改善型(継続的)
【初期版(2週間)】
- 制作物1つ + 簡易ポートフォリオ
- これで転職活動スタート
【改善版(1ヶ月後)】
- 制作物追加
- ポートフォリオサイト改善
【完成版(2ヶ月後)】
- さらに制作物追加
- ブログ記事追加
- デザイン改善
このパターンが向いている人:
- 転職活動をしながら改善したい
- フィードバックをもらいながら進めたい
- 完璧主義で踏み出せない人
ポートフォリオのチェックリスト
公開前に、必ず以下の項目をチェックしましょう。
必須項目チェック
基本情報
- [ ] 名前・プロフィール写真(任意)
- [ ] 自己紹介文
- [ ] 連絡先(メール、GitHub、SNS)
- [ ] 技術スタック一覧
制作物(各プロジェクト)
- [ ] プロジェクト名と概要
- [ ] スクリーンショット(2枚以上)
- [ ] デモサイトのURL(必ず動く状態)
- [ ] GitHubリポジトリURL
- [ ] 使用技術の明記
- [ ] 主要機能の説明
- [ ] 工夫した点の記述
- [ ] 開発期間の記載
GitHub
- [ ] プロフィール画像設定
- [ ] Bio(自己紹介)記載
- [ ] Pinned repositories設定
- [ ] README.mdが充実している
- [ ] 最近のコミットがある(放置されていない)
品質チェック
動作確認
- [ ] すべてのデモサイトが正常に動作する
- [ ] エラーが出ていない
- [ ] リンク切れがない
- [ ] 画像が正しく表示される
レスポンシブ対応
- [ ] スマートフォンで表示確認
- [ ] タブレットで表示確認
- [ ] 各ブラウザで表示確認(Chrome, Safari, Firefox)
パフォーマンス
- [ ] ページの読み込みが遅くない(3秒以内)
- [ ] 画像が最適化されている
- [ ] Lighthouse スコアが80点以上(目安)
コンテンツ
- [ ] 誤字脱字がない
- [ ] 専門用語に説明がある
- [ ] 文章が読みやすい
- [ ] 情報が最新である
セキュリティ
- [ ] APIキーなどの機密情報が含まれていない
- [ ] .envファイルが.gitignoreに追加されている
- [ ] 個人情報が不要に含まれていない
ポートフォリオ作成後にやるべきこと
ポートフォリオが完成したら、以下のアクションを起こしましょう。
1. フィードバックをもらう
フィードバックを求める相手:
- エンジニアの友人・知人
- プログラミングスクールのメンター
- オンラインコミュニティ(Discord、Slackなど)
- X/Twitterで公開して意見を募る
フィードバックのお願いの仕方:
「未経験からエンジニア転職を目指しています。
ポートフォリオを作成したので、ご意見いただけると嬉しいです。
特に以下の点についてコメントいただけると助かります。
- 技術的に改善すべき点
- 説明が分かりにくい箇所
- 追加した方が良い情報
URL: https://your-portfolio.com
2. SNSで発信する
発信する場所:
- X/Twitter
- Qiita
- note
発信例:
【ポートフォリオ完成しました🎉】
未経験からWebエンジニアを目指して8ヶ月、
ついにポートフォリオが完成しました!
■ 制作物
- React製タスク管理アプリ
- Next.js製レシピ共有SNS
- FastAPI製REST API
技術的な質問や改善点など、
フィードバックいただけると嬉しいです!
#駆け出しエンジニアと繋がりたい #ポートフォリオ
3. 転職エージェントに登録
ポートフォリオができたら、本格的に転職活動を開始しましょう。
登録すべきエージェント:
- レバテックキャリア(エンジニア特化)
- マイナビIT AGENT(未経験者にも親切)
- ギークリー(IT/Web/ゲーム業界特化)
- ワークポート(IT業界全般)
- リクルートエージェント(求人数最多)
4. 応募書類にポートフォリオURLを記載
履歴書・職務経歴書への記載例:
【ポートフォリオ】
https://your-portfolio.com
【GitHub】
github.com
【技術ブログ】
qiita.com
5. 継続的な改善
転職活動をしながら、ポートフォリオを改善していきましょう。
改善のPDCAサイクル:
- Plan:どこを改善するか計画
- Do:実際に改善
- Check:面接での反応を確認
- Action:フィードバックを次に活かす
面接での質問から改善点を見つける: 面接で「これはどうやって実装したんですか?」と聞かれた部分は、説明を追加すべきポイントです。
まとめ:ポートフォリオ作成で大切な心構え
最後に、ポートフォリオ作成で最も大切なことをお伝えします。
完璧を目指さない
多くの未経験者が「完璧なポートフォリオを作らなきゃ」と考えて、いつまでも完成しません。60点のポートフォリオでも、ないよりは100倍マシです。
まずは最低限の完成品を作り、転職活動をしながら改善していきましょう。
量より質
制作物は3〜5個で十分です。10個の中途半端な作品より、3個の完成度の高い作品の方が評価されます。
特に1つは「メインプロジェクト」として、時間をかけて作り込みましょう。
オリジナリティを出す
チュートリアルの丸コピーは絶対にNGです。必ず何か独自の機能を追加し、「自分で考えて作った」ことをアピールしましょう。
継続的に更新する
ポートフォリオは「生きたドキュメント」です。定期的に更新し、成長し続けていることを示しましょう。
楽しむことを忘れない
ポートフォリオ作成は、あなたのスキルアップの過程そのものです。義務感で作るのではなく、「こんなものを作りたい」というワクワクを大切にしましょう。
楽しみながら作った作品は、面接でも自信を持って説明できます。
失敗を恐れない
未経験者なのだから、失敗して当たり前です。エラーが出たら学ぶチャンス、バグが見つかったら成長のチャンスと捉えましょう。
むしろ、「このエラーをどう解決したか」という経験談は、面接で高く評価されます。
自分のペースで進める
周りと比較して焦る必要はありません。SNSで「ポートフォリオ完成しました!」という投稿を見て焦るかもしれませんが、人それぞれペースは違います。
あなたのペースで、確実にステップアップしていきましょう。
コメント