works-detail-image

VPJ コラムコンテンツ

2024.03

OVERVIEW

株式会社VPJのコーポレイトサイト内にコラムコンテンツおよび事例コンテンツを実装し、それに伴いサイト全体のグローバルナビゲーションも改修しました。このプロジェクトは、外部のSEOコンサルタント会社と連携して進められ、最終的な目的は検索順位の向上です。各製品に関連するコラムを毎月掲載することで、SEO効果を高めることを目指しました。

コラム投稿者が専門的な知識を持たなくても記事を投稿できるようにするため「どのように運用していくのか?」という上流工程から設計を始めました。CMSに専用のフォームを作り、文字を入力するだけで動的にコンテンツが生成される仕組みを整え、必要な画像のパスが自動的に生成されるようにしました。これにより、担当者が単独で記事投稿を完結できるようになりました。

デザイン制作は、SEOコンサルタントが作成したワイヤーフレームを基に進めました。コンテンツの文字量が多いため、読みやすさを考慮し、横幅が広くなり過ぎないよう工夫しました。また、各製品やタグによるフィルター機能も要件に含まれていたため、コンテンツ部分とフィルター部分を並列に配置しました。スマートフォン表示時にはフィルターをアコーディオン形式に格納し、画面領域を確保しています。

実装にはHeartCore CMSを使用し、以下の機能を実現しました

「一覧画面と詳細画面の動的表示」「カテゴリーおよびタグでの絞り込み機能」「おすすめ記事の動的表」

制作期間:約3ヶ月

コラムコンテンツ
事例コンテンツ

SCOPE

Figma / Photoshop / Webpack / HeartCore

TOOLS

運用方法の考案 / ワイヤーフレーム考案 / デザイン制作 / HTML&CSSコーディング / JSコーディング / CMSへ組み込み動的コンテンツの実装 / 本番アップ

Preview Image 1
Preview Image 2