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

「GitHubに草は生えてるけど、それだけじゃダメ?」
GitHub = プログラマーが作品を公開するサイト 草 = GitHubで日々の活動が緑色で表示される様子
いいえ、ダメです。特にフルリモート転職では、ポートフォリオサイトがあなたの分身。会ったことのない採用担当者に、あなたの実力と人柄を伝える最強の武器になります。
ポートフォリオサイト = 自分の作品や実績をまとめたウェブサイト
この記事では、発達障害の特性を「強み」として見せるポートフォリオ作成術を、実例付きで解説します。
なぜポートフォリオが最強の武器なのか
フルリモート採用の現実
対面採用での判断基準
- 第一印象:40%
- コミュニケーション:30%
- 技術力:30%
フルリモート採用での判断基準
- ポートフォリオ:50%
- 技術力:40%
- その他:10%
つまり、ポートフォリオの出来が採用の半分を決める!
発達障害者にとってのメリット
- 時間をかけて作り込める(ADHD・ASD共通)
- 自分のペースで表現(対面のプレッシャーなし)
- 視覚的にアピール(言葉より得意)
- こだわりを発揮(細部まで作り込める)
特性別ポートフォリオ戦略
ADHD向け:創造性と情熱を前面に
デザインコンセプト
ADHDの強みを活かすデザインの特徴
色使い
- メインカラー:情熱的な赤系(#FF6B6B)
- サブカラー:爽やかな青緑系(#4ECDC4)
- アクセントカラー:明るい黄色系(#FFE66D)
動きのある演出
- なめらかなアニメーション効果
- カーソルを合わせると動く要素
- カスタムカーソル(独自のマウスポインター)
トップページの構成
印象的な自己紹介セクション
トップページには、訪問者の興味を一瞬で引く仕掛けを用意します:
- 動く肩書き表示
- 「フロントエンドエンジニア」
- 「React愛好家」
- 「UI/UXにこだわる人」
- 「新技術大好き人間」 これらが自動的に切り替わって表示される
- 動く背景
- パーティクル(粒子)が動く背景
- グラデーションが変化する背景
- 幾何学模様がゆっくり動く背景
プロジェクト紹介の工夫
インタラクティブなプロジェクトカード
各プロジェクトカードに以下の要素を含めます:
技術バッジ
- 使用した技術を色分けしたバッジで表示
- 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行)
- 使用技術(タグで表示)
- 主な機能(箇条書き3つ程度)
- デモサイトへのリンク
- ソースコードへのリンク
プロジェクト例
- タイトル:「タスク管理アプリ」
- 説明:「ADHD向けに作った、視覚的で楽しいタスク管理」
- 使用技術:React、TypeScript、Framer Motion
- 主な機能:
- ドラッグ&ドロップでタスク移動
- カラフルなタグ付け機能
- 達成感を演出するアニメーション
3. Technical Blog(技術ブログ)
技術記事で知識をアピール
記事の構成要素
- タイトル(興味を引く内容)
- 投稿日
- タグ(関連技術)
- 概要(2-3行の要約)
記事例
- 「React 18の新機能を試してみた」
- 日付:2024年1月15日
- タグ:#React #JavaScript
- 概要:Suspenseとサーバーコンポーネントの実装例を紹介
- 「ADHDエンジニアのための集中力ハック」
- 日付:2024年1月10日
- タグ:#Productivity #ADHD
- 概要:ポモドーロテクニックをカスタマイズした方法を解説
技術的な実装のコツ
パフォーマンス最適化
パフォーマンス = ウェブサイトの表示速度や動作の軽さ
Lighthouseスコア100点を目指す Lighthouse = Googleが提供するウェブサイトの品質測定ツール
画像の最適化
- WebP形式を使用(ファイルサイズが小さい)
- 遅延読み込み(スクロールして見える時に読み込む)
- レスポンシブ画像(画面サイズに応じて最適な画像を表示)
フォントの最適化
- 表示の高速化設定
- 事前読み込み
- 必要な文字だけを読み込む
JavaScriptの最適化
- コード分割(必要な部分だけ読み込む)
- ファイルサイズの縮小
- 不要なコードの削除
アクセシビリティ対応
アクセシビリティ = 障害を持つ人も含めて誰でも使えるようにすること
必須の対応項目
- スキップリンク
- 「メインコンテンツへスキップ」リンクを設置
- キーボードユーザーが素早く本文に移動できる
- 適切な見出し構造
- h1 → h2 → h3の順番を守る
- 見出しの階層を正しく設定
- 画像の代替テキスト
- すべての画像にalt属性を設定
- 例:「プロフィール写真:笑顔でパソコンに向かう私」
- キーボード操作対応
- すべてのリンクやボタンがTabキーで選択可能
- フォーカス時の視覚的フィードバック
SEO対策
SEO = 検索エンジン最適化、Googleなどで見つかりやすくする工夫
基本的なSEO設定
- ページタイトル
- 「あなたの名前 - フロントエンドエンジニア」
- 説明文(description)
- 「React/TypeScriptを得意とするフロントエンドエンジニアのポートフォリオ」
- OGP設定 OGP = SNSでシェアされた時の表示設定
- タイトル、説明、画像を設定
- TwitterやFacebookで綺麗に表示される
- 構造化データ
- 名前、職業、URLなどの情報を検索エンジンに伝える
デプロイと公開
デプロイ = 作ったサイトをインターネット上に公開すること
おすすめのホスティングサービス
Vercel(バーセル)
- メリット:
- Next.jsとの相性が最高
- GitHubと連携して自動デプロイ
- 無料枠が十分
- 設定項目:
- GitHub連携
- 環境変数設定
- カスタムドメイン設定
Netlify(ネトリファイ)
- メリット:
- 簡単なデプロイ方法
- お問い合わせフォーム機能
- アクセス分析機能
- 設定項目:
- ドラッグ&ドロップでデプロイ
- 自動化設定
GitHub Pages
- メリット:
- 完全無料
- GitHubと完全統合
- 高い信頼性
- 設定項目:
- 専用ブランチの作成
- 自動化の設定
カスタムドメインの取得
おすすめドメイン例
名前系:
ブランディング系:
価格:年間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 の方:
- 緻密で構造化された設計
- 詳細なドキュメント
- 高品質なコード
完璧を求めすぎず、でも妥協もせず。 あなたらしさが伝わるポートフォリオを作りましょう!
ご注意
この記事は個人の体験に基づくものであり、医療的なアドバイスではありません。 発達障害の診断や治療については、必ず専門医にご相談ください。 また、記載されている情報は執筆時点のものであり、最新の情報と異なる場合があります。