
ウッドデッキ施工業者ウェブサイト制作
プロジェクト概要
ウッドデッキ施工業者様のウェブサイトを、既存のWebデザインを損なわずにレスポンシブ対応とモダンなマークアップの元にリニューアルしました。
クライアントの課題
15年近く使用し続けていたウェブサイトを、スマートフォン対応なども含む近代技術への対応をすべく改修を行いました。
そもそも使用されているコードの多くが陳腐化していて、見た目は変わらずとも中身はほぼ全て作り直しが必要であるという問題がありました。
- 各ライブラリのバージョンの不整合・陳腐化
- 一昔前の標準技術から、今の標準技術をベースにすること
- 長く運営してきたコンテンツを正しくSEO評価されるよう改善
ソリューション
全面的にWordPressを使用しています。データ構造としてはニュース更新だけでなく、施工事例など。
採用技術
フロントエンド
- グループサイト共通で、Bootstrapの導入・標準化。
- テーブルレイアウトから見た目を変えず一般的なレスポンシブデザインへの刷新
バックエンド・CMS
- 全面改修によって可能となったキャッシュ機構の見直し
- データ構造の再構築
パフォーマンス最適化
- WordPressにおけるキャッシュマネジメントの最適化
- 静的生成とキャッシュ戦略の最適化
プロジェクトの成果
パフォーマンス
陳腐化してしまっていたところをモダン開発したことによって、WordPress本来のパフォーマンスが出せるようになりました。
移行の完全性
旧デザインからあった導線は全て完璧に復元し、レスポンシブデザインを採用することによりスマートフォンでも同様の導線が再現されるようになりました。
運用性
旧環境とまったく同じ状態で、フロント側のみを刷新したので運用面の変化は無く、全てのデータも問題なく引き継ぎを行いました。
技術的なチャレンジ
このプロジェクトでは、以下の技術的な取り組みを行いました:
- 統一されていなかった画像フォーマットの取り扱いの再構築
- 画像でレイアウトされていた内容をコードベースに移植
- テーブルレイアウトをレスポンシブでも同様、若しくは同等の情報伝達が可能なデザインに一括して変更
- パフォーマンスとSEOの両立
まとめ
要望によって見た目にそこまでの変化は起こさず、レスポンシブデザインを実装するという開発となりました。
見た目は変わらずとも、ベースを書き換えずしてレスポンシブ実装をすることは難しいので、パソコン用のレイアウトもスマートフォン用のレイアウトも全て作り直しとなりましたが、結果として親和性の高いモダンな開発が可能となりました。