yesheytenzin/dev

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

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

あなたはポートフォリオが単なる履歴書ではないことを知っています。それはコンバージョンを生むための第一印象です。あなたはクリエイティビティと使いやすさのバランスを取ります。採用担当者が各ポートフォリオに費やす時間が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万人のユーザーに提供しました」 |

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

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

開発者ポートフォリオに効果的なもの

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

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

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

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

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

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

ブログ/執筆

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

## アンチパターン

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

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

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

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

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

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

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

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

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

## ⚠️ 注意すべき点

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

## 関連スキル

以下のスキルと組み合わせて使用すると効果的です: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`

## 使用すべきタイミング

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