相談・設計・情報整理
- ページごとの相談
- 構成相談
- 文章相談
- デザイン相談
- 情報整理
AI PRODUCTION RECORD
AI制作記録
AI PRODUCTION RECORDAI制作記録ページの作業風景
ChatGPTとCodexを活用しながら、実際にホームページが完成するまでの過程をまとめました。AIに任せきるのではなく、対話を重ね、人が考え、判断し、仕上げる。AIを“考えるためのパートナー”として活用した制作プロセスを、8つの工程で紹介します。
SPECIAL / ROLE DESIGN
GPTとCodexの使い分け設計
今回のホームページ制作では、相談・設計・情報整理をGPT、実装・コーディング・統合をCodex、方向性・判断・最終確認を人が担いました。AIに任せきるのではなく、役割を分けながら、人が判断して制作を進めています。
実装・コーディング・統合
- HTML / CSS / JavaScript
- ページ実装
- 画像素材の統合
- 完成ZIP管理
方向性・判断・最終確認
- 全体の方向性
- 進行判断
- 違和感の確認
- 公開前の最終確認
- GPTで相談
- 仕様として整理
- Codexで実装
- 人が確認
- サイト完成
使い分け設計 資料
5ページの資料は、役割分担と実装ルールを確認するための参考資料です。PROCESS / 01–08
対話と判断を重ねた、8つの工程。
制作画面を主に掲載しています。カードを選ぶと、右側に詳しい記録が開きます。01
コンセプト設計
対話を重ね、サイトの方向性と言葉を整理。
02
ワイヤーフレーム
構成案を比較し、読みやすい導線を設計。
03
写真素材
人物・空間・道具が伝わる実写素材を選定。
04
ヒーロー画像
人物とPCへ視線が流れる構図を検討。
05
画像調整
実写を軸に、明るさ・ぼかし・余白を調整。
06
Codex実装
デザインをコードに変え、各画面へ展開。
07
改善の積み重ね
画面を見ながら、読みやすさと操作感を改善。
08
完成へ
人の感性で最終判断し、公開できる形へ。
