project detail
Demo Corporate Site
Overview
Figmaで提供されたデザインカンプをもとに、WordPress環境でコーディングした架空の企業サイトです。
トップページの事例セクションと料金セクションはカスタムフィールドで管理できる設計とし、クライアント側での更新を容易にしました。お知らせセクションはカスタム投稿タイプで構築し、記事の追加・編集・削除が管理画面から直感的に操作できます。
記事詳細ページでは関連記事・おすすめ記事の表示機能とSNSシェアボタンを実装し、コンテンツの回遊性と拡散力を高める設計としました。また、scroll-hint.jsを活用してテーブルなどの横スクロール要素をユーザーにわかりやすく案内しています。
Points
- FigmaのデザインカンプをWordPressテーマとして忠実に再現
- カスタムフィールドで事例・料金セクションをクライアントが直接編集可能
- カスタム投稿タイプでお知らせ記事を効率的に管理
- 記事詳細ページに関連記事・おすすめ記事を表示しコンテンツの回遊性を向上
- SNSシェアボタンで記事の拡散導線を設計
- scroll-hint.jsで横スクロール要素のUXを改善
- アコーディオン・ページネーション・パンくずリストを実装
クライアントが日常的に更新する事例や料金情報はカスタムフィールドで管理できるよう設計し、制作後の運用負荷を最小限に抑えることを意識しました。また記事ページの関連記事・おすすめ記事表示により、訪問者のサイト内回遊を促し問い合わせへの導線を強化しています。
制作会社様のコーディングパートナーとして
HTML / CSS / JavaScript / WordPress のコーディング業務をサポートしています。
案件のご相談などお気軽にお問い合わせください。