キャリア・資格

エンジニアのポートフォリオの作り方 - 実績で語る自己PR

2025年10月30日 📖 約10分

「エンジニアとして転職したいけど、実務経験がない」「スキルをアピールする方法が分からない」——そんな悩みを解決するのが「ポートフォリオ」です。実際に動くアプリを作って公開することで、履歴書では伝えきれない技術力を証明できます。

この記事では、MechaToraで15個のWebツールを公開し、実際に社内で評価された経験から、効果的なポートフォリオの作り方を解説します。何を作るべきか、どう公開するか、どう見せるかまで、具体的なノウハウをお伝えします。

なぜポートフォリオが重要なのか

採用担当者が見るポイント

転職活動で、採用担当者がポートフォリオでチェックするのは：

実際に動くものを作れるか：理論だけでなく実装力
コードの品質：読みやすさ、保守性
技術の幅：どんな技術を使えるか
問題解決能力：どんな課題をどう解決したか
継続力：継続的に学習・開発しているか

私のポートフォリオの効果

MechaToraのポートフォリオを作ったことで、以下の成果がありました：

社内評価向上：人事部で「データに強いエンジニア」として認知
副業案件獲得：ポートフォリオ経由で3件の依頼
技術力の証明：面接で「実際のコードを見せてください」と言われた際に即提示
モチベーション維持：公開することで学習が継続

良いポートフォリオの3要素

1. 実用性のあるアプリ

Todoリストやメモアプリだけでは差別化できません。以下のような実用的なアプリが評価されます：

実際の問題を解決：自分や他人が使いたいと思うもの
独自性：既存サービスにない機能・切り口
完成度：中途半端ではなく、実際に使えるレベル

MechaToraの例：

地震モニター：リアルタイムで地震情報を通知（既存にない機能）
日本酒検索：楽天APIで3万種類から検索（実用的）
資格試験カレンダー：年間600試験を一覧表示（独自データ）

2. 技術スタックの明示

使った技術を明確に示すことで、スキルセットが一目で分かります：

## 技術スタック

### フロントエンド
- HTML5 / CSS3 / JavaScript (ES6+)
- React 18.2.0
- Tailwind CSS

### バックエンド
- Node.js 18.x
- Express 4.18
- Firebase Firestore

### インフラ
- GitHub Pages
- Firebase Hosting
- Cloudflare CDN

### ツール
- Git / GitHub
- VS Code
- Figma（デザイン）

3. ソースコードの公開

GitHubでソースコードを公開することで、コーディングスキルを直接評価してもらえます：

README.md：プロジェクトの概要、セットアップ手順
コメント：適度なコメントで意図を明示
コミット履歴：段階的な開発プロセスを示す
Issue・PR：バグ修正や機能追加の履歴

ポートフォリオに載せるべきプロジェクト

最低3つ、理想は5〜10個

数	評価	コメント
1〜2個	不十分	継続力が疑われる
3〜5個	合格ライン	基本的な技術力を証明できる
6〜10個	高評価	技術の幅と継続力をアピール
11個以上	かなり高評価	ただし質も重要

バランスの取れたプロジェクト構成

以下のように、異なる種類のプロジェクトを組み合わせると効果的です：

1. 基礎力を示すプロジェクト（1〜2個）

Todoアプリ（CRUD操作の基本）
天気予報アプリ（API連携の基本）
ブログサイト（静的サイトの基本）

2. 実用的なプロジェクト（2〜3個）

実際に使えるツール・サービス
特定の問題を解決するアプリ
データ可視化ツール

3. 技術力を示すプロジェクト（1〜2個）

リアルタイム通信（WebSocket、Firebase）
複雑な状態管理（Redux、Zustand）
パフォーマンス最適化

MechaToraのプロジェクト構成

私のポートフォリオ（15個）の内訳：

API連携系：5個（地震モニター、日本酒検索、天気予報など）
データ可視化系：3個（資格試験カレンダー、宝くじマップ、給与計算）
実用ツール系：4個（料理提案、X投稿文生成、献立提案など）
基礎スキル系：3個（ポートフォリオサイト、ブログ、ランディングページ）

ポートフォリオサイトの作り方

必須要素

自己紹介：名前、スキルセット、経歴
プロジェクト一覧：作品を見やすく配置
技術スタック：使える技術を明記
GitHub / 連絡先：リンクを明示

シンプルなHTML構成例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MechaTora - Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ヒーローセクション -->
    <section class="hero">
        <h1>MechaTora</h1>
        <p>社労士 × エンジニア</p>
        <p>HTML/CSS/JavaScript, R言語, データ分析</p>
    </section>

    <!-- プロジェクト一覧 -->
    <section class="projects">
        <h2>プロジェクト</h2>
        <div class="project-grid">
            <!-- プロジェクトカード -->
            <div class="project-card">
                <img src="earthquake-monitor.jpg" alt="地震モニター">
                <h3>地震モニター</h3>
                <p>気象庁APIを使ったリアルタイム地震情報通知</p>
                <div class="tech-stack">
                    <span>JavaScript</span>
                    <span>Leaflet.js</span>
                    <span>API連携</span>
                </div>
                <div class="links">
                    <a href="https://mechatora.com/earthquake-monitor">デモ</a>
                    <a href="https://github.com/mechatora/earthquake-monitor">GitHub</a>
                </div>
            </div>

            <!-- 他のプロジェクトカード... -->
        </div>
    </section>

    <!-- スキルセクション -->
    <section class="skills">
        <h2>技術スタック</h2>
        <div class="skill-category">
            <h3>フロントエンド</h3>
            <ul>
                <li>HTML5 / CSS3 / JavaScript (ES6+)</li>
                <li>React, Vue.js</li>
                <li>Responsive Design</li>
            </ul>
        </div>
        <!-- 他のカテゴリ... -->
    </section>

    <!-- コンタクトセクション -->
    <section class="contact">
        <h2>お問い合わせ</h2>
        <p>GitHub: <a href="https://github.com/mechatora">@mechatora</a></p>
        <p>Email: contact@mechatora.com</p>
    </section>
</body>
</html>

デザインのコツ

シンプルに：派手な演出より、見やすさ重視
レスポンシブ対応：スマホでも見やすく
読み込み速度：画像を圧縮、遅延読み込み
アクセシビリティ：適切なalt属性、コントラスト

テンプレートの活用

デザインが苦手な場合は、無料テンプレートを活用：

HTML5 UP：無料の高品質テンプレート
Bootstrap：レスポンシブ対応が簡単
Tailwind CSS：ユーティリティファーストCSS

GitHubを効果的に使う

README.mdの書き方

プロジェクトごとに、以下の内容を含むREADME.mdを作成：

# 地震モニター

リアルタイムで地震情報を取得して通知するWebアプリ

## デモ
https://mechatora.com/earthquake-monitor

## スクリーンショット
![地震モニター](screenshot.png)

## 機能
- 気象庁APIから最新の地震情報を取得（30秒ごとにポーリング）
- 震度5弱以上でブラウザ通知
- Leaflet.jsで震源地を地図に表示
- 過去24時間の地震履歴を一覧表示

## 技術スタック
- フロントエンド: HTML, CSS, JavaScript
- ライブラリ: Leaflet.js
- API: 気象庁API
- ホスティング: GitHub Pages

## セットアップ
```bash
git clone https://github.com/mechatora/earthquake-monitor
cd earthquake-monitor
# ローカルサーバーで起動（Live Serverなど）
```

## 開発の背景
2024年の元日に能登半島で大きな地震があり、リアルタイムで情報を知る手段が必要だと感じたため開発しました。

## 今後の改善予定
- [ ] WebSocket対応（ポーリング→リアルタイム）
- [ ] 震度別の色分け
- [ ] 通知設定のカスタマイズ

## ライセンス
MIT

GitHubプロフィールの最適化

# 特別なリポジトリ（ユーザー名と同じ名前）を作成

# README.md の例
# Hi, I'm MechaTora 👋

社労士 × エンジニアとして、人事データ分析とWebアプリ開発をしています。

## 🛠 技術スタック
- **言語**: JavaScript, R, HTML/CSS
- **フレームワーク**: React, Vue.js
- **ツール**: Git, Firebase, Leaflet.js

## 📊 統計
![GitHub Stats](https://github-readme-stats.vercel.app/api?username=mechatora&show_icons=true)

## 🚀 最近のプロジェクト
- [地震モニター](https://github.com/mechatora/earthquake-monitor): リアルタイム地震情報
- [日本酒検索](https://github.com/mechatora/sake-search): 楽天API連携

## 📫 連絡先
- Website: https://mechatora.com
- Email: contact@mechatora.com

コミットメッセージの書き方

分かりやすいコミットメッセージで、開発プロセスを示します：

# 良い例
feat: 震度5弱以上でブラウザ通知を追加
fix: 地図の初期位置が日本の中心になるよう修正
docs: README.mdにセットアップ手順を追加
refactor: API呼び出しを別ファイルに分離

# 悪い例
修正
バグ直した
更新

ポートフォリオの公開方法

1. GitHub Pages（無料・おすすめ）

# リポジトリ設定 → Pages → Source: main branch
# https://username.github.io/ でアクセス可能

# カスタムドメインも設定可能
# https://mechatora.com/

2. Netlify / Vercel

GitHubリポジトリと連携
プッシュするだけで自動デプロイ
無料プランで十分

3. Firebase Hosting

HTTPS自動、CDN配信
月10GB無料
CLIで簡単デプロイ

実際の面接での使い方

事前準備

デモを用意：実際に動かして見せられるように
説明を練習：各プロジェクトを1分で説明
質問を想定：「なぜこの技術を選んだか」など

面接での見せ方

概要説明（30秒）：「どんなアプリか」を簡潔に
技術説明（30秒）：使った技術とその理由
デモ（1分）：実際に操作して見せる
学び（30秒）：開発で得た知見

私の例：

「地震モニターは、気象庁APIを使ったリアルタイム地震情報通知アプリです。JavaScriptでAPIを30秒ごとにポーリングし、Leaflet.jsで地図に震源地を表示します。開発の中で、API Rate Limitingへの対処法や、リアルタイム通知の実装を学びました。実際に使っており、震度5以上の地震を見逃さずキャッチできています。」

まとめ

効果的なポートフォリオのチェックリスト

✅ 最低3つ以上のプロジェクト
✅ 実用的で独自性のあるアプリ
✅ GitHub でソースコード公開
✅ 各プロジェクトに詳細なREADME.md
✅ デモサイトが実際に動く
✅ レスポンシブ対応
✅ 技術スタックを明記
✅ 継続的に更新

ポートフォリオ作成のロードマップ

1ヶ月目：基礎プロジェクト1つ（Todoアプリなど）
2〜3ヶ月目：実用的なプロジェクト2つ
4ヶ月目：ポートフォリオサイト作成
5ヶ月目以降：継続的にプロジェクト追加

ポートフォリオは、作って終わりではありません。継続的に更新し、新しい技術を学び続ける姿勢を示すことが重要です。MechaToraも、2年間で15個まで増やし、今も月1個ペースで追加しています。

まずは小さなプロジェクトから始めて、徐々に拡充していきましょう！