（教育活動Blog）ホームページをリニューアルしました
IT専門課程のホームページをリニューアルしました。
なぜリニューアルしたのか
以前のホームページはWordPressで制作していました。PHP言語で実装された、いわゆるCMS（Content Management System）としては業界標準と言って良いシステムです。ブラウザ画面でコンテンツ制作ができる、優れたシステムではありますが、次のような課題もありました。
- GUIベースで作っていくので、どうしてもデザインの統一がしにくい。
- コンテンツをしっかり構造化して機械可読（Machine Readable）にしたい。
- コンテンツ全体をAIでチェックしたい。
- コンテンツをGitで管理したい。
- AIに細かい作業をさせたい。
- CDNを使ってみたい。
- CI/CDしたい。
- PHPが不安。
なお前提として、従来からホームページは内製しています。そこで今回のPHPのセキュリティ騒動をきっかけに、リニューアルすることにしました。
リニューアルの方針
- セキュリティ面を考えて静的サイト化。公開できないデータは最初から持たない。
- コンテンツはMarkdownで記述し、HTMLに変換する。
- HTMLに加えてMarkdownでの配信も行う。
- アクセシビリティに配慮する。
- 複数のペルソナを想定して、デザインを切り替え可能にする。
- AIを全面活用。
作業記録
作業はAI（Anthropic社のClaude）と対話しながら進めました。変更の記録はすべてGitに残してあります。その記録（コミット）をもとに、作業の流れを振り返ります。
10月23日：移行と初回の公開準備
1-2限の「Webアプリケーション開発」の授業中にリニューアルを思いつき、11時の授業終了後に作業用フォルダを作成。WordPressから記事・固定ページ・画像のデータを取り出し始めました。夕方にはMarkdownへの変換とAstroによるHTMLの生成ができ、最初のコミットをしました。その日のうちに、サイト内検索（Pagefind）、スマホ用のメニュー、配色、サイト名を整えています。
10月24日：文書構造の立て直し
作業量が最も多かった日です。WordPressで長年編集してきたページには、見た目を整えるための書き方が積み重なっていました。たとえば、見出しの代わりに使われた太字、改行タグによる行送り、飾りとして使われた引用、空の表の列などです。
そこで、見出しと段落の構造をチェックするプログラムを作り、指摘された箇所を一つずつ本来の構造に直しました。このチェックはビルド（HTMLの生成）のたびに自動で実行されるので、崩れた構造が再び入り込むことはありません。
あわせて、アクセシビリティの対応をしました。画像だけのリンクにはリンク先がわかる名前を付け、情報を持つ画像には代替テキストを書きました。夜には、教職員向けの編集ガイドも用意しました。
10月25日〜28日：公開に向けた仕組みづくり
- 投稿のURLを、ファイルの置き場所から自動で決まる形にしました。
- 全ページのMarkdown版を、HTMLと並べて公開しました。AIがサイトを読むとき、レイアウトを除いた本文だけを渡せます。
- 技術系の閲覧者を想定した「テクノロジ」表示を作り込みました。
- sitemap.xmlとrobots.txtを出力し、検索エンジンに登録できるようにしました。
10月31日〜11月1日：公開
移行用のリポジトリを、日々の更新のための保守用リポジトリに切り替えました。11月1日に、CDNのCloudflare Pagesを使って www.it.nkk.ac.jp として公開しました。GitHubに変更を送ると、自動でビルドされ公開されます。作業開始から10日目でした。
11月2日〜：公開後の改善
公開後も、インタビュー記事の追加などのコンテンツ更新と並行して、改善を続けています。
- 色覚の多様性について配色を評価しました。1型・2型・3型の色覚や全色盲の見え方をシミュレーションで再現し、どの見え方でも文字が読みやすいよう、配色を調整しました。
- 「デザイン切り替え」に、文字と背景の明るさの差を大きくする「コントラスト」表示を加えました。
10月23日の作業開始から11月12日までのコミットは233回になりました。
わかったこと
- 人間が手で編集していたサイトには、大量の間違いと不統一が蓄積している。これらを探し出し修正するだけでもAIを使う価値がある。
- アクセシビリティ対応のテストなど、ガイドラインや手法が確立されている作業はAIに任せられる。
- 最初の静的HTMLバージョンは5時間程度で完成している。しかし、その後にデザインやレイアウトの細かい調整を行っており、そこには時間がかかっている。大きなデザインは変わっていないが、細部の完成度が高まったことで、受ける印象も変わっている。この作業は結果を見ながらの修正を繰り返しており、作業はAIが行うとしても、人間の確認や判断が必要で、手間もかかる。
- アクセシビリティ関連のガイドラインに準拠した方がデザインも良くなる。色覚やコントラストの基準に合わせて配色を調整した結果、誰にとっても読みやすい画面になった。
- 文書を構造化しておくことは大事。見出しや段落の構造が正しければ、チェックを自動化でき、AIもMarkdown版から内容を正確に読み取れる。