AI先生のロボットキャラクター
第3章 - セクション3

自分のポートフォリオサイトを作ろう

クライアントに信頼される情報発信の拠点を作る

男子生徒のアイコン

ポートフォリオって、作品を並べるサイトですよね?まだ見せられる作品がないんですが…

AI先生のアイコン

実は、ポートフォリオは「作品集」じゃないんだ。クライアントがあなたを信頼するための情報が集まった場所。作品の数より、あなたが何者で、何ができて、どう考える人なのかが伝わることの方が大切なんだよ。

女子生徒のアイコン

じゃあ、何を載せればいいんですか?

AI先生のアイコン

それを今日は一緒に考えていこう。ポートフォリオの目的を明確にすれば、何を発信すべきかが見えてくるよ。

ポートフォリオの本当の目的

ポートフォリオが果たす3つの役割
作品集ではなく、信頼構築のツール
仕事獲得の入口
案件を発注する前にクライアントが必ず見る場所。第一印象を決める重要な接点になる。
技術力の証明
何ができるかを具体的に示す。スキルスタックや実績を通じて、自分の専門性をアピールできる。
人柄の発信
一緒に働きたいと思わせる。文章や発信内容から、コミュニケーションスタイルが伝わる。

ポートフォリオサイトの目的は、「作品を見せること」ではありません。クライアントに信頼してもらうことです。

クライアントは案件を発注する前に、必ずこう考えます。

  • 仕事ができるのか? スキルや実績から判断される
  • コミュニケーションは取りやすそうか? 文章の書き方から伝わる
  • 自分のプロジェクトに合う人か? 得意分野や経験から判断される

ポートフォリオは、これらの疑問に答えるためのツールです。

男子生徒のアイコン

でも、実績がないと信頼してもらえないですよね?

AI先生のアイコン

実は、実績の数よりも「何を考えて、どう取り組んでいるか」の方が大事なんだ。個人プロジェクトでも、その過程を丁寧に説明すれば、十分に信頼を得られるよ。

クライアントが本当に知りたいこと

クライアントがポートフォリオで確認したいのは、次の3つです。

1. この人は何ができるのか?

技術スタックや過去の実績を見て、自分のプロジェクトに合うかどうかを判断します。ここで重要なのは、具体性です。「Web開発ができます」ではなく、「ReactとNext.jsで月間10万PVのECサイトを構築しました」と言えるかどうか。

2. 信頼できる人か?

技術記事を定期的に書いているか、GitHubで継続的にコードを書いているかを見ます。「この人は学び続けている」「問題解決力がある」という印象を与えることが大切です。

3. コミュニケーションは取りやすそうか?

文章の書き方、説明の仕方から、一緒に仕事をしやすいかどうかを判断します。ポートフォリオの文章自体が、あなたのコミュニケーション能力を示しています。

女子生徒のアイコン

技術記事を書いているだけで信頼されるんですか?

AI先生のアイコン

そうだね。定期的に記事を書いている人は「問題解決力がある」「学び続けている」という印象を与える。クライアントにとって、それは一緒に仕事をする上で安心できる材料になるんだ。

第一印象を決める3秒ルール

クライアントがポートフォリオを開いて最初の3秒で、続きを読むかどうかを決めます。トップページには「誰で、何ができるか」を一目で伝える簡潔な自己紹介を配置しましょう。長々とした経歴は後回しでOKです。

ポートフォリオに載せるべき5つの情報

では、具体的に何を発信すればいいのか。クライアントの信頼を得るために必要な5つの情報を見ていきましょう。

ポートフォリオに載せるべき情報
自己紹介
誰で、何が得意で、どんな価値を提供できるか。30秒で伝わる簡潔さが大切。
スキルスタック
使える言語・フレームワーク・ツール。経験年数や習熟度も示すと説得力が増す。
実績・プロジェクト
過去の案件や個人プロジェクト。成果を数字で示せると強い。「PV数」「改善率」など。
技術記事・発信
Zennやブログでの技術発信。専門性と継続力を同時にアピールできる。
連絡先・SNSリンク
問い合わせフォーム、X、GitHubなど。連絡しやすい導線を用意する。

自己紹介の書き方

自己紹介は、ポートフォリオの「履歴書・経歴書」です。30秒で読める長さにまとめつつ、クライアントが知りたい情報を漏れなく伝えましょう。

書くべき項目

  • 職業・職種 何ができる人なのかを明確に(例:フロントエンドエンジニア、Webデザイナー)
  • 得意領域 スキルを全て書くのではなく、あなたの強みに絞る
  • 保有スキル 使える言語・フレームワーク・ツールを具体的に
  • 経歴の背景 なぜ今の仕事をしているのか、想いやストーリーも添えると印象的
  • 実績 数字や成果で示せるものがあれば簡潔に
  • 人柄が伝わる情報 趣味、出身地など。共通点が仕事につながることも
