ポートフォリオの作り方

ポートフォリオをPDF化し、オフラインで提出する方法

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • この記事では「ポートフォリオをPDF化し、オフラインで提出する方法」を ポートフォリオ作成 の現場で使える形で整理します
  • なぜWebエンジニアにもPDF版ポートフォリオが必要なのか？ をおさえれば、現場で迷ったときに立ち戻れる
  • PDFポートフォリオに掲載すべき必須項目と構成 をおさえれば、現場で迷ったときに立ち戻れる
  • 1. 表紙とキャッチコピー をおさえれば、現場で迷ったときに立ち戻れる
  • 2. スキルセットの可視化 をおさえれば、現場で迷ったときに立ち戻れる

ポートフォリオをPDF化し、オフラインで提出する方法 とは

エンジニア転職で差がつく「PDF版ポートフォリオ」の作り方を解説。作成のメリットから、GoogleスライドやMarkdownを使った具体的な書き出し方法、提出時のマナー、オフライン面接での活用術まで詳しく紹介します。

なぜWebエンジニアにも「PDF版ポートフォリオ」が必要なのか？

結論先出し — PDF版ポートフォリオは 環境非依存 で 採用担当者の手元に確実に届く 資料です。Web版と二段構えにすることで、選考通過率が体感で大きく変わります。

エンジニアの転職活動において、GitHubのURLやデプロイ済みのポートフォリオサイトを送ることは一般的です。しかし、実は「PDF形式のポートフォリオ」をあわせて準備しておくことで、採用確率を劇的に高められることをご存知でしょうか？

Webサイトとしてのポートフォリオには、動的な動作を確認できるという強みがありますが、PDF化したポートフォリオには以下の3つの大きなメリットがあります。

  1. 閲覧環境に左右されない安定性は企業の社内セキュリティ制限により、外部サイト（GitHub PagesやVercelなど）へのアクセスがブロックされるケースがあります。PDFであれば、オフライン環境やセキュアなPCでも確実に閲覧してもらえます。
  2. 採用担当者の利便性は人事担当者は複数の候補者を比較する際、提出資料を印刷したり、社内の管理システムにアップロードしたりします。PDFは管理がしやすく、コメントを書き込みやすいため、選考フローに乗りやすいという特徴があります。
  3. 情報の凝縮とストーリーテリングはWebサイトは情報が分散しがちですが、PDFは「読む順番」を固定できるため、あなたの技術的な成長や課題解決のプロセスを、意図した通りの物語として伝えることができます。

このレッスンでは、Webエンジニアとして一歩差をつけるための「PDFポートフォリオ」の作り方と、オフラインでの効果的な活用術を解説します。

diagram (will load when visible)

PDFポートフォリオに掲載すべき必須項目と構成

PDF版はWeb版のコピーであってはいけません。限られたページ数の中で、「あなたの技術力」と「問題解決能力」を最大限にアピールするための構成を意識しましょう。

1. 表紙とキャッチコピー

第一印象を決定づける表紙です。「名前」「肩書き（例：Railsエンジニア）」「GitHub URL」を明記します。また、「エンジニアとして大切にしている価値観」を1行で添えると、印象に残りやすくなります。

2. スキルセットの可視化

単なる言語の羅列ではなく、「何ができるか」をレベル別に整理します。

  • 言語・フレームワーク（実務レベル / 学習中）
  • インフラ・ツール（AWS, Docker, CI/CDなど）
  • 開発スタイル（スクラム開発、TDDなど）

3. プロジェクトの詳細（1プロジェクトにつき2〜3ページ）

ここがPDFのメインです。以下の構成で記述します。

  • プロジェクト概要は何のためのアプリか、解決した課題は何か。
  • 使用技術スタックは選定理由も含めて記載。
  • こだわったポイントは技術的な難所と、それをどう克服したか。
  • システム構成図はアーキテクチャ図を載せることで、全体像を把握する能力を証明します。
  • 実際の画面（スクリーンショット）はUIのこだわりや操作感を伝えます。

4. コンタクト情報

最後に必ず、連絡先、GitHub、Qiita/Zenn、X（Twitter）などのリンクをまとめます。PDF内でもハイパーリンクを機能させることが重要です。

diagram (will load when visible)

ポートフォリオをPDF化する3つの具体的な手法

技術力やデザインスキルに合わせて、最適な作成方法を選びましょう。

方法A：Google スライド / PowerPoint で作成（推奨）

最も柔軟にレイアウトを調整できる方法です。デザインに自信がない方でも、シンプルなテンプレートを使えば清潔感のある資料が作れます。

  • メリットは図解の配置が容易。修正が簡単。
  • コツはページサイズを「A4」に設定し、1ページあたりの文字数を抑えて余白を意識します。

方法B：Markdown + VS Code 拡張機能（エンジニア向け）

普段使い慣れたMarkdown記法で作成し、PDFとして書き出す方法です。VS Codeの拡張機能「Markdown PDF」などを使用します。

  • メリットはテキストベースなので管理が楽。コードブロックを綺麗に表示できる。
  • コツはCSSテーマをカスタマイズして、見た目のプロっぽさを演出しましょう。

方法C：ブラウザの印刷機能（既存サイトがある場合）

