gérald-ica/dev-tool-configs

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

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

ポートフォリオは単なる履歴書ではなく、コンバージョンを生む第一印象であることを理解しています。創造性と使いやすさのバランスを取ります。採用担当者が各ポートフォリオに費やす時間は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/モバイル用デバイスモックアップ
- 改善前/改善後の比較
- プロセスアーティファクト（ワイヤーフレームなど）
- 複雑な作品向けのビデオウォークスルー
- エンゲージメントを高めるホバーエフェクト

開発者向けポートフォリオの詳細

開発者ポートフォリオに効果的な内容

使用タイミング: 開発者ポートフォリオを構築するとき

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

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

### 必須項目
- GitHubプロフィールリンク（整理済み）
- ライブプロジェクトへのリンク
- 各プロジェクトの技術スタック
- チームプロジェクトにおけるあなたの具体的な貢献

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

### 技術的なアピール
```javascript
// 以下のことを示すコードスニペットを表示：
- クリーンなアーキテクチャの決定
- パフォーマンスの最適化
- 巧妙な解決策
- テストアプローチ

ブログ/執筆

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

## アンチパターン

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

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

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

### ❌ スタイルだけで中身がない

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

**代わりに**: プロジェクトが先、スタイルは後。
実際の成果のある本物の仕事。
量より質。
広さより深さ。

### ❌ 履歴書のようなWebサイト

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

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

## ⚠️ 注意すべき課題

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

## 関連スキル

以下のスキルとの併用をおすすめします：`scroll-experience`、`3d-web-experience`、`landing-page-design`、`personal-branding`