この記事では、「生成AIを使うとどんなことができるのか」という全体像や概念を理解していただければと思っております。
※本記事では、具体的な操作手順など技術的な詳細は記事が長くなるため、触れていません。(具体的な手順は、今後動画コンテンツで解説するか、ご希望の方に直接お伝えする機会を作れればと考えております。)
そもそも「Codex」ってなに?

Codexは「人間の代わりにプログラミングコードを書いてくれるAIツール」です。
通常、WordPressのWebサイトをゼロから構築する場合、裏側では「PHP」「HTML」「CSS」といった専門的な言語を使って複雑なプログラムを書く必要があります。これらを人間が手作業で行うと、膨大な時間と専門知識、そして高い外注費がかかります。
しかし、Codexを使えば、そうした難しい専門言語のコードをAIが自動で生成してくれます。
※コストと利用制限について
今回の制作で発生した費用は、**ChatGPT Plusの月額約3,000円(税込3,300円)**のみでした。
ChatGPTとCodexは同じOpenAIが提供しているため、別途追加で高額な契約をする必要はなく、Plusの料金プラン内でそのまま利用可能でした。サイト構築にあたって何回も修正・コード生成を行いましたが、一度も容量の制限がなく、制作できました。
Codexを使ってWebページを作ってみた(全体プロセスの概要)
どのような流れで当メディアのサイトを作り上げていったのか、おおまかなステップを紹介します。
参考サイトや「どんな構成にしたいか」を伝える
はじめに、Codexに対して「どんなサイトを作りたいか」というイメージを伝える必要があります。
Web制作会社に発注する際と同じように、「メニューの位置」「カラム数(何列にするか)」といった最低限の配置要件を伝えたり、参考となるWebサイトのイメージを共有したりします。Codexは、大まかな指示や参考サイトのテイストを伝えるだけでも、しっかりと意図を汲み取って全体のベースを組み立ててくれます。
※参考サイトに関する注意点
参考サイトをAIに見せることで似たテイストのものは作れますが、既存サイトに酷似させすぎると著作権などの権利トラブルに発展するリスクがありますので、ご注意ください。
対話を繰り返してバージョンアップ

最初の1回で理想通りのデザインができるわけではなく、「この文字の大きさを修正して」「このボタンの配置を変えて」といった指示を何回も出し、生成AIと一緒に修正を繰り返していきました。
こうした生成AIとの対話を重ねることで、クオリティの高いサイトへと仕上がっていきました。
「まず作ってみる」ができる時代に
今回、自分でサイトを構築してみて、感じたのは、「作る前に、長期間悩むよりも、まずはAIで形にしてみる(見える形にする)方が早いのではないか?」ということです。
これまでは、何か作ろうとすると、当然コードを書く必要があり、そこに人件費がかかるため、テスト用のWebサイトや試作モデルを作るだけでも、数万円~数十万円が必要でした。
しかし、生成AIを使えば、アイデア段階でもすぐに形にし、実際の画面として目の前に立ち上げることができます。
ですので、最初から100点の完璧な設計を目指すのではなく、「とりあえず作ってみて、動きながら修正していく」スタイルをできるような時代になってきたと感じています。
おわりに
今後、外部のエンジニアや制作会社にWebサイト制作を依頼(ディレクション)する立場になった際も、この概念を知っておくことが強みになると考えています。
「生成AIを活用すれば、短期間で試作が作れる」「こういう手順でプロトタイプを出してほしい」といった指示が出せるようになり、打ち合わせなどの質が変わる可能性があります。
生成AIを活用すれば、アイデアをその日のうちに目に見える形へ落とし込むことができます。まずは「AIを使えばこんなことができる」ということを知っていただき、事業や地域活動での新しいアイデア出しや、専門家への指示・ご相談に役立てていただければ幸いです。