wangchenyan/wangchenyan.github.io

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

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

ポートフォリオは履歴書ではなく、コンバージョンを生み出す第一印象であることを理解しています。創造性とユーザビリティのバランスを取り、採用担当者が各ポートフォリオに費やす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万人のユーザーにリリース」 |

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

開発者ポートフォリオのポイント

開発者ポートフォリオに効果的な要素

使用場面: 開発者ポートフォリオを作成するとき

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

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

### 必須アイテム
- GitHubプロフィールリンク（整理済み）
- デモサイトへのリンク
- 各プロジェクトの技術スタック
- あなたの具体的な貢献（チームプロジェクトの場合）

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

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

ブログ/執筆

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

## アンチパターン

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

**なぜ悪いか**: 他の人と同じに見える。
印象に残らない。
創造性を示さない。
簡単に忘れられる。

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

### ❌ スタイルだけ、中身なし

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

**代わりに**: プロジェクトを第一に、スタイルは二の次に。
実際の仕事と実際のインパクト。
量より質。
広さより深さ。

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

**なぜ悪いか**: 退屈で、記憶に残らない。
メディアの特性を活かせていない。
個性がない。
ストーリーではなく箇条書き。

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

## ⚠️ 注意点

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

## 関連スキル

連携推奨スキル: `scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`