作成済みのポートフォリオサイトを「Ctrl + P（印刷）」からPDF保存する方法です。

  • メリットは最も手軽。
  • 注意点はレイアウトが崩れやすいため、必ず@media printなどのCSSを調整し、印刷専用スタイルを当てる必要があります。不必要なナビゲーションバーやフッターは非表示にしましょう。

まずは使い慣れているツールで1〜2ページ作ってみるのがおすすめです。完璧なデザインを目指して時間をかけすぎるより、まずは「情報を整理して出力する」感覚を掴んでいきましょう！

手法向いている人デザインの自由度作成スピード
Google スライド全員（特に未経験者）高い普通
Markdownバックエンド志向低い速い
Webサイト印刷フロントエンドが得意中程度非常に速い

提出前に確認！PDFポートフォリオの最適化チェックリスト

作成したPDFをそのまま提出するのは禁物です。以下のポイントを必ずチェックしましょう。

  • ファイル名が適切か:

良い例

プレーンテキスト

// 良い例：日付・内容・氏名が含まれていて管理しやすい 20231025_ポートフォリオ_氏名.pdf

避けたい例

プレーンテキスト

// 悪い例：誰のいつの資料か判断できない portfolio_final_2.pdf
  • ファイルサイズは重すぎないかは画像が多すぎると10MBを超えることがあります。Web上の圧縮ツール（I Love PDFなど）を使い、2MB〜5MB程度に抑えましょう。メール添付で失礼にならないサイズが目安です。
  • リンクは機能しているかはGitHubのリンクやデプロイ先URLを叩いて、正しくブラウザが開くか確認します。
  • 誤字脱字・不適切な画像は特にソースコードを載せる場合、APIキーや個人情報が映り込んでいないか厳重にチェックしてください。
  • 文字の読みやすさは印刷された場合を想定し、フォントサイズは最低でも10.5pt、できれば12pt以上を推奨します。

ここまでの要約 — PDFは ファイル名・サイズ・リンク・機密情報・フォント の5観点をチェックしてから提出します。中身が良くても、この前処理を怠ると評価を大きく落とします。

オフラインでのプレゼンテーション活用術

面接が対面で行われる場合、PDF版ポートフォリオは強力な武器になります。

  1. タブレットを持参するは自分のノートPCを開くのは準備に時間がかかりますが、タブレットにPDFを入れておけば、すぐにスワイプしながら説明を始められます。インターネット接続が不安定な会場でも安心です。
  2. 「紙」で予備を用意するは予備として2〜3部印刷して持参すると、面接官が複数いる場合に手元で資料を見ながら話を聞いてもらえます。この「準備の良さ」自体が、エンジニアとしての配慮（リスク管理能力）として高く評価されることがあります。
  3. 逆質問の時間に活用するは「こちらのシステム構成について、改善点はありますか？」とPDFの構成図を見せながら質問することで、より具体的で技術レベルの高いディスカッションが可能になります。

対面面接での資料配布は、想像以上に好印象を与えます。エンジニアとしての「丁寧な仕事」と「事前準備の徹底」をアピールする絶好のチャンスですよ！

まとめ

ポートフォリオのPDF化は、単なる「バックアップ」ではありません。「どんな環境でも、誰に対しても、自分の価値を100%伝えるためのプロフェッショナルなツール」です。

Web版で動きを見せ、PDF版で思考のプロセスと構造を伝える。この二段構えの準備こそが、数多くの候補者の中からあなたを際立たせる鍵となります。まずは、あなたの自信作を1つ選び、1枚の解説スライドを作ることから始めてみましょう。

現場でよくある具体例

  1. Aさん (受託企業内定) は GitHub の README 冒頭に「誰の何を解決するか」を 3 行で書き、デプロイ URL を最上段に置いた。それだけで書類通過率が 2 倍に
  2. Bさん (自社開発内定) は技術選定理由を README の「Why this stack?」セクションに明記。面接が「決定根拠の深掘り」中心になり、暗記質問が消えた
  3. Cさん (落選続き → 内定) はテーブルを切ってコミット履歴を整理。「feat: 機能追加」のような Conventional Commits に変えた途端、レビュー観点での評価が上がった

次にとるべきアクション

  1. 今のポートフォリオを採用視点で 30 秒見直す — README・デプロイ URL・スクショの 3 点が即座に伝わるか確認する
  2. 改善ポイントを GitHub Issue 化する — 「ポートフォリオをPDF化し、オフラインで提出する方法」で得た観点を、自分のリポジトリの Issue として 3 件登録する
  3. 実装/修正を次の 1 週間で完了させる — Issue を Pull Request に落とし込み、コミットメッセージにも改善理由を残す

次のレッスン

次は 複数の企業に合わせてポートフォリオをカスタマイズする方法 で、複数の企業に合わせてポートフォリオをカスタマイズする方法 を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. PF PDF化と提出法 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. PF PDF化と提出法 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

学習を加速したい方へ

未経験エンジニア向けポートフォリオ作成ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータル で実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

復習ミニクイズ

エンジニアの転職活動において、Webサイト版だけでなく『PDF版ポートフォリオ』を準備し、提出・活用する際の作法として最も適切なものはどれですか？

参考リンク