TECHNICAL NOTES
AstroとCodexを活用したWebサイト制作・公開の流れ
今回のWebサイト制作
このたび、当社Webサイトを全面的にリニューアルしました。新しいサイトでは、事業や製品の情報を整理するとともに、当社の技術開発や日々の取り組みを、これまで以上に分かりやすく発信できる構成を目指しました。リニューアルとドメイン変更については、新着情報「ホームページリニューアルおよびドメイン変更のお知らせ」でもご案内しています。
このリニューアルは、入社後に私が担当した仕事の一つです。会社の事業や製品について理解を深めながら、掲載する文章や写真を整理し、サイト全体の構成を見直しました。
新しいWebサイトは、Webサイト制作のためのフレームワークであるAstroを使って構築しています。Astroでは、文章、画像、ページの構成、デザインなどをプロジェクト内のファイルとして管理し、それらをブラウザで表示できるHTMLやCSSへ変換します。
Astroが生成する公開用のファイルは、基本的に表示時の複雑な処理を必要としない静的なWebページです。そのため、会社案内や製品情報、技術ノートなどを中心とする今回のサイトと相性がよく、ページの追加や修正もプロジェクト内のファイル編集として進められます。ソースコードはGitHubで管理し、変更をGitHubへ反映すると、Cloudflareを通じて公開される構成です。
新着情報ではリニューアルそのものをご案内しましたが、制作を進めるなかで、技術的にも強く印象に残る体験がありました。写真や文章を用意してから、ページの実装、動作確認、公開へ進むまでの一連の作業を、ターミナル上で動作するAIのCodexと対話しながら進められたことです。この経験を記録しておきたいと考え、技術ノートとして改めて紹介することにしました。
掲載する内容と完成した画面は人が判断し、Codexには既存ファイルの調査、実装案の作成、サイトが正常に生成できるかの確認などを依頼しました。AIが生成した内容をそのまま公開するのではなく、一つずつ変更内容を確認しながら進めています。
AIに素材をどう渡すか
Codexに写真や文章を参照してもらう方法として、必要な素材をプロジェクト内の作業用フォルダにまとめることにしました。素材の場所や内容を毎回文章で説明する必要がなく、AIとのやり取りを整理しやすくなります。
今回は、公開用のファイルとは別にwork/フォルダを用意し、サイトで使用する写真やページの下書きをまとめました。
そのうえで「このフォルダにある写真と下書きを使ってページを作りたい」と伝えると、Codexが素材と既存サイトの両方を確認できます。
さらに、掲載するページ、伝えたい内容、希望する見せ方を伝えます。Codexから提示された実装内容を確認し、必要に応じて修正を依頼しながら、既存サイトの構成やデザインに合わせてページを整えます。
work/は、そのまま公開される場所ではなく、人が選んだ素材をCodexへ受け渡すための一時的な作業場所です。このサイトではwork/をGitの管理対象から外し、元の写真や下書きが誤ってGitHubへ登録されないようにしています。実際に公開する画像と文章だけを、確認後にサイト側へ移します。
なお、Gitの管理対象から外すことと、AIに参照させる情報を安全に管理することは別の問題です。work/には公開可能な素材だけを置き、機密情報や個人情報は入力しない方針としています。利用するAIの設定やデータの取り扱いも、事前に確認する必要があります。
編集から公開までの流れ
実際の作業は、主に次の流れで進めました。
- 使用したい写真や文章の下書きを、作業用の
work/フォルダへまとめる - 掲載目的と希望する構成をCodexへ伝える
- Codexに変更内容を提示してもらい、続けて
npm run buildを実行してサイト全体が正常に生成できることを確認する npm run devでローカル環境にサイトを表示し、人がブラウザで仕上がりを確認する- 修正点があれば、再度Codexへ伝えて調整する
- 内容を承認したうえで、変更をGitHubへ反映する
- Cloudflareによる自動公開が完了したあと、実際のサイトを確認する
サイトが正常に生成できても、写真の選び方、余白、改行、文章の伝わり方が適切とは限りません。そのため、Codexによる実装とビルド確認に加え、変更箇所、文章、画像、ブラウザでの表示を人が確認し、承認した内容だけをGitHubへ反映する形にしました。
人間とAIの役割分担
この方法では、AIがすべてを自動で決めるわけではありません。人間とAIが、それぞれ得意な部分を受け持ちます。
- 人間：公開する素材の選定、目的や意図の説明、変更箇所の確認、文章と見た目の最終承認
- Codex：既存ファイルの調査、実装案の作成、画像やリンクの整理、ビルド確認、承認後のGit操作
- GitHub：ソースコードと変更履歴の管理
- Cloudflare：GitHubへ反映されたサイトのビルドと公開
「この素材をもとにページを追加したい」「新しいページへのリンクをナビゲーションに追加したい」と目的を伝えると、Codexは関連するファイルを調査し、サイト全体との整合を考慮した変更案を作成します。その提案に対し、具体的な修正指示を重ねて仕上げていきます。
Codexには実装だけでなく、サイト構成や技術的な課題について相談することもできます。また、ページタイトル、説明文、見出し構造、リンクなど、SEOに関わる基本的な項目の確認や、公開後の本番サイトへアクセスしてページが正しく表示されているかの確認も依頼できます。
ただし、SEOの効果や公開後の品質をAIだけで判断することはできません。検索結果での見え方、パソコンやスマートフォンでの表示、掲載内容の正確性などは、最終的に人が確認します。
会社として何を伝えるか、どの写真を公開するか、実装と表示に問題がないかは、人が責任を持って判断します。Codexは判断の代行者ではなく、調査と実装を効率化するための制作支援として位置付けています。
制作の感覚が変わった
ターミナルAIを使い慣れている方にとっては、特別な手順ではないかもしれません。しかし、当社にとってはWebサイト制作の感覚が大きく変わる体験でした。
従来は、文章や写真を用意したあと、それらをWebページとして実装するための作業が別に必要でした。今回は、素材と目的をCodexへ伝え、提案された変更を確認しながら実装し、ビルドと表示を確認してGitHubへ反映するところまで、一つの流れとして進められました。
人は「何を伝えたいか」と「完成したものが適切か」に集中し、AIが調査や実装などの技術的な作業を支援します。Webサイトを一度作って終わりにするのではなく、新しい写真や技術情報が増えたときに、自分たちの判断で更新して育てていける。その距離が大きく縮まったことに、最も感動しました。
今後の運用
今後も、技術調査の記録や新しい写真をwork/へ用意し、Codexと相談しながらページを追加・更新していく予定です。
AIが提案した変更はそのまま公開せず、変更箇所、掲載内容、ビルド結果、手元のパソコンでの表示を人が確認します。公開可能な素材だけを使用し、承認した変更のみをGitHubへ反映する運用を続けます。この確認手順を保ちながら、日々の活動を無理なく発信できるWebサイトとして育てていきます。