石狩高校・石狩翔陽高校 同窓会（茨戸野会）様 ホームページ制作実績

課題

旧サイトは2012年に公開されたもので、当時のホームページ作成ソフトで制作されていました。文字コードがShift_JISのままで、スマートフォン向けの表示指定（viewport）も持たないため、スマートフォンでは文字が小さく読みづらい状態でした。 また、お知らせや行事の案内を更新するには制作の手を借りる必要があり、掲載内容の一部が長く据え置かれたままになっていました。同窓会の出欠は案内状に同封した返信はがきのみで受け付けており、Web上に受け皿がありませんでした。

ご提案・対応

React 18 + Vite 6 + React Router でサイトを作り直し、Cloudflare Workers で配信する構成にしました。トップページはヒーロー、茨戸野会について、会員の皆さまへ、お知らせ、イベント、ご連絡の各セクションを持つハブ構成とし、母校の校舎写真を軸に深緑と金でまとめています。 お知らせ・イベント・よくあるご質問は自社CMS「UpNote」の公開APIと連携し、同窓会ご自身で更新できるようにしました。記事にはそれぞれ個別URLを持たせ、ビルド時プリレンダリング（SSG）で本文込みの静的HTMLを生成しています。 ご連絡フォームには「お問い合わせの種類」の切り替えを設け、通常のお問い合わせと同窓会出欠フォームを1つのフォームで扱えるようにしました。出欠フォームでは出席／欠席／未定の選択と、期別（卒業年度・生まれ年）の選択ができます。期別の一覧は旧サイトの記載を引き継ぎ、石狩高校23期・石狩翔陽高校分は卒業年と生まれ年2か年を併記、翔陽高校の期は西暦から自動生成して年次更新が不要な形にしています。 公開にあたっては新しく独自ドメインを取得したため、旧サイトの各ページから新サイトの対応ページへ301リダイレクトする設定を用意しました。あわせて構造化データ（Organization / ItemList / FAQPage / NewsArticle / Event）とllms.txtを出力し、検索エンジンとAI検索の双方から内容を読み取れるようにしています。画像はWebP化とリサイズで合計12.7MBから1.1MBに削減しました。

成果

スマートフォンに対応し、スマートフォン・タブレット・PCのいずれからも読みやすい表示になりました。 お知らせ・イベント・よくあるご質問を同窓会ご自身で更新できるようになり、案内や開催情報を掲載するのに制作の手を介さずに済む運用に切り替わりました。同窓会の出欠についても、返信はがきに加えてWebから申請できる導線ができています。 旧サイトの各URLは新サイトの対応ページへ転送する設計とし、これまでに蓄積された検索評価を引き継げるようにしています。公開直後のため、検索順位やアクセス数の推移は今後の計測となります。

納品物・成果物

・Webサイト一式（トップ／お知らせ／イベント／ご出席申請・お問い合わせ ＋ 記事詳細ページ） ・引き継ぎ資料（環境変数一覧、CMS運用手順、SEO移行手順、判断が必要な項目の一覧） ・旧サーバ用リダイレクト設定ファイル ・OGP画像・ファビコン

学び・再現ポイント

同窓会サイトでは「期別（卒業年度）」が同窓生を識別する軸になります。今回は旧サイトの期別一覧をそのまま引き継いだうえで、各期の生まれ年2か年を併記しました。卒業年だけでは自分の期を思い出せない方が一定数いるためで、生まれ年があると迷わず選べます。翔陽高校分は西暦から自動生成する実装にして、毎年の手作業を不要にしました。 出欠受付は独立したフォームを作らず、お問い合わせフォームに種類の切り替えを設けて統合しました。CMSの問い合わせAPIが受け取れる項目が固定でも、選択した種類と追加項目を本文の末尾に整形して連結すれば、受信箱側で判別できる形に収まります。フォームを増やさない分、同窓生にとっても入口が1つで済みます。

制作イメージ