得意領域をハッキリさせる

できることを全て列挙すると、逆にあなたの強みが埋もれます。クライアントは「何でもできる人」ではなく、「この分野に強い人」を探しています。得意領域を明確にして、専門性をアピールしましょう。

自己紹介の構成例

  • 最初の1文で職種と得意分野 何者かを一瞬で伝える
  • 経歴とスキル 具体的な技術スタックと経験年数
  • 価値提供 クライアントにどんなメリットがあるか
  • 人柄が伝わる一言 趣味や想いなど、あなたらしさを添える
良い例

ReactとNext.jsを得意とするフロントエンドエンジニアです。ECサイトやSaaSプロダクトの開発経験が3年以上あり、ユーザー体験を重視した設計が得意です。前職では月間10万PVのサイトでコンバージョン率を30%改善した実績があります。神奈川県在住。週末はOSSにコントリビュートしています。

悪い例

2023年からプログラミングを始めました。HTMLとCSSを勉強中で、JavaScriptもこれから学びたいと思っています。ReactやNext.jsにも興味があります。まだ実務経験はありませんが、頑張ります。○○大学出身です。

女子生徒のアイコン

趣味とか出身地も書いた方がいいんですか?仕事に関係ないような…

AI先生のアイコン

実は、共通の趣味や出身地がきっかけで仕事につながることもあるんだ。「同じ県出身なら」「同じアニメ好きなら」と親近感を持ってもらえると、スキルが同じくらいなら選ばれやすくなる。人柄が伝わる情報は、信頼構築の大事な要素だよ。

自己紹介は『できること』に焦点を

「勉強中」「〜したい」といった未来形ではなく、今できることを書きましょう。クライアントは「将来性」よりも「今すぐ任せられるか」を重視します。また、スキルを羅列するだけでなく、コンパクトかつシンプルにまとめることで、読まれやすくなります。

実績の見せ方

実績は「何を作ったか」だけでなく、どんな課題を、どう解決したかを書くことが重要です。

  • プロジェクト概要 何のためのプロジェクトだったか
  • 担当範囲 自分が何をしたか
  • 成果 数字で示せるものがあれば必ず入れる
  • 使用技術 技術スタックを明記
Before(弱い)

ECサイトを作りました。Next.jsとStripeを使っています。

After(強い)

個人事業主向けECサイトの構築。決済機能(Stripe)の実装により、月間売上30万円を達成。Next.js + TypeScriptで構築し、Vercelでホスティング。ページ表示速度を2秒から0.8秒に改善。

男子生徒のアイコン

数字で成果を示すって、どういうことですか?

AI先生のアイコン

「サイトを作った」だけじゃなくて、「ページ速度を2秒から0.8秒に改善」とか「月間1万PVを達成」みたいに具体的な数字を入れることだよ。数字があると、クライアントは成果をイメージしやすくなる。

実績がない場合はどうする?

案件実績がなくても、個人プロジェクトや学習中に作ったものを載せて大丈夫です。大切なのは「なぜ作ったか」「何を学んだか」を説明できること。クライアントは、あなたの思考プロセスを見ています。

技術発信との連携

ポートフォリオの力は、技術発信と組み合わせることで初めて発揮されます。

1
記事を書く
Zenn/Qiitaで学んだことや、解決した問題を記事にする
2
ポートフォリオに反映
RSSやGitHub Actionsで、自動連携すると効率的
発信と仕事獲得の
好循環
4
仕事の依頼
専門性と継続力が伝わり、信頼獲得へ
3
クライアントが発見
技術記事経由でポートフォリオにたどり着く

技術記事を書くメリット

技術記事を定期的に書くことで、次のような効果があります。

  • 専門性の証明 その分野に詳しいことが記事から伝わる
  • 検索からの流入 技術記事がきっかけで発見されることも
  • 継続力のアピール 定期的に発信している = 信頼できる
  • 自分の学びの整理 書くことで理解が深まる
女子生徒のアイコン

技術記事って、何を書けばいいんですか?難しいことじゃないとダメですよね?

AI先生のアイコン

いや、むしろ「自分がつまずいたこと」や「初心者の頃に知りたかったこと」を書くのがおすすめだよ。同じ悩みを持つ人が検索で見つけてくれるし、わかりやすく説明する力もアピールできる。

どこで発信するか

技術発信のプラットフォームは複数ありますが、それぞれ特徴が異なります。

  • Zenn エンジニア向け技術メディア。GitHubと連携しやすく、マークダウンで執筆可能
  • Qiita 日本最大級のエンジニアコミュニティ。検索からの流入が期待できる
  • GitHub コード自体が発信になる。継続的なコミットが信頼の証明
  • 自作ブログ(Astro等) ポートフォリオと統合でき、ブログ自体が作品になる
