背景・課題
190以上の記事を運用する既存WordPressブログ。テーマはAFFINGERを使用していたが、以下の課題が顕在化していました。
- サービスサイトとしての機能不足 — ブログとしては機能していたが、トレーニングやポートフォリオなど事業に必要なページが作れない
- テーマの老朽化 — デザインの自由度が低く、独自のブランドイメージを表現できない
- 運用コストの増大 — デザイン修正や記事のレイアウト調整に時間がかかり、本来の業務を圧迫
ソリューション
AI駆動開発アプローチで、既存資産を活かしながらサイト全体をフルリニューアルしました。
- カスタムテーマのフルスクラッチ開発 — Astra子テーマをベースに、トップ・About・ポートフォリオ・ブログ・トレーニング・お問い合わせ等の全ページを独自設計
- 190記事の安全な移行 — AFFINGERのショートコード16種に対応する互換レイヤーを実装。既存記事を一切修正せずに表示を維持
- SEO評価の維持 — パーマリンク構造の維持、301リダイレクト、OGPメタタグの動的生成でGoogle評価を引き継ぎ
- 運用の自動化 — SSH自動デプロイ、WP-CLIによるコンテンツ管理、スライダー設定画面などの管理機能を実装
実装したページ・機能
トップページ
ヒーローセクション、実績スライダー、サービス紹介、ニュースを統合したランディングページ。
ポートフォリオ
制作実績をカード形式で一覧表示。PR動画、ギャラリー、デモリンク、シリーズバナーに対応。
ブログ
カテゴリフィルター、サイドバー（人気記事・おすすめ記事）、目次自動生成、関連記事。
About・プロフィール
事業紹介、経歴、スキルマップ、SNSリンクを統合した自己紹介ページ。
トレーニング
AI開発トレーニングの詳細、カリキュラム、料金、申し込みフローを掲載。
AFFINGER互換レイヤー
16種のショートコードを変換する互換レイヤー。既存190記事を無修正で移行。
システム構成
WordPress（Xserver）上にAstra子テーマによるフルカスタムテンプレートを構築。15以上のテンプレートファイルとCSS変数ベースのデザインシステムで、全ページを統一的に管理しています。開発・デプロイはSSH自動化パイプラインで高速にイテレーション。
技術的なポイント
- Astra子テーマによるフルカスタムテンプレート（front-page / archive / single / page 等 15+ファイル）
- CSS変数ベースのデザインシステム（カラーパレット・タイポグラフィ・スペーシング統一）
- ページ別CSS分離によるパフォーマンス最適化（不要CSSを読み込まない）
- WP-CLIによるコンテンツ管理・メディアインポートの自動化
- SSH + tar方式の自動デプロイスクリプト
- OGPメタタグの動的生成（記事・ポートフォリオ・固定ページそれぞれに最適化）
開発プロセス
AI駆動開発（Vibe Coding）アプローチにより、要件定義からデプロイまでを約1週間で完了。従来のWeb制作で数ヶ月かかるフルリニューアルを、AIとの対話型開発で大幅に短縮しました。継続的な運用改善も、デザイン修正・記事作成・機能追加を片手間で対応可能な体制を実現しています。
成果
- 洗練されたデザインのサービスサイトを約1週間で構築
- 既存190記事とSEO評価を維持したまま移行
- トレーニング・ポートフォリオなど事業に必要なページを追加
- 日々のデザイン修正や記事作成を高速で対応可能な運用体制を確立
Webサイトの新規作成やリニューアルを低コスト・高速で実現します。運用保守でお困りの方もお気軽にご相談ください。