はじめに：120年の伝統校の同窓会サイトを、令和仕様に総リニューアル
「同窓会のホームページを新しくしたいんだけど…」
この一言から、私の“ちょっとしたつもり”の作業は始まりました。
ところがフタを開けてみると、
-
最先端のWeb技術
-
そして 3種類のAI（Gemini・Codex・Claude）
を総動員する、なかなかの大プロジェクトになりました。
今回リニューアルしたのは
旭川東高等学校同窓会 札幌突兀会（とっこつかい） のサイトです。
旭川東高校は1903年（明治36年）創立、卒業生は3万5千人を超える伝統校。
世界陸上やり投げ金メダリストの北口榛花さんも卒業生ですね。
そんな母校の同窓会サイトを、
引っ越ししつつ、中身もフルモデルチェンジしました。
見た目は落ち着いた普通の同窓会サイトですが、中身はかなりの“ハイテク仕様”。
「着物姿の侍が最新のMacを使っている」ようなギャップを楽しんでいただければと思います。
第1章：「突兀」と独自ドメインの話
最初に立ちはだかったのは、会の名前にも入っているこの漢字。
突兀（とっこつ）
読めなかった方も多いと思います。
実は、旧制旭川中学校の校歌の一節
「突兀七千有余尺 大雪山は巍然たり」
から取られた言葉です。大雪山が“グッとそびえ立つ”様子を表しています。
FC2から「tokkotu.jp」へ
長年お世話になったFC2の無料ホームページから、
思い切って 独自ドメイン「tokkotu.jp」 を取得しました。
独自ドメインにすると…
といったメリットがあります。
同窓会サイトとしては、なかなかの“投資”ですが、
「札幌突兀会としてきちんとしたサイトを持ちたい」という思いから、踏み切りました。
第2章：AI三国志 〜3人の助っ人の役割分担〜
今回の制作では、3種類のAIを使い分けました。
イメージとしては、三国志の「劉備・曹操・孫権」みたいな感じです。
🎨 Gemini：デザイン担当
-
サイト全体の色合い
-
レイアウト（どこに何を置くか）
-
高齢の方でも見やすい文字サイズやボタンの大きさ
などを一緒に考えてくれる“デザイン参謀”です。
「伝統があって落ち着いている。でも古臭くはない」
そんな色と雰囲気を提案してもらいました。
💻 Codex：動き担当
-
スマホでメニューを開いたときの動き
-
ページの中をスッと開いたり閉じたりする機能（校歌など）
-
「ページの一番上に戻る」ボタン
といった、ちょっとした“便利な動き” を作るのが得意なAIです。
昔のサイトでは難しかったスマホ対応も、
今はAIの助けを借りてスムーズに作れるようになりました。
📚 Claude：文章と構造担当
-
ページの文章の整理・言い回し
-
「どこに何の情報があると分かりやすいか」という構成
-
Googleなど検索サイトに正しく理解してもらうための情報整理
などを手伝ってくれる、いわば“編集長”のようなAIです。
第3章：誰でも使いやすいサイトに
今回、特にこだわったのが 「誰でも使いやすいこと」 です。
-
文字を大きくしてもレイアウトが崩れない
-
背景と文字の色のコントラストを強めにして読みやすく
-
キーボードだけでも操作できる
-
目の不自由な方の読み上げソフトでも読めるように
など、いわゆる「アクセシビリティ」と呼ばれる部分を
かなり丁寧に作り込みました。
卒業生は3万5千人以上。
その中には、年齢も、体の状態も、使っている機器も本当にさまざまな方がいます。
「誰が見ても、ちゃんと読めるサイトにしたい」
という思いから、少しやりすぎなくらいAIが頑張りました（笑）
第4章：スマホで校歌を読む工夫
最近は、ほとんどの方がスマホでネットを見ています。
そこで今回のサイトは スマホ画面を最優先 に設計しています。
特に難しかったのが、旧制旭川中学校の校歌。
5番まであり、旧仮名遣いの漢字も多く、文字だけ並べるとかなりのボリュームです。
そこで、
-
見出しをタップすると
-
その段だけパタンと開く「アコーディオン方式」
を採用しました。
必要なところだけ開けるので、画面がスッキリして読みやすくなります。
スマホでも紙でも読みやすいよう、裏側でこっそり工夫しています。
第5章：ページ表示をとにかく速く
同窓会サイトにそこまで必要か？と言われそうですが（笑）、
表示速度 にもかなりこだわりました。
-
画像のサイズを最適化
-
不要なものは読み込まない
-
文字のフォントの読み込み方法を工夫
といったことを積み重ねた結果、
ページの表示時間は 2秒以内 になりました（以前は5秒以上）。
「開いてもなかなか出てこないサイト」は、それだけで閉じられてしまいます。
せっかく来ていただいた方にストレスを感じさせないよう、
ここは少し“技術者の意地”を発揮しました。
第6章：検索に強いサイトへ
今回のリニューアルでは、検索対策も行いました。
-
「旭川東高校 同窓会 札幌」
-
「札幌突兀会」
などで検索したときに、きちんと上の方に出てくるよう、
サイトの中に「これは札幌突兀会の公式サイトですよ」という情報を
機械にも分かる形で記載しています。
これにより、以前よりも検索で見つけてもらいやすくなりました。
同窓生がスマホでサッと検索したときに、迷わず辿り着けるはずです。
第7章：地味だけど効く“便利ポイント”
見た目には派手ではありませんが、
日々使っているとじわじわ効いてくる工夫がいくつかあります。
-
スクロールしても、上のメニューが画面に残り続ける
（どこからでもすぐ他のページに移れる） -
どの画面サイズでもレイアウトが崩れない
-
印刷用に文字の行間や余白を整えてある
など、「あえて気づかれないくらい自然に便利」になることを目指しました。
まとめ：過剰スペック＝同窓会への愛情
正直に言うと、今回のサイトは**かなりの“過剰スペック”**です。
普通の同窓会サイトは、
-
テンプレートのブログサービスや
-
WordPressの無料テーマ
でも十分作れます。
それをあえて、
-
AI3種類を駆使し
-
最新のWebの作法に沿って
-
一つひとつ手作業で仕上げた
のは、
「母校と同窓会のために、ちゃんとしたものを作りたい」
という、ちょっとした職人魂の表れです。
訪問してくださる方の 99%は、細かいこだわりには気づかない と思います。
ですが、残り1%の“技術オタク”の同窓生が見たら、きっとニヤッとしてくれるはずです。
「これ、やりすぎじゃない？」
と。
その「やりすぎ」が、作り手の愛情だと受け取っていただければ嬉しいです。
旭川東高校というフィールド
最後に、今回の舞台となった母校について簡単に。
120年以上続く歴史を、これからも未来に引き継いでいくために、
今回のサイトリニューアルが少しでも役に立てばと思っています。
最後に：ぜひ一度触ってみてください
-
本番サイト： https://tokkotu.jp/
スマホで見たときのおすすめポイント
-
右上の「三本線（ハンバーガー）」をタップすると、
メニューがスッと出てきます。 -
校歌のページで曲名…をタップすると、
歌詞がふんわり開いたり閉じたりします。
技術はあくまで“道具”です。
本当に大切なのは、サイトを通じて 同窓生同士がつながること。
この新しいサイトが、
札幌突兀会の活動と、皆さんの交流の一助になれば幸いです。
