オウンドメディア構築

案件概要

新規オウンドメディア 「cocogaku」 において、WordPressによるフロント実装およびテンプレート設計を担当しました。
外部制作会社様によるデザインをもとに、オウンドメディアとしての運用性・SEO・実装の現実性を考慮しながら、構造整理と実装を行っています。

デザインをそのまま再現することを目的とするのではなく、「継続的に運用されるWebサイトとして成立するか」という観点を大切にしながら進めました。

対応領域

• WordPress構築・テーマ実装
• トップページ／記事詳細／一覧テンプレート作成
• Swiperを用いたヒーローカルーセル実装
• 記事取得・表示ロジックの整理
• デザインと実装の差異に対する技術的なフィードバック
• 外部制作会社様の成果物に対する実装観点でのレビュー

技術スタック

• WordPress
• PHP
• HTML / CSS / JavaScript
• Swiper.js
• Advanced Custom Fields（ACF）
• ローカル開発環境（Docker）

工夫したポイント・対応内容

1. 運用を前提とした構造設計

納品されたデザインには、曲線テキストやSVG前提の装飾など、表現としては魅力的な要素が含まれていました。

一方で、オウンドメディアという性質上、SEOやアクセシビリティ、運用面での課題も想定されたため、「技術的には可能だが運用に不向きな表現」については、理由と代替案を整理して共有しています。

2. 表示ロジックが未定義なUI要素の整理

「人気記事」「hot word（タグ）」など、見た目は定義されているものの、表示条件や集計ロジックが未確定な要素については、

• リリース初期の暫定対応
• 将来的な自動更新を見据えた設計
• プラグイン利用時の制約

を整理し、実装可能な仕様に落とし込みました。

3. 外部制作会社様との分業を前提とした対応

本案件は、

• デザイン：外部制作会社様
• 実装：私
• 最終判断：クライアント様

という体制でした。

実装側ですべてを吸収するのではなく、実装が難しい理由やリスクを構造的に説明し、判断材料として共有することを意識しています。
併せて、今後の外注時にも活用できるよう、発注・納品時のチェックリスト作成など、運用面での改善提案も行いました。

4. Figma／Cursor（MCP）を活用した実装効率化

本案件では、外部制作会社様から共有された Figmaデザインを起点に、Cursor（MCP）を用いて構造理解・実装補助を行うことで、フロント実装工程の効率化を図りました。

具体的には、

• Figma上のレイアウト構造・コンポーネント構成をもとに、HTML構造・CSS設計を事前に整理
• Cursor（MCP）を通じて、テンプレート実装時の下書きコード生成や構造確認を行い、手作業による試行錯誤を削減
• 実装前に「再利用できる構造」「将来的に変更が入りやすい箇所」を切り分けたうえでコーディングを進行

といった形で、設計〜実装間の認識ズレや手戻りを抑制しました。

その結果、当初想定していた実装工数 約24時間 に対し、実作業では 約13時間 での対応が可能となり、品質を担保したまま実装工程の短縮を実現しています。

関連記事

建設業コーポレートサイト フロントエンド実装 ECサイトフロントエンド実装 ファイルDL計測実装（GTM／GA4） 事例ページ検索UI改善（Ajax）

Powered by YARPP.