ホームページの料金表をスプレッドシートで更新する方法｜店舗サイトの制作例

料金表の項目が多い店舗サイトでは、金額を一つ直すだけでも意外と手間がかかります。

制作会社へ毎回修正を依頼するほどではない。でも、ホームページのコードを自分で触るのは難しい。そんな更新だけを、普段使っているGoogleスプレッドシートへ切り出す方法があります。

今回は、Dog care salon apricot様の公開済み料金を使い、記事用のデモシートを作りました。掲載画像は説明用に作成した独立デモで、実際の管理画面や内部データは使用していません。

この記事で分かること

• 料金表をスプレッドシートで管理する場合の項目設計
• 表示順や公開・非公開も一緒に管理する理由
• シートの内容をホームページ用データへ変換する考え方
• WordPressを使う場合との違い
• 導入前に決めておきたい運用ルール

必要な情報だけを表にまとめる

今回のデモでは、トリミングサロンの犬種別料金を次の6列で管理しています。

項目	用途
カテゴリ	小型犬・中型犬などの分類
犬種	ホームページに表示する名称
シャンプー料金	コース料金
カット料金	コース料金。設定がない場合は「—」
表示順	ホームページ上で並べる順番
公開状態	公開・非公開の切り替え

料金だけでなく、並び順と公開状態も表で変更できるようにするのがポイントです。メニューを一時的に隠したいときや、よく利用される項目を上へ移したいときも、プログラムを修正せずに済みます。

オプション料金は別のシートへ分けました。犬種別料金とオプションでは必要な列が違うため、無理に一つの表へ詰め込まないほうが入力ミスを減らせます。

必要な行だけホームページに表示

スプレッドシートの内容をそのまま画面へ貼り付けるのではなく、ホームページで使いやすいデータへ整えてから表示します。

たとえば、次のコードは「公開」になっている行だけを残し、表示順に並べる処理の簡略例です。記事用のサンプルであり、実際の案件で使用しているコードではありません。

type PriceRow = {
  category: string;
  breed: string;
  shampoo: string;
  cut: string;
  order: number;
  status: '公開' | '非公開';
};

const visibleRows = rows
  .filter((row: PriceRow) => row.status === '公開')
  .sort((a: PriceRow, b: PriceRow) => a.order - b.order);

ホームページ側では、visibleRowsを小型犬・中型犬などのカテゴリごとに分け、料金表として表示します。シートに入力されていない列や、非公開にした行は画面へ出しません。

データの受け渡し方法は、サイトの構成や更新頻度によって変わります。公開用データへ変換してビルド時に読み込む方法もあれば、専用の取得処理を用意する方法もあります。シートを誰でも閲覧できる状態にする必要はありません。

更新後のホームページ表示

料金表は、パソコンだけでなくスマートフォンでも横幅に収まるように調整します。項目数が多い場合は、カテゴリを分ける、見出しを短くする、料金のないコースは記号で示すなど、読みやすさも一緒に設計します。

シートが使いやすくても、ホームページ側の表が読みにくければ意味がありません。入力画面と表示画面は分けて考えます。

WordPressなしでも更新できる

自分で更新するホームページというと、WordPressを思い浮かべる方が多いと思います。ただ、更新したい内容が料金表や営業日など一部に限られる場合は、サイト全体へ管理画面を用意しなくても対応できます。

方法	向いているケース	気をつける点
スプレッドシート連携	料金・メニュー・表示順など表形式の情報を更新したい	変更できる範囲を制作時に決める必要がある
WordPress	お知らせやブログ、固定ページを幅広く編集したい	サーバー管理、更新、バックアップが必要
制作会社へスポット依頼	更新回数が少なく、自分で管理する必要がない	修正のたびに依頼と費用が発生する

「自分で更新したい」という理由だけでWordPressを選ぶのではなく、何を、どのくらいの頻度で変えるのかを先に整理したほうが構成を決めやすくなります。

導入前に決めること

スプレッドシートを更新画面として使う場合は、制作前に次の内容を決めます。

1. 自分で変更したい項目
2. 金額の入力形式（税込・税別、円表記など）
3. 並び順の決め方
4. 非公開にした項目の扱い
5. 変更をホームページへ反映するタイミング
6. 誤入力した場合の確認方法

何でも編集できる表にすると、列名の変更や行の削除で表示が崩れやすくなります。更新する人が迷わない範囲まで項目を絞るほうが、実際の運用は楽です。

店舗に合う更新方法をご提案

今回のような料金表だけでなく、教室のコース一覧、サロンメニュー、レンタル商品の在庫状況など、表形式の情報には同じ考え方を応用できます。

一方、写真をたくさん登録する、記事を自由に作る、複数人で承認しながら更新するといった運用には、別の方法が向いています。最初から仕組みを決めるのではなく、普段どのように情報を管理しているかを確認してからご提案します。

サイト全体の制作内容は、Dog care salon apricot様のホームページ制作事例で紹介しています。ホームページ制作や更新方法については、サービス・料金ページまたはお問い合わせページからご相談ください。