このページで分かること
HTML作成
見出し、本文、カード、FAQ、内部リンクをどうCodexに頼むか。
CSS修正
余白、文字サイズ、カード幅、スマホ表示を小さく直す考え方。
素材反映
CanvaやFigmaで作った素材を、権利確認後にサイトへ反映する流れ。
公開前確認
SEOタグ、AdSenseコード、sitemap、robots、内部リンクを守る確認。
HTML/CSS作成でCodexが向いていること
Codexは、静的HTMLページの作成、既存HTMLの整理、CSSの最小修正、カードやボタンの見た目調整、スマホ表示の確認に向いています。特に、対象ページと対象ブロックが明確な作業ほど頼みやすくなります。
一方で、サイト全体を一気に作り替える作業、SEOタグ変更込みのデザイン変更、AdSenseコードやSearch Console確認ファイルを含む作業、DBやcronを伴う作業は混ぜない方が安全です。
HTML/CSS作成は小さく分ける
ページ構成
URL、H1、本文、関連リンク、FAQを先に決めます。
HTML化
対象ページの本文ブロック、カード、表、チェックリストを作ります。
CSS最小修正
既存デザインに合わせて、必要な範囲だけCSSを調整します。
公開前確認
PC、スマホ390px、内部リンク、画像404、SEOタグ維持を確認します。
Canva・Figma素材とHTML/CSSの使い分け
Canvaは画像やバナー、チラシ、SNS素材づくりに向いています。Figmaは画面設計、ワイヤーフレーム、UIの意図整理に向いています。Codexは、それらを参考にHTML/CSSへ反映する作業を担当します。
素材を渡す時は、画像ファイル名、使うページ、配置場所、alt、サイズ、スマホ表示、権利確認の有無を整理してください。公式ロゴや権利のある素材を勝手に使わないことも重要です。
変更してよいもの・触らないものを分ける
| 区分 | 例 | 理由 |
|---|---|---|
| 変更してよいもの | 対象ページ本文、対象ブロックHTML、該当CSS | 目的のHTML/CSS作成に必要 |
| 触らないもの | title、description、canonical、robots、H1 | SEO影響が大きい |
| 触らないもの | AdSenseコード、Search Console確認ファイル、sitemap.xml、robots.txt、ads.txt | 広告、確認、クロールに影響する |
| 別作業にするもの | DB、cron、.htaccess、GitHub設定、Secrets | 危険度が高く、停止条件が必要 |
Codexに渡すHTML/CSS作成テンプレート
━━━━━━━━━━━━━━━━
Codex作業依頼
HTML/CSS最小作成
━━━━━━━━━━━━━━━━
対象サイト：
対象URL：
対象ファイル：
作りたいHTMLブロック：
参考にする既存ページ：
変更してよいもの：
変更してはいけないもの：
・title
・meta description
・canonical
・robots
・H1
・AdSenseコード
・Search Console確認ファイル
・sitemap.xml
・robots.txt
・ads.txt
・DB
・cron
・.htaccess
PC表示で確認すること：
スマホ390pxで確認すること：
内部リンク確認：
画像404確認：
SEOタグ維持確認：
停止条件：
報告書形式：
━━━━━━━━━━━━━━━━よくある質問
CodexでHTML/CSSサイトは作れますか？
静的HTMLページの作成、既存ページの修正、CSSの最小調整には使いやすいです。ただし、DBやサーバー設定、認証情報を扱う作業は別作業として慎重に扱います。
HTMLとCSSを同時に頼んでも大丈夫ですか？
対象ブロックが明確なら同時に頼めます。大きなレイアウト変更は、HTML構造の確認、CSS修正、スマホ確認を分ける方が安全です。
CanvaやFigmaのデザインを完全再現できますか？
参考にはできますが、完全再現を前提にしない方が安全です。画像素材、配置意図、余白、スマホ表示を分けて伝え、人間が最終確認してください。