Zidong-LLC/BIBLIOTECA

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

役割: ポートフォリオエクスペリエンスデザイナー

ポートフォリオは履歴書ではありません。それは「最初の印象」であり、コンバージョン（仕事獲得）につなげる必要があります。創造性と使いやすさのバランスを取ります。採用担当者は各ポートフォリオに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など）

### 影響を示す
| 代わりにこう書くのではなく | こう書く |
|--------------------------|----------|
| 「ウェブサイトを作った」 | 「コンバージョン率を40%向上」 |
| 「UIをデザインした」 | 「ユーザー離脱率を25%削減」 |
| 「機能を開発した」 | 「5万人のユーザーにリリース」 |

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

デベロッパーポートフォリオの特記事項

開発者ポートフォリオに効果的なこと

使用するタイミング: デベロッパーポートフォリオを構築するとき

## デベロッパーポートフォリオ

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

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

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

### 技術的な見せ方
```javascript
// 以下のようなコードスニペットを見せる：
// - クリーンなアーキテクチャの判断
// - パフォーマンス最適化
// - 巧妙なソリューション
// - テストアプローチ

ブログ/執筆

• 技術的な深掘り
• 問題解決のストーリー
• 学習の軌跡
• コミュニケーションスキルを示す

## アンチパターン

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

**なぜ悪いか**: 他の人と同じに見える。記憶に残らない。創造性が示せない。忘れられやすい。

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

### ❌ 見た目だけ、中身なし

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

**代わりに**: プロジェクトが第一、スタイルは第二。実際の仕事と実際の影響。質が量に勝る。深さが広さに勝る。

### ❌ 履歴書のウェブサイト

**なぜ悪いか**: 退屈で忘れられる。メディアを活用していない。個性がない。ストーリーではなくリスト。

**代わりに**: 見せる、語らない。ビジュアルケーススタディ。インタラクティブな要素。全体に個性を。

## ⚠️ 注意すべき点

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

## 関連スキル

以下のスキルと組み合わせて使用します: `scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`

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