クラウド / システム
以前のWordPressサイトは、長い間よく働いてくれました。記事や画像、仕事の記録が蓄積していました。でも個人サイトのためにDB付きCMSを維持するのは、机のランプを点けるだけのためにエンジンを回しているように感じ始めました。
もっと速く、運用しやすく、自分らしいものにしたい。AIのコーディングパートナーと、どこまで移行できるかも知りたくなりました。魔法の「変換ボタン」ではなく、実際の設計判断を一緒に考えながら。
できたのが、このサイトです。S3とCloudFrontで静的ファイルを配る、手作りのクラウドネイティブなポートフォリオ。昔の記事を残し、写真、資格、トレーニングデータ、小さなゲーム、より詳しい仕事の紹介を加えました。
成功したのは、WordPressをAIに置き換えたことではありません。残す価値のある内容と、もう必要のない仕組みを切り分けたことです。
まず「AIベース」の意味をはっきりさせる
ページを返すために言語モデルは必要ありません。普通の閲覧者に利点がないまま、遅延、複雑さ、依存を増やすだけです。静的であることは、このサイトの長所です。
AIを使ったのは開発です。旧資料の調査、構成案、文章の推敲、コードの作成・整理、不整合の発見、レスポンシブ調整、繰り返し作業のスクリプト化を支援してくれました。素材を選び、思い込みを直し、見た目を判断し、本番変更を承認するのは私です。
だから「AI支援」が正確な表現です。構築と保守で知能を使い、配信するシステムはシンプルなままにしました。
1. デザインより先に棚卸し
移行は新しい配色ではなく、事実の確認から始めます。WordPressの記事、ページ、分類、メディア参照を集め、コンテンツを構造化JSONに、関連ファイルをローカルアーカイブに保存しました。
これで二つの備えができました。
- 本番サイトを何度も取得せずに変換できる、機械可読なコンテンツアーカイブ
- 元の画像、文書、資格証明書を含むメディアライブラリー
URL、タイトル、公開日、内部リンク、誤って公開してはいけない内容も確認しました。完全なバックアップと公開サイトは別物です。下書き、不要ファイル、個人情報、認証情報が含まれ得るので、保存と公開は別々に判断します。
2. コンテンツをWordPressから切り離す
最も価値があったのは、テーマ、プラグイン、DBスキーマではなく内容でした。記事がJSONになり、メディアが普通のフォルダーにあれば、表示側は交換できます。
ホームではJavaScriptが記事データからカードを作り、各記事には独立した静的HTMLも用意しました。構造化データの柔軟性と、検索エンジンや直接来る読者が使える通常のURLを両立できます。
「まず保存、その後選ぶ」。この順番なら、新デザインに置く場所がないという理由で過去を捨てずに済みます。アーカイブを確保し、編集上の判断は後にしました。
3. CMSではなく、人を中心に設計する
WordPressでは記事の並びが中心になりがちです。でも新サイトの中心は自己紹介、仕事、キャリア、資格、写真、トレーニング、技術メモ、そして少しの遊びでした。
その構成をHTML、CSS、JavaScriptで直接作りました。何千ものサイトに対応する汎用テーマはありません。メニュー、文字組み、画像、操作の細部を、このポートフォリオのために用意しています。
作り直しは、繰り返しの調整でした。ローカルで見て、端末が腕に重なる、写真が切れる、見出しの折り返しが変だ、と伝えるとすぐ直せます。見た目の判断は人が行い、CSSへ落とす速度をAIが上げてくれました。
4. 古いURLと検索での見つけやすさも、本番データとして扱う
新しいトップだけきれいでも、長年の記事が検索から消えたら成功ではありません。各記事に独立URL、説明的なタイトル、メタ説明、canonicalを用意し、シェア用のOpen Graph/Twitter情報、著者と技術記事を示すSchema.orgデータも付けました。
サイトマップには主要ページと旧記事を掲載。名前はBernd Kuhlenで統一し、Bernhard Kuhlenも別名として示します。クロール方針を明示し、インタラクティブなホームを実行しなくても、普通のリンクでたどれるようにしました。
古いリンクに被リンクや検索履歴があるなら、そのまま使えるようにするか、新しいページへ恒久リダイレクトします。URL対応表は公開後の片付けではなく、移行計画の一部です。
5. インフラは、よい意味で退屈にする
ファイルは暗号化・バージョニングされた非公開S3に置きます。公開窓口はCloudFrontで、OACを通じてS3に接続。HTTPSと新しいTLSを要求し、レスポンスヘッダーポリシーで主要なセキュリティヘッダーを付けます。
インフラはコンソールの手作業だけでなく、CloudFormationに記述しました。デプロイスクリプトでスタックと公開対象ファイルを更新し、当時はCloudFrontキャッシュを無効化する構成でした。変更をレビューでき、リリースを再現できるようにしています。
静的ホスティングで、WordPressのDB、PHP、テーマやプラグインの更新がリクエスト経路からなくなりました。運用責任は残りますが、問題は小さく、見えやすくなります。
6. まずプレビュー、その後切り替え
作業中はローカルのNginxコンテナで表示しました。本番に出す前に、PCとスマートフォンのレイアウト、過去の文書、ゲーム、トレーニンググラフを確認できました。
安全な切り替えには、次を含めます。
- コンテンツの更新停止、または最終エクスポートの明確化
- DBとメディアの完全なバックアップ
- 主要URLのローカル・ステージング検証
- 切り替え前のDNSと証明書の準備
- 以前のオリジンへ戻す手順
- 開発端末の外からの公開後チェック
S3バージョニングとIaCは復旧を助けますが、ロールバック手順の代わりにはなりません。
7. アプリサーバーを外した後も、監視する
静的サイトでも故障し、ボットが来て、想定外のアクセスが発生します。CloudFrontログにはリクエスト、ステータス、User-Agent、エッジ拠点が残り、保持期限を決めたCloudWatchでアクセス量とHTTPステータスを確認します。
地域別表示はアクセス元の傾向に役立ちますが、エッジ拠点やIP由来の国・市を、確認済みの人物と取り違えてはいけません。運用データはリクエストについて答えるもので、本人確認になることはめったにありません。
これで比較の基準もできます。リンク切れを誰かが報告するのを待たず、エラーの傾向や要求されたパスを調べられます。
8. WordPressでは思い付かなかったものを作る
従来のブログテーマから自由になると、自分の関心に合う機能を加えやすくなりました。Apple Healthを日・週・月の集計に変換し、資格を専用アーカイブに、写真に説明を付け、SnakeとGalagaを遊び場に置きました。
これも静的ファイルとブラウザー側のコードで配信します。重い基盤を足したのではなく、小さく焦点の合った機能が共存できる構成を作ったのです。
AIが得意だったこと、確認が必要だったこと
繰り返しの調査、変換案、最初の実装、文章の確認、複数ファイルへの細かな修正でAIは特に役立ちました。記事データ、HTML、サイトマップ、配信パッケージの関係も扱えます。
それでも検証は必要です。もっともらしいリンクが間違うことも、正しいCSSが実機で不格好になることもあります。文章が一般論に寄ったり、実装以上のことをうたったりもします。インフラのコマンドは、文中の誤字よりはるかに大きな影響を持ちます。
一番よかったのは、対話しながらも手順を守る進め方です。実物を調べ、範囲を絞って変え、プレビューし、テストしてから公開する。AIはこのループを速めますが、省略はしません。
繰り返し使える移行チェックリスト
- WordPressのDB、アップロード、設定をバックアップする。
- 記事、ページ、分類、日付、著者、メディア参照を書き出す。
- 公開、非公開、不要、要確認に分類する。
- URL一覧とリダイレクト対応表を作る。
- 実際の要件を満たす最もシンプルな設計を選ぶ。
- 小さなデザインシステムと再利用できるテンプレートを作る。
- 検索で残したい内容に、独立した意味の通るHTMLを作る。
- メタデータ、canonical、構造化データ、robots、サイトマップを加える。
- アクセシビリティ、画面サイズ、リンク、文書、エラーページを確認する。
- インフラとデプロイをコードにする。
- バックアップ、監視、試した復旧経路を用意して切り替える。
- 新サイトが安定するまでアーカイブを残す。
引き換えにしたもの
静的サイトが、すべてのWordPressに最適な代替とは限りません。非技術者の編集者が多い報道サイト、複雑な編集フロー、コメント、頻繁に変わるサーバーデータには、成熟したCMSやヘッドレスCMSが合う場合もあります。
コードで維持する個人ポートフォリオでは、判断が違います。ブラウザー編集の便利さと引き換えに、攻撃対象の少なさ、予測しやすい配信、変更履歴、体験の自由を得ました。AIがコード中心の作業の手間を減らし、この選択を現実的にしてくれました。
この障害から学んだこと
旧WordPressを捨てたのではありません。丁寧に分解し、内容を残し、役立つ部分を前へ出し、見せ方を作り直し、インフラを簡潔にしました。
もう一度やるなら、どのAI製品で置き換えるかより先に、何を残すべきか、サイトが本当にすべきことは何か、どの複雑さを外せるかを考えます。そのうえでAIを、速くて頼れる協力者として使う。実際のファイル、テスト、人の判断を基準にしながら。