今のうちに作るべきポートフォリオ3例

「プログラミングできます」と口で言うより、動く作品を1つ見せた方が、進路でも就職でも何倍も伝わります。今からでも作れて、なおかつ将来役立つ「ポートフォリオ」の3例を、難易度順に紹介します。1本目は1日で完成するもの、3本目は1〜2か月かけてじっくり作るものです。

そもそもポートフォリオとは?

ポートフォリオは「自分が作った作品を集めた見本帳」のことです。デザイナーや写真家がよく使う言葉でしたが、今はエンジニア・プログラマーの世界でも当たり前になっています。GitHub・Webサイト・YouTubeなど、誰でも公開できる場が増えたためです。今のうちから1〜3個作っておくと、推薦入試・AO入試・企業のインターン応募で説明しやすい材料になります。

良いポートフォリオは、作品そのものだけでなく「なぜ作ったか」「何を工夫したか」「次に直すならどこか」まで説明できます。完成品のURL、GitHubのコード、画面のスクリーンショット、短い説明文をセットにすると、見る人が短時間で理解しやすくなります。

例1:自己紹介サイト(HTML/CSS)

最初の作品はシンプルがいちばん。自分の名前・趣味・好きな本や音楽・将来やってみたいことを並べた1ページのホームページを作ります。HTMLとCSSだけで作れて、半日〜1日で完成します。

自己紹介サイト:HTMLコード ↔ ブラウザでの表示 右が左の内容を反映する。30〜50行で完成する index.html <!DOCTYPE html> <html lang="ja"> <head> <title> Yuki の自己紹介 </title> </head> <body> <h1> こんにちは、Yuki です </h1> <p>高校2年生/部活:吹奏楽</p> <ul> <li>Python 学習中</li> <li>@yuki_dev</li> </ul> https://yuki.github.io こんにちは、 Yuki です 高校2年生/部活:吹奏楽 学んでいること • Python 学習中 • HTML / CSS SNS • X: @yuki_dev • GitHub: yuki-dev
図1:HTMLコードとブラウザ表示の対応。タグの中身を書き換えるだけで、自分のサイトが完成する

必要な技術はHTMLとCSS。「写真」「好きなもの」「学んでいること」「SNS」の4ブロックを並べるだけで、立派な1ページになります。GitHub Pagesなら無料で公開でき、URLが取れるので、進路の自己PRシートに「私のホームページ」と書けるのが強みです。

自己紹介サイトでは、本名、学校名、住所、顔写真などの個人情報を出しすぎないことも大切です。公開用にはニックネームや活動名を使い、作品、学んだこと、連絡方法の範囲を絞りましょう。進路用に詳しい情報を見せたい場合は、提出先に合わせて限定公開の資料を別に用意すると安全です。

例2:暮らしに役立つ自動化スクリプト(Python)

2本目は「自分の生活をちょっと楽にするツール」です。ありがちな例としては、毎朝の天気を読み上げるスクリプト、クラスの誕生日リマインダー、YouTube動画タイトルから単語帳を作るツールなど。20〜100行のPythonコードで完成します。

子どもが作れる自動化スクリプトのアイデア(行数の目安付き) 「自分の生活の小さな面倒」を題材にすると、続けやすい 作るもの 使う技術 行数 学べること 毎朝の天気を表示 気象庁APIを叩いて表示 requests, json 天気予報API 20行 API・JSON 外部データの取得 YouTube字幕→単語帳 英語動画の字幕から頻出単語抽出 youtube-transcript-api collections.Counter 50行 テキスト処理 単語の集計・並べ替え 部活のシフト自動振り分け CSVから当番表を生成 pandas, csv 条件分岐・ループ 80行 表計算の自動化 条件で振り分けるロジック テスト勉強タイマー+記録 勉強時間をCSVに記録、グラフ化 time, matplotlib datetime 100行 グラフ可視化 ファイル入出力 LINE Bot で誕生日通知 クラスメイトの誕生日に自動メッセージ LINE Messaging API cron / scheduler 120行 外部API連携 定期実行の仕組み ▶ どれもChatGPTに作り方を聞きながら2〜3週間で完成可能。「自分の生活で困っていたこと」が題材だと面接で話しやすい
図2:今からでも作れる自動化スクリプトのアイデア集。20〜120行の小規模なPythonコードで完成する

必要な技術はPythonと、ネットからデータを取るための「requests」「BeautifulSoup」あたりのライブラリです。すべてChatGPTに聞きながら書ける範囲。「自分のために作った」というストーリーは面接でも強い武器になります(No.16参照)。

例3:オリジナルの小さなアプリ(Web or ゲーム)

3本目はもう少し本格的に、テーマを1つ決めて作る「自分のアプリ」です。例:英単語クイズアプリ、毎日のラジオ体操記録ツール、部活のシフト管理アプリなど。HTML/CSS/JavaScriptの3つを組み合わせれば、ブラウザで動くアプリが作れます。

3段階のポートフォリオ:完成までの期間と進路への効果 下に行くほど時間はかかるが、見せた時の説得力も大きい 作品 所要期間 使う技術 公開先 面接での効き目 ① 自己紹介サイト プロフィール・ 作品リンクを並べる ★初心者の入口 半日〜1日 難易度:★☆☆ HTML CSS 画像・テキスト GitHub Pages 無料・URL取得 ★(基礎の証明) 「最初の1作品」として◎ ② 自動化スクリプト 毎日の小さな面倒を Pythonで自動化 ★困りごと解決 1〜2週間 難易度:★★☆ Python requests / pandas 外部API活用 GitHub README に動画埋込 ★★(実用力) 具体的な解決体験は 面接の話題になりやすい ③ オリジナルアプリ 他人が使える 小さなWebアプリ ★1人〜小チーム 1〜2か月 難易度:★★★ JavaScript / React +Firebase など DB・認証も体験 Vercel / Netlify 独自URL付与可 ★★★(即戦力) 家族・友達に使ってもらう ストーリーが武器に
図3:3段階のポートフォリオ比較。①は1日で公開、②と③は時間がかかる分だけ伝わる力も大きくなる

3本目で大事なのは「身近な人が使える」こと。家族・友達・部活仲間に使ってもらうと、自然と修正点や改善のアイデアが見えてきます。動かしてもらった写真や感想ツイートを残すと、ポートフォリオに厚みが出ます(No.19参照)。

気をつけたい落とし穴

ポートフォリオで損する3つの行動
  • 「もっと完璧になってから公開」と思っていつまでも出さない。8割の出来で公開して、後から直す方が断然速い
  • 他人のチュートリアルをコピーしただけの作品を並べる。1つでも自分のアイデアを入れた作品の方が評価される
  • 「動いた」だけで満足する。何のために作ったか・どこで悩んだかを文章でも残す

将来どう役立つ?

大学のAO入試・推薦入試では「自分が何をしてきたか」を示す材料が重視されます。プログラミング作品を1つでも見せられる子どもは、文系・理系を問わず強い武器になります。IT系のインターン採用でも、提出物として「GitHubのURL」を聞かれることが当たり前になりつつあります。

作品は大きさより、完成度と説明のしやすさが重要です。未完成の大作より、目的がはっきりした小さな完成品の方が伝わることもあります。READMEに使い方、技術、苦労した点を書き、更新日を残しておくと、継続して学んできたことも示せます。

今日からできること

3ステップで始めよう
  1. 無料の GitHub Pages アカウントを作る
  2. HTMLで自己紹介ページを1枚だけ作って公開する(写真・名前・好きなもの・SNS)
  3. 1か月後を目処に、Pythonで動く自動化ツールを1つ追加する

まとめ

ポートフォリオは「動く作品の見本帳」。今からでも、自己紹介サイト→自動化スクリプト→小さなアプリの3段階で着実に作れます。完璧を目指さず、8割で公開してから直す方が成長が速い。1本目は今日から、半日でできる自己紹介サイトから始めましょう。

確認 ポートフォリオの3例で共通するのは?