選ばれるエンジニアへの第一歩
「君のスキルセットはわかった。でも、具体的にウチのビジネスにどう貢献してくれるのかが見えないんだよね」
これは私がフリーランスとして独立したばかりの頃、喉から手が出るほど欲しかったWeb制作案件の面談で、クライアントである経営者から言われた一言です。
当時の私は、スクールで習ったばかりの知識を詰め込んだ、自分では最高傑作だと思っていたポートフォリオサイトを提示していました。
トップページには英語で「Welcome to My Portfolio」なんてかっこつけた文字が踊り、スクロールするとふわっと動くアニメーション。
Works（実績）のページには、スクールの課題で作った架空のカフェのサイトや、模写した有名な企業のLP（ランディングページ）が並んでいました。
使用言語の欄にはHTML、CSS、JavaScript、PHP、WordPressと、知っている単語を全部並べていました。
自信満々でした。これだけ見せれば、私の技術力は伝わるはずだと信じて疑いませんでした。
でも、結果は不採用。
帰り道、電車の揺れに身を任せながら、悔しさと恥ずかしさで顔が熱くなったのを今でも鮮明に覚えています。
「なんでだ。コードは綺麗に書けているはずなのに。デザインだって悪くないはずなのに」
今なら痛いほどわかります。
あの時の私のポートフォリオは、ただの「自己満足の作品集」だったんです。
クライアントが見たかったのは、私がどれだけ難しいコードを書けるかではありません。
「この人に頼めば、自分の抱えている課題が解決するのかどうか」
その一点だけだったんです。
そこから私は、ポートフォリオの作り方を根本から変えました。
作品を見せる場所ではなく、自分という商品を売り込むための「最強の営業資料」へと作り変えたんです。
するとどうでしょう。あんなに苦戦していた案件獲得が、嘘のようにスムーズに進むようになりました。
「〇〇さんのポートフォリオを見て、ぜひお願いしたいと思いました」と言われることが増え、価格交渉でも強気に出られるようになりました。
今回は、かつての私のように「スキルはあるのに仕事が取れない」と悩んでいるあなたに向けて、案件獲得率を劇的に高めるポートフォリオ作成の極意を、現場の視点から泥臭く解説していきます。
綺麗なテンプレートの選び方なんて話はしません。
もっと本質的な、クライアントの心理を突き動かす「構成」と「見せ方」の話です。
これを読み終わる頃には、あなたのポートフォリオは、あなたに代わって24時間営業してくれる優秀なセールスマンに生まれ変わっているはずです。
さあ、選ばれるエンジニアへの第一歩を踏み出しましょうか。
ポートフォリオは「作品集」ではなく「提案書」である
多くの駆け出しエンジニアが勘違いしている最大のポイントがこれです。
ポートフォリオを、美大生が就職活動で使うような「作品集」だと思っていませんか。
「私、こんなにおしゃれなサイトが作れるんです」
「最新の技術を使ってこんな機能を実装しました」
これらは一見アピールになりそうですが、ビジネスの現場では二の次です。
クライアント、特に副業で案件を発注するような中小企業の社長や個人事業主は、技術のことはよくわかりません。
彼らが求めているのは「売上を上げたい」「集客を増やしたい」「業務を効率化したい」という切実な悩みの解決策です。
あなたのポートフォリオが「私はこれが作れます」という一方的な主張で終わっているなら、それはただの壁打ちです。
相手には響きません。
では、どうすればいいのか。
ポートフォリオを「あなたというエンジニアを雇うことで得られる未来を提示する提案書」に変えるんです。
作品を載せる時も、ただスクリーンショットを貼るだけでは不十分です。
「なぜそのデザインにしたのか」
「どんな課題があって、どう解決したのか」
「その結果、どんな成果が出たのか」
この思考プロセスこそが、クライアントが一番知りたい情報なんです。
例えば、架空のカフェサイトを載せるとしても、ただ「おしゃれなカフェサイトです」と書くのと、「20代女性をターゲットに設定し、インスタグラムとの連携を強化することで、集客導線を意識した設計にしました」と書くのでは、見る人の印象は天と地ほど違います。
前者は「作業者」に見えますが、後者は「パートナー」に見えます。
副業で高単価な案件を獲得できるのは、間違いなく後者です。
クライアントは、あなたのコードの美しさなんて見ていません。
見ているのは、「この人は私のビジネスを理解してくれているか」という信頼感です。
その信頼感を勝ち取るためのツールが、ポートフォリオなんです。
案件獲得率が変わる「トップページ」の設計図
ポートフォリオサイトにおいて、最も重要なのはトップページ、特にファーストビュー（最初に表示される画面エリア）です。
Webの世界には「3秒の壁」という言葉があります。
ユーザーはページを開いて3秒以内に「自分に関係があるか」「役に立つか」を判断し、そうでなければすぐに閉じてしまうという法則です。
採用担当者やクライアントも同じです。彼らは忙しいんです。何十人もの応募者のポートフォリオをいちいち隅から隅まで読んでいる暇はありません。
「何ができる人か」を一言で言い切る
ファーストビューに、意味ありげな風景写真や、英語のポエムみたいな文章を載せていませんか。
「Welcome to My Portfolio」なんて書いてあっても、何の役にも立ちません。
ここに書くべきは、あなたの「キャッチコピー」と「肩書き」です。
「WordPressによる企業サイト制作が得意なWebエンジニア」
「LP制作から広告運用までワンストップで対応します」
「Reactを用いた使いやすい管理画面開発のスペシャリスト」
このように、誰のどんな役に立つ人間なのかを一瞬で理解させる必要があります。
ターゲットを絞ることを恐れないでください。
「なんでもできます」は「なにもできません」と言っているのと同じです。
「飲食店のサイト制作なら任せてください」と言い切った方が、飲食店オーナーからの依頼は確実に増えます。
顔写真は出すべきか否か
これはよく議論になりますが、副業で案件を取りたいなら、私は断然「出すべき」派です。
考えてみてください。どこの誰かもわからない、顔も見えない相手に、数十万円の仕事を頼みたいと思いますか。
ネットでの取引だからこそ、相手の顔が見えるという安心感は強力な武器になります。
もちろん、本業の都合でどうしても出せない場合は、似顔絵アイコンや後ろ姿でも構いません。
ただ、清潔感のある笑顔の写真を載せるだけで、信頼度は2割増し、いや5割増しになると言っても過言ではありません。
私も最初は恥ずかしくてアイコンにしていましたが、プロのカメラマンに撮ってもらった写真に変えた途端、問い合わせの質が変わりました。
「優しそうな雰囲気で話しやすそうだったので」と言われたこともあります。
人は感情で動きます。理屈だけじゃないんです。
導線はシンプルに、ゴールは明確に
トップページを見て、興味を持ってくれた人が次に取るべき行動は何でしょうか。
そう、「お問い合わせ」です。
なのに、お問い合わせフォームへのリンクがどこにあるかわからない、なんてサイトが多すぎます。
ヘッダーの右上に大きく「お問い合わせ」ボタンを置くのは基本中の基本。
さらに、各セクションの終わりにも「無料相談はこちら」といったボタンを配置しましょう。
営業の世界ではクロージングが重要ですが、Webサイトにおけるクロージングは、このお問い合わせボタンを押させることです。
遠慮はいりません。
「お仕事の依頼をお待ちしています」という姿勢を、わかりやすく示してください。
実績紹介（Works）で「思考プロセス」を見せる技術
ポートフォリオのメインコンテンツである実績紹介。
ここが一番の腕の見せ所ですが、同時に一番失敗しやすいポイントでもあります。
多くの人は、完成したサイトのスクリーンショットを貼り、「使用技術：HTML, CSS, jQuery」とだけ書いて終わらせています。
これでは、あなたの実力の半分も伝わりません。
ただの画像ではなく「ストーリー」を語る
実績紹介は、あなたがどのように課題に向き合い、どう解決したかを示す「ケーススタディ」の場です。
以下の項目を必ず盛り込んでください。
- プロジェクトの背景: なぜこのサイトを作ることになったのか。
- 課題と目的: クライアント（架空でも可）は何に困っていて、どうなりたいと願っていたのか。
- 提案とコンセプト: その課題に対して、あなたはどんな解決策を提案したのか。デザインや機能の意図は何か。
- 制作期間と担当範囲: どのくらいの期間で、どこからどこまで（デザイン、コーディング、WordPress構築など）を担当したのか。
- 使用技術と工夫点: 技術的なこだわりや、苦労したポイントをどう乗り越えたか。
- 結果: サイト公開後、どのような効果があったか（アクセス増、問い合わせ増など）。
架空の案件であれば、結果を書くのは難しいかもしれませんが、「このような効果を狙って設計しました」という仮説を書くだけでも十分アピールになります。
思考の深さを見せるんです。
「綺麗なコードが書けます」よりも「ビジネスの課題をコードで解決できます」というアピールの方が、経営者には刺さります。
架空案件でもリアルな設定を作る
未経験の場合、実案件の実績がないのが最大の悩みですよね。
スクールの課題や模写を載せるのもいいですが、それだけでは弱いです。
おすすめなのは、自分で勝手に架空のクライアントを設定して、オリジナルのサイトを作ることです。
例えば、「近所のパン屋さんのサイト」を勝手にリニューアルしてみる。
「今のサイトはスマホで見づらいし、美味しそうなパンの写真が小さい。もっとインスタグラムと連携させて、焼き上がり時間を告知できるようにしよう」
ここまで具体的に設定を練り込んで作れば、それはもう立派な実績です。
「架空ですが、実在する店舗を想定して、勝手にリニューアル案を作ってみました」と正直に書けばいいんです。
その熱意と提案力は、必ず伝わります。
模写コーディングを載せるときのマナー
有名なサイトの模写をポートフォリオに載せている人がいますが、これには注意が必要です。
著作権の問題があるため、インターネット上に一般公開するのはリスクがあります。
Basic認証（パスワード制限）をかけて、採用担当者だけにIDとパスワードを伝える形にするのがマナーです。
「著作権に配慮してアクセス制限をかけています」と一言添えれば、逆に「この人は権利関係もしっかりしているな」と好印象を与えられます。
セキュリティやコンプライアンスへの意識は、エンジニアとして非常に重要な資質ですからね。
エンジニアだからこそこだわるべき「裏側」の品質
デザイナーのポートフォリオなら見た目が最優先ですが、エンジニアのポートフォリオは「中身」も見られます。
採用担当者や、クライアント側のエンジニア担当者は、必ずコードやサイトの挙動をチェックします。
ここで減点されないためのポイントを押さえておきましょう。
表示速度は名刺代わり
エンジニアを名乗るなら、自分のサイトが重いなんてことは許されません。
Googleの「PageSpeed Insights」で計測して、最低でも緑色（90点以上）、できればスマホでもパソコンでも満点を目指してください。
画像の圧縮、コードの軽量化、キャッシュの活用。
これら基本的な高速化施策ができているかどうかは、無言のアピールになります。
「私のサイトは爆速です。あなたのサイトも速くしますよ」
この説得力は計り知れません。
レスポンシブ対応は息をするようにやる
今どきスマホ対応していないサイトなんて論外ですが、意外と詰めが甘い人が多いです。
PCでは綺麗に見えても、スマホ実機で見ると文字が小さすぎたり、ボタンが押しにくかったり、横スクロールが発生していたり。
Chromeの検証ツールだけでなく、必ず自分のスマホで確認してください。
クライアントはPCよりもスマホであなたのサイトを見る可能性が高いです。
ファーストビューでレイアウトが崩れていたら、その瞬間に「戻る」ボタンを押されて終了です。
GitHubのコミットログは見られている
コードを見てもらうためにGitHubのURLを載せることも多いでしょう。
このとき、コミットメッセージが「update」とか「fix」ばかりになっていませんか。
あるいは、数週間コードを書いていない「草が生えていない」状態になっていませんか。
採用担当者は、コードの中身だけでなく、開発のスタイルも見ています。
適切な粒度でコミットされているか、わかりやすいメッセージが書かれているか。
これはチーム開発に参加できるかどうかの試金石です。
ポートフォリオサイト自体のソースコードも、公開できるならGitHubに上げておきましょう。
綺麗なディレクトリ構成や、適切なコメントアウトは、言葉以上の実力証明になります。
採用担当者の本音と「落ちるポートフォリオ」の特徴
ここで少し、採用する側（クライアントや制作会社の担当者）の視点に立ってみましょう。
彼らは毎日、たくさんのポートフォリオを見ています。
正直、またこれか、とうんざりすることもあります。
「落ちるポートフォリオ」には明確な特徴があります。それを避けるだけでも、通過率はグンと上がります。
量産型スクール卒業生の烙印
一番多いのが、特定のプログラミングスクールの課題をそのまま載せているパターンです。
「架空のチーズケーキ屋さんのLP」
「ToDoリストアプリ」
これらを見た瞬間、担当者は「ああ、またあのスクールか」と思います。
それ自体が悪いわけではありませんが、差別化はできません。
「スクールで習ったことしかできない人」というレッテルを貼られてしまいます。
スクールの課題を載せるなら、必ず自分なりのアレンジを加えること。
デザインを変える、機能を追加する、レスポンシブ対応を強化する。
「教わったことに、自分でプラスアルファしました」という姿勢を見せることが重要です。
基本的なミスが放置されている
リンクをクリックしてもページに飛ばない（404エラー）、画像が表示されていない、誤字脱字だらけ。
信じられないかもしれませんが、こういうポートフォリオは山ほどあります。
エンジニアにとって、リンク切れは致命的なバグです。
自分の商売道具であるポートフォリオすらまともに管理できない人に、大切なお客様のサイトを任せられるわけがありません。
公開前に、家族や友人に頼んで、いろんな端末で触ってもらってください。
自分では気づかないミスが必ずあります。
自己愛が強すぎるプロフィール
「趣味はカフェ巡りと猫と遊ぶことです。休日はキャンプに行きます」
プロフィール欄に、仕事と関係のない趣味の話ばかり書いている人がいます。
人柄を伝えるために少し書くのはいいですが、メインになってはいけません。
クライアントが知りたいのは「友達になれるか」ではなく「仕事ができるか」です。
趣味の話をするなら、「キャンプが好きなので、アウトドア用品店のサイト制作には知見があります」といったように、強引にでも仕事に繋げてください。
全ての情報は、あなたという商品を売るための材料でなければなりません。
ポートフォリオを作った後の「営業」との連携
最高のポートフォリオができても、誰にも見られなければ意味がありません。
砂漠の真ん中に豪華な店を建てるようなものです。
作った後、どうやって人に見てもらうか。ここからが本当の戦いです。
クラウドソーシングでの活用法
クラウドワークスやランサーズで案件に応募する際、提案文にポートフォリオのURLを貼りますよね。
ただ貼るだけではダメです。
「今回の案件と似た実績として、こちらのサイトをご覧ください」
と、相手の要望に合わせて見るべきページを指定してあげるんです。
美容室の案件なら美容室の制作実績を、コーディング案件ならコーディングのこだわりを書いたページを。
相手の手間を減らす気遣いができる人は、それだけで選ばれる確率が上がります。
SNSプロフィールの整備
Twitter（X）やInstagramなどのSNSも強力な営業ツールです。
プロフィール欄には必ずポートフォリオのURLを載せておきましょう。
そして、日々の発信で「Web制作の知見」や「制作過程」をアウトプットする。
「この人、詳しくて頼りになりそうだな」と思った人が、プロフィールからポートフォリオに飛び、そこからお問い合わせにつながる。
この流れを作れれば、営業しなくても仕事が入ってくる「待ちの営業」が可能になります。
私も、SNS経由での相談が一番単価が高く、成約率も高いです。
定期的な更新とメンテナンス
ポートフォリオは作って終わりではありません。生き物です。
新しい実績ができたらすぐに追加する。
技術スキルが上がったら、過去のコードをリファクタリング（修正）する。
古い情報のまま放置されているポートフォリオは、「この人、今は活動してないのかな」と思わせてしまいます。
「最終更新日」が現在に近いほど、アクティブに活動している証明になります。
月に一度はポートフォリオを見直し、磨き上げる時間を取ってください。
それは、自分自身の成長を確認する時間でもあります。
よくある質問（FAQ）
ここで、私がメンターとして生徒さんからよく受ける質問に答えておきます。
Q. 実績がない未経験者はどうすればいいですか
A. 実績がないなら、作るしかありません。知人に頼み込んで無料でサイトを作らせてもらうのが一番の近道です。それが無理なら、自分がよく行くお店のサイトを勝手にリニューアルして（公開はせずに）、「勝手に提案書」としてポートフォリオに載せるのもアリです。「熱意」と「行動力」を実績の代わりにしましょう。
Q. デザインセンスに自信がありません
A. エンジニア志望なら、無理にデザインまでする必要はありません。デザインは既存のテンプレートを使ったり、デザインカンプからのコーディングに特化したりするのも戦略です。「デザインはできませんが、その分コーディングの品質と速度には自信があります」と言い切れば、それは強みになります。
Q. WordPressと静的サイト、どっちで作るべきですか
A. どちらでも構いませんが、Web制作の副業を目指すならWordPressで作ることをおすすめします。理由は、ポートフォリオ自体が「WordPress扱えます」という証明になるからです。更新もしやすいですし、プラグインの導入実験の場としても使えます。
Q. 無料サーバーでもいいですか
A. 絶対にNGです。無料サーバーは広告が入ったり、表示速度が遅かったり、URLが独自ドメインじゃなかったりします。プロとしてお金をもらおうとしている人が、自分のサイトに月数百円の投資も惜しんでいると思われたら、信頼は得られません。XserverやConoHa WINGなど、有料のレンタルサーバーを契約し、独自ドメインを取得してください。これは必要経費です。
ポートフォリオはあなた自身の分身
長々と語ってきましたが、ポートフォリオ作りは、自分自身と向き合う作業でもあります。
自分は何が得意で、何がやりたくて、誰の役に立ちたいのか。
それらを言語化し、可視化したものがポートフォリオです。
最初はショボくても構いません。私の最初のポートフォリオなんて、今見たら顔から火が出るほど酷いものでした。
でも、案件をこなすたびに実績が増え、スキルが上がり、それに合わせてポートフォリオも成長していきました。
ポートフォリオは、あなたのエンジニアとしての成長記録そのものです。
完成したポートフォリオを公開する瞬間は、怖いです。
「こんなの実力不足だって笑われるんじゃないか」と不安になるかもしれません。
でも、完璧なポートフォリオなんて存在しません。
まずは60点の出来でいいから世に出す。そして、走りながら修正していく。
エンジニアの仕事も同じですよね。
あなたのポートフォリオが、素敵なクライアントとの出会いを連れてきてくれることを願っています。
そしていつか、現場で「あの記事を読んでポートフォリオ作りました」と声をかけてもらえる日を楽しみにしています。
さあ、エディタを開きましょう。
最高の「自分という商品」を、世界にプレゼンするときです。
