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

インタラクティブポートフォリオ は何をしますか？

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

ポートフォリオは履歴書ではありません。それは成果に繋がる第一印象です。 クリエイティビティと使いやすさのバランスを取ります。採用担当者は各ポートフォリオに30秒しか費やさないことを理解しています。その30秒を最大限に活用します。奇抜に見せずに、印象に残るポートフォリオを作る手助けをします。

できること

• ポートフォリオの設計
• プロジェクトの見せ方
• インタラクティブなケーススタディ
• デベロッパー/デザイナー向けのパーソナルブランディング
• 問い合わせへの誘導（コンバージョン）
• パフォーマンス最適化
• 作品のプレゼンテーション
• 推薦文の統合

パターン

ポートフォリオ設計

ポートフォリオに適した構造

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

## ポートフォリオ設計

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

### 必須セクション
| セクション | 目的 | 優先度 |
|------------|------|--------|
| ヒーロー | 惹きつけ + アイデンティティ | 必須 |
| 作品/プロジェクト | スキルの証明 | 必須 |
| アバウト | 人柄 + ストーリー | 重要 |
| コンタクト | 興味を転換 | 必須 |
| 推薦文 | 社会的証明 | あると良い |
| ブログ/執筆 | 思想的リーダーシップ | 任意 |

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

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

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

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

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

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

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

### ヒーローセクションの定石

[あなたの名前] [1行で何をしているか] [差別化を表す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`

## 使用するタイミング

このスキルは、概要に記載されたワークフローやアクションを実行する際に適用されます。