おすすめの組み合わせ

Zennで技術記事を書き、自作サイト(Astro等)に自動反映させるのが効率的です。Zennの記事はRSSで取得できるので、GitHub Actionsで定期的にビルドすれば、ポートフォリオが自動更新されます。

ポートフォリオの作り方

ポートフォリオサイトの作り方は、大きく3つの選択肢があります。

ポートフォリオの作り方
自分のスキルと目的に合わせて選ぶ
ノーコード
Notion、STUDIO等ですぐに作れる。コード不要だが、技術力アピールにはならない。
テンプレート利用
Astroテーマ等で効率的に作れる。カスタマイズ可能で、技術理解も示せる。おすすめ。
フルスクラッチ
ゼロから自作。技術力の証明になり、完全な自由度がある。時間はかかる。

エンジニアとしてのアピールを考えると、Astroなどのフレームワークでテンプレートをカスタマイズする方法がバランスが良いです。技術力を示しつつ、効率的に作れます。

AIツール(bolt.new、Claude、Cursor)を使えば、デザイン案の生成やコード実装も大幅にスピードアップできます。

男子生徒のアイコン

AIツールを使って作ったら、技術力のアピールにならないんじゃないですか?

AI先生のアイコン

いい質問だね。でも、AIツールを使いこなすことも技術力の一つなんだ。大切なのは「AIが生成したコードをそのまま使う」んじゃなくて、「理解して、カスタマイズできる」こと。むしろ効率的に開発できる力として評価されるよ。

ポートフォリオサイト自体が作品

ポートフォリオサイトそのものが、あなたの技術力を示す作品です。デザインセンス、コードの品質、レスポンシブ対応、表示速度など、すべてが評価対象になります。「このサイトを作った人なら安心して任せられる」と思わせることが目標です。

おすすめのポートフォリオテンプレート

ゼロから作るのが難しい場合は、以下のようなテンプレートを活用しましょう。

  • Astro Themes Astroの公式テーマギャラリー。ブログ機能付きのテンプレートが豊富
  • Next.js Portfolio Templates GitHubで公開されている高品質なポートフォリオテンプレート
  • GitHub Pages + Jekyll 無料ホスティングで手軽に始められる

ポートフォリオを活かすコツ

ポートフォリオは作って終わりではありません。活かし方が重要です。

  • 定期的に更新する 3ヶ月に1回は実績やスキルを見直す
  • 技術記事と連動させる 新しい記事を書いたら自動反映される仕組みに
  • 各所にリンクを貼る X、GitHub、エージェント登録時のプロフィール
  • フィードバックをもらう 同業者や先輩に見てもらい、改善点を聞く
更新頻度が信頼を生む

ポートフォリオが1年以上更新されていないと、「この人は今も活動しているのか?」と不安を与えてしまいます。新しい技術記事を書いたり、スキルを追加したりして、定期的に更新している感を出すことが大切です。GitHubの草(コミット履歴)も同様に、継続性をアピールできます。

まとめ

男子生徒のアイコン

なるほど、ポートフォリオは作品集じゃなくて、信頼を得るためのツールなんですね。

AI先生のアイコン

そうそう。クライアントが知りたいのは「この人は何ができるか」「信頼できるか」「一緒に働きやすいか」の3つ。それに答える情報を載せておけば、自然と仕事につながるんだ。

女子生徒のアイコン

技術記事を書いてポートフォリオに反映させるのが大事なんですね。でも、ポートフォリオができたら、どうやって見つてもらうんですか?

AI先生のアイコン

そこで活躍するのがX(Twitter)やGitHubでの発信なんだ。次のセクションで、SNS発信の具体的なコツを学んでいこう。

ポートフォリオ構築のポイント
  • ポートフォリオの目的は信頼構築 作品を見せることではなく、クライアントに信頼してもらうこと
  • 載せるべき5つの情報 自己紹介、スキル、実績、技術記事、連絡先
  • 技術発信との連携が鍵 Zennでの記事がポートフォリオの価値を高める
  • 作り方は3パターン ノーコード、テンプレート、フルスクラッチ。おすすめはテンプレート利用
  • 継続的な更新が大切 作って終わりではなく、定期的に見直す

次は、X(Twitter)などのSNS発信を活用して、ポートフォリオへの導線を作っていきます。

学習チェック

このレッスンを理解できたら「完了」をクリックしてください。
後で見直したい場合は「未完了に戻す」で進捗をリセットできます。

レッスン完了!🎉

お疲れさまでした!