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

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

このサイトは、車いすメーカー「ケアテックジャパン」の公式サイトとして、モバイル対応・コード品質・情報量 をトータルで改善したリニューアル案件です。
既存サイトの課題整理から、コンテンツ追加・環境整備まで一貫して担当しました。

サイト名：車いすのケアテックジャパン
URL：https://care-tec.jp/

01.制作概要

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

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

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

02.制作前の課題

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

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

03.制作プロセス

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

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

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

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

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

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

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

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

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

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

車椅子のケアテックジャパンサイト制作プロセス図
車椅子のケアテックジャパンサイト制作プロセス図

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

04.実装した主な施策

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

05.成果・効果

  • スマホからの閲覧時でもストレスなく閲覧できるレイアウトになり、モバイルユーザーの離脱リスクを低減
  • コードエラーを減らしたことで、将来的なテーマ変更やページ追加の工数削減に寄与
  • 情報ページ・診断ページ・仕様比較表を追加したことで、「製品カタログ」から「選び方が分かるメーカーサイト」へ 役割を強化
  • お客様対応を行う受電チームから、よくあるお問い合わせ内容をヒアリングし、よくある質問ページに反映。
    その結果、電話での問い合わせ内容をFAQページで自己解決できるケースが増え、メール対応時にもFAQページを引用することで対応の効率化につながった
  • 社内でテスト環境を持てるようになったことで、以後の運用・改善のスピードが上がる土台を作ることができた
  • コンテンツ追加や構造化マークアップなどの改善を行った結果、「車いす 選び方」「車いす 機能」「車いす 特徴」など、購入検討層が検索するキーワードを中心に、Google検索で安定した上位表示を維持

06.使用ツール・体制

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