AI 時代において、個人サイトは最高の履歴書です。
昨日、私の個人サイトのデモを公開したところ、ネット全体で約 10 万回の再生を獲得しました。多くの方から制作方法についての問い合わせをいただきました。
https://x.com/Saccc_c/status/2071508004772475209
皆さんの愛情に感謝し、Codex を使って 2 時間で自分好みの個人サイトを作成する方法を詳しく紹介します。
大まかな流れ: サイトコンテンツのドキュメントを整理 → taste skill でウェブページの参考画像を生成 → 素材画像を個別に生成 → Frontend App Builder skill でウェブページを再現
(以下、詳細手順)
ステップ 1: Codex を使って詳細なサイトコンテンツのドキュメントを整理する
自分の個人情報やサイトに盛り込みたい内容を Codex に詳しく伝え、構造化された詳細なドキュメントを作成してもらいます。
私のドキュメントにはおおよそ以下の内容が含まれています:
- Sac の個人情報と IP ポジショニング
- ページ数、構造、スタイル
- 全体的なデザインの方向性とレイアウト
ちょっとしたコツ: Chrome の拡張機能を使えば、Codex にあなたのソーシャルメディアを閲覧させて、情報を補足してもらうこともできます
ステップ 2: taste skill を使って高品質なウェブページの参考画像を生成する
taste skill 内の imagegen-frontend-web skill を、サイトコンテンツのドキュメントと組み合わせて使い、各ページの詳細な参考画像を生成します。
GitHub アドレス: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
これが私のプロンプトです:
生成された参考画像の効果は以下の通りです:
注意: taste skill の imagegen-frontend-web skill により、Codex は画像生成時に美的センスをより発揮できるようになり、画面によりデザイン感が出ます。
ステップ 3: 参考画像の構造を分析・分解し、主要な素材を個別に生成する
完全な参考画像を入手したら、各ウェブページの主要素材を個別に生成する必要があります。ダイアログボックスに直接入力します:
1これは私がこれまでに生成したウェブページの参考画像です。ページごとにその構造を分析し、以下を判断してください:21. コードで実装できる部分32. 個別に素材を生成する必要がある主要なビジュアル要素4まだコードを書き始めないでください。まず素材の分解提案を提示してください。
次に ImageGen を使用して主要な素材画像を生成し、参考画像の細部との整合性を確保します。
例えば、私の個人サイトのアバター素材:
ステップ 4: Codex 標準搭載の Frontend App Builder skill を使ってウェブページの参考画像を実際のウェブページに再現する
先ほど決定した参考画像と素材画像を Codex に提出し、ウェブページの再現を依頼します。
ここでは Build Web Apps プラグイン内の Frontend App Builder skill を使用します。このスキルは参考画像をデザイン案として扱い、構造化された一連のプロセスに従って忠実に再現します。
ウェブページ再現用の参考プロンプト:
再現効果は以下の通りです:
