小中高生がプログラミングのポートフォリオを作る方法。GitHub Pages・Netlifyでの無料公開から、載せるべき作品の選び方、進学・就職活動での活用まで解説!!

「ポートフォリオってプロが作るものでしょ？」——そう思っていませんか。ポートフォリオ（作品集）は、プロだけのものではありません。むしろ、学んでいる段階でこそ作り始めることに意味があります。この記事では、小中高生がプログラミングの作品集を作る方法と、なぜ今作り始めるべきかを整理します。

ポートフォリオとは何か

ポートフォリオとは、自分が作ったものをまとめた作品集のことです。プログラミングにおいては、これまでに作ったウェブサイト・アプリ・ゲームを一覧で見られる場所を指します。

大学入試のAO（総合型選抜）面接、専門学校の入学審査、就職活動のエントリーシート——これらの場面で「あなたが作ったものを見せてください」と言われたとき、URLひとつで答えられる準備ができます。それがポートフォリオを持つことの価値です。

ポートフォリオは完成した「作品」だけを載せる場所ではありません。学習の過程で作ったものも含めて構いません。「このときはまだ○○しか知らなかったけど、今はここまでできる」という成長の記録としても機能します。

ポートフォリオの公開方法：3つの無料サービス

自分が作ったHTMLファイルをインターネット上で公開するために、いくつかのサービスを使えます。いずれも基本的な使い方は無料です。

GitHub Pages

GitHubはコードを管理するサービスです（コードのセーブ場所のようなイメージです）。GitHub Pagesは、そのリポジトリ（保存場所）をそのままウェブサイトとして公開できる機能です。

向いている人: コードを管理する習慣をつけたい人、将来エンジニア系の仕事を意識している人

使い方の大まかな流れ:

1. GitHubのアカウントを作る

2. 新しいリポジトリ（フォルダ）を作る

3. HTMLファイルをアップロードする

4. 設定でGitHub Pagesを有効にする

公開されるURLは https://ユーザー名.github.io/リポジトリ名/ という形式です。自分の名前がURLに入る形でポートフォリオを持てます。

公式サイト: pages.github.com

Netlify

HTMLファイルをドラッグ&ドロップするだけで公開できる、最もシンプルな方法の一つです。

向いている人: とにかく簡単に公開したい人、Gitに慣れていない初心者

使い方の大まかな流れ:

1. Netlifyのアカウントを作る（GitHubアカウントでログインできます）

2. 作ったHTMLファイルをドラッグ&ドロップするだけ

数分で公開できます。URLは https://ランダムな文字列.netlify.app という形式ですが、カスタムドメインの設定もできます。

公式サイト: netlify.com

Vercel

Netlifyに近いサービスです。GitHubと連携すると、コードを更新するたびに自動で公開内容も更新される仕組みが作れます。

向いている人: GitHubを使っている人で、更新を自動化したい人

公式サイト: vercel.com

初心者の場合はNetlifyから始めることをお勧めします。慣れてきたらGitHub PagesやVercelに移行する流れが自然です。

ポートフォリオに載せるべき作品の選び方

何でも載せればいいわけではありません。作品を選ぶときの基準を整理します。

自分が「説明できる」作品を選ぶ

面接や審査の場で「これはどんな工夫をしましたか？」と聞かれたときに答えられる作品を選びます。見た目が派手でも、作り方を自分が理解していない作品（コードをコピーしただけ）は避けた方がよい。

「このゲームは、ランダムに出題する仕組みを自分で考えた」「このページのレイアウトはCSSのフレックスボックスを使って整えた」——こういう説明ができる作品が、ポートフォリオの力になります。

多様なジャンルを揃えると良い

1つのことだけではなく、いくつかの異なる種類の作品があると、「いろんなことに挑戦してきた」ことが伝わります。

例えば：

• 自己紹介ページ（HTML/CSSの基礎）

• ゲーム（JavaScriptのイベント処理・条件分岐）

• クイズアプリ（配列とループ）

• デザインを意識したランディングページ（CSSの応用）

「プロ級の完成度」は必要ありません。「これを作るためにこれを学んだ」という学習の軌跡が見える構成が理想です。

作品の説明文を必ず書く

ポートフォリオを見た人が「この作品は何？どうやって作ったの？」と疑問を持ったとき、作品の隣に説明文があると分かりやすい。

説明に含めると良い内容：

• 何のために作ったか（目的）

• どんな技術を使ったか（HTML/CSS/JavaScriptの何を使ったか）

• 作るときに苦労した点と、どう解決したか

• 今後改善したいと思っていること

「苦労した点と解決策」は特に重要です。失敗から学んだ経験は、能力の証拠として伝わります。

ポートフォリオを作るときの現実的な手順

1. まず自己紹介ページを1ページ作る
   名前・趣味・プログラミングを始めた理由を書いた1ページを作ります。これがポートフォリオの「トップページ」になります。

2. これまでの作品リンクを並べる
   各作品のページ（またはGitHubのリポジトリへのリンク）を並べます。最初は2〜3作品でも構いません。

3. Netlifyで公開する
   完璧でなくても、まず公開することが大切です。公開してから少しずつ更新する方が継続しやすい。

4. 少しずつ作品を増やす・更新する
   新しいものを作ったら追加する。古い作品を改善したら更新する。ポートフォリオは「完成品」ではなく「育てるもの」です。

進学・就職活動での活用

ポートフォリオのURLを持っていることは、将来の様々な場面で役立ちます。

高校・専門学校・大学のAO入試
総合型選抜（旧AO入試）では、志望理由書や面接に加えて「実績・活動記録」を問われることがあります。プログラミングの作品集はその一つになれます。「こういうものを作ってきました」と具体的なURLを示せることは、言葉だけの志望理由より力があります。

情報系・デザイン系の学校・学科への進学
情報系の専門学校や大学のデジタルデザイン系学科は、プログラミング経験者を積極的に評価する傾向があります。ポートフォリオはその経験を可視化するツールになります。

アルバイト・就職活動
IT系の会社でのアルバイト、Web制作の仕事、エンジニア系の就職活動では、スキルを示す具体的な証拠としてポートフォリオが機能します。

まとめ

• ポートフォリオは「プロだけのもの」ではなく、学んでいる段階から作り始めることに意味がある

• 公開方法はNetlify（最もシンプル）・GitHub Pages・Vercelが代表的で、いずれも無料

• 載せる作品は「自分が説明できるもの」を選ぶ。完成度より説明力が重要

• 説明文（目的・使用技術・苦労した点）を必ず添える

• 完璧を待たずに公開し、少しずつ更新していく姿勢が継続のコツ

「まず1ページだけ作ってNetlifyに公開してみる」——これが最初の一歩です。スクールで作ったものがあれば、それを公開するところから始めてみましょう。

この記事を書いた人

Kidsプログラミングラボ 秋葉原教室

小中高生向けに Scratch / Python / HTML / CSS / JavaScript を教える秋葉原の実店舗スクール。
体験会や教室の様子は kids-programming-akiba.jp から。