介護用品卸センター：静的ページ部分の改修・制作

介護用品卸センター：静的ページ部分の改修・制作

このサイトは、介護福祉用品を取り扱う EC サイト「介護用品卸センター」の 静的ページ部分の改修・制作 を担当した案件です。
FutureShop をベースに、モバイル対応・読みやすさ・導線改善 を中心に静的ページを再構築しました。
また、一緒に業務を行ったメイン担当の方が、一人でAmazonやYahoo!ショッピングなど複数のEC運営を行いながらSEOに対しても深い知見を持たれた方だったので、仕事への向き合い方など含め大変勉強になりました。

サイト名：介護用品卸センター
URL：https://www.hukusi-orosi.jp/

01.サイト概要

介護用品卸センターは、福祉用具・介護用品を扱う EC サイトです。

サイト構造は FutureShop を採用しており、商品ページ（動的部分） と車椅子の種類や各種仕様の解説などの静的ページ で構成されていました。

私の担当は、主に 静的ページ（/fs/が付かない部分）の制作・改善 です。

02.担当領域（FutureShop）

  • FutureShop 内の 静的ページ（固定ページ）全般のコーディング
  • モバイル対応（レスポンシブ化）
  • HTML / CSS の修正（旧ページのバグ・崩れ対応）
  • ページデザインの調整（PC/SP両対応）
  • 社内担当者が管理しやすいよう コードの簡素化・統一化

※ 商品詳細・アーカイブページなど動的ページは（/fs/）はメイン担当者が管理
※ わたしは (非 /fs/) の静的ページによる情報ページなどを担当

03.制作プロセスと改善内容

3-1. 旧サイトの課題整理

  • モバイル未対応で閲覧しづらい
  • ページごとに HTML の書き方が異なり保守が難しい
  • 箇所によりレイアウト崩れが発生
  • 情報量が多いのに整列されておらず、ユーザーが探しづらい状態だった

3-2. 静的ページ（固定ページ）制作

以下のページを中心に制作・改善

  • 車椅子卸センター・シルバーカー卸センター・介護ベット卸センターのTOPページや選び方ページ
  • 車椅子卸センター・シルバーカー卸センターの各種種類から選ぶページ
  • 各卸センターの商品ランキングページ
  • カテゴリ説明ページのレイアウト整備

3-3. コード品質・保守性の改善

  • 古い table レイアウトの改善
  • バリデーションエラーの解消（可能な範囲で）
  • モバイル対応のための余白調整・画像調整
  • 社内担当者が編集しやすい再利用しやすいHTMLパターンを作成

3-4. WordPress スタッフブログの運用・PHPバージョン移行

介護用品卸センターには、EC サイト本体（FutureShop）とは別に WordPress スタッフブログ があり、記事更新はメイン担当者が行う一方で、私は以下の部分を担当しました。

●WordPress 部分の管理・軽微な保守

  • WordPress・プラグイン更新
  • テーマ設定
  • 簡易トラブルシューティング

●PHP 7.4 → PHP 8.0 への移行対応

  • 移行前バックアップ作成
  • 動作確認（プラグイン / テーマ互換チェック）
  • FutureShop側のサーバー担当と移行手順の調整
  • 移行後に発生した軽微エラーの修正
  • FutureShop との URL / サイト構造整合性チェック

この経験によって、
EC システムと WordPress の両方を横断する運用スキル を身につけることができました。

04.実装した主な施策

  • レスポンシブ対応（SP/PCのレイアウト最適化）
  • 冗長なコードを整理し、統一した HTML 構造 を作成
  • 静的ページの読みやすさ改善（文章ブロック・見出し・余白）
  • 施設担当者が情報を見つけやすくする導線改善
  • 運用担当者向けに「簡易更新ガイド」を作成

05.成果

  • モバイル時の可読性が大幅に向上
  • ページ単位の保守がしやすくなり、社内更新がスムーズになった
  • カテゴリページの統一により、ユーザーの迷いが減少

06.使用ツール・体制

  • Chrome DevTools（レスポンシブ調整・デバッグ）
  • W3C Validator（マークアップチェック）
  • Excel（修正ページの洗い出し・タスク管理）
  • Sublime Text（コードエディター）
実績一覧はこちら