課題
Webサイトの改善では、文章、デザイン、実装、SEO、表示確認を行き来しながら判断する必要があります。作業を速くするだけでなく、意図した見え方になっているか、検索やアクセシビリティの観点で問題がないかまで確認する仕組みが必要でした。
背景
このサイト自体も、AIと開発支援ツールを使いながら制作・改善しています。CodexやClaude Code（AIによる開発支援ツール）で調査や実装方針を整理し、Figma（デザインツール）のデータと突き合わせてデザインを確認。デザイン方針書にルールを残しながら、AIらしい見た目になりすぎないよう調整しています。WordPress案件では専用の確認環境で管理画面や設定を確かめ、SEO、表示崩れ、フォーム、画像、スマホ表示も実際のブラウザで確認します。
対応したこと
- AIツール（Codex、Claude Code）を使った調査、実装方針の整理、コード修正
- Figmaのデザインデータとデザイン方針書を使った、デザイン意図の確認と反映
- WordPressの設定や管理画面まわりの確認（WP-CLI・ローカル環境を使用）
- SEO、アクセシビリティ、表示崩れ、画像、フォームの確認と改善
工夫したこと
- AIの出力をそのまま使わず、目的、読者、公開後の運用に合うかを人が判断する
- 色、余白、ボタンまわりのルールをデザイン方針書に残し、AIが作りがちな画一的な見た目を避ける
- PC・スマホの実際の表示をブラウザで確認し、コードだけで判断しない
- WordPressや静的サイトなど、案件の環境に合わせて確認方法を組み合わせる
結果・変化
制作や改善のスピードを上げながら、文章、デザイン、実装、SEO、表示確認をまとめて見られる進め方になりました。AIは前面に出す商品ではなく、課題整理と改善の精度を上げるための実務ツールとして使っています。
相談できること
- AIや開発支援ツールを使ってサイト改善を進めたい
- 既存サイトのSEOや表示状態を確認して直したい
- WordPressや静的サイトの改善を調査から実装まで相談したい