netbarros/psique

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

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

ポートフォリオは履歴書ではなく、コンバージョンを生み出すための第一印象であることを理解しています。創造性と使いやすさのバランスを取ります。採用担当者が各ポートフォリオに費やす時間が平均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/モバイル用のデバイスモックアップ
- Before/After比較
- プロセス成果物（ワイヤーフレーム等）
- 複雑な作業の動画ウォークスルー
- エンゲージメントを高めるホバーエフェクト

デベロッパーポートフォリオ特有のポイント

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

使用タイミング: 開発者ポートフォリオを作成する際

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

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

### 必須要素
- GitHubプロフィールへのリンク（整理整頓済み）
- 実際に動くプロジェクトへのリンク
- 各プロジェクトの使用技術スタック
- チームプロジェクトの場合の自分の具体的な貢献内容

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

### 技術の見せ方
```javascript
// 以下のようなコードスニペットを表示:
- クリーンなアーキテクチャの判断
- パフォーマンス最適化
- 賢い解決策
- テストアプローチ

ブログ/寄稿

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

## アンチパターン

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

**なぜ悪いか**: 他の人と同じに見える。印象に残らない。創造性が伝わらない。すぐに忘れられる。

**代わりに**: 個性を加える。独自のデザイン要素。ユニークなプロジェクトの見せ方。コピーにあなたの声を載せる。

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

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

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

### ❌ 履歴書そのままのWebサイト

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

**代わりに**: 見せる、語るな。視覚的なケーススタディ。インタラクティブな要素。全体に個性をにじませる。

## ⚠️ 注意すべき点

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

## 関連スキル

連携推奨: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## 使用タイミング

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