非エンジニアが30分で作るClaude Code動くポートフォリオ。職務経歴書に貼る【転職特化②】
転職活動で書類選考に止まり続けている30〜40代の非エンジニアは多いはずです。
職務経歴書に「AIで業務効率化」と書いても、面接前で止まる。その悩みには、はっきりした原因があります。
採用担当の評価軸は、すでに「AIを知っている人」から「AIで結果を出せる人」へ動いています（HRAIT 2026年版AI人材採用ガイド）。
文字だけの説明では、もう書類選考は通れません。
Forkwell JobsにはClaude Code求人が47件並び、年収1,200〜2,000万円帯で問われているのは、実際に動く成果物を持っているかどうかです（Forkwell Jobs Claude Code 求人）。JBCC株式会社のAI-Augmented Product Engineerは年収790〜2,000万円のレンジで、要件にClaude Code実務経験が含まれます。
ただし、希望はあります。
Claude Code（クロード・コード／自分のPCで動くAI助手）なら、非エンジニアでも30〜60分で動くポートフォリオサイトを作れます。HTML（Webページを構成する基本の言語）の知識は要りません。
職務経歴書のURLを採用担当がクリックすれば、自作したAIスキルが画面の上で実際に動く状態を見せられます。
この記事では、簡易ポートフォリオサイトの作り方、職務経歴書への貼り方、面接での見せ方を共有します。
この記事でわかること
動くポートフォリオが書類選考で効く理由
Claude Codeで簡易サイトを30〜60分で作る手順
職務経歴書へのURLの貼り方とアピール文の書き方
面接でポートフォリオを見せる時の3つの注意点
書類選考で止まる本当の理由
転職サイトのお見送り通知を繰り返し受け取っている30〜40代は珍しくありません。
ChatGPTで職務経歴書を整え、AI活用経験も書き加えた。
日々の業務改善エピソードも、それなりに具体的に書いた。
それでも、書類選考で止まる。
理由はシンプルです。
採用担当が見ているのは、テキストの上手さではなく、実体の有無です。
2026年の採用現場では、AIを使えますという記載があふれています。
書類のテキストだけで他の応募者と差をつけるのは、もう難しい段階に入っています。
ここで効くのが、画面の上で実際に動く成果物を1つ持っていることです。
動くポートフォリオが書類選考で効く理由
採用市場の評価軸は、過去半年で大きくずれました。
HRAITの2026年版採用ガイドは、こう書いています。
採用担当の関心はAIを知っている人からAIで結果を出せる人へ移った、と（HRAIT）。
テキストだけの職務経歴書では、私はAIで結果を出せますと説明することはできます。
ただし、説明と実体は別物です。
採用担当の頭の中では、説明の文字数が増えるほど、内容の信頼度が逆に下がっていきます。
そこに、画面の上で動くポートフォリオサイトのURLが1つあると、印象が変わります。
3秒の書類スキャンの中で、文字ではない実体に触れられる瞬間が生まれるからです。
実際、Claude Codeを業務に組み込んでいる非エンジニアの先行事例も増えています。
KAWAI氏はClaude Codeを使い、約1週間でひとりマーケ部門として動くSkill（業務手順を覚えさせた専用AI助手）を21本構築した経験を公開しています（KAWAI note）。
尾辻和孝氏は、社員ゼロの環境でClaude Codeに7部署を運営させるAIカンパニーの事例を公開しています（尾辻和孝 note）。
この2人に共通しているのは、自分の業務環境をそのまま外に見せる形にしている点です。
動くものを公開すると、文字の何倍も早く信頼を集められます。
採用担当も同じ反応をします。
クリックして1分でこの人は本当に手を動かしていると確認できる材料は、書類選考の通過率を底上げします。
Claude Codeで簡易ポートフォリオを作る3ステップ
ここからが本題です。
非エンジニアの方でも、30〜60分で動くポートフォリオサイトを作れます。
順番に見ていきます。
ステップ1：載せる中身を整理する（20分）
最初に、サイトに載せる要素を箇条書きにします。
1ページで完結する構成を前提にしてください。
載せる要素の例：
自己紹介（名前・職歴の要約・3行）
自作Skillの一覧（業務改善で作った3本くらい）
業務改善の実績（時間削減や処理件数）
成果物のスクリーンショット（議事録の整形例・PDF処理の出力など）
ここで、第83〜85弾で扱った業務シーン3本（議事録／PDF・データ／メール・Web）のSkillを思い出してください。
3本セットで載せると、見る側に複数の業務で結果を出している人という印象を残せます。
Claude Codeに「私の自作Skill3本の概要を、ポートフォリオサイト用に300字以内で整理して」と頼むと、文章の整形まで全部やってくれます。
ステップ2：HTMLサイトを生成させる（30分）
中身が決まったら、Claude Codeに次のように指示します。
ポートフォリオサイトを1ページのHTMLで作ってください。
内容はステップ1で整理した自己紹介とSkill3本を反映。
デザインはシンプル・ダーク基調・スマホ対応。
余計な装飾はなし、読みやすさ優先で。
Claude Codeは、フォルダ単位で静的なHTMLファイルを自動生成できます（Uravation できること25選）。
あなたがコードを1行も書かなくても、ファイル一式が手元に揃います。
色味やレイアウトを変えたい時は、追加で指示すれば修正してくれます。
「ヘッダーをもう少し大きく」「Skillセクションをカード型に」など、日本語で頼んで大丈夫です。
ステップ3：無料サービスで公開する（10分）
ファイルが揃ったら、無料で使える公開サービスにアップロードします。
代表的な3つは次のとおりです。
GitHub Pages（ギットハブ・ページズ／無料の静的サイト公開サービス）
Cloudflare Pages（クラウドフレア・ページズ／同じく無料の公開サービス）
Vercel（ヴァーセル／個人利用なら無料のサイト公開サービス）
迷ったら最初はGitHub Pagesから始めるのが安全です。情報量が一番多く、Claude Codeに手順を尋ねたときの案内も詳しく返ってきます。どれも個人利用の範囲なら料金はかかりません。
Claude Codeに「このサイトをGitHub Pagesに公開する手順を、最初から最後までステップごとに教えて」と頼むと、画面のキャプチャ付きに近い形で案内してくれます。
詰まったら、その都度「ここで止まりました」と画面の様子を伝えれば、次の一手が返ってきます。
30〜60分前後で、あなたの公開URLが手元に届きます。
これが、職務経歴書に貼り付ける最終成果物です。
職務経歴書への貼り方とアピール文
URLができたら、職務経歴書のどこに貼るかを決めます。
おすすめの配置は3か所です。
職務経歴書のヘッダー部分（名前・連絡先の近く）
自己PR欄の末尾
「成果」セクションの該当Skillの隣
採用担当は、書類を3秒で判断すると言われています（採用担当者が書類を判断する3秒の正体。AIを活用した転職者に感じる印象の変化【ヒアリング実例付き】）。
その3秒のどこかでURLに目が止まる位置に置くのが正解です。
アピール文の書き方の例を3つ挙げます（書き方例として参考にしてください）。
Claude Codeで自作したSkillの実演を、以下のサイトで公開しています：[URL]
業務改善の実証成果物を、以下にまとめています：[URL]
以下のサイトで実際に動くSkillをご覧いただけます：[URL]
数字を入れる時は、出典のある実証データを使ってください。
書き方の例として、次のような表現があります。
議事録Skill：90分会議の議事録を11秒で生成（Hakky Handbook）
PDF処理：500ページのPDFを5分以内で要約（Uravation できること25選）
メール処理：1日600分のメール業務が30分に短縮（95%減・Uravation 業務自動化10選）
数字は採用担当が3秒で記憶できる形にしてください。
効率化しましたという文章より、90分→11秒という数字のほうが、ほぼ確実に印象に残ります。
ここで重要な注意点が1つあります。
自分の業務で本当に出した数字と、出典として引いた数字は区別してください。
あなたの実数字なら、そのまま書いて構いません。
出典の数字を引く場合は、業界事例としてなどと付け加え、出典ベースであることを示すのが安全です。
面接でポートフォリオを見せる時の3つの注意点
書類選考を通過した先の面接でも、ポートフォリオは活躍します。
ただし、見せ方を間違えると逆効果になります。
注意点を3つだけ覚えてください。
注意点1：画面共有の準備を前日までに終わらせる
オンライン面接が増えています。
面接の冒頭で画面共有が出ないと詰まると、それだけで印象が下がります。
前日までに次の3つを済ませてください。
サイトをブラウザのブックマークに入れる
画面共有のテストを1回やる（家族や友人に5分付き合ってもらう）
通信が不安定な時用に、スクリーンショットをPDFで1部保存しておく
予備手段を持っている人は、本番で慌てません。
注意点2：見せる順番を3段で決めておく
面接の限られた時間の中で、いきなりサイト全体を流し見させても伝わりません。
次の3段で見せると、5分以内で要点が伝わります。
第1段：自己PRの中で自分の課題意識を語る（30秒）
第2段：具体的なSkill1本の実演を見せる（2分）
第3段：数字での成果を伝える（30秒）
実演を中心に置くのが大切です。
スライドを読み上げる時間より、画面の上で何かが動く時間を長く取ってください。
注意点3：相手に触らせる発想を持つ
面接官が興味を持ってくれた瞬間が、最大のチャンスです。
そこで、資料を後ほどお送りしますと引いてしまってはもったいない場面です。
ブラウザのURLをチャットに貼り付けて、相手側で開いてもらってください。
相手が自分のPCで触れる状態を作ると、評価が一段上がります。
ここまでできる応募者は、まだ全体の数%です。
文字で語る人から、動くものを見せる人へ。
この切り替えだけで、面接の印象は大きく変わります。
まとめ＋転職特化2本の総まとめ
第86弾（自分専用AI部下を作る話）と第87弾（動くポートフォリオを外に見せる話）で、書類選考から面接までの差別化材料がひととおり揃いました。
第86弾：自分の業務データを学習させたAI部下を、内側で活用する
第87弾：その実績を動く成果物として、外に見せる
ここから先、シリーズは次の段階に入ります。
第88弾（Claude Code 30 Skills 実践パック・500円）では、今日コピペで使えるSkillを30本まとめて提供する予定です。
第89弾（Claude Code経験で年収アップ実例集・500円）では、5職種×3パターンの実シナリオと、給与交渉に使える業務削減数字シートを共有する予定です。
特に第89弾は、本記事で作ったポートフォリオを年収アップの交渉材料に変える具体例集です。
Claude Code経験を職務経歴書に書いただけで終わらせず、年収交渉の場面まで持っていきたい方は、第89弾を一緒に読み進めてください。
この記事が参考になったら♡を押していただけると、次の記事の励みになります。
あなたの自作Skillで、ポートフォリオに載せたい1本はどれですか。
コメントで教えてくれれば、第89弾の年収アップ事例集の優先テーマに反映します。
関連記事
AIに頼りすぎて落ちた転職者5人の実録。採用担当が「AI臭」を見抜く瞬間（テキストだけのAI活用アピールがなぜ通らないか、5人の失敗例で逆方向から学べる記事です）