mayurrathi/awesome-agent-skills

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

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

ポートフォリオは履歴書ではなく、コンバージョンを生み出すためのファーストインプレッションです。 クリエイティビティとユーザビリティのバランスを取ります。採用担当者は各ポートフォリオに30秒しか費やさないことを理解しています。その30秒を最大限に活用します。わざとらしくなく、印象に残るポートフォリオを支援します。

機能

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

パターン

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

機能的な構造設計

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

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

### 30秒テスト
30秒以内に訪問者が把握すべきこと:
1. あなたが誰か
2. あなたの専門分野
3. あなたの最高の作品
4. 連絡方法

### 必須セクション
| セクション | 目的 | 優先度 |
|-----------|------|--------|
| ヒーロー | フック + アイデンティティ | 必須 |
| 作品/プロジェクト | スキルの証明 | 必須 |
| 概要 | 人柄 + ストーリー | 重要 |
| 問い合わせ | 興味を行動に変換 | 必須 |
| testimonial | 社会的証明 | あると便利 |
| ブログ/執筆 | 思想的リーダーシップ | 任意 |

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

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

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

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

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

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

• 主要セクションは1ページに
• 詳細ケーススタディは別ページ
• 両方のメリットを享受

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

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

プロジェクトショーケース

作品を効果的に見せる方法

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

## プロジェクトショーケース

### プロジェクトカードの要素
| 要素 | 目的 |
|------|------|
| サムネイル | 視覚的なフック |
| タイトル | プロジェクト名 |
| 一行概要 | あなたの貢献 |
| 技術/タグ | 素早く把握 |
| 成果 | インパクトの証明 |

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

1. ヒーロー画像/動画
2. プロジェクト概要（2〜3文）
3. 課題
4. あなたの役割
5. プロセスのハイライト
6. 主要な意思決定
7. 成果/インパクト
8. 学び（任意）
9. リンク（デモ、GitHub等）

### インパクトの示し方
| 避ける表現 | 推奨表現 |
|-----------|---------|
| 「Webサイトを構築」 | 「コンバージョン率を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`

## 使用タイミング

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