このページで整理すること
スマホ対応は、CSSを少し足せば終わる作業ではありません。見出しが折り返せるか、ボタンが押しやすいか、画像がはみ出さないか、カードや表が横スクロールを起こしていないかを、公開前に確認します。
Webデザイン系の作業では、見た目、HTML/CSS、スマホ表示、SEOタグ、内部リンク、素材の扱いがつながっています。Codexには「何を変えるか」だけでなく、「何を変えないか」も明確に渡すと、作業後の確認がしやすくなります。
Codexでできること
- 横スクロールやはみ出しの原因を探す
- 文字サイズ、余白、ボタン幅を既存CSSに合わせて調整する
- 画像や表のレスポンシブ表示を確認する
- PCとスマホで同じ内容が読めるか確認する
- 修正後の影響範囲を報告にまとめる
Codexは既存ファイルの構造を読み、テンプレートに合わせてHTML/CSSを整える作業に向いています。とはいえ、デザインの最終判断、素材権利、公開判断は人間が確認する前提で使います。
Codexだけに任せないこと
- Codexに丸投げして、公開判断まで任せること
- 公式ロゴ、公式画像、外部画像素材を確認なしで使うこと
- Canva、Figma、OpenAIの公式側ページのように見せること
- 著作権、商標、素材の利用可否をCodexだけで断定すること
- APIキー、認証情報、DB情報、秘密鍵、証明書本文を貼ること
- AdSense、robots.txt、ads.txt、Search Console確認タグを勝手に触らせること
- 成果や順位を約束する表現を書くこと
作業の流れ
- 確認するURLと想定幅を決める
- 390px相当で横スクロール、文字のはみ出し、画像の崩れを見る
- 既存クラスや既存CSSで直せるか確認する
- 共通CSSを触る場合は影響範囲を限定する
- 公開後にPC表示とスマホ表示を両方確認する
公開前チェック
- 公開URLが200 OKか
- title、meta description、H1が入っているか
- canonicalが自己URLか
- robotsがindex,followか
- noindexが残っていないか
- 内部リンクが404になっていないか
- スマホ390px相当で横スクロールや文字のはみ出しがないか
- 公式誤認や素材権利の問題がないか
- 秘密情報や個人情報が本文、画像、リンク先に含まれていないか
- sitemap.xml、AdSense、robots.txt、ads.txt、Search Console確認タグの扱いが指示通りか
秘密情報・公式誤認・素材権利の注意
Web制作では、画像、バナー、共有リンク、作業ログ、CSV、設定ファイルの中に、個人情報、会社情報、顧客情報、APIキー、認証情報、DB情報、秘密鍵、証明書本文が混ざることがあります。Codexへ渡す前に、公開してよい情報だけになっているか確認します。
Canva、Figma、OpenAI、WordPress、各種サービスの公式ロゴや公式画像を使わず、公式側ページのように誤解される表現も避けます。素材の著作権や商標の扱いは、Codexだけで断定しないでください。
よくある質問
Codexでスマホ表示の崩れを直せますか？
HTML/CSSの調整には使えます。ただし実際の表示確認は人間が行い、横スクロール、文字のはみ出し、ボタンの押しやすさを確認します。
390px相当の確認だけで十分ですか？
代表的なスマホ幅の確認として有効ですが、PC、タブレット、実機に近い環境も必要に応じて確認します。
共通CSSを直してもよいですか？
共通CSSは他ページに影響しやすいため、既存クラスやページ内の範囲で直せるかを先に確認します。