2026年5月2日
部活動のWebサイトがあると、いろいろなことに役立ちます
新入部員の募集、活動記録の公開、保護者への情報発信、OB・OGとのつながり維持など、使い道はたくさんあります。
「でもWebサイトなんて作れない…」と思うかもしれません。HTML（エイチティーエムエル）とCSS（シーエスエス）を使えば、初心者でも部活の紹介ページを作れます。無料で公開もできます。
この記事では、部活紹介ページの作り方をコード例付きで解説します。HTMLの基本は「HTMLで最初のページを作ろう」で学べます。
どんなページを作る？
部活のWebサイトに必要なページを考えましょう。
基本のページ構成
- トップページ: 部活名、キャッチフレーズ、メイン写真
- 活動内容: 普段の練習内容、活動日・時間
- 部員紹介: メンバーの学年と一言コメント
- 実績・スケジュール: 大会結果、今後の予定
- 入部案内: 入部方法、見学の案内
最初は1ページにまとめてもOK
ページを分けるのが大変なら、最初は1ページに全部まとめましょう。セクションで区切れば、スクロールで読めるページになります。慣れてきたら複数ページに分けられます。
作る前に決めること
- 部活のイメージカラー（チームカラーがあればそれを使う）
- 載せる写真（活動中の写真が3〜5枚あると良い）
- キャッチフレーズ（「一緒に汗を流そう！」など）
HTMLで骨組みを作る
部活紹介ページのHTMLを書きましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>○○高校 バスケットボール部</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>○○高校 バスケットボール部</h1>
<p class="catchphrase">全力で駆け抜ける、最高の仲間と。</p>
</header>
<nav>
<a href="#about">活動内容</a>
<a href="#members">部員紹介</a>
<a href="#schedule">スケジュール</a>
<a href="#join">入部案内</a>
</nav>
<main>
<section id="about">
<h2>活動内容</h2>
<p>毎週月・水・金の放課後に体育館で練習しています。</p>
<p>土曜日は練習試合や大会に参加することもあります。</p>
<img src="images/practice.jpg" alt="練習風景">
</section>
<section id="members">
<h2>部員紹介</h2>
<div class="member-list">
<div class="member-card">
<h3>キャプテン 田中太郎（3年）</h3>
<p>「最後の大会、全力で頑張ります！」</p>
</div>
<div class="member-card">
<h3>副キャプテン 鈴木花子（3年）</h3>
<p>「チームワークが自慢です！」</p>
</div>
</div>
</section>
<section id="schedule">
<h2>スケジュール</h2>
<table>
<tr><th>日程</th><th>内容</th></tr>
<tr><td>6月15日</td><td>地区大会</td></tr>
<tr><td>7月20日</td><td>夏合宿</td></tr>
<tr><td>9月5日</td><td>文化祭展示</td></tr>
</table>
</section>
<section id="join">
<h2>入部案内</h2>
<p>見学はいつでも歓迎です！</p>
<p>放課後に体育館に来てください。</p>
<p>初心者も大歓迎です。一緒にバスケを楽しみましょう！</p>
</section>
</main>
<footer>
<p>© 2026 ○○高校バスケットボール部</p>
</footer>
</body>
</html>コードのポイント:
- navでページ内リンクを作り、各セクションにジャンプできる
- sectionごとにid属性をつけてリンク先を指定する
- member-cardクラスで部員情報をカード形式にまとめる
- tableでスケジュールを見やすく表示する
CSSでデザインする
HTMLだけだと見た目が地味なので、CSSで部活らしいデザインにしましょう。
CSSの基本は「CSSで最初のスタイルを書こう」で学べます。
body {
font-family: sans-serif;
margin: 0;
padding: 0;
color: #333;
}
header {
background-color: #1e40af;
color: white;
text-align: center;
padding: 40px 20px;
}
.catchphrase {
font-size: 18px;
font-style: italic;
}
nav {
background-color: #1e3a8a;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
border-bottom: 3px solid #1e40af;
padding-bottom: 8px;
}
.member-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.member-card {
background-color: #f0f4ff;
padding: 15px;
border-radius: 8px;
flex: 1;
min-width: 200px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #1e40af;
color: white;
}
img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 15px;
}色選びのコツ
部活のイメージに合った色を選びましょう。
- 運動部: 青、赤、オレンジなど活発な色
- 文化部: 緑、紫、茶色など落ち着いた色
- 吹奏楽部: 金、紺など上品な色
メインカラーを1色決めて、それを基準にデザインすると統一感が出ます。上の例ではバスケ部なので青系（#1e40af）を使っています。
写真や動画を効果的に使う
部活のWebサイトでは、写真が最も重要なコンテンツです。
撮り方のコツ
- 練習中のアクションショットを撮る（動きがあると魅力的）
- 集合写真は明るい場所で撮る
- 横向き（ランドスケープ）で撮るとWebに合う
- 複数枚撮って、一番良いものを選ぶ
画像の詳しい使い方は「HTMLで画像を表示する方法」で学べます。
画像の軽量化
大きな画像はページの読み込みが遅くなります。次の方法で軽くしましょう。
- 横幅を1200px以下にリサイズする
- JPEG形式で保存する（写真に向いている）
- 1枚あたり300KB以下を目安にする
- 無料ツール（Squooshなど）で圧縮する
altテキストを忘れずに
imgタグには必ずalt属性を書きましょう。画像が表示できないときの代替テキストです。
良い例: alt="体育館での練習風景"
悪い例: alt="画像" または alt=""
altテキストは、目の不自由な人がスクリーンリーダーで読むときにも使われます。
公開して部員に共有する
完成したページをインターネットに公開しましょう。
GitHub Pagesで無料公開
GitHub Pages（ギットハブページズ）を使えば、無料でWebサイトを公開できます。
手順:
- GitHubアカウントを作る
- リポジトリを作成する（例: basketball-club）
- HTMLファイルとCSSファイルをアップロードする
- Settings → Pages → ソースを設定する
- URLが発行される
詳しい手順は「GitHub Pagesでサイトを公開する方法」で解説しています。
共有方法
- 部活のグループLINEでURLを共有する
- QRコードを作って部室に貼る
- 学校の掲示板に印刷して貼る
- 新入生向けのチラシにQRコードを載せる
公開前の注意
- 部員の写真は本人の許可を取る
- 個人の連絡先は載せない
- 学校の許可が必要な場合は事前に確認する
文化祭のWebサイト作りにも応用できます。「文化祭のWebサイトをゼロから作る方法」も参考にしてください。
更新・運用のコツ
Webサイトは作って終わりではありません。定期的に更新することで、見る人に「活動している部活だ」と伝わります。
誰が更新するか決める
更新担当を1〜2人決めましょう。おすすめは2年生です。3年生は引退が近く、1年生はまだ慣れていないからです。担当が1人だと負担が大きいので、2人で分担するのが理想です。「写真担当」と「テキスト担当」のように役割を分けると効率的です。
更新頻度の目安
すべてを毎日更新する必要はありません。内容によって頻度を変えましょう。
- 試合結果・大会報告: 当日〜翌日（鮮度が大事）
- 活動スケジュール: 月1回（月初めに翌月分を更新）
- 部員紹介: 年1回（新入部員が入ったとき）
- 写真の追加: 月1〜2回（イベントや練習の様子）
更新が滞ると「この部活はもう活動していないのかな」と思われます。最低でも月1回は何かしら更新しましょう。
引き継ぎのポイント
担当が卒業するとき、次の担当にスムーズに引き継ぐことが大切です。
引き継ぎで伝えること:
- GitHubアカウントのログイン情報
- ファイルの構成と各ファイルの役割
- 画像の保存場所と命名ルール
- 更新の手順（どのファイルをどう編集するか）
- よく使うCSSクラスの一覧
引き継ぎ資料をREADME.mdとしてリポジトリに入れておくと、誰でも読めて便利です。
更新を続けるモチベーションの保ち方
更新が面倒になることもあります。続けるコツを紹介します。
- アクセス数を確認する: 見てくれている人がいるとやる気が出る
- 部員からの反応を聞く: 「サイト見たよ！」と言われると嬉しい
- 更新を部活の活動の一部にする: 練習後5分で写真を1枚アップする習慣をつける
- 新入部員が「サイトを見て入部を決めた」と言ってくれたら最高のモチベーション
まとめ
- ✅ 部活のWebサイトは新入部員募集や活動記録に役立つ
- ✅ 最初は1ページにまとめてもOK
- ✅ HTMLでセクション（活動内容・部員紹介・スケジュール・入部案内）を作る
- ✅ CSSで部活のイメージカラーに合わせたデザインにする
- ✅ 写真は軽量化してaltテキストを書く
- ✅ GitHub Pagesで無料公開してURLを共有する
- ✅ 部員の写真は許可を取ってから載せる
▶ プレビュー
部活のWebサイトは、プログラミングを実践的に学ぶ良い機会です。チームで協力して作ると、さらに楽しくなります。
🚀 HTML/CSSをもっと学ぼう！
部活のサイトが完成したら、もっと本格的なWebサイト作りに挑戦しましょう。このサイトでは、HTML・CSS・JavaScriptを無料で学べるコースを用意しています。
HTMLで最初のページを作ろう →