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