ポートフォリオに何を載せればいい？

✅ 回答

ポートフォリオに必要なのは「作品」「説明」「リンク」「連絡先」の4つです。

載せるべき4要素

要素	内容	なぜ必要？
作品（3〜5個）	スクリーンショット + デモURL	「何ができるか」を一目で伝える
説明文	目的・工夫・使った技術	「考えて作った」ことを示す
GitHubリンク	ソースコードへのリンク	コードの質を見てもらえる
連絡先	メール or SNS	興味を持った人が連絡できる

作品の説明文に書くこと

各作品に以下の3点を添えると、見る人に「ちゃんと考えて作った」と伝わります。

1. 何を作ったか — 「体育祭の得点を一覧できるページ」など一言で
2. 工夫した点 — 「スマホでも投票しやすいようにボタンを大きくした」
3. 使った技術 — 「HTML / CSS / JavaScript / localStorage」

中高生が載せやすい作品例

• 自己紹介ページ — 最初の1作品として最適
• クラスや部活のチームで作ったサイト — 共同開発の経験をアピールできる
• クイズアプリ — JavaScript力を見せられる
• 模写サイト — 「このデザインを再現しました」とCSS力を示す
• 便利ツール — 「自分が欲しかったから作った」が最強の動機

「完成度が低い」と思っても載せていい

見る側が重視するのは「完璧な作品」ではなく「成長の過程」です。3ヶ月前に作った素朴なページと、今作ったレスポンシブ対応のページを並べれば、成長が一目瞭然。それ自体がアピールになります。

AO入試で見られるポイント

• 「なぜこれを作ったか」の動機が明確か
• 困難にぶつかったとき、どう解決したか
• 今後どう発展させたいか（向上心）

ポートフォリオの構成例

<!-- ポートフォリオサイトの基本構成 -->
<header>名前 + 一言自己紹介</header>
<section id="about">自己紹介（学年、興味、目標）</section>
<section id="skills">使える技術（HTML/CSS/JS等）</section>
<section id="works">
  <!-- 作品カード（3〜5個） -->
  <div class="work-card">
    <img src="screenshot.png" alt="作品のスクリーンショット">
    <h3>作品名</h3>
    <p>説明（何を作ったか、工夫した点）</p>
    <a href="https://github.com/...">ソースコード</a>
    <a href="https://...">デモサイト</a>
  </div>
</section>
<section id="contact">連絡先（メールアドレス等）</section>

作品がない場合の対処法

1. このサイトのレッスンで作った作品を載せる

2. 模写コーディングの成果物を載せる（「〇〇を参考に模写」と明記）

3. 学校行事や部活で作ったWebページを載せる

4. 情報Ⅰの授業で作ったプログラムを載せる

「完璧な作品」でなくてOK。「学習の過程」が見えることが大切です。

やりがちなNGと対策

NG	対策
作品のリンクが切れている	公開後に自分でクリックして動作確認する
説明が「作りました」だけ	目的・工夫・使った技術の3点を必ず書く
模写なのに明記しない	「〇〇を参考に模写」と正直に書く（評価が上がる）
作品を詰め込みすぎる	自信のある3〜5個に絞る。数より質