発達障害エンジニアのポートフォリオ戦略｜特性を強みに変える見せ方

「GitHubに草は生えてるけど、それだけじゃダメ？」

GitHub = プログラマーが作品を公開するサイト 草 = GitHubで日々の活動が緑色で表示される様子

いいえ、ダメです。特にフルリモート転職では、ポートフォリオサイトがあなたの分身。会ったことのない採用担当者に、あなたの実力と人柄を伝える最強の武器になります。

ポートフォリオサイト = 自分の作品や実績をまとめたウェブサイト

この記事では、発達障害の特性を「強み」として見せるポートフォリオ作成術を、実例付きで解説します。

なぜポートフォリオが最強の武器なのか

フルリモート採用の現実

対面採用での判断基準

• 第一印象：40%
• コミュニケーション：30%
• 技術力：30%

フルリモート採用での判断基準

• ポートフォリオ：50%
• 技術力：40%
• その他：10%

つまり、ポートフォリオの出来が採用の半分を決める！

発達障害者にとってのメリット

1. 時間をかけて作り込める（ADHD・ASD共通）
2. 自分のペースで表現（対面のプレッシャーなし）
3. 視覚的にアピール（言葉より得意）
4. こだわりを発揮（細部まで作り込める）

特性別ポートフォリオ戦略

ADHD向け：創造性と情熱を前面に

デザインコンセプト

ADHDの強みを活かすデザインの特徴

色使い

• メインカラー：情熱的な赤系（#FF6B6B）
• サブカラー：爽やかな青緑系（#4ECDC4）
• アクセントカラー：明るい黄色系（#FFE66D）

動きのある演出

• なめらかなアニメーション効果
• カーソルを合わせると動く要素
• カスタムカーソル（独自のマウスポインター）

トップページの構成

印象的な自己紹介セクション

トップページには、訪問者の興味を一瞬で引く仕掛けを用意します：

1. 動く肩書き表示
   • 「フロントエンドエンジニア」
   • 「React愛好家」
   • 「UI/UXにこだわる人」
   • 「新技術大好き人間」 これらが自動的に切り替わって表示される
2. 動く背景
   • パーティクル（粒子）が動く背景
   • グラデーションが変化する背景
   • 幾何学模様がゆっくり動く背景

プロジェクト紹介の工夫

インタラクティブなプロジェクトカード

各プロジェクトカードに以下の要素を含めます：

技術バッジ

• 使用した技術を色分けしたバッジで表示
• React = 青、TypeScript = 紺、Next.js = 黒など
• 視覚的に技術スタックが一目で分かる

いいねボタン

• ハートマークのボタンを設置
• クリックすると数字が増える
• 訪問者の反応が分かる

リンクボタン

• 🚀 Demo（実際に動くものを見る）
• </> Code（プログラムコードを見る）

ASD向け：緻密さと専門性をアピール

構造化されたレイアウト

整理整頓されたナビゲーション

メニュー構成の例：

• 👤 About（自己紹介）
• 🛠 Skills（技術スキル）
• 📁 Projects（作品集）
• 💼 Experience（経歴）
• 📧 Contact（連絡先）

各セクションにアイコンを付けて視覚的に分かりやすくします。

詳細なスキルマップ

スキルレベルの視覚化

各技術スキルを以下の形式で表示：

React
経験年数：3年
習熟度：[████████░░] 90%

TypeScript
経験年数：2年
習熟度：[████████░░] 85%

Next.js
経験年数：1.5年
習熟度：[████████░░] 80%

バーグラフで習熟度を視覚的に表現し、正確な数値も併記します。

必須コンテンツと作り方

1. About（自己紹介）

ストーリーテリングで印象に残る自己紹介

ストーリー形式の例 「子供の頃からパズルが大好きで、プログラミングは最高のパズルだと気づきました。特にフロントエンド開発は、ロジックとクリエイティビティの融合が魅力です。」

強みをアピール

• 🎯 細部へのこだわり（ピクセルパーフェクト = 1ピクセル単位の完璧さ）
• 🚀 新技術への好奇心（常に学習中）
• ♿ アクセシビリティへの配慮（誰でも使いやすい設計）

2. Projects（作品集）

フィルタリング機能付きプロジェクト一覧

カテゴリボタンの設置

• All（すべて表示）
• Web Apps（ウェブアプリケーション）
• Libraries（プログラムライブラリ）
• UI/UX（デザイン系）

プロジェクト情報の記載項目

1. プロジェクト名
2. 簡潔な説明（1-2行）
3. 使用技術（タグで表示）
4. 主な機能（箇条書き3つ程度）
5. デモサイトへのリンク
6. ソースコードへのリンク

プロジェクト例

• タイトル：「タスク管理アプリ」
• 説明：「ADHD向けに作った、視覚的で楽しいタスク管理」
• 使用技術：React、TypeScript、Framer Motion
• 主な機能：
  • ドラッグ&ドロップでタスク移動
  • カラフルなタグ付け機能
  • 達成感を演出するアニメーション

3. Technical Blog（技術ブログ）

技術記事で知識をアピール

記事の構成要素

• タイトル（興味を引く内容）
• 投稿日
• タグ（関連技術）
• 概要（2-3行の要約）

記事例

1. 「React 18の新機能を試してみた」
   • 日付：2024年1月15日
   • タグ：#React #JavaScript
   • 概要：Suspenseとサーバーコンポーネントの実装例を紹介
2. 「ADHDエンジニアのための集中力ハック」
   • 日付：2024年1月10日
   • タグ：#Productivity #ADHD
   • 概要：ポモドーロテクニックをカスタマイズした方法を解説

技術的な実装のコツ

パフォーマンス最適化

パフォーマンス = ウェブサイトの表示速度や動作の軽さ

Lighthouseスコア100点を目指す Lighthouse = Googleが提供するウェブサイトの品質測定ツール

画像の最適化

• WebP形式を使用（ファイルサイズが小さい）
• 遅延読み込み（スクロールして見える時に読み込む）
• レスポンシブ画像（画面サイズに応じて最適な画像を表示）

フォントの最適化

• 表示の高速化設定
• 事前読み込み
• 必要な文字だけを読み込む

JavaScriptの最適化

• コード分割（必要な部分だけ読み込む）
• ファイルサイズの縮小
• 不要なコードの削除

アクセシビリティ対応

アクセシビリティ = 障害を持つ人も含めて誰でも使えるようにすること

必須の対応項目

1. スキップリンク
   • 「メインコンテンツへスキップ」リンクを設置
   • キーボードユーザーが素早く本文に移動できる
2. 適切な見出し構造
   • h1 → h2 → h3の順番を守る
   • 見出しの階層を正しく設定
3. 画像の代替テキスト
   • すべての画像にalt属性を設定
   • 例：「プロフィール写真：笑顔でパソコンに向かう私」
4. キーボード操作対応
   • すべてのリンクやボタンがTabキーで選択可能
   • フォーカス時の視覚的フィードバック

SEO対策

SEO = 検索エンジン最適化、Googleなどで見つかりやすくする工夫

基本的なSEO設定

1. ページタイトル
   • 「あなたの名前 - フロントエンドエンジニア」
2. 説明文（description）
   • 「React/TypeScriptを得意とするフロントエンドエンジニアのポートフォリオ」
3. OGP設定 OGP = SNSでシェアされた時の表示設定
   • タイトル、説明、画像を設定
   • TwitterやFacebookで綺麗に表示される
4. 構造化データ
   • 名前、職業、URLなどの情報を検索エンジンに伝える

デプロイと公開

デプロイ = 作ったサイトをインターネット上に公開すること

おすすめのホスティングサービス

Vercel（バーセル）

• メリット：
  • Next.jsとの相性が最高
  • GitHubと連携して自動デプロイ
  • 無料枠が十分
• 設定項目：
  • GitHub連携
  • 環境変数設定
  • カスタムドメイン設定

Netlify（ネトリファイ）

• メリット：
  • 簡単なデプロイ方法
  • お問い合わせフォーム機能
  • アクセス分析機能
• 設定項目：
  • ドラッグ&ドロップでデプロイ
  • 自動化設定

GitHub Pages

• メリット：
  • 完全無料
  • GitHubと完全統合
  • 高い信頼性
• 設定項目：
  • 専用ブランチの作成
  • 自動化の設定

カスタムドメインの取得

おすすめドメイン例

名前系：

• yourname.dev
• yourname.me
• yourname.tech

ブランディング系：

• frontend-yourname.com
• yourname-portfolio.dev
• code-with-yourname.com

価格：年間1,000〜3,000円程度

継続的な改善

アナリティクスの設置

アナリティクス = サイトの訪問者数や行動を分析するツール

Google Analytics 4の活用

• 訪問者数の確認
• どのページが人気か分析
• どこから訪問者が来たか確認
• 改善点の発見

A/Bテストで改善

A/Bテスト = 2つのバージョンを比較して、どちらが効果的か測定

テストの例

• デザインAとデザインBを50%ずつ表示
• どちらがより多くクリックされるか測定
• 効果的な方を採用

よくある失敗と対策

失敗1: 情報過多

❌ 悪い例

• プロジェクト：50個（多すぎて見きれない）
• スキル：100個（細かすぎて伝わらない）
• 文章：長すぎて読まれない

✅ 良い例

• プロジェクト：6-8個（質を重視して厳選）
• スキル：10-15個（得意なものに絞る）
• 文章：簡潔で読みやすい

失敗2: 更新されない

自動更新の仕組みを作る

GitHubから最新情報を自動取得：

• 最近更新したプロジェクトを自動表示
• コミット（更新）履歴を表示
• 活動グラフを表示

これにより、手動更新しなくても常に最新の状態を保てます。

まとめ：あなたの特性は最高の個性

ポートフォリオは、あなたの特性を「弱み」ではなく「強み」として見せる最高のツールです。

ADHD の方：

• 創造性豊かなデザイン
• インタラクティブな要素
• 情熱が伝わる表現

ASD の方：

• 緻密で構造化された設計
• 詳細なドキュメント
• 高品質なコード

完璧を求めすぎず、でも妥協もせず。 あなたらしさが伝わるポートフォリオを作りましょう！