オウンドメディア構築
案件背景
新規オウンドメディア「cocogaku」において、WordPressによるテーマ実装・テンプレート設計を担当。外部制作会社によるデザインをもとに、SEO・運用性・実装現実性を考慮しながら、継続運用しやすい構造へ整理・実装を行った。
課題
- デザイン上は成立していても、SEO・アクセシビリティ・運用面で課題がある表現が含まれていた
- 「人気記事」「hot word」など、表示ロジック未定義のUI要素が存在していた
- デザイン・実装・クライアント判断が分離した体制で、認識ズレが発生しやすい状況だった
- オウンドメディアとして継続運用される前提で、更新しやすい構造設計が必要だった
やったこと
- WordPressテーマ実装およびトップ・記事詳細・一覧テンプレートを構築
- Swiper.js を用いたヒーローカルーセルを実装
- 記事取得・表示ロジックを整理し、運用しやすいテンプレート構造へ調整
- SVG装飾や曲線テキストなど、運用負荷やSEO影響を考慮した代替案を整理・提案
- 「人気記事」「hot word」など未定義UIについて、暫定運用・将来拡張・プラグイン制約を整理したうえで仕様化
- 外部制作会社との分業を前提に、実装観点でのレビューおよび技術的フィードバックを実施
- 発注・納品チェックリストを作成し、今後の運用改善につながる基盤を整備
- Figma と Cursor（MCP）を活用し、HTML構造・CSS設計・テンプレート構造を事前整理
実現したこと
- デザイン再現だけでなく、SEO・運用性・保守性を考慮したオウンドメディア構造を実現
- 未定義だった表示ロジックを整理し、実装可能な仕様へ落とし込み
- 実装前に構造整理を行うことで、設計〜実装間の認識ズレや手戻りを抑制
- Cursor（MCP）活用により、想定24時間だった実装工数を約13時間まで短縮
- 分業体制でも判断材料を共有しながら、実装・運用双方で成立する形へ整理
設計のポイント
「実装できる」ではなく「運用できる」を優先
デザイン再現だけを目的とせず、SEO・アクセシビリティ・更新性まで含めて「継続運用できる構造か」を基準に整理。技術的に可能でも運用負荷が高い表現については、理由と代替案をセットで共有した。
未定義UIを仕様へ整理
「人気記事」「hot word」など、見た目のみ存在していたUIについて、暫定運用・将来拡張・プラグイン制約を踏まえて実装可能な仕様へ整理。デザインと実装の間にある曖昧さを解消した。
ビジュアル
よくなったこと
外部制作会社によるデザインをもとに、SEO・運用性・保守性を考慮したWordPressメディアとして再構成。未定義だった表示ロジックや運用課題を整理し、継続運用可能な実装構造へ落とし込んだ。
補足
- オウンドメディアとして継続運用しやすいテンプレート構造を整備
- デザイン・実装・運用の認識ズレを抑制
- AI活用を前提とした効率的な実装フローを構築
- 工数削減と品質担保を両立
