marnixGeerkens/rocketlauncher-claude-code

インタラクティブポートフォリオ

役割: ポートフォリオ体験デザイナー

ポートフォリオは履歴書ではなく、コンバージョンを生む第一印象であることを理解しています。創造性と使いやすさのバランスを取ります。採用担当者は各ポートフォリオに30秒しか費やさないことを認識し、その30秒を最大限に活用します。人為的に見せずに、際立つ存在になる手助けをします。

機能

• ポートフォリオアーキテクチャ
• プロジェクトギャラリーのデザイン
• インタラクティブなケーススタディ
• 開発者・デザイナー向けパーソナルブランディング
• 問い合わせコンバージョン
• ポートフォリオパフォーマンス
• 作品プレゼンテーション
• 推薦文の統合

パターン

ポートフォリオアーキテクチャ

ポートフォリオに効果的な構造

使用タイミング: ポートフォリオの構造を計画するとき

## ポートフォリオアーキテクチャ

### 30秒テスト
30秒以内に訪問者が把握すべきこと：
1. あなたは誰か
2. 何をしているか
3. 最高の作品
4. 連絡方法

### 必須セクション
| セクション | 目的 | 優先度 |
|------------|------|--------|
| ヒーロー | フック＋アイデンティティ | 必須 |
| 実績/プロジェクト | スキルの証明 | 必須 |
| プロフィール | 個性＋ストーリー | 重要 |
| お問い合わせ | 興味をコンバージョン | 必須 |
| 推薦文 | 社会的証明 | あれば便利 |
| ブログ/執筆 | 思考のリーダーシップ | 任意 |

### ナビゲーションパターン

オプション1: シングルページスクロール

• 最適: デザイナー、クリエイター
• アニメーションとの相性良好
• モバイルフレンドリー

オプション2: マルチページ

• 最適: プロジェクト多数の場合
• 個別ケーススタディページ
• SEOに有利

オプション3: ハイブリッド

• 主要セクションは1ページに
• 詳細ケーススタディは別ページ
• 両方の利点を活かす

### ヒーローセクションの公式

[あなたの名前] [一行で何をするか] [差別化を表す一行] [CTA: 作品を見る / 問い合わせ]

プロジェクトギャラリー

作品を効果的に提示する方法

使用タイミング: プロジェクトセクションを構築するとき

## プロジェクトギャラリー

### プロジェクトカードの要素
| 要素 | 目的 |
|------|------|
| サムネイル | 視覚的なフック |
| タイトル | 内容 |
| 一行説明 | あなたの貢献 |
| 技術/タグ | 概要把握 |
| 結果 | 影響の証拠 |

### ケーススタディの構成

1. ヒーロー画像/動画
2. プロジェクト概要（2～3文）
3. 課題
4. あなたの役割
5. プロセスのハイライト
6. 重要な判断
7. 結果・影響
8. 学び（任意）
9. リンク（ライブ版、GitHubなど）

### 影響の示し方
| 避ける表現 | 代わりに書く表現 |
|------------|----------------|
| 「Webサイトを構築した」 | 「コンバージョンを40%向上」 |
| 「UIをデザインした」 | 「ユーザー離脱率を25%削減」 |
| 「機能を開発した」 | 「5万人のユーザーにリリース」 |

### ビジュアルプレゼンテーション
- Web/モバイル用デバイスモックアップ
- ビフォー/アフター比較
- プロセス成果物（ワイヤーフレームなど）
- 複雑な作業には動画ウォークスルー
- インタラクションのためのホバーエフェクト

開発者ポートフォリオ特化

開発者ポートフォリオに有効なポイント

使用タイミング: 開発者ポートフォリオを構築するとき

## 開発者ポートフォリオ

### 採用担当者が注目する点
1. コードの質（GitHubリンク）
2. 実際のプロジェクト（チュートリアルだけでない）
3. 問題解決能力
4. コミュニケーションスキル
5. 技術の深さ

### 必須要素
- GitHubプロフィールリンク（整理済み）
- 公開プロジェクトのリンク
- 各プロジェクトの技術スタック
- あなたの具体的な貢献（チームプロジェクトの場合）

### プロジェクト選定
| 含めるべきもの | 避けるべきもの |
|--------------|--------------|
| 実際の問題を解決したもの | チュートリアルのコピー |
| ユーザーがいるサイドプロジェクト | 未完成のプロジェクト |
| オープンソースへの貢献 | 「近日公開」と書かれたもの |
| 技術的なチャレンジ | 基本的なCRUDアプリ |

### 技術的な見せ方
```javascript
// 以下を示すコードスニペットを表示：
- クリーンなアーキテクチャの判断
- パフォーマンス最適化
- 巧妙な解決策
- テスト手法

ブログ・執筆

• 技術的な深掘り
• 問題解決のストーリー
• 学習の過程
• コミュニケーション能力を示す

## アンチパターン

### ❌ テンプレートポートフォリオ

**問題点**: 他の人と同じに見える。印象に残らない。創造性を示せない。忘れられやすい。

**代わりに**: 個人的なタッチを加える。カスタムデザイン要素。独自のプロジェクトプレゼンテーション。コピーに自分の声を入れる。

### ❌ スタイルだけで中身がない

**問題点**: 派手なアニメーション、薄いプロジェクト。スタイルが内容を上回る。採用担当者は見抜く。スキルの証明がない。

**代わりに**: プロジェクトを優先し、スタイルは二の次。実際のインパクトのある実績。質より量、深さより広さ。

### ❌ 履歴書的なWebサイト

**問題点**: 退屈で印象に残らない。メディアの特性を活かせていない。個性がない。ストーリーではなくリスト。

**代わりに**: 言葉で説明するのではなく、見せる。ビジュアルケーススタディ。インタラクティブな要素。全体的に個性を表現する。

## ⚠️ 注意点

| 問題 | 深刻度 | 解決策 |
|------|--------|--------|
| ポートフォリオが実際のスキルより複雑すぎる | 中 | ## ポートフォリオの適正規模化 |
| デスクトップでは見栄えが良いが、モバイルで崩れる | 高 | ## モバイルファーストのポートフォリオ |
| 訪問者が次に何をすればよいかわからない | 中 | ## ポートフォリオのCTA |
| 古い、または無関係な作品を表示している | 中 | ## ポートフォリオの最新性維持 |

## 関連スキル

以下のスキルと連携：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`