車いすのケアテックジャパン：公式サイト改修

01.制作概要

ケアテックジャパンは、介護用車いすを中心に展開するメーカーです。
リニューアル前は、製品ページだけが点在している状態 で、

• スマホ表示の最適化がされていない
• HTML の記述にエラーが多く、保守しづらい
• 「メーカーサイトとしての情報」が不足している

といった課題がありました。
本案件では、既存サイトを活かしつつ、モバイル対応と情報整理を行うこと を目的に制作しました

02.制作前の課題

リニューアル前の主な課題は、次のような内容でした。

• レスポンシブ非対応
  PC 前提のデザインで、スマホ表示では文字が読みにくく操作もしづらい状態。
• W3C バリデーションエラーが多数
  HTML 構文エラーが多く、今後の改修・流用がしづらいコード構造になっていた。
• 情報が“製品カタログ寄り”で、メーカーサイトとして薄い
  製品個別ページはあるものの、
  「車いすの選び方」「機能の違い」「メンテナンス方法」など
  ユーザーの疑問を解決するコンテンツが不足していた。

03.制作プロセス

3-1. モバイル対応と環境整備

• まずは モバイルフレンドリー対応を最優先課題 として整理。
• 修正対象ページを洗い出し、影響範囲を一覧化。
• いきなり本番を触るのではなく、
• 社内サーバーに XAMPP 環境を構築し、WordPress のテスト環境 を用意。
  これにより、
• テーマ編集の検証
• プラグイン更新の事前テスト
• バックアップ運用
  が安全に行える状態を整えました。

3-2. HTML / コーディング修正

• 既存テーマのマークアップを確認し、
  W3C バリデーションエラーの原因となっていたタグの入れ子・属性ミスなどを修正。
• レスポンシブ対応を前提に、
  レイアウト崩れが起きやすい箇所を中心に CSS を整理。
• 介護用品卸センターと共通部分は、
  同じ方針で修正できるようルール化 し、保守性を高めました。

3-3. コンテンツ追加と情報設計

製品カタログだけでは伝わらない部分を補うため、
メーカーサイトとして必要だと考えたコンテンツを 約30ページ分 追加しました。

• 車いすの基本機能・各部名称
• 使い方・乗り移りのポイント
• 日常でのメンテナンス方法
• 利用シーン別の選び方　など

また、既存ページの情報を整理し直し、

• 診断コンテンツ「車いす診断チャート」（/diagnosis/）
• シリーズ別・機能別の仕様比較ページ（/family/）

といった形で、ユーザーが「自分に合う1台」にたどり着きやすい構成にしました。

※ケアテックジャパン公式サイト改修における「課題の把握 → 課題の整理 → 情報の追加」の流れを図解したものです。

04.実装した主な施策

• レスポンシブ対応
  既存レイアウトを活かしつつ、スマホでの可読性を優先した調整を実施。
• 寸法情報のショートコード化
  多くのページで共通して使用している「車いす各部の寸法」を
  ショートコードで一元管理。
  → 元データを1か所修正するだけで、全ページの寸法表を更新可能に。
• 診断コンテンツの追加
  「質問に答えていくと、自分に合った機種候補が分かる」診断ページを追加し、
  製品選びのハードルを下げる導線を設計。
• 仕様比較表の再構成
  既存情報を洗い出し、シリーズごとの比較ができる仕様一覧ページを作成。
  → 営業資料としても使いやすい構成に。
• テスト環境の整備（XAMPP + WordPress）
  今後の改修やコンテンツ追加を安全に行えるよう、
  社内で検証できる環境を構築。

05.成果・効果

• スマホからの閲覧時でもストレスなく閲覧できるレイアウトになり、
  モバイルユーザーの離脱リスクを低減。
• コードエラーを減らしたことで、
  将来的なテーマ変更やページ追加の工数削減に寄与。
• 情報ページ・診断ページ・仕様比較表を追加したことで、
  「製品カタログ」から「選び方が分かるメーカーサイト」へ 役割を強化。
• 社内でテスト環境を持てるようになったことで、
  以後の運用・改善のスピードが上がる土台を作ることができた。

06.使用ツール・体制

• WordPress（既存サイトの改修・コンテンツ追加）
• XAMPP（社内テスト環境の構築）
• Chrome DevTools（レスポンシブ調整・デバッグ）
• W3C Validator（マークアップチェック）
• Excel（修正ページの洗い出し・タスク管理）
• Sublime Text（コードエディター）
• Photoshop（画像作成）