AI-Continuity Lab Design v1完成までの記録

はじめに

AI-Continuity LabのDesign v1が完成しました。

AI-Continuity Labは、

「AIを使うだけで終わらせない。
作る、育てる、仕組みにする。」

をテーマにした、AI・自動化・IP開発の実験ラボです。

今回のDesign v1では、WordPressサイトとしての見た目を整えるだけでなく、今後の記事制作、制作ログ、ツール開発、Codex Skills整備へつなげるための土台を作りました。

この記事では、Design v1完成までに何を整えたのか、どこで詰まったのか、ChatGPTとCodexをどう使い分けたのかを記録します。

なぜDesign v1を作ったか

最初に必要だったのは、「AI-Continuity Labが何をする場所なのか」が伝わる公開拠点でした。

AIツールを試すだけではなく、実際に作り、記録し、仕組みにしていく。
その過程を残すためには、SNSだけではなく、長く見返せる本拠地が必要でした。

Design v1で目指したのは、次のような状態です。

• AI Watch記事を公開できる
• Lab Logsとして制作過程を残せる
• Works / Container Factoryで作っているものを見せられる
• Tech Stackで使っているツールを整理できる
• Aboutページでプロジェクトの考え方を伝えられる
• 記事制作や運用を今後も続けられる

つまり、Design v1は単なるデザイン作業ではなく、AI-Continuity Labの制作基盤づくりでした。

Design v1で整えたもの

Design v1では、主に以下を整えました。

• トップページ
• AI Watch
• Lab Logs
• Works / Container Factory
• Tech Stack
• Aboutページ
• プライバシーポリシー
• 広告・アフィリエイトについて
• お問い合わせ
• 個別記事ページ
• 検索結果ページ
• ヘッダー / フッター
• OGP画像
• 記事制作テンプレート
• Design v1 Completion Report
• Article production workflow
• Codex用レビューSkill

見た目の方向性は、白・黒・ミントを軸にした、クリーンなSaaS / テックメディア風です。

派手な装飾よりも、読みやすさ、余白、情報の整理を優先しました。

実際に詰まったこと

一番大きかったのは、「ページごとに少しずつ古い見た目が残る」ことでした。

たとえば、固定ページでは新しいヘッダーになっていても、投稿ページや検索ページには古いヘッダーが残っていました。

また、記事カードのサムネイル比率も、ページによって効いているCSSが違い、16:9の画像でも上下が切れて見えることがありました。

最後のほうでは、以下のような細かい調整も行いました。

• 投稿ページのヘッダー統一
• 検索ページのヘッダー統一
• 記事カードのサムネイル比率調整
• 個別記事ページの背景白化
• 静的ページのタイトル枠整理
• スマホフッター下の余白調整

どれも一見小さな修正です。
ただ、Design v1として完成と言える状態にするには、こうした細かい違和感を一つずつ潰していく必要がありました。

ChatGPTとCodexの役割

今回の制作では、ChatGPTとCodexを分けて使いました。

ChatGPTは、主に考える作業に使いました。

• サイトの方向性整理
• ページ構成の検討
• 文章やブランドメッセージの整理
• 次にやる作業の優先順位づけ
• Codexへ依頼する内容の言語化
• 作業結果の確認と判断

Codexは、主に実装とGit作業の補助に使いました。

• 既存ファイルの確認
• CSSやPHPの差分作成
• ブランチ作成
• コミット
• PR作成
• 差分確認

ただし、すべてをCodexに任せたわけではありません。

マージ判断、VPSへの反映、PC・スマホでの表示確認、完成とするかどうかの判断は、人間が確認しながら進めました。

この使い分けはかなり重要でした。

ChatGPTで「何をしたいか」を整理し、Codexで「どのファイルをどう変えるか」を進める。
そして最後に、人間が実表示を見て判断する。

この流れにすると、非エンジニアでも作業の見通しを持ちやすくなります。

完成までに学んだこと

今回のDesign v1制作で学んだのは、AIを使っても人間の判断はなくならないということです。

むしろ、AIを使うほど次の判断が大切になります。

• 今回の作業範囲はどこまでか
• 触ってはいけないファイルは何か
• 見た目の違和感は本当に修正すべきか
• 今すぐ直すべきか、別PRに分けるべきか
• 完成とみなす基準はどこか

AIは作業を速くしてくれます。
でも、完成の判断や優先順位づけは、人間側に残ります。

Design v1では、作業を小さく分け、PR単位で確認しながら進めました。

この進め方は、今後の記事制作やツール開発にもそのまま使えそうです。

次フェーズ

Design v1が完成したので、次はPhase 2として記事制作ワークフローに移ります。

具体的には、以下を進めます。

• AI Watch記事の公開
• Lab Logs記事の公開
• アイキャッチ画像ルールの整備
• 図解ルールの整備
• WordPress / note / Substack / X の媒体別展開
• 記事レビュー用Skillの検討
• GitHub Issuesを使った軽いタスク管理

AI-Continuity Labは、ここから記事を増やしながら、制作ログを資産化していきます。

まとめ

AI-Continuity Lab Design v1は、公開サイトとしての最初の安定版です。

トップページや主要ページだけでなく、記事テンプレート、検索ページ、個別記事ページ、ドキュメント、Codex Skillまで含めて、今後の活動の土台を整えました。

今回の制作で分かったのは、ChatGPTとCodexを使えば、非エンジニアでもWordPressサイト制作をかなり前に進められるということです。

ただし、AIに丸投げするのではなく、人間が方向性を決め、作業を分け、確認しながら育てていく必要があります。

作る、育てる、仕組みにする。

Design v1は、その最初の一区切りです。
ここからは、記事制作と実験ログを積み上げていきます。

関連記事

Design v1制作で使ったChatGPTとCodexの実例は、以下の記事でまとめています。

ChatGPTとCodexだけでWordPressサイトは作れる？非エンジニアが実際に構築してみた結果
https://ai-continuitylab.com/chatgpt-codex-wordpress/

CodexとClaude Codeの違いや、個人開発での使い分けは以下の記事で整理しています。

Claude CodeとCodexの違いとは？個人開発者はどちらを使うべきか
https://ai-continuitylab.com/claude-code-vs-codex/

Web調査や記事制作の下調べに使えるChatGPT Atlasについては、以下の記事で整理しています。

ChatGPT Atlasとは？ブラウザ型AIで何が変わるのか
https://ai-continuitylab.com/chatgpt-atlas-browser-ai/