ポートフォリオサイトは、開発者として自分のスキルや作品を発信するための重要なツールです。この記事では、このサイト「Karou Portfolio」を実例にしながら、企画から公開までの全工程を解説します。
全体の流れ
ポートフォリオサイトの作成は、大きく4つのフェーズに分かれます。
企画 — 何を伝えたいかを明確にする
まず、ポートフォリオサイトの目的を明確にします。
- ターゲット — 誰に見てもらいたいか（採用担当、クライアント、同業者）
- 見せたいもの — どんなスキルやプロジェクトをアピールするか
- ゴール — サイトを訪れた人にどんなアクションを取ってほしいか
私の場合は、個人開発のプロダクト（Stepbit、ねこゼリー等）を紹介し、開発者としてのブランドを構築することを目的にしました。
設計 — サイト構成を決める
必要なページと各ページの役割を設計します。
- トップページ — ファーストインプレッション。ヒーローセクション + 概要
- 自己紹介 — スキルセット、経歴、価値観
- プロジェクト — 作品の紹介。技術スタック、リンク付き
- ブログ — 知見の発信。SEOにも有効
- お問い合わせ — コンタクトフォーム
実装 — コードを書く
設計をもとに、実際にコードを書いていきます。このサイトではHTML/CSS/JavaScriptのみで構築しています。
フレームワークを使わない理由：
- シンプルな静的サイトにはオーバースペック
- 読み込み速度が速い
- ホスティングが簡単（Firebase Hostingで無料公開）
- HTML/CSS/JSの基礎力が身につく
公開 — デプロイする
完成したサイトを世界中からアクセスできるように公開します。
Firebase Hostingで公開する方法
このサイトはFirebase Hostingで公開しています。無料プランでも独自ドメインの設定やSSL対応ができるので、個人サイトには最適です。
手順
- Firebase CLIをインストール
- Firebaseプロジェクトを作成
- Firebase Hostingを初期化
- デプロイ
npm install -g firebase-tools
# 2. Googleアカウントでログイン
firebase login
# 3. プロジェクトの初期化
firebase init hosting
# 4. デプロイ（公開！）
firebase deploy
💡 ポイント：
firebase init の際に、公開ディレクトリを public に設定し、SPA（Single Page
App）の設定は「No」を選びましょう。静的サイトの場合はこれで十分です。
SEO対策の基本
せっかく作ったサイトも、検索エンジンに見つけてもらえなければ意味がありません。基本的なSEO対策を施しましょう。
メタタグ
title、description、keywordsを各ページに設定
OGPタグ
SNSでシェアされた時の表示を最適化
サイトマップ
sitemap.xmlで検索エンジンにページ構成を伝える
レスポンシブ
スマホ対応はGoogleの検索順位に影響
表示速度
軽量な構成でページ表示を高速化
構造化データ
JSON-LDでコンテンツの意味を検索エンジンに伝える
デザインのコツ
開発者のポートフォリオは「きれいさ」よりも「見やすさ」が重要です。以下のポイントを押さえましょう。
- 色は2〜3色に絞る — メインカラー + アクセントカラー + 背景色
- 余白を十分に取る — 詰め込みすぎると読みにくい
- フォントサイズは読みやすく — 本文は14px〜16px
- CTAボタンを目立たせる — 訪問者に次のアクションを促す
- ホバーエフェクトで操作感を出す — カードやボタンに微妙な動きを
💡 実例：
このサイトでは、メインカラーを
#2563eb（ブルー）、CSS変数で一元管理しています。色を変えたい時は変数の値を変えるだけでサイト全体に反映されるので、保守性が高くなります。
まとめ
ポートフォリオサイトは完璧を目指す必要はありません。大切なのは、まず公開してしまうこと。その後、少しずつ改善していけばOKです。
このサイトもバージョン1.0.0のリリースからスタートし、継続的にアップデートを重ねています。あなたも、まずは最小限の構成からスタートしてみませんか？