はじめに
こんにちは、JodyCraft です。製造業の生産技術職として、C# を使った業務アプリ開発に 5 年ほど携わっています。
普段から C# の情報を探している中で、「具体的な業務アプリの製作事例」が世の中に意外と少ないことに気づきました。特に、社内で実際に使うツールをどう作っているかという実装例はほとんど見当たりません。
「自分の 5 年間の経験を発信すれば、同じように社内でツール開発に困っている人たちの助けになるのでは？」——それが個人開発を始めようと思ったきっかけです。
たった 3 時間で、6 ページ構成の Blazor WebAssembly ポートフォリオサイトを構築・公開しました。 通常なら 15〜20 時間はかかる作業です。
秘密は GitHub Copilot の AI エージェント との協働。本業が忙しく使える時間は 週 5 時間未満 でしたが、AI との分業により驚くほど短時間で完成しました。
この記事では、その過程と「AI に任せてよかった部分」「人間がやるべき部分」の切り分けについて共有します。
📋 この記事の前提
- C# の基本文法がわかる（変数、クラス、メソッド程度）
- Visual Studio または VS Code がインストール済み
- GitHub アカウントを持っている
- .NET 8 以降の SDK がインストール済み
- GitHub Copilot のサブスクリプションがあると手順を追体験しやすい（なくても読める）
なぜ Blazor WASM なのか
ポートフォリオサイトの技術選定では、いくつかの選択肢がありました。
| 選択肢 | メリット | デメリット |
|---|---|---|
| Hugo / Jekyll + GitHub Pages | 爆速デプロイ、学習コスト低 | C# スキルの証明にならない |
| Next.js + Vercel | モダンで実績になる | C# 専門家としてブレる |
| Blazor WASM + GitHub Pages | C# スキルの直接証明 | 学習中の技術、初回 DL が大きい |
私の答えは明確でした。「C# の専門家を名乗るなら、サイト自体が C# で作られているべき」。
正直に言うと、React や Next.js が主流の中で Blazor を選ぶのはリスクもありました。以前から Blazor には注目していましたが、「自分の C# 経験を活かしながらどこまで戦えるのか？」という不安はありました。それでも、「C# で Web アプリが作れる」という実績そのものが最大のアピールになると確信して選びました。
Blazor WebAssembly を選ぶことで、サイトを訪れた人に「あ、C# で Web アプリも作れるんだ」と感じてもらえます。ポートフォリオ自体が最大のデモアプリです。
完成したポートフォリオのトップページ。ダークブルー×グリーンのブランドカラーで統一。
AI 協働の開発フロー
今回の開発では、GitHub Copilot（Agent Mode / Chat）をフル活用しました。
1. 要件定義も AI と対話
まず、AI と対話形式で以下を決めていきました：
- ブランディング: 屋号（JodyCraft）、キーメッセージ、カラースキーム
- サイト構成: 6 ページ（Home / About / Skills / Projects / Contact / CSV ビューア）
- 技術設計: プロジェクト構造、コンポーネント設計、デプロイ方法
従来なら企画書を書くだけで数時間かかるところが、AI と会話しながら 質問→回答→決定 のサイクルで高速に要件が固まりました。
2. スキャフォールドとページ実装
# プロジェクト作成
dotnet new blazorwasm -o src/JodyCraft.Portfolio --framework net9.0
ここからが本題です。Copilot Agent Mode に以下を伝えました：
「エンジニアのポートフォリオサイトを作りたい。
ダークブルー×グリーンのデザインで、
Home / About / Skills / Projects / Contact / CsvViewer の 6 ページ。
Bootstrap を使い、レスポンシブ対応で。」
AI は以下を一気に生成してくれました：
- ✅ ナビゲーションバー（TopNav 形式に変更）
- ✅ Hero セクション付きのホームページ
- ✅ 経歴タイムライン付きの About ページ
- ✅ スキルバー付きの Skills ページ
- ✅ プロジェクトカード付きの Projects ページ
- ✅ Formspree 連携の Contact ページ
- ✅ カスタム CSS（デザインシステム）
正直、一発で大枠が完成したのには驚きました。ただ、最初の生成結果にはまだ「AIっぽさ」が残っていたので、「AIっぽくない洗練されたデザインで」という追加指示を出しました。このひと言で、テンプレート感のあるデザインから、オリジナリティのあるデザインに変わりました。AI への「指示の出し方」がクオリティを左右すると実感しました。
3. CSV データビューアの実装
デモアプリとして、CSV データを可視化するツール を作りました。
社内で試験装置や計測器から出力される CSV データを扱う際、装置ごとに形式が異なり、それらを整理して統計を取る作業に悩まされている現場を何度も見てきました。「この手間をどうにかしたい」——そんな課題感から生まれたデモです。
// CSV 読み込みとパース（核心部分）
private void ParseCsv(string content)
{
var lines = content.Split('\n', StringSplitOptions.RemoveEmptyEntries);
headers = lines[0].Split(',').Select(h => h.Trim()).ToList();
for (int i = 1; i < lines.Length; i++)
{
var cells = lines[i].Split(',').Select(c => c.Trim()).ToArray();
if (cells.Length == headers.Count)
rows.Add(cells);
}
}
グラフ描画には Chart.js を使い、Blazor WASM の JS Interop で連携しています。
// Chart.js との連携
await JS.InvokeVoidAsync("chartInterop.renderChart",
"dataChart", headers[colIndex], labels, values.ToArray());
これにより、C# のコードで計測データの統計分析（平均・標準偏差・最大・最小）を計算し、Chart.js でグラフ描画するデモが完成しました。
CSV データビューア。ファイルを読み込むとテーブル表示・統計値計算・Chart.js でグラフ描画まで自動で行う。
4. GitHub Actions で CI/CD パイプライン
# .github/workflows/deploy.yml（抜粋）
- name: Publish
run: dotnet publish -c Release -o release
- name: Fix base href
run: sed -i 's|<base href="/" />|<base href="/jodycraft-portfolio/" />|g' release/wwwroot/index.html
- name: Add .nojekyll
run: touch release/wwwroot/.nojekyll
- name: Copy index.html to 404.html
run: cp release/wwwroot/index.html release/wwwroot/404.html
GitHub Pages で Blazor WASM をホスティングする際のポイント：
- base href の修正: リポジトリ名に合わせる
- .nojekyll: Jekyll 処理を無効化（WASM ファイルの配信に必要）
- 404.html: SPA ルーティング対応
実は、最初デプロイしたとき README.md の内容が表示されてしまい、「なぜ？」と頼った瞬間がありました。原因は、GitHub Pages の Pages Source を 「Deploy from a branch」 にしていたこと。「GitHub Actions」 に切り替えることで解決しました。GitHub Actions の使用経験があまりなかったので、こういったトラブルも Copilot に確認しながら解決できたのは助かりました。
CSS 変数でブランドカラーを管理する
CSS 変数でブランドカラーを管理しています。
:root {
--color-primary: #1E3A5F; /* ダークブルー：信頼感 */
--color-accent: #4CAF50; /* グリーン：テクノロジー・成長 */
--color-bg: #0F1923; /* 背景 */
--color-bg-card: #162333; /* カード背景 */
--font-ja: 'Noto Sans JP', sans-serif;
--font-en: 'Inter', sans-serif;
}
現場の「信頼感」をダークブルーで、テクノロジーの「新しさ」をグリーンで表現しました。
AI + 人間の分業で見えた効率化のリアル
AI + 人間のベストな分業
| タスク | AI（Copilot） | 人間（私） |
|---|---|---|
| ブランディング方針 | 選択肢・候補を提示 | 最終決定 |
| HTML マークアップ | 一気に生成 | レビュー・微調整 |
| CSS (600 行超) | ほぼ全て生成 | ブランドカラーの指示 |
| ビジネスロジック | ドラフト生成 | ドメイン知識を注入 |
| デプロイ設定 | テンプレート生成 | 環境固有の調整 |
重要なのは、AI に任せる部分と自分で判断する部分を明確に分けることです。特に「ブランディング」「ドメイン知識」「最終的な品質判断」は人間側に残しました。
今回特に実感したのは、VS Code 上での対話的なサポートの威力です。AI が選択肢を提示し、自分が意思決定し、それがすぐ形になる。認識のズレがほとんどなく、「考えたことがそのまま形になる」感覚がありました。
時間の圧倒的な節約
通常、ポートフォリオサイトの構築は：
- デザイン決定：3-4 時間
- フロントエンド実装：10-15 時間
- CI/CD 構築：2-3 時間
- 合計：15-22 時間
AI 協働では：
- AI との要件定義対話：30 分
- AI によるコード生成 + 微調整：2 時間
- デプロイ設定：30 分
- 合計：約 3 時間
5 倍以上の生産性向上を体感しました。
まとめ
- Blazor WASM のポートフォリオは、C# スキルの直接証明になる
- AI（GitHub Copilot）との協働で、週 5 時間未満でもサイト構築は可能
- 社内ツール開発の実体験をデモアプリに落とし込むことで、差別化できる
- GitHub Pages + GitHub Actions でコストゼロの CI/CD が構築できる
これから、このポートフォリオを起点に C# コンサルティング事業を育てていきます。
「社内で同じようにツール開発に悩んでいる方」の役に立つ情報を、これからも発信していきます。
よくある質問
Q: Blazor WASM は SEO に弱くないですか？
A: ポートフォリオサイトのように「検索から集客する」用途には不向きな面があります。ただし今回のように GitHub Pages でホスティングして直接 URL を共有する使い方なら問題ありません。SEO が重要なサイトには Blazor Server や prerendering の検討をおすすめします。
Q: GitHub Pages の無料プランで Blazor WASM をホスティングできますか？
A: はい、できます。Blazor WASM は静的ファイルとして出力されるため、GitHub Pages の無料プランで問題なくホスティングできます。ただし .nojekyll ファイルの配置と 404.html の用意が必要です。
Q: GitHub Copilot のサブスクリプション費用に見合う効果はありますか？
A: 個人的には十分元が取れると感じています。今回の例では 15〜20 時間かかる作業が約 3 時間で完了しました。月額の費用を時給に換算すると、1 回のプロジェクトで回収できる計算です。
追記（2026-03-11）
この記事で Phase 0（基盤構築）が完了しました！
現在は Phase 1 として、GitHub Copilot SDK を使ったデスクトップ AI ワークスペース「Copilot Cowork」を開発中 です。
社内ツール開発の効率化を目的に、資料作成（pptx/xlsx/docx/pdf）や計測器制御（VISA/GPIB）を C# スキルで拡張しています。
開発過程は Zenn 記事シリーズとして発信予定ですので、フォローして見逃さないようにしてください 👇
- 📝 Zenn: @jodycraft
- 🐦 X: @jodycraft_dev
- 🌐 ポートフォリオ
- 📚 次回記事：「GitHub Copilot SDK の隠れた可能性 — CLI をデスクトップアプリ化」
📚 Copilot Cowork 開発シリーズ
この記事が参考になったら、ぜひ「いいね」で応援お願いします！
質問やフィードバックがあればコメント欄でお気軽にどうぞ。
📝 この記事は Zenn で最初に公開されました。
最新版はZennをご覧